/* ============================================================================
   THEME · SOONIVERSE
   ============================================================================
   Re-tematización 2026-08: unifica la estética del panel con Open WebUI
   (oscuro, sobrio, superficies planas, un único acento, sin gradientes
   decorativos ni sombras dramáticas). Paleta base extraída de valores
   computados reales del contenedor Open WebUI en producción (ver tabla de
   origen al final de este comentario), no aproximada de memoria.

   CONTRATO DE ESTE ARCHIVO (tema 100% intercambiable):
     ✔ CONTIENE  : color, background, border, border-radius, box-shadow,
                   filter/drop-shadow, tipografía (familia, peso, tracking,
                   transform), transiciones y estados :hover/:focus.
     ✘ NO CONTIENE: display, grid, flex, width, height, margin, padding,
                   position, gap ni ninguna regla de maquetación.
                   Todo eso vive en `layout.css`.

   Para re-tematizar el panel: reemplaza SOLO este archivo (ver
   `theme-debug.css` en este mismo directorio para una demostración con
   otra paleta sobre la misma maquetación).

   ORIGEN DE LA PALETA (inspección de computed styles en el navegador,
   sesión autenticada contra la instancia real de Open WebUI):
     --surface-0/-1   ~ body background-color real:        #171717
     --border-subtle  ~ borde del contenedor de chat (rounded-3xl),
                        color base #242828 a 30% de opacidad
     --text-primary   ~ color de texto de body/botones:      #ebebeb
     --text-secondary ~ color de texto secundario (L85 oklch): #cecece
     --accent         ~ único color saturado usado para estados activos
                        (indigo), hover/pressed:              #7c86ff / #615fff
     --positive       ~ punto de estado "online":             #00c950
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* Superficies: diferenciadas por luminancia, no por bordes gruesos */
    --surface-0: #0d0d0e;
    --surface-1: #141415;
    --surface-2: #1a1a1c;
    --surface-3: #212124;

    /* Bordes: 1px, muy sutiles */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Texto: contraste AA como piso (primary ≥ 4.5:1, secondary ≥ 3:1 sobre --surface-0/-1) */
    --text-primary: #ececec;
    --text-secondary: #a8a8ac;
    --text-muted: #6f6f76;

    /* Acento único: úsalo con restricción (foco, estado activo, serie principal) */
    --accent: #7c86ff;
    --accent-hover: #919aff;
    --accent-pressed: #615fff;
    --accent-soft: rgba(124, 134, 255, 0.14);

    /* Semántica de estado */
    --positive: #3fb968;
    --positive-soft: rgba(63, 185, 104, 0.12);
    --positive-border: rgba(63, 185, 104, 0.35);
    --warning: #d99a3d;
    --warning-soft: rgba(217, 154, 61, 0.12);
    --warning-border: rgba(217, 154, 61, 0.35);
    --negative: #e0616f;
    --negative-soft: rgba(224, 97, 111, 0.12);
    --negative-border: rgba(224, 97, 111, 0.35);
    --accent-border: rgba(124, 134, 255, 0.35);

    /* Paleta de series: acento de marca + escala de grises, coherente con el
       resto del panel (--accent / --text-secondary), distinguible también en
       escala de grises (luminancia decreciente 1→6) */
    --chart-1: #7c86ff;
    --chart-2: #a8a8ac;
    --chart-3: #d9a75c;
    --chart-4: #c98aa3;
    --chart-5: #8a94ad;
    --chart-6: #5f6a85;

    /* Rampa del mapa de calor semanal: el acento único a opacidad creciente en
       6 pasos DISCRETOS. No es un gradiente continuo a propósito: un degradado
       es exactamente la estética de plantilla SaaS que este panel descarta, y
       además impide leer un valor concreto de la leyenda.
       --heat-0 no es "acento al 0 %": es superficie, para que "sin tráfico" se
       distinga de "poco tráfico" por algo más que un tono casi idéntico.
       Los saltos son de >=16 puntos de opacidad para que dos pasos contiguos
       sigan siendo distinguibles. */
    --heat-0: var(--surface-2);
    --heat-1: rgba(124, 134, 255, 0.12);
    --heat-2: rgba(124, 134, 255, 0.28);
    --heat-3: rgba(124, 134, 255, 0.46);
    --heat-4: rgba(124, 134, 255, 0.66);
    --heat-5: rgba(124, 134, 255, 0.88);
    /* Borde de las celdas SIN datos agregados (distinto de "cero peticiones"). */
    --heat-border: var(--border-strong);

    /* Medidor de margen de capacidad. Nombres semánticos propios y no los de
       estado: un margen "en ámbar" no es una advertencia del sistema. */
    --meter-track: var(--surface-2);
    --meter-ok: var(--positive);
    --meter-warn: var(--warning);
    --meter-danger: var(--negative);
    --meter-marca: var(--text-muted);

    /* Curva de degradación del benchmark */
    --knee-line: var(--chart-3);
    --band-fill: rgba(168, 168, 172, 0.14);

    /* Radios */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Escala de espaciado */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* Tipografía */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', ui-sans-serif, system-ui,
                 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, monospace;

    /* Escala tipográfica */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-2xl: 40px;

    /* Movimiento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* Sombras: discretas, sin resplandores de color */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);

    /* Alias retrocompatibles: mantenidos únicamente para no romper reglas
       aún no migradas dentro de este mismo archivo durante fases posteriores. */
    --sv-transition: border-color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      color var(--dur-fast) var(--ease-out);
}

/* ----------------------------------------------------------------------------
   2. LIENZO GLOBAL
   ---------------------------------------------------------------------------- */
body {
    background-color: var(--surface-0);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Ganchos decorativos heredados: neutralizados en esta identidad (sin grano,
   sin halos de color). Se conservan como no-op para no romper `layout.css`,
   que solo posiciona estos elementos. */
.sv-noise { display: none; }
.sv-aura { background: none; }

/* ----------------------------------------------------------------------------
   3. JERARQUÍA TIPOGRÁFICA
   ---------------------------------------------------------------------------- */
h1, .sv-h1 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

h2, .sv-h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

h3, .sv-h3 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

h4, .sv-h4 {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

.sv-body   { color: var(--text-secondary); }
.sv-strong { color: var(--text-primary); font-weight: 600; }
.sv-muted  { color: var(--text-muted); }

/* Taglines / badges / métricas: monoespaciada técnica */
.sv-tagline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-secondary);
}

.sv-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-muted);
}

.sv-mono   {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}
.sv-metric {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}
.sv-metric-sm {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   4. LOGOTIPO
   ---------------------------------------------------------------------------- */
.sv-logo {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.4px;
}
.sv-logo__solid    { color: var(--text-primary); }
.sv-logo__gradient { background: linear-gradient(135deg, #00FF87 0%, #60EFFF 50%, #8A2BE2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ----------------------------------------------------------------------------
   5. ENLACES
   ---------------------------------------------------------------------------- */
a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--sv-transition);
}
a:hover {
    color: var(--accent-hover);
}

/* ----------------------------------------------------------------------------
   6. TARJETAS Y CONTENEDORES
   ---------------------------------------------------------------------------- */
.sv-card {
    background-color: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: var(--sv-transition);
}
.sv-card:hover {
    border-color: var(--border-strong);
}

/* Tarjeta de métrica destacada: el acento marca solo el borde superior */
.sv-card--metric { border-top: 2px solid var(--accent); }
.sv-card--infra  { border-top: 2px solid var(--text-secondary); }
.sv-card--secure { border-top: 2px solid var(--text-muted); }

.sv-panel {
    background-color: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.sv-divider { border-top: 1px solid var(--border-subtle); }

/* ----------------------------------------------------------------------------
   7. BOTONES Y CTAs
   ---------------------------------------------------------------------------- */
.sv-btn {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--sv-transition), transform var(--dur-fast) var(--ease-out);
}

.sv-btn--primary {
    background: var(--accent);
    color: var(--surface-0);
}
.sv-btn--primary:hover  { background: var(--accent-hover); }
.sv-btn--primary:active { background: var(--accent-pressed); }

.sv-btn--secondary {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}
.sv-btn--secondary:hover { border-color: var(--accent); color: var(--text-primary); }

.sv-btn--danger {
    background: transparent;
    border: 1px solid var(--negative);
    color: var(--negative);
}
.sv-btn--danger:hover {
    background-color: var(--negative-soft);
}

.sv-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}
.sv-btn--ghost:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.sv-btn:disabled,
.sv-btn[aria-disabled="true"] {
    color: var(--text-muted);
    background: var(--surface-2);
    border-color: var(--border-subtle);
    cursor: not-allowed;
    opacity: 0.6;
}

.sv-btn[aria-busy="true"] {
    cursor: wait;
    opacity: 0.85;
}

/* Spinner: aro tenue con un cuarto en el acento, gira; se apoya en el
   tamaño/animación fijados en layout.css */
.sv-spinner {
    border-color: var(--border-strong);
    border-top-color: var(--accent);
}
.sv-btn--primary .sv-spinner {
    border-color: color-mix(in srgb, var(--surface-0) 35%, transparent);
    border-top-color: var(--surface-0);
}
.sv-btn--danger .sv-spinner {
    border-color: var(--negative-soft);
    border-top-color: var(--negative);
}

/* ----------------------------------------------------------------------------
   8. SEGMENTOS / TABS (control único de agrupación: Diaria · Semanal · Mensual)
   ---------------------------------------------------------------------------- */
.sv-segment {
    background-color: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
}
.sv-segment__item {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--sv-transition);
}
.sv-segment__item:hover { color: var(--text-primary); }
.sv-segment__item--active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ----------------------------------------------------------------------------
   9. BADGES
   ---------------------------------------------------------------------------- */
.sv-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.sv-badge--success {
    color: var(--positive);
    background-color: var(--positive-soft);
    border-color: var(--positive-border);
}
.sv-badge--info {
    color: var(--accent);
    background-color: var(--accent-soft);
    border-color: var(--accent-border);
}
.sv-badge--secure {
    color: var(--text-secondary);
    background-color: var(--surface-2);
    border-color: var(--border-strong);
}
.sv-badge--muted {
    color: var(--text-muted);
    background-color: var(--surface-1);
    border-color: var(--border-subtle);
}
.sv-badge--danger {
    color: var(--negative);
    background-color: var(--negative-soft);
    border-color: var(--negative-border);
}
.sv-badge--warning {
    color: var(--warning);
    background-color: var(--warning-soft);
    border-color: var(--warning-border);
}

/* Punto de estado */
.sv-dot { border-radius: var(--radius-pill); }
.sv-dot--on    { background-color: var(--positive); }
.sv-dot--off   { background-color: var(--negative); }
.sv-dot--warn  { background-color: var(--warning); }
.sv-dot--muted { background-color: var(--text-muted); }

/* Diálogo de confirmación (acciones destructivas: nunca window.confirm()) */
.sv-dialog {
    background-color: var(--surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 20px;
    max-width: 420px;
    width: calc(100% - 32px);
}
.sv-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.55);
}

/* ----------------------------------------------------------------------------
   10. FORMULARIOS
   ---------------------------------------------------------------------------- */
.sv-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.sv-input,
.sv-select,
.sv-textarea {
    background-color: var(--surface-1);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: var(--sv-transition);
}
.sv-input::placeholder,
.sv-textarea::placeholder { color: var(--text-muted); }

.sv-input:hover,
.sv-select:hover,
.sv-textarea:hover { border-color: var(--border-strong); }

.sv-input:focus,
.sv-select:focus,
.sv-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.sv-input:disabled,
.sv-select:disabled,
.sv-textarea:disabled {
    background-color: var(--surface-0);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Select: chevron propio, sin flecha nativa del navegador */
.sv-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23a8a8ac' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}
.sv-select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236f6f76' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sv-select option {
    background-color: var(--surface-1);
    color: var(--text-primary);
}

/* input[type=search]: sustituye el icono nativo de "limpiar" del navegador */
.sv-input[type="search"] { appearance: none; }
.sv-input[type="search"]::-webkit-search-cancel-button { display: none; }

/* input[type=number]: mismo tratamiento visual que el resto, sin spinners nativos */
.sv-input[type="number"] { appearance: textfield; font-variant-numeric: tabular-nums; }
.sv-input[type="number"]::-webkit-inner-spin-button,
.sv-input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* ----------------------------------------------------------------------------
   10b. MULTI-SELECT (disclosure nativo <details>/<summary>, sin JS obligatorio
        para abrir/cerrar; el módulo de filtros solo escucha "change" dentro)
   ---------------------------------------------------------------------------- */
.sv-multiselect, .sv-listbox, .sv-timepicker { position: relative; }

.sv-multiselect__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background-color: var(--surface-1);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    list-style: none;
    transition: var(--sv-transition);
}
.sv-multiselect__trigger::-webkit-details-marker { display: none; }
.sv-multiselect__trigger:hover { border-color: var(--border-strong); }
.sv-multiselect[open] > .sv-multiselect__trigger,
.sv-listbox[open] > .sv-multiselect__trigger,
.sv-timepicker[open] > .sv-multiselect__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.sv-multiselect__trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sv-multiselect__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    background-color: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.sv-multiselect__chevron {
    border: solid var(--text-secondary);
    border-width: 0 1.4px 1.4px 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.sv-multiselect[open] .sv-multiselect__chevron,
.sv-listbox[open] .sv-multiselect__chevron,
.sv-timepicker[open] .sv-multiselect__chevron { transform: rotate(-135deg); }

.sv-multiselect__panel,
.sv-listbox__panel,
.sv-timepicker__panel {
    position: absolute;
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

.sv-timepicker__section-title {
    color: var(--text-muted);
}
.sv-timepicker__hour-btn {
    color: var(--text-secondary);
    transition: var(--sv-transition);
}
.sv-timepicker__hour-btn:hover {
    background-color: var(--surface-3);
    color: var(--text-primary);
}
.sv-timepicker__hour-btn.in-range {
    background-color: var(--accent-soft);
    color: var(--accent);
}
.sv-timepicker__hour-btn.in-range-preview {
    background-color: var(--surface-3);
    color: var(--text-primary);
}
.sv-timepicker__hour-btn.selected-start,
.sv-timepicker__hour-btn.selected-end {
    background-color: var(--accent);
    color: var(--surface-0);
    border-color: var(--accent);
    font-weight: 600;
}
.sv-timepicker__hour-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.sv-timepicker__inputs {
    border-top: 1px solid var(--border-subtle);
}
.sv-timepicker__inputs-sep {
    color: var(--text-muted);
}
.sv-time-select {
    background-color: var(--surface-1);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: var(--sv-transition);
}
.sv-time-select:hover {
    border-color: var(--border-strong);
}
.sv-time-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.sv-label--xs {
    color: var(--text-muted);
}

.sv-multiselect__option,
.sv-listbox__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--sv-transition);
}
.sv-multiselect__option:hover,
.sv-listbox__option:hover { background-color: var(--surface-3); }

/* `.sv-check` (casilla suelta fuera de un desplegable) comparte selector a
   propósito: una segunda apariencia de casilla en el mismo panel sería una
   inconsistencia visual gratuita. */
.sv-multiselect__option input[type="checkbox"],
.sv-check input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--surface-1);
    cursor: pointer;
    transition: var(--sv-transition);
    flex-shrink: 0;
}
.sv-multiselect__option input[type="checkbox"]:hover,
.sv-check input[type="checkbox"]:hover { border-color: var(--accent); }
.sv-multiselect__option input[type="checkbox"]:checked,
.sv-check input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%230d0d0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.sv-multiselect__option input[type="checkbox"]:focus-visible,
.sv-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.sv-check { color: var(--text-secondary); font-size: var(--text-sm); }
.sv-check:hover { color: var(--text-primary); }

.sv-multiselect__empty { color: var(--text-muted); font-size: var(--text-sm); }

/* Select único "seleccionable" (Agrupación): mismo disclosure que el
   multi-select, pero opciones de elección única sin checkbox — la fila
   activa se resalta con el mismo tratamiento accent-soft que el resto del
   panel (chips, badges), en vez de depender del estilo nativo del navegador
   para <option>, que en Chrome/Windows ignora el CSS del popup. */
.sv-listbox__option {
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: var(--sv-transition);
}
.sv-listbox__option:hover { background-color: var(--surface-3); }
.sv-listbox__option--active {
    background-color: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.sv-listbox__option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Flatpickr (datepicker vendorizado) */
.flatpickr-calendar {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-family: var(--font-sans);
    transition: opacity var(--dur-fast) var(--ease-out);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--border-strong); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--border-strong); }

.flatpickr-current-month,
.flatpickr-current-month input.cur-year { color: var(--text-primary); }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--surface-2);
    color: var(--text-primary);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--surface-2);
    color: var(--text-primary);
}

.flatpickr-prev-month, .flatpickr-next-month { color: var(--text-muted); transition: var(--sv-transition); }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: var(--surface-3); color: var(--accent); }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: currentColor !important; }

span.flatpickr-weekday { color: var(--text-muted); background: transparent; font-family: var(--font-mono); text-transform: uppercase; }

.flatpickr-day { color: var(--text-secondary); transition: var(--sv-transition); }
.flatpickr-day:hover { background: var(--surface-3); color: var(--text-primary); }
.flatpickr-day.today { border: 1px solid var(--accent); }
.flatpickr-day.today:hover { background: var(--accent-soft); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface-0);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: 0.5; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted);
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

.numInputWrapper:hover { background: var(--surface-3); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); }

/* Overlay de carga: atenúa el panel completo (filtros + resultados) debajo */
.l-loading-overlay {
    background-color: color-mix(in srgb, var(--surface-0) 75%, transparent);
}
#metrics-panel[aria-busy="true"] #metrics-filters,
#metrics-panel[aria-busy="true"] #metrics-content,
#metrics-panel[aria-busy="true"] #akd-content {
    opacity: 0.5;
    transition: opacity var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    #metrics-panel[aria-busy="true"] #metrics-filters,
    #metrics-panel[aria-busy="true"] #metrics-content,
    #metrics-panel[aria-busy="true"] #akd-content { transition: none; }
}

/* Chip de filtro activo, con affordance de borrado */
.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    background-color: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
}
.sv-chip__remove {
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: var(--sv-transition);
}
.sv-chip__remove:hover { color: var(--negative); }

/* Tooltip accesible */
.sv-tooltip__trigger {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-style: normal;
    cursor: help;
    transition: var(--sv-transition);
}
.sv-tooltip__trigger:hover,
.sv-tooltip__trigger:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
.sv-tooltip__bubble {
    background-color: var(--surface-3);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: left;
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sv-tooltip:hover .sv-tooltip__bubble,
.sv-tooltip:focus-within .sv-tooltip__bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sv-tooltip--bottom-end .sv-tooltip__bubble,
.sv-tooltip--bottom-start .sv-tooltip__bubble,
.sv-tooltip--bottom .sv-tooltip__bubble {
    transform: translateY(-4px);
}
.sv-tooltip--bottom-end:hover .sv-tooltip__bubble,
.sv-tooltip--bottom-end:focus-within .sv-tooltip__bubble,
.sv-tooltip--bottom-start:hover .sv-tooltip__bubble,
.sv-tooltip--bottom-start:focus-within .sv-tooltip__bubble,
.sv-tooltip--bottom:hover .sv-tooltip__bubble,
.sv-tooltip--bottom:focus-within .sv-tooltip__bubble {
    opacity: 1;
    transform: translateY(0);
}
.sv-tooltip--top-start .sv-tooltip__bubble {
    transform: translateY(4px);
}
.sv-tooltip--top-start:hover .sv-tooltip__bubble,
.sv-tooltip--top-start:focus-within .sv-tooltip__bubble {
    opacity: 1;
    transform: translateY(0);
}

/* Card acordeón */
.sv-card__summary {
    transition: background-color var(--dur-fast) var(--ease-out);
}
.sv-card__summary:hover {
    background-color: var(--surface-1);
}
.sv-card--accordion[open] > .sv-card__summary {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
}
.sv-card__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.sv-help  { color: var(--text-muted); font-size: var(--text-xs); }
.sv-error { color: var(--negative); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ----------------------------------------------------------------------------
   11. TABLAS
   ---------------------------------------------------------------------------- */
.sv-table { color: var(--text-secondary); font-size: var(--text-base); }

.sv-table thead th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    background-color: var(--surface-1);
    border-bottom: 1px solid var(--border-subtle);
}

.sv-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: var(--sv-transition);
}
.sv-table tbody tr:hover { background-color: var(--surface-1); }
.sv-table tbody tr:last-child { border-bottom: none; }

.sv-table td.sv-num {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.sv-table td.sv-num--accent { color: var(--accent); }

/* Orden por columna (fecha, coste) */
.l-sort-btn {
    color: inherit;
    transition: var(--sv-transition);
}
.l-sort-btn:hover { color: var(--text-primary); }
.l-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.l-sort-arrow {
    border: solid var(--text-muted);
    border-width: 0 1.4px 1.4px 0;
    transform: rotate(45deg);
    transition: var(--sv-transition), transform var(--dur-fast) var(--ease-out);
    opacity: 0;
}
.l-sort-arrow[data-active="true"] { opacity: 1; border-color: var(--accent); }
.l-sort-arrow[data-dir="asc"] { transform: rotate(-135deg); }

/* Copiar sesión */
.l-copy-btn {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: var(--sv-transition);
}
.l-copy-btn:hover { color: var(--accent); background-color: var(--surface-2); }
.l-copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.l-copy-btn[data-copied="true"] { color: var(--positive); }

.l-pagination { border-top: 1px solid var(--border-subtle); color: var(--text-muted); }

@media (max-width: 720px) {
    .sv-table--responsive tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
    .sv-table--responsive td { border-bottom: 1px solid var(--border-subtle); }
    .sv-table--responsive td:last-child { border-bottom: none; }
}

/* ----------------------------------------------------------------------------
   12. GRÁFICA (Chart.js: colores leídos desde estas variables en tiempo de
       ejecución vía getComputedStyle; aquí solo se fija la paleta)
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   13. MENSAJES DEL SISTEMA
   ---------------------------------------------------------------------------- */
.sv-alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-1);
    color: var(--text-secondary);
    font-size: var(--text-base);
}
.sv-alert--success { border-color: var(--positive-border); color: var(--positive); }
.sv-alert--warning { border-color: var(--warning-border); color: var(--warning); }
.sv-alert--error   { border-color: var(--negative-border); color: var(--negative); }
.sv-alert--info    { border-color: var(--accent-border);   color: var(--accent); }

/* Revelado único de la API Key en claro */
.sv-secret {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--surface-0);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    word-break: break-all;
}

/* ----------------------------------------------------------------------------
   14. NAVEGACIÓN
   ---------------------------------------------------------------------------- */
.sv-nav__link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: var(--sv-transition);
}
.sv-nav__link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
}
.sv-nav__link--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

#main-header,
.sv-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 0;
}

#main-header .l-header,
.sv-header .l-header {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 1.5rem;
    background-color: rgba(13, 13, 14, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 0px;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

#main-header.scrolled .l-header,
.sv-header.scrolled .l-header {
    width: calc(100% - 1.5rem);
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    padding: 0.45rem 1rem;
    background-color: rgba(13, 13, 14, 0.35);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(0.75rem);
}

#main-header .logo-img,
.sv-header .logo-img {
    height: 1.75rem;
    width: auto;
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#main-header.scrolled .logo-img,
.sv-header.scrolled .logo-img {
    height: 1.4rem;
}

@media (min-width: 768px) {
    #main-header .l-header,
    .sv-header .l-header {
        padding: 1.25rem 3rem;
        max-width: 100%;
    }
    #main-header.scrolled .l-header,
    .sv-header.scrolled .l-header {
        width: calc(100% - 2rem);
        max-width: 1360px;
        border-radius: 16px;
        padding: 0.6rem 2rem;
        transform: translateY(1rem);
    }
    #main-header .logo-img,
    .sv-header .logo-img {
        height: 2.25rem;
    }
    #main-header.scrolled .logo-img,
    .sv-header.scrolled .logo-img {
        height: 1.75rem;
    }
}

.sv-footer {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
}

.l-footer__credit {
    color: var(--text-secondary);
    background-color: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    letter-spacing: normal;
    transition: var(--sv-transition);
}
.l-footer__credit:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ----------------------------------------------------------------------------
   15. SCROLLBAR
   ---------------------------------------------------------------------------- */
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* `scrollbar-width` sin `scrollbar-color` deja que Chrome/Firefox usen su
   color de acento por defecto en vez del track/thumb temáticos. */
* { scrollbar-color: var(--border-strong) transparent; }

/* ----------------------------------------------------------------------------
   16. ACCESIBILIDAD
   ---------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 850.01ms !important;
    }

    #main-header .l-header,
    .sv-header .l-header,
    #main-header .logo-img,
    .sv-header .logo-img {
        transition-duration: 0.8s !important;
    }
}

/* =============================================================================
   17. RITMO DE USO Y CAPACIDAD
   ============================================================================= */

/* -- Mapa de calor semanal --------------------------------------------------
   El canvas lo pinta Chart.js leyendo --heat-* en tiempo de ejecución
   (metrics-heatmap.js), así que aquí solo se tematiza la leyenda. */
.l-heatmap__swatch {
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
}
.l-heatmap__swatch[data-i="0"] { background: var(--heat-0); }
.l-heatmap__swatch[data-i="1"] { background: var(--heat-1); }
.l-heatmap__swatch[data-i="2"] { background: var(--heat-2); }
.l-heatmap__swatch[data-i="3"] { background: var(--heat-3); }
.l-heatmap__swatch[data-i="4"] { background: var(--heat-4); }
.l-heatmap__swatch[data-i="5"] { background: var(--heat-5); }

.l-heatmap__legend { color: var(--text-muted); font-size: var(--text-xs); }
.l-heatmap__step   { color: var(--text-secondary); font-size: var(--text-xs); }

/* -- Medidor de margen de capacidad ---------------------------------------- */
.l-meter {
    background: var(--meter-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.l-meter__fill {
    border-radius: var(--radius-pill);
    transition: width var(--dur-slow) var(--ease-out), background-color var(--dur-fast);
}
.l-meter__fill[data-semaforo="ok"]      { background: var(--meter-ok); }
.l-meter__fill[data-semaforo="warn"]    { background: var(--meter-warn); }
.l-meter__fill[data-semaforo="danger"]  { background: var(--meter-danger); }
.l-meter__fill[data-semaforo="sin-datos"] { background: var(--text-muted); opacity: .35; }
.l-meter__mark { background: var(--meter-marca); opacity: .6; }
.l-meter__foot { color: var(--text-muted); font-size: var(--text-xs); }

/* El color NUNCA es el único canal: la etiqueta textual va siempre al lado. */
.sv-semaforo-label { color: var(--text-secondary); font-size: var(--text-sm); }
.sv-semaforo-label[data-semaforo="danger"] { color: var(--negative); }
.sv-semaforo-label[data-semaforo="warn"]   { color: var(--warning); }
.sv-semaforo-label[data-semaforo="ok"]     { color: var(--positive); }

/* -- Deltas de la comparativa con el periodo anterior ---------------------- */
.sv-delta {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.sv-delta[data-tono="up"]   { color: var(--positive); }
.sv-delta[data-tono="down"] { color: var(--negative); }
.sv-delta[data-tono="flat"] { color: var(--text-muted); }

.l-comparativa {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-top: 1px solid var(--border-subtle);
}

/* -- Ficha de hardware del benchmark --------------------------------------- */
.sv-ficha dt { color: var(--text-muted); font-size: var(--text-xs); }
.sv-ficha dd {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}