/* ============================================================ Expectra — Sistema de Diseño (Despacho Jurídico · Claro) Paleta neutra: gris claro de fondo, accent #1F2937 (gray-800) para invitacion al clic, negro puro en botones primarios. Tipografía: Satoshi display (Fontshare, 300-900 para jerarquía). ============================================================ */ /* Satoshi desde Fontshare (https://www.fontshare.com/fonts/satoshi). Fuente display geometrica de Indian Type Foundry, moderna y versatil. Estrategia de pesos: 300 Light - etiquetas uppercase pequenas, hint text, .muted 400 Regular - cuerpo (parrafos, body) 500 Medium - texto con emphasis sutil (.user-name) 600 SemiBold - nav links, botones, thead 700 Bold - titulos (h1, h2), mensajes flash 800 ExtraBold- wordmark "Expectra" en el sidebar 900 Black - logo del login (impacto visual) */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300;400;500;600;700;800;900&display=swap'); :root { --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef2f7; --surface-3: #e2e8f0; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --accent: #0F1115; /* negro mate para CTAs/botones (mismo en claro y dark) */ --accent-alt: #1F2937; --accent-vivid:#000000; --accent-soft: rgba(15, 23, 42, 0.06); --accent-line: rgba(15, 23, 42, 0.22); --button-text: #FFFFFF; --text: #0f172a; --text-dim: #475569; --text-dim-2: #94a3b8; --text-accent: #1F2937; /* alias semantico: --accent es bg, este es text-color */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --danger-strong: #991B1B; /* rojo profundo — TEXTO de peligro en claro */ --shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.05); /* Kravio tokens (sidebar claro · off-white neutro) — se usan en ``.edx-sidebar*``. La paleta principal del panel sigue siendo la turquesa del EDX (--accent, --surface, etc.). v9: hover y activo son fondos distinguibles (hover más suave que activo), icono cambia a color principal en hover/activo y aparece una barra lateral accent como indicador de ruta. */ --sidebar-bg: #FFFFFF; --sidebar-bg-hover: #F7F7F7; /* gris muy suave — hover */ --sidebar-bg-active: #F0F0EE; /* gris cálido medio — activo (Kravio bg tarjeta secundaria) */ --sidebar-border: #E5E5E5; --sidebar-border-hover: #D9D9D9; --sidebar-text: #0E1118; --sidebar-text-muted: #9C9C9C; --sidebar-muted: #6A6B6C; --sidebar-accent: #1F2937; --sidebar-accent-soft: rgba(31, 41, 55, 0.10); --sidebar-danger: #dc2626; --sidebar-danger-soft: rgba(220, 38, 38, 0.10); --sidebar-radius: 10px; --sidebar-easing: cubic-bezier(0.2, 0.8, 0.2, 1); --sidebar-duration: 220ms; --shell-panel-bg: #C4C7CB; --shell-panel-border: #E5E5E5; /* Gradient sutil del sidebar (modo claro: blanco arriba, casi imperceptible abajo) */ --sidebar-bg-top: #FFFFFF; --sidebar-bg-bottom: #FCFCFD; } /* ───────────── DARK MODE ───────────── Activado por .dark-mode en (anti-FOUC) o (toggle script). Solo override de variables — todas las reglas que usan var(--xxx) se actualizan automáticamente. Login NO usa esta clase (queda claro). */ html.dark-mode, body.dark-mode { /* Tokens globales dark */ --bg: #0F1115; /* fondo principal (Apple/Linear style) */ --surface: #1A1D23; /* cards, panels */ --surface-2: #232730; /* cards hover, sub-cards */ --surface-3: #2D3138; /* cards active */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); /* IMPORTANTE: --accent es el color de FONDO de los CTAs/botones primarios. En AMBOS modos (claro y dark) es negro mate full black. El texto encima es siempre blanco (var(--button-text = #FFFFFF)). Esto da consistencia visual: los CTAs son siempre el mismo botón negro en cualquier esquema de color. */ --accent: #0F1115; --accent-alt: #050810; --accent-vivid:#000000; --accent-soft: rgba(255, 255, 255, 0.06); --accent-line: rgba(255, 255, 255, 0.22); --button-text: #FFFFFF; /* texto sobre botones primarios (negro mate) */ --text: #E5E7EB; /* texto principal */ --text-dim: #9CA3AF; --text-dim-2: #6B7280; --text-accent: #E5E7EB; /* alias semántico para usar como color de acento en texto */ --success: #4ade80; --warning: #fbbf24; --danger: #ef4444; /* rojo más brillante para contraste sobre dark */ --danger-strong: #EF4444; /* mismo rojo, legible sobre dark */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); /* Tokens sidebar dark */ --sidebar-bg: #1A1D23; --sidebar-bg-hover: #232730; --sidebar-bg-active: #2D3138; --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-border-hover: rgba(255, 255, 255, 0.12); --sidebar-text: #E5E7EB; --sidebar-text-muted: #6B7280; --sidebar-muted: #9CA3AF; --sidebar-accent: #E5E7EB; --sidebar-accent-soft: rgba(229, 231, 235, 0.10); --sidebar-danger: #ef4444; --sidebar-danger-soft: rgba(239, 68, 68, 0.10); --shell-panel-bg: #0F1115; /* mismo color que body dark, sin distinción */ --shell-panel-border: rgba(255, 255, 255, 0.06); /* Gradient sidebar dark: arriba un poco mas claro que abajo */ --sidebar-bg-top: #232730; --sidebar-bg-bottom: #1A1D23; color-scheme: dark; /* scrollbars y form controls nativos en dark */ } /* ───────────── DARK MODE OVERRIDES (configuracion.html) ───────────── El panel de Configuracion usa clases Tailwind con colores hardcoded (bg-white, bg-[#F1F1F1], etc.) que ignoran las variables CSS. Estos selectores especificos los sobrescriben en dark mode sin modificar el HTML, manteniendo el template intacto. */ html.dark-mode .bg-white, body.dark-mode .bg-white { background-color: var(--surface) !important; color: var(--text) !important; } html.dark-mode .bg-\[\#F1F1F1\], body.dark-mode .bg-\[\#F1F1F1\] { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark-mode .bg-\[\#F7F7F7\], body.dark-mode .bg-\[\#F7F7F7\] { background-color: var(--surface-2) !important; color: var(--text) !important; } html.dark-mode .bg-\[\#FFF8F0\], body.dark-mode .bg-\[\#FFF8F0\] { background-color: rgba(176, 109, 71, 0.10) !important; /* warm semántico sigue */ color: var(--text) !important; } /* Bordes hardcoded: aclarar en dark para que se vean sobre dark */ html.dark-mode .border-\[\#E5E5E5\], body.dark-mode .border-\[\#E5E5E5\] { border-color: var(--border) !important; } html.dark-mode .border-\[\#F5E4D8\], body.dark-mode .border-\[\#F5E4D8\] { border-color: rgba(176, 109, 71, 0.30) !important; /* warm semántico */ } /* Texto hardcoded: usar variables para que tengan contraste correcto */ html.dark-mode .text-\[\#11141A\], body.dark-mode .text-\[\#11141A\] { color: var(--text) !important; } html.dark-mode .text-\[\#9C9C9C\], body.dark-mode .text-\[\#9C9C9C\] { color: var(--text-dim) !important; } html.dark-mode .placeholder\:text-\[\#D9D9D9\]::placeholder, body.dark-mode .placeholder\:text-\[\#D9D9D9\]::placeholder { color: var(--text-dim-2) !important; } /* ───────────── DARK MODE OVERRIDES (configuracion.html