/* ============================================================================ */ /* TEMA CLARO / OSCURO Y BARRA DE HERRAMIENTAS COMUNES A TODAS LAS PANTALLAS */ /* ============================================================================ */ /* Los colores de la interfaz salen de estas variables. interfaz.js pone data-tema en según la preferencia del usuario (o la del sistema si no eligió ninguna). */ :root { --fondo: #f1f5f9; --superficie: #ffffff; --superficie-2: #f1f5f9; --texto: #334155; --texto-fuerte: #0f172a; --texto-suave: #64748b; --etiqueta: #475569; --borde: #cbd5e1; --borde-suave: #e2e8f0; --encabezado: #1e293b; --sombra: rgba(15, 23, 42, 0.08); /* Hace que los controles nativos (fechas, selectores, barras de desplazamiento) sigan el tema. */ color-scheme: light; } [data-tema='oscuro'] { --fondo: #0b1120; --superficie: #1e293b; --superficie-2: #273449; --texto: #cbd5e1; --texto-fuerte: #f1f5f9; --texto-suave: #94a3b8; --etiqueta: #cbd5e1; --borde: #475569; --borde-suave: #334155; --encabezado: #020617; --sombra: rgba(0, 0, 0, 0.45); color-scheme: dark; } /* Barra con recargar, tema e instalar (la completa interfaz.js). */ .herramientas { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } /* En pantallas sin encabezado (login) flota en la esquina. */ .herramientas--flotante { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 50; } .btn-herramienta { width: auto; min-width: 2.3rem; margin: 0; padding: 0.35rem 0.6rem; border: 1px solid rgba(148, 163, 184, 0.45); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2; cursor: pointer; } .btn-herramienta[hidden] { display: none; } .herramientas--flotante .btn-herramienta { background: var(--superficie); color: var(--texto); border-color: var(--borde); }