/* ========================================================================== style.css — Sistema de Control de Insumos · Alcaldía de San Salvador Sur Complementa a Tailwind: variables de marca, scrollbars, transiciones y utilidades que se repiten en todas las vistas. ========================================================================== */ /* Medidas del armazón. Los COLORES ya no viven aquí: los escribe core/tema-store.js como variables --sci-* sobre , a partir del tema, el modo y el estilo de armazón que haya elegido cada usuario. Antes había un --brand-500 fijo en este archivo. Mientras existió, el color del foco era el mismo con cualquier tema, porque este valor no se enteraba de nada. */ :root { --radio-tarjeta: 16px; --ancho-sidebar: 290px; --ancho-sidebar-min: 90px; --alto-topbar: 68px; } /* El fondo y el color de texto de la página siguen al modo. Sin esto, el se queda con el bg-gray-50 de la plantilla y el modo oscuro deja una franja clara asomando por debajo del contenido. */ body { background-color: rgb(var(--sci-fondo, 238 241 247)); color: rgb(var(--sci-texto-2, 71 84 103)); } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; } /* ── Scrollbars discretos ───────────────────────────────────────────────── */ .scrollbar-fino::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar-fino::-webkit-scrollbar-track { background: transparent; } .scrollbar-fino::-webkit-scrollbar-thumb { background: rgb(var(--sci-texto-3, 152 162 179) / 0.45); border-radius: 999px; } .scrollbar-fino::-webkit-scrollbar-thumb:hover { background: rgb(var(--sci-texto-3, 152 162 179) / 0.75); } /* En oscuro no hace falta una regla aparte: --sci-texto-3 ya cambia con el modo, así que el pulgar se aclara solo. */ .sin-scrollbar::-webkit-scrollbar { display: none; } .sin-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Transiciones de vista ──────────────────────────────────────────────── */ .vista-enter-active, .vista-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; } .vista-enter-from { opacity: 0; transform: translateY(6px); } .vista-leave-to { opacity: 0; transform: translateY(-4px); } .modal-enter-active, .modal-leave-active { transition: opacity 0.15s ease; } .modal-enter-from, .modal-leave-to { opacity: 0; } .panel-enter-active { transition: opacity 0.18s ease, transform 0.18s ease; } .panel-enter-from { opacity: 0; transform: scale(0.97) translateY(8px); } .panel-leave-active { transition: opacity 0.12s ease; } .panel-leave-to { opacity: 0; } /* ── Formularios: estados consistentes ─────────────────────────────────── */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; } .dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; } input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.6; } /* Oculta las flechas de los input numéricos */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } /* ── Carga: esqueleto con brillo ────────────────────────────────────────── */ .esqueleto { position: relative; overflow: hidden; background: rgb(var(--sci-superficie-2, 242 244 247)); } .esqueleto::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent); transform: translateX(-100%); animation: brillo 1.4s infinite; } .dark .esqueleto::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.06), transparent); } @keyframes brillo { 100% { transform: translateX(100%); } } /* ── Utilidades puntuales ───────────────────────────────────────────────── */ /* Cifras: monoespaciada y de ancho fijo, para que los montos y los saldos queden alineados en columna y se lean de un vistazo. */ .numeros-tabulares { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .recorte-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* Foco visible y accesible en todo elemento interactivo */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid rgb(var(--sci-marca-solido, 0 27 160)); outline-offset: 2px; } /* ── Impresión: solo el contenido ───────────────────────────────────────── */ @media print { aside, header, .no-imprimir { display: none !important; } main { overflow: visible !important; padding: 0 !important; } } /* ── Desfase de las manchas del acceso ────────────────────────────────────── Las tres manchas del panel de marca comparten la misma animación `blob`. Sin desfase arrancan a la vez y se mueven en bloque, que se lee como un solo fondo temblando en lugar de tres luces sueltas. Va aquí y no como `[animation-delay:2s]` en la plantilla: la CSP del sistema prohíbe estilos en línea, y una propiedad arbitraria de Tailwind depende de que el generador la reconozca. Una clase de dos líneas no depende de nada. ────────────────────────────────────────────────────────────────────────── */ .retraso-2s { animation-delay: 2s; } .retraso-4s { animation-delay: 4s; } /* Quien pidió menos movimiento en su sistema operativo no ve las manchas moverse. El panel se queda quieto y con el mismo aspecto. */ @media (prefers-reduced-motion: reduce) { .animate-blob { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ COMPONENTES DEL SISTEMA DE DISEÑO ══════════════════════════════════════════════════════════════════════════ Al estilo de TailAdmin: superficies planas, borde de 1 px, esquinas generosas y sombras casi imperceptibles. El relieve lo da el borde y el contraste entre capas, no la sombra. POR QUÉ EXISTEN, SI YA HAY UTILIDADES Una tarjeta escrita a mano son once clases —«rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-gray-900»— repetidas en dieciocho vistas. Cambiar el radio de las esquinas obligaba a buscar y reemplazar en todas, y la que se escapaba no avisaba: simplemente se quedaba distinta. NINGUNO LLEVA VARIANTES dark:. No hacen falta: los colores salen de las variables --sci-*, que ya cambian con el modo. UNA UTILIDAD SIEMPRE GANA A UN COMPONENTE, porque el