/* ============================================================================ theme.css — Sistema de doble tema para Momdel / CONTAB ---------------------------------------------------------------------------- HUD (oscuro, por defecto) — estética de cabina. Cian sobre negro azulado, bordes/iconos/números con glow. Blueprint (claro) — plano de ingeniería. Azul técnico sólido, sin glow: lo que en oscuro brilla, en claro se traza con líneas finas. Punto ÚNICO de control: todo el color, sombra, glow, borde y tipografía vive aquí como custom properties. Las páginas solo consumen var(--token). Contrato de conmutación (el botón/JS lo monta el front): · Sin nada → HUD (oscuro) por defecto. · SO en claro → Blueprint automático (@media prefers-color-scheme). · → fuerza Blueprint (prioridad sobre el SO). · → fuerza HUD (prioridad sobre el SO). Persistencia sugerida: localStorage 'momdel_theme' = "light" | "dark". ========================================================================== */ /* ───────────────────────── HUD (oscuro · por defecto) ──────────────────── */ :root, [data-theme="dark"] { /* Fondos */ --bg: #0a0f18; --bg-gradient: radial-gradient(1200px 800px at 50% -10%, #0c1420 0%, #080c16 55%, #070a11 100%); --bg-2: #060a12; /* topbar / barras más oscuras */ --surface: #0d1422; /* tarjetas */ --surface-2: #111c2e; /* cabeceras de tarjeta, inputs */ --surface-3: #16243a; /* hover / realces */ /* Bordes (cian a baja opacidad, 1px) */ --border: rgba(45,212,238,0.24); --border-strong: rgba(45,212,238,0.42); --border-soft: rgba(45,212,238,0.12); /* Texto */ --text: #dceef4; /* blanco con tinte cian frío */ --text-bright: #f3fbfd; --text-muted: #6d8a9a; /* gris azulado (AA sobre --surface) */ --text-faint: #4a6373; /* Acento */ --accent: #2dd4ee; /* cian luminoso */ --accent-strong: #5fe6fb; /* hover / foco */ --accent-fg: #04141a; /* texto sobre relleno de acento */ --accent-tint: rgba(45,212,238,0.14); /* Semánticos */ --ok: #34d399; --ok-tint: rgba(52,211,153,0.14); --warn: #f5c14e; --warn-tint: rgba(245,193,78,0.14); --danger: #ff5d6c; --danger-tint: rgba(255,93,108,0.12); --info: #2dd4ee; --info-tint: rgba(45,212,238,0.14); /* Glow — lo que define la estética HUD */ --glow-accent: 0 0 12px rgba(45,212,238,0.45); --glow-text: 0 0 10px rgba(45,212,238,0.35); --shadow: 0 8px 30px rgba(0,0,0,0.55); --shadow-soft: 0 2px 12px rgba(0,0,0,0.40); /* Geometría / tipografía (comunes, ver más abajo) */ --bevel: 10px; /* tamaño del corte de esquina */ --radius: 10px; --tracking: 0.12em; --font-display: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', ui-monospace, 'Roboto Mono', monospace; --fw-display: 700; } /* ─────────────────────── Blueprint (claro) · vía SO ────────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #eef3f9; --bg-gradient: linear-gradient(180deg, #f3f7fb 0%, #eaf1f8 100%); --bg-2: #e4ecf5; --surface: #ffffff; --surface-2: #f4f8fc; --surface-3: #e9f0f7; --border: rgba(11,109,181,0.34); --border-strong: rgba(11,109,181,0.52); --border-soft: rgba(11,109,181,0.16); --text: #13202d; --text-bright: #0a1722; --text-muted: #5a6b78; --text-faint: #8595a1; --accent: #0b6db5; --accent-strong: #0a4f86; --accent-fg: #ffffff; --accent-tint: rgba(11,109,181,0.10); --ok: #1a8f5e; --ok-tint: rgba(26,143,94,0.12); --warn: #b9821b; --warn-tint: rgba(185,130,27,0.14); --danger: #d23b40; --danger-tint: rgba(210,59,64,0.10); --info: #0b6db5; --info-tint: rgba(11,109,181,0.10); /* Sin glow: se traza con sombra neutra mínima */ --glow-accent: 0 1px 3px rgba(16,32,46,0.10); --glow-text: none; --shadow: 0 6px 22px rgba(16,32,46,0.10); --shadow-soft: 0 1px 3px rgba(16,32,46,0.08); } } /* ────────────────── Blueprint (claro) · forzado por data-theme ─────────── */ [data-theme="light"] { --bg: #eef3f9; --bg-gradient: linear-gradient(180deg, #f3f7fb 0%, #eaf1f8 100%); --bg-2: #e4ecf5; --surface: #ffffff; --surface-2: #f4f8fc; --surface-3: #e9f0f7; --border: rgba(11,109,181,0.34); --border-strong: rgba(11,109,181,0.52); --border-soft: rgba(11,109,181,0.16); --text: #13202d; --text-bright: #0a1722; --text-muted: #5a6b78; --text-faint: #8595a1; --accent: #0b6db5; --accent-strong: #0a4f86; --accent-fg: #ffffff; --accent-tint: rgba(11,109,181,0.10); --ok: #1a8f5e; --ok-tint: rgba(26,143,94,0.12); --warn: #b9821b; --warn-tint: rgba(185,130,27,0.14); --danger: #d23b40; --danger-tint: rgba(210,59,64,0.10); --info: #0b6db5; --info-tint: rgba(11,109,181,0.10); --glow-accent: 0 1px 3px rgba(16,32,46,0.10); --glow-text: none; --shadow: 0 6px 22px rgba(16,32,46,0.10); --shadow-soft: 0 1px 3px rgba(16,32,46,0.08); } /* =========================================================================== Aliases de compatibilidad — nombres heredados que ya existían en el código (layout_header, gastos, gestion). Mapean a los tokens canónicos para que el refactor no rompa nada y el cambio de tema funcione de forma transparente. =========================================================================== */ :root, [data-theme="dark"], [data-theme="light"] { --bg-base: var(--bg); --bg-card: var(--surface); --bg-card2: var(--surface-2); --bg-3: var(--surface-2); --muted: var(--text-muted); } /* =========================================================================== BASE =========================================================================== */ html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } body { background: var(--bg); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text); font-family: var(--font-display); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { color: var(--accent-strong); } ::selection { background: var(--accent-tint); color: var(--text-bright); } /* Tipografía de cabeceras/etiquetas: MAYÚSCULAS + tracking amplio */ .section-title, .table thead th, .form-label, .topbar-nav a, .eyebrow { text-transform: uppercase; letter-spacing: var(--tracking); } /* Bisel de esquina recortada reutilizable */ .bevel, .stat-card, .btn-bevel { clip-path: polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel)); } /* =========================================================================== TOPBAR / NAVBAR (común a layout_header.php) =========================================================================== */ .topbar { background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-soft); } .topbar-brand { font-size: 16px; font-weight: var(--fw-display); color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; text-shadow: var(--glow-text); } .topbar-brand:hover { color: var(--text); } .topbar-brand .mod-badge { font-size: 10px; font-weight: 600; background: var(--accent-tint); color: var(--accent); padding: 2px 8px; border-radius: 20px; letter-spacing: .08em; border: 1px solid var(--border); box-shadow: var(--glow-accent); } .topbar-nav { display: flex; align-items: center; gap: 2px; } .topbar-nav a, .topbar-nav .dropdown > a { color: var(--text-muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; transition: .15s; white-space: nowrap; } .topbar-nav a:hover, .topbar-nav .dropdown > a:hover { background: var(--surface-3); color: var(--text-bright); } .topbar-nav a.active { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border-strong); } .topbar-nav .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; min-width: 180px; box-shadow: var(--shadow); } .dropdown-item { color: var(--text-muted); border-radius: 6px; font-size: 13px; padding: 7px 12px; } .dropdown-item:hover { background: var(--surface-3); color: var(--text-bright); } .dropdown-divider { border-color: var(--border); } .ejercicio-chip { background: var(--accent-tint); border: 1px solid var(--border-strong); border-radius: 20px; padding: 4px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; transition: .15s; box-shadow: var(--glow-accent); } .ejercicio-chip:hover { background: var(--surface-3); color: var(--text-bright); } .ejercicio-chip.cerrado { border-color: var(--danger); color: var(--danger); box-shadow: none; } /* =========================================================================== CARDS =========================================================================== */ .card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-soft); } .card-header { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } .card-footer { background: var(--surface) !important; border-color: var(--border) !important; } .stat-card { border: 1px solid var(--border) !important; background: var(--surface) !important; transition: .2s; box-shadow: var(--shadow-soft); } .stat-card:hover { box-shadow: var(--glow-accent), var(--shadow) !important; border-color: var(--border-strong) !important; transform: translateY(-2px); } .stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); background: var(--accent-tint); box-shadow: var(--glow-accent); } /* Números grandes con glow (HUD) / planos (Blueprint) */ .stat-value, .num-display { font-family: var(--font-mono); text-shadow: var(--glow-text); } /* =========================================================================== TABLES =========================================================================== */ .table { color: var(--text) !important; --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-hover-bg: var(--surface-3); } .table thead th { color: var(--text-muted) !important; border-color: var(--border) !important; font-size: 12px; font-weight: 600; } .table td, .table th { border-color: var(--border) !important; color: var(--text) !important; vertical-align: middle; padding: 10px 14px; } .table-hover tbody tr:hover { background: var(--surface-3) !important; } /* =========================================================================== FORMS =========================================================================== */ .form-control, .form-select { background: var(--surface-2); border-color: var(--border); color: var(--text); border-radius: 8px; } .form-control:focus, .form-select:focus { background: var(--surface-2); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-tint), var(--glow-accent); } .form-control::placeholder { color: var(--text-faint); } .form-label { color: var(--text-muted); font-size: 12px; font-weight: 600; } /* =========================================================================== BOTONES =========================================================================== */ .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--glow-accent); } .btn-primary:hover, .btn-primary:focus { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-fg); } .btn-outline-primary { color: var(--accent); border-color: var(--border-strong); background: transparent; } .btn-outline-primary:hover { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent); } .btn-dark-sm { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: 13px; padding: 5px 12px; } .btn-dark-sm:hover { background: var(--surface-3); color: var(--text-bright); } /* =========================================================================== PAGINACIÓN / BADGES / MISC =========================================================================== */ .page-link { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .page-link:hover { background: var(--surface-3); color: var(--text-bright); border-color: var(--border); } .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .page-item.disabled .page-link { background: var(--surface); color: var(--text-faint); } .text-muted { color: var(--text-muted) !important; } .section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; } .ejercicio-cerrado-banner { background: var(--danger-tint); border: 1px solid var(--danger); border-radius: 8px; padding: 8px 16px; font-size: 13px; color: var(--danger); margin-bottom: 16px; } /* Utilidades semánticas de color sobre tokens (para refactor de gestion) */ .text-ok { color: var(--ok) !important; } .text-warn { color: var(--warn) !important; } .text-danger { color: var(--danger) !important; } .text-accent { color: var(--accent) !important; }