/* ===================================================================== TEMA "MODERNO MINIMALISTA" · claro y oscuro Se activa con o . Redefine los tokens de styles.css y afina algunos componentes. ===================================================================== */ /* Claro "Gris niebla": sin blanco ni negro puros, contraste suave para no cansar la vista */ :root[data-tema="claro"] { --bg: #e9ecf1; --surface: #f4f6f9; --surface-2: #eceff4; --border: #dadfe7; --border-strong: #c8cfd9; --text: #1f2733; --text-2: #414b5a; --muted: #7b8595; --primary: #4a72c4; --primary-hover: #3f63ad; --primary-soft: #e2e9f6; --danger: #c8505a; --danger-soft: #f5e3e5; --ok: #3a8a63; --ok-soft: #e0efe7; --warn: #b7791f; --cps: #4a72c4; --cps-soft: #e2e9f6; --ext: #cc7a3e; --ext-soft: #f5e8dc; --aux: #8a6bc4; --aux-soft: #ebe5f6; --weekend: #e6e9ee; --festivo: #f5e3e5; --puente: #e9e5f3; --puente-strong: #7b62b8; --today: #f3eed8; --sidebar: #e3e7ed; --sidebar-text: #4a5465; --sidebar-muted: #8f98a7; --sidebar-active: #f4f6f9; --shadow: none; --shadow-lg: 0 16px 48px rgba(31, 39, 51, .14); --radius: 12px; --radius-sm: 8px; --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color-scheme: light; } :root[data-tema="oscuro"] { --bg: #0a0a0a; --surface: #0f0f0f; --surface-2: #151515; --border: #212121; --border-strong: #2e2e2e; --text: #ededed; --text-2: #bdbdbd; --muted: #7d7d7d; --primary: #5b8cff; --primary-hover: #7aa2ff; --primary-soft: rgba(91, 140, 255, .12); --danger: #ff6369; --danger-soft: rgba(255, 99, 105, .1); --ok: #3dd68c; --ok-soft: rgba(61, 214, 140, .1); --warn: #f5a524; --cps: #5b8cff; --cps-soft: rgba(91, 140, 255, .12); --ext: #ff8b3e; --ext-soft: rgba(255, 139, 62, .12); --aux: #b78cf0; --aux-soft: rgba(183, 140, 240, .12); --weekend: #121212; --festivo: #1f1112; --puente: #16131f; --puente-strong: #9d86ff; --today: #1d1a0e; --sidebar: #0a0a0a; --sidebar-text: #a1a1a1; --sidebar-muted: #5e5e5e; --sidebar-active: #1a1a1a; --shadow: none; --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6); --radius: 12px; --radius-sm: 8px; --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color-scheme: dark; } /* ---------- base ---------- */ [data-tema] body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.011em; } [data-tema] h1 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; } [data-tema] .page { gap: 24px; } /* ---------- menú lateral ---------- */ [data-tema] .sidebar { width: 236px; border-right: 1px solid var(--border); padding: 20px 12px; } [data-tema] .brand { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.01em; } [data-tema] .brand .ico { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--text); color: var(--bg); } [data-tema] .nav { gap: 1px; } [data-tema] .nav a { padding: 7px 10px; font-size: 14px; font-weight: 500; border-radius: 8px; } [data-tema] .nav a .ico { width: 17px; height: 17px; color: var(--sidebar-muted); } [data-tema] .nav a:hover { background: var(--sidebar-active); color: var(--text); } [data-tema] .nav a.active { background: var(--sidebar-active); color: var(--text); box-shadow: 0 0 0 1px var(--border); } [data-tema] .nav a.active .ico { color: var(--primary); } [data-tema] .nav-sub { border-left-color: var(--border); margin-left: 18px; } [data-tema] .nav-sub a { font-size: 13px; padding: 6px 10px; } [data-tema] .nav-sub a.active { box-shadow: none; background: transparent; color: var(--text); } [data-tema] .nav-sub a.active::before { background: var(--primary); width: 5px; height: 5px; } [data-tema] .nav-sep { font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 500; } [data-tema] .sidebar-foot { border-top-color: var(--border); } [data-tema] .sidebar-foot .icon-btn { color: var(--sidebar-muted); } [data-tema] .sidebar-foot .icon-btn:hover { background: var(--sidebar-active); color: var(--text); } [data-tema] .me:hover, [data-tema] .me.active { background: var(--sidebar-active); } [data-tema] .me-text b { color: var(--text); font-weight: 600; } [data-tema] .avatar:not([class*="avatar-"]) { background: var(--text); color: var(--bg); } [data-tema] .topbar { background: var(--sidebar); border-bottom: 1px solid var(--border); } [data-tema] .topbar .icon-btn { color: var(--text); } [data-tema] .topbar .brand-sm { margin-right: auto; } /* ---------- acceso ---------- */ [data-tema] .auth-side { background: var(--sidebar); color: var(--text-2); border-right: 1px solid var(--border); } [data-tema] .auth-claim { color: var(--text); font-weight: 600; letter-spacing: -.02em; } [data-tema] .auth-list { color: var(--text-2); } [data-tema] .auth-list .ico { color: var(--primary); } /* ---------- botones ---------- */ [data-tema] .btn { height: 34px; padding: 0 12px; font-size: 13.5px; font-weight: 500; border-color: var(--border-strong); background: var(--surface); color: var(--text); } [data-tema] .btn:hover { background: var(--surface-2); border-color: var(--border-strong); } [data-tema] .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } [data-tema] .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } [data-tema] .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } [data-tema] .btn-ghost { background: transparent; border-color: transparent; } [data-tema] .btn-sm { height: 30px; } [data-tema] .btn-block { height: 40px; } /* ---------- tarjetas ---------- */ [data-tema] .card { border: 1px solid var(--border); } [data-tema] .card:not(.card-flush) { padding: 22px; } [data-tema] .card-head h2 { font-size: 14px; font-weight: 600; } [data-tema] .card-head h2 .ico { display: none; } [data-tema] .section-title { text-transform: none; letter-spacing: -.01em; font-size: 14px; font-weight: 600; color: var(--text); } [data-tema] .mini-title { text-transform: none; letter-spacing: -.01em; font-size: 13px; font-weight: 500; color: var(--muted); } [data-tema] .link { font-weight: 500; } /* ---------- KPIs: un punto de color por plantilla ---------- */ [data-tema] .kpis { gap: 12px; } [data-tema] .kpi { border: 1px solid var(--border); padding: 18px 20px; gap: 6px; } [data-tema] .kpi-cps, [data-tema] .kpi-exterior, [data-tema] .kpi-auxiliar { border-top: 1px solid var(--border); } [data-tema] .kpi-link:hover { border-color: var(--border-strong); background: var(--surface-2); } [data-tema] .kpi-label { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; } [data-tema] .kpi-cps .kpi-label::before, [data-tema] .kpi-exterior .kpi-label::before, [data-tema] .kpi-auxiliar .kpi-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cps); } [data-tema] .kpi-exterior .kpi-label::before { background: var(--ext); } [data-tema] .kpi-auxiliar .kpi-label::before { background: var(--aux); } [data-tema] .kpi-value { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; } [data-tema] .kpis-flat .kpi { background: var(--surface-2); padding: 14px 16px; } [data-tema] .kpis-flat .kpi-value { font-size: 22px; } /* ---------- etiquetas, listas y tablas ---------- */ [data-tema] .badge { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); font-weight: 500; } [data-tema] .badge-cps { color: var(--cps); border-color: color-mix(in srgb, var(--cps) 35%, transparent); } [data-tema] .badge-exterior { color: var(--ext); border-color: color-mix(in srgb, var(--ext) 35%, transparent); } [data-tema] .badge-auxiliar { color: var(--aux); border-color: color-mix(in srgb, var(--aux) 35%, transparent); } [data-tema] .rank { gap: 14px; } [data-tema] .rank-n { background: transparent; border: 0; color: var(--muted); font-weight: 500; } [data-tema] .rank-name { font-weight: 500; } [data-tema] .rank-val { font-weight: 600; font-variant-numeric: tabular-nums; } [data-tema] .rank-bar { height: 4px; background: var(--surface-2); } [data-tema] .rank-bar span { background: var(--primary); } [data-tema] .table th { background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; } [data-tema] .table tbody tr:hover td { background: var(--surface-2); } [data-tema] .tabs { border-bottom-color: var(--border); } [data-tema] .seg { background: var(--surface-2); } [data-tema] .seg button.active { background: var(--surface); box-shadow: 0 0 0 1px var(--border); } /* ---------- gráfico ---------- */ [data-tema] .bar { fill: var(--border-strong); opacity: 1; } [data-tema] .bar-current, [data-tema] .bar-g.hover .bar { fill: var(--primary); } [data-tema] .grid-line { stroke: var(--border); stroke-dasharray: 3 4; } [data-tema] .axis-line { stroke: var(--border-strong); } /* ---------- cuadrante ---------- */ [data-tema] .q-table th, [data-tema] .q-table td { border-color: var(--border); } [data-tema] .q-table thead th { background: var(--surface); } [data-tema] .q-table thead .we { background: var(--weekend); } [data-tema] .q-table thead .puente { background: var(--puente); } [data-tema] .q-table thead .fest { background: var(--festivo); } [data-tema] thead .q-name { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; } [data-tema] .q-day .dn { font-weight: 600; } [data-tema] .q-emp { font-weight: 500; } [data-tema] .q-cell.filled { box-shadow: inset 0 0 0 3px var(--surface); border-radius: 9px; font-weight: 600; font-size: 11px; } [data-tema] .q-cell.filled.we { box-shadow: inset 0 0 0 3px var(--weekend); } [data-tema] .q-cell.filled.puente { box-shadow: inset 0 0 0 3px var(--puente); } [data-tema] .q-cell.filled.fest { box-shadow: inset 0 0 0 3px var(--festivo); } [data-tema] .shift-chip { border-radius: 6px; font-weight: 600; } [data-tema] .q-tot { background: var(--surface); font-weight: 600; } [data-tema] thead .q-tot { font-size: 11px; font-weight: 500; text-transform: none; } [data-tema] .q-table tfoot td, [data-tema] .q-table tfoot th { background: var(--surface-2); } [data-tema] .cob-val { border-radius: 6px; } [data-tema] .palette, [data-tema] .q-legend { border-color: var(--border); } /* ---------- modales y avisos ---------- */ [data-tema] .modal { border: 1px solid var(--border); } [data-tema] .modal-back { background: rgba(0, 0, 0, .55); } [data-tema="claro"] .modal-back { background: rgba(10, 10, 10, .35); } /* ---------- botón de cambio de tema ---------- */ .tema-toggle .ico-sol { display: none; } [data-tema="oscuro"] .tema-toggle .ico-sol { display: block; } [data-tema="oscuro"] .tema-toggle .ico-luna { display: none; } .tema-toggle-float { position: fixed; top: 16px; right: 16px; z-index: 50; border: 1px solid var(--border); background: var(--surface); }