/* core/base.css */ /* Reset global mínimo. Las variables de tema viven aquí porque las usan TODOS los componentes — es la única excepción al aislamiento total. Cambiar un color aquí afecta a todo el sistema de forma intencional (modo claro/oscuro consistente). */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #F3F4F6; --surface: #FFFFFF; --border: rgba(0,0,0,0.10); --border-md: rgba(0,0,0,0.18); --text: #111827; --muted: #6B7280; --accent: #1A56DB; --accent-bg: #EBF2FF; --danger: #B91C1C; --danger-bg: #FEF2F2; --success: #047857; --success-bg: #ECFDF5; --orange: #FF6B1A; } @media (prefers-color-scheme: dark) { :root { --bg: #111827; --surface: #1F2937; --border: rgba(255,255,255,0.08); --border-md: rgba(255,255,255,0.15); --text: #F9FAFB; --muted: #9CA3AF; --accent: #60A5FA; --accent-bg: #1E3A5F; --danger: #FCA5A5; --danger-bg: #450a0a; --success: #34D399; --success-bg: #052E24; } } /* Overrides explícitos de tema — aplicados por core/theme.js vía [data-theme] en cuando el usuario elige manualmente, ganan sobre prefers-color-scheme. Sin el atributo, se sigue el OS. */ [data-theme="light"] { --bg: #F3F4F6; --surface: #FFFFFF; --border: rgba(0,0,0,0.10); --border-md: rgba(0,0,0,0.18); --text: #111827; --muted: #6B7280; --accent: #1A56DB; --accent-bg: #EBF2FF; --danger: #B91C1C; --danger-bg: #FEF2F2; --success: #047857; --success-bg: #ECFDF5; } [data-theme="dark"] { --bg: #111827; --surface: #1F2937; --border: rgba(255,255,255,0.08); --border-md: rgba(255,255,255,0.15); --text: #F9FAFB; --muted: #9CA3AF; --accent: #60A5FA; --accent-bg: #1E3A5F; --danger: #FCA5A5; --danger-bg: #450a0a; --success: #34D399; --success-bg: #052E24; } /* Escala +20% (Fase E): con px→rem en todos los componentes, subir el font-size raíz escala toda la UI de forma proporcional. Se usa % en vez de un px fijo para seguir respetando el zoom/accesibilidad del navegador del usuario. */ html { font-size: 120%; } html, body { width: 100%; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } #app-root { min-height: 100vh; } button { font-family: inherit; } /* Animaciones snappy (Fase E épica 3): clase compartida para el montaje de una vista nueva (cambio de sección en el shell, cambio de sub-vista en el mini-router de peticiones). Vive aquí porque la usan componentes de distintos árboles aislados — mismo motivo que las variables de tema arriba. Se retriggerea quitando y reponiendo la clase (ver shell.js / peticiones.js). */ @keyframes view-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .view-fade-in { animation: view-fade-in .18s ease-out; } @media (prefers-reduced-motion: reduce) { .view-fade-in { animation: none; } } /* Íconos SVG (core/icons.js) — reemplazan la fuente de íconos Tabler. El sigue existiendo como wrapper para que las reglas ya escritas por componente (ej. ".shell-nav-item i { font-size: ... }") sigan funcionando sin tocarlas: el tamaño real lo da el font-size heredado, el svg interno mide 1em × 1em. */ .icon-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .icon-svg svg { width: 1em; height: 1em; display: block; }