/* ========================================================================= GalaxIA · Sistema de Temas (theming global) ------------------------------------------------------------------------- Cómo funciona: - Cada tema se activa con o data-theme="datix". - Los selectores html[data-theme="x"] tienen especificidad (0,1,1), mayor que el :root (0,1,0) que define cada template, así que SIEMPRE ganan sin importar el orden de carga del CSS. - El tema "default" (sin atributo) deja intactas las variables originales. - Solo se redefinen variables CSS ya usadas por los 30 templates + el sidebar y la tipografía base. Ninguna funcionalidad se altera. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); html{ transition: background-color .35s ease, color .35s ease; } body{ transition: background-color .35s ease, color .35s ease; } .sidebar, .nav-link, .card, .stat-card, .btn, table, .topbar, .main-content{ transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* ========================================================================= TEMA 1 · PHARMA PREMIUM (Teal · Navy · Ámbar — Fraunces / Public Sans) ========================================================================= */ html[data-theme="pharma"]{ --primary-color:#0E7C6B; --primary:#0E7C6B; --primary-hover:#0A4F45; --primary-dark:#0A4F45; --primary-light:#E8F4F0; --primary-soft:#E8F4F0; --secondary-color:#6B7C77; --success-color:#1E7D54; --success:#1E7D54; --ok:#1E7D54; --warning-color:#9A6A12; --warning:#9A6A12; --warn:#9A6A12; --danger:#B23A2E; --error-color:#B23A2E; --red:#B23A2E; --info:#1B4D7E; --background:#FCFBF8; --bg:#FCFBF8; --paper:#FCFBF8; --card-bg:#FFFFFF; --surface:#FFFFFF; --text-primary:#13211E; --text:#13211E; --ink:#13211E; --text-secondary:#3C4F4A; --ink-soft:#3C4F4A; --text-muted:#6B7C77; --muted:#6B7C77; --border-color:#E4E0D6; --border:#E4E0D6; --line:#E4E0D6; --success-bg:#E4F3EB; --success-text:#0d4d31; --warning-bg:#FBEFD6; --warning-text:#5e420c; --danger-bg:#FBE7E3; --danger-text:#7a241b; --neutral-bg:#F5F2EC; --neutral-text:#3C4F4A; --accent:#F2A23C; } html[data-theme="pharma"] body{ background-color:#FCFBF8; font-family:'Public Sans', system-ui, sans-serif; } html[data-theme="pharma"] h1, html[data-theme="pharma"] h2, html[data-theme="pharma"] .page-title, html[data-theme="pharma"] .brand{ font-family:'Fraunces', Georgia, serif; letter-spacing:-.01em; } /* Sidebar — verde profundo editorial */ html[data-theme="pharma"] .sidebar{ background:linear-gradient(185deg,#0C2A24 0%, #0A4F45 100%); color:#E7F1ED; } html[data-theme="pharma"] .nav-link{ color:#C7DAD3; } html[data-theme="pharma"] .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; } html[data-theme="pharma"] .nav-link.active{ background:rgba(242,162,60,.16); color:#fff; box-shadow:inset 3px 0 0 #F2A23C; } html[data-theme="pharma"] .nav-section{ color:#7FA89D; } /* Header del Chat IA — forzar al verde del tema */ html[data-theme="pharma"] .chat-header{ background:linear-gradient(135deg,#0E7C6B,#0A4F45) !important; } /* ========================================================================= TEMA 2 · DATIX (Azul · Cyan — Plus Jakarta Sans, radios generosos) ========================================================================= */ html[data-theme="datix"]{ --primary-color:#5B7FD9; --primary:#5B7FD9; --primary-hover:#4567C4; --primary-dark:#4567C4; --primary-light:#EEF2FC; --primary-soft:#E6ECFB; --secondary-color:#8A95B0; --success-color:#4DB89A; --success:#4DB89A; --ok:#4DB89A; --warning-color:#E0A93B; --warning:#E0A93B; --warn:#E0A93B; --danger:#F08977; --error-color:#E0654E; --red:#E0654E; --info:#3EC2D9; --background:#F1F3F8; --bg:#F1F3F8; --paper:#F1F3F8; --card-bg:#FFFFFF; --surface:#FFFFFF; --text-primary:#1F2A44; --text:#1F2A44; --ink:#1F2A44; --text-secondary:#4A5878; --ink-soft:#4A5878; --text-muted:#8A95B0; --muted:#8A95B0; --border-color:#E5E9F2; --border:#E5E9F2; --line:#E5E9F2; --success-bg:#E6F4EF; --success-text:#1f7a5e; --warning-bg:#FDF5DF; --warning-text:#8a6410; --danger-bg:#FDECE8; --danger-text:#b0432e; --neutral-bg:#EEF2FC; --neutral-text:#4A5878; --accent:#3EC2D9; } html[data-theme="datix"] body{ background-color:#F1F3F8; font-family:'Plus Jakarta Sans', system-ui, sans-serif; } html[data-theme="datix"] h1, html[data-theme="datix"] h2, html[data-theme="datix"] h3, html[data-theme="datix"] .page-title, html[data-theme="datix"] .brand{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700; letter-spacing:-.01em; } /* Datix usa radios generosos y tarjetas suaves */ html[data-theme="datix"] .card, html[data-theme="datix"] .stat-card, html[data-theme="datix"] .form-demo, html[data-theme="datix"] .modcard{ border-radius:14px; box-shadow:0 6px 18px rgba(31,42,68,.08); } html[data-theme="datix"] .btn, html[data-theme="datix"] .btn-primary, html[data-theme="datix"] .tab-btn{ border-radius:10px; } /* Sidebar — navy con acento degradado */ html[data-theme="datix"] .sidebar{ background:linear-gradient(185deg,#1F2A44 0%, #28365A 100%); color:#D6DEF0; } html[data-theme="datix"] .nav-link{ color:#AEB9D6; } html[data-theme="datix"] .nav-link:hover{ background:rgba(91,127,217,.18); color:#fff; } html[data-theme="datix"] .nav-link.active{ background:linear-gradient(135deg,#5B7FD9,#3EC2D9); color:#fff; box-shadow:0 4px 14px rgba(91,127,217,.4); } html[data-theme="datix"] .nav-section{ color:#7E8AAB; } /* Header del Chat IA — forzar al azul/cyan del tema */ html[data-theme="datix"] .chat-header{ background:linear-gradient(135deg,#5B7FD9,#3EC2D9) !important; } /* ========================================================================= Botones con variable — refuerzo para que el primario respete el tema (solo afecta a botones cuyo fondo ya deriva de la marca) ========================================================================= */ html[data-theme="pharma"] .btn-primary, html[data-theme="datix"] .btn-primary{ background:var(--primary-color); border-color:var(--primary-color); } html[data-theme="pharma"] .btn-primary:hover, html[data-theme="datix"] .btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }