/* frontend/css/ds-v2.css
   ─────────────────────────────────────────────────────────────────────────
   Design System "ScoreCard v2" — Fase 0 del PLAN_MIGRACION_V2.md.

   OPT-IN y NO INVASIVO. Este archivo no cambia el aspecto de ninguna
   página por sí solo: una página adopta v2 agregando la clase "sc-v2" en
   <html> (mismo lugar que "dark", para poder aplicarla antes del primer
   paint y evitar parpadeo). Sin esa clase, todo sigue igual que en v1.

   El toggle lo maneja un feature flag: cada página v2 consulta
   GET /api/flags/publicos y hace document.documentElement.classList
   .toggle('sc-v2', activo), con caché en localStorage para no parpadear.

   Cómo se carga (después de style.css, para que el remapeo de variables
   con scope .sc-v2 le gane a los valores de style.css):

       <link rel="stylesheet" href="css/tailwind.css?v=...">
       <link rel="stylesheet" href="css/style.css?v=...">
       <link rel="stylesheet" href="css/ds-v2.css?v=...">   <!-- nuevo -->

   Qué trae:
   · Tipografías self-hosted (Manrope + Space Grotesk), en frontend/fonts/.
   · Tokens v2 namespaced --sc-* (paleta del mockup "Rediseño ScoreCard").
   · Puente de compatibilidad: dentro de .sc-v2, las variables viejas
     --color-* se reapuntan a los tokens v2, así los componentes que ya
     existen (.card-dashboard, .btn-primary, etc.) toman la paleta nueva
     sin tocar su CSS.
   · Componentes v2 opt-in con prefijo .sc- (conviven con los v1).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tipografías ─────────────────────────────────────────────────────────
   Manrope y Space Grotesk son variable fonts: un solo archivo cubre el
   rango 400–700. latin + latin-ext (latin-ext cubre acentos que no entran
   en Latin-1). Licencia OFL — ver frontend/fonts/LICENSE.txt. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/spacegrotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens v2 ───────────────────────────────────────────────────────────
   Namespaced --sc-* para no chocar con --color-* de style.css. El puente
   de más abajo conecta ambos mundos dentro de .sc-v2.

   MODO CLARO: se mantiene sobrio y profesional, cercano al v1 actual
   (no se regresa nada). El golpe de imagen "impactante" del mockup vive
   en el modo oscuro. */
:root {
    --sc-font-sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sc-font-num: 'Space Grotesk', 'Manrope', ui-monospace, 'Segoe UI', system-ui, sans-serif;

    --sc-bg: #f4f6f7;
    --sc-surface: #ffffff;
    --sc-surface-2: #f7f9fa;
    --sc-border: #e2e8ea;
    --sc-border-strong: #cdd7da;
    --sc-text: #10191c;
    --sc-text-prose: #35474d;      /* texto secundario "fuerte" (gray-700/600) */
    --sc-text-muted: #5b6b70;      /* texto terciario / notas (gray-500/400) */

    /* 22/09/2026 -- unificación de marca: --sc-accent-bright es el
       primitivo real de la app (el isotipo de opening.html/privacidad.html
       usa #23D1AA); el resto de las variantes de acento se derivan de él
       con color-mix() en vez de cargar cada una su propio hex suelto
       (antes: #0d9488/#0f766e/#147d6c sin relación entre sí). Mismo
       criterio en frontend/css/style.css (ver --color-accent-bright ahí),
       cada archivo deriva sus propias variantes desde el mismo primitivo.
       El % de mezcla en claro se eligió para pasar 4.5:1 de contraste
       contra blanco (5.05:1 real, calculado con la fórmula de luminancia
       relativa de WCAG 2.1) -- el teal-600 viejo daba 3.74:1 en
       .sc-btn--primary/.btn-primary y no pasaba AA. */
    --sc-accent-bright: #23D1AA;
    --sc-accent: color-mix(in srgb, var(--sc-accent-bright) 60%, black);       /* ~#157D66 -- 5.05:1 sobre blanco, antes 3.74:1 */
    --sc-accent-hover: color-mix(in srgb, var(--sc-accent-bright) 52%, black); /* ~#126D58 */
    --sc-accent-fg: #ffffff;       /* texto sobre el acento */
    --sc-accent-bg: color-mix(in srgb, var(--sc-accent) 10%, transparent);
    --sc-accent-soft: color-mix(in srgb, var(--sc-accent-bright) 46%, black); /* ~#10604E -- teal apagado para subtítulos (legible en claro) */

    /* Radios: esta escala (--sc-radius*) es la de la consola de staff.
       frontend/app/app.css (App Conductor) define su propia escala
       --r-ctrl/--r-card/--r-feat con valores distintos (12/20/26px) a
       propósito -- son dos apps con lenguaje visual afinado por separado,
       no un descuido; no fusionar ambas escalas en una sola. */
    --sc-radius: 16px;
    --sc-radius-sm: 12px;
    --sc-radius-pill: 999px;
    --sc-shadow: 0 1px 2px rgba(16, 25, 28, 0.04), 0 8px 24px rgba(16, 25, 28, 0.05);
    --sc-ring: 0 0 0 3px color-mix(in srgb, var(--sc-accent) 28%, transparent);
}

/* MODO OSCURO v2 — paleta del mockup "Rediseño ScoreCard".
   #0A1012 casi-negro, acento teal #1FC9A8 más brillante y saturado. */
html.dark {
    --sc-bg: #0a1012;
    --sc-surface: #10171a;
    --sc-surface-2: #141d20;
    --sc-border: #1d2529;
    --sc-border-strong: #2a343a;
    --sc-text: #eef4f6;
    --sc-text-prose: #b7c2c7;      /* gray-700/600 -> legible, no tan apagado */
    --sc-text-muted: #8b979d;      /* gray-500/400 -> un punto más claro que #7d8a91 */

    /* Igual que en claro: se deriva de --sc-accent-bright en vez de un hex
       suelto. En oscuro el acento es casi el primitivo puro (más vivo,
       para contrastar contra el fondo casi negro). */
    --sc-accent: var(--sc-accent-bright);                                     /* #23D1AA -- el primitivo en su tono más vivo */
    --sc-accent-hover: color-mix(in srgb, var(--sc-accent-bright) 70%, white); /* ~#65DFC4 */
    --sc-accent-fg: #04120e;       /* casi-negro sobre el teal brillante */
    --sc-accent-bg: color-mix(in srgb, var(--sc-accent) 12%, transparent);
    --sc-accent-soft: color-mix(in srgb, var(--sc-accent-bright) 65%, white); /* ~#70E1C8 -- teal suave para subtítulos sobre fondo oscuro */

    --sc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --sc-ring: 0 0 0 3px color-mix(in srgb, var(--sc-accent) 32%, transparent);
}

/* ── Puente de compatibilidad ───────────────────────────────────────────
   Dentro de una página v2, reapunta las variables de style.css a los
   tokens v2. Resultado: .card-dashboard, .btn-primary, la barra de nav,
   etc. adoptan la paleta y los radios nuevos sin editar style.css.
   Se aplica a light y dark porque --sc-* ya resolvió el modo. */
.sc-v2 {
    --color-bg: var(--sc-bg);
    --color-surface: var(--sc-surface);
    --color-surface-2: var(--sc-surface-2);
    --color-border: var(--sc-border);
    --color-text: var(--sc-text);
    --color-text-muted: var(--sc-text-muted);
    --color-accent: var(--sc-accent);
    --color-accent-hover: var(--sc-accent-hover);
    --color-header-bg: var(--sc-surface);
    --color-header-text: var(--sc-text);

    font-family: var(--sc-font-sans);
    background-color: var(--sc-bg);
    color: var(--sc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sc-v2 h1, .sc-v2 h2, .sc-v2 h3 {
    letter-spacing: -0.02em;
}

/* ── Componentes v2 (opt-in, prefijo .sc-) ──────────────────────────────
   Conviven con .card-dashboard / .btn-primary de v1; se usan sólo en las
   páginas ya migradas. */

/* Tarjeta: borde sutil en vez de sombra pesada. */
.sc-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 20px;
}

/* Micro-etiqueta (01/10/2026, auditoría frontend-design: se saca el
   uppercase + tracking -- era el "eyebrow" tracked-out en mayúscula que
   el skill frontend-design marca como un tell de diseño genérico/
   plantillado; el texto ya viene en minúscula/mayúscula normal desde el
   HTML, acá solo se dejaba de mostrar así). */
.sc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-text-muted);
}

/* Números tabulares — puntajes, rankings, KPIs. Scopeado a .sc-v2 para que
   una página v1 que también carga este stylesheet no cambie sus números. */
.sc-v2 .sc-num {
    font-family: var(--sc-font-num);
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}

/* Tile de estadística: etiqueta arriba, número grande abajo. */
.sc-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sc-stat__value {
    font-family: var(--sc-font-num);
    font-feature-settings: 'tnum' 1;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--sc-text);
}
.sc-stat__delta {
    font-family: var(--sc-font-num);
    font-size: 0.8125rem;
    font-weight: 500;
}
.sc-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sc-stat__delta svg { flex: none; }
.sc-stat__delta--up { color: var(--sc-accent); }
.sc-stat__delta--down { color: #e06c75; }

/* Sub-línea y chips de desglose del stat-tile (EV/NUC/NL, Inseguros/Seguros…). */
.sc-stat__sub {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sc-text-muted);
}
.sc-stat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.6875rem;
    color: var(--sc-text-muted);
}
.sc-stat__chips span { display: inline-flex; align-items: center; gap: 5px; }
.sc-stat__chips b { color: var(--sc-text); font-weight: 600; }
.sc-stat__dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
/* Subtítulo chico sobre una 2da fila de chips (ej. "Excesos por velocidad").
   Sin uppercase/tracking (01/10/2026, auditoría frontend-design, mismo
   criterio que .sc-label). */
.sc-stat__chips-cap {
    margin: 4px 0 -1px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--sc-text-muted);
}

/* Grillas de KPI: el número clamp(…2.5rem) es grande para 4–5 columnas.
   En una grilla lo fijamos a 1.875rem; el stat-tile "hero" (fuera de grilla)
   conserva el clamp. */
.sc-v2 .grid .sc-stat__value,
.sc-v2 [class*="grid-cols"] .sc-stat__value { font-size: 1.875rem; }

/* Barra segmentada horizontal — desglose de "Puntos por categoría" del
   dashboard (reemplaza las 3 cajitas blancas). */
.sc-seg {
    display: flex;
    height: 10px;
    border-radius: var(--sc-radius-pill);
    overflow: hidden;
    gap: 2px;
    margin-top: 14px;
    background: var(--sc-surface-2);
}
.sc-seg > i { display: block; min-width: 2px; }
.sc-seg-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--sc-text-muted);
}
.sc-seg-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.sc-seg-leyenda i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sc-seg-leyenda b { color: var(--sc-text); font-weight: 600; }

/* ── Ranking segmentado vertical (App._rankingCard) ───────────────────────
   Reemplaza los gráficos de barras "persona × cantidad" del dashboard en v2:
   micro-etiqueta + total, barra segmentada y, DEBAJO en vertical, la lista
   nombre → valor (una fila por persona). */
.sc-v2 .chart-container.sc-rank-host { height: auto; min-height: 0; }
.sc-v2 .sc-rank-card > h3:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-text-muted);
    margin-bottom: 2px;
}
.sc-rank { display: block; }
.sc-rank .sc-rank-total {
    font-family: var(--sc-font-num);
    font-feature-settings: 'tnum' 1;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--sc-text);
    margin: 2px 0 0;
}
.sc-rank .sc-seg { margin-top: 14px; }
.sc-rank-lista {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.sc-rank-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--sc-border);
    font-size: 0.8125rem;
}
.sc-rank-fila:last-child { border-bottom: 0; }
.sc-rank-fila > i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sc-rank-nom {
    flex: 1 1 0;
    min-width: 0;
    max-width: 58%;                 /* nombre acotado: deja lugar a barra + valor */
    margin-right: auto;
    color: var(--sc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-rank-barra {
    flex: none;
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: var(--sc-surface-2);
    overflow: hidden;
}
.sc-rank-barra > span { display: block; height: 100%; border-radius: 999px; }
.sc-rank-val { flex: none; color: var(--sc-text); font-weight: 600; font-size: 0.875rem; }
.sc-rank-vacio { font-size: 0.8125rem; color: var(--sc-text-muted); padding: 12px 2px; }

@media (max-width: 480px) {
    .sc-rank-barra { display: none; }
}

/* ── Fila "Telemetría (solo Conductores)": tabla angosta + gráficos anchos ─
   Grid propio (1fr / 2fr en desktop) porque el CSS estático de Tailwind de
   este proyecto no trae lg:grid-cols-3 ni lg:col-span-1. */
.sc-tel-split { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) {
    .sc-tel-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ── Small multiples "Desvíos por Segmento de Velocidad" ──────────────────
   Un mini gráfico de barras + tendencia por cada bucket de velocidad
   (App._renderPanelesSegmento + Charts.barConTendencia). */
.sc-v2 .chart-container.sc-sm-host { height: auto; }
.sc-smallmults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px 14px;
}
.sc-sm { margin: 0; }
.sc-sm__t {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sc-text);
}
.sc-sm__t i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sc-sm__c { position: relative; height: 96px; }

/* Panel principal "Todos los desvíos": a todo el ancho, más alto y con un
   título un punto más grande -- los 5 segmentos por límite quedan debajo
   como secundarios. */
.sc-sm--lead {
    grid-column: 1 / -1;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sc-border, #e5e7eb);
    margin-bottom: 2px;
}
.sc-sm--lead .sc-sm__t { font-size: 0.9rem; }
.sc-sm--lead .sc-sm__t i { width: 10px; height: 10px; }
.sc-sm--lead .sc-sm__c { height: 200px; }

/* ── Card "Calidad de dato" (App._renderCalidadDato) ──────────────────────
   Banda ancha arriba de la grilla de KPI: confianza en la ingesta de
   telemetría. Reemplaza los tiles de volumen (planillas / conductores /
   personas auditadas), que se pliegan en su línea de contexto. */
.sc-dq { display: flex; flex-direction: column; gap: 14px; }
.sc-dq__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 40px;
}
.sc-dq__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: var(--sc-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
}
.sc-dq__badge.is-ok { color: var(--sc-accent); background: var(--sc-accent-bg); }
.sc-dq__badge.is-alto { color: #f2545b; background: rgba(242, 84, 91, 0.12); }
.sc-dq__badge svg { flex: none; }
.sc-dq__value {
    font-family: var(--sc-font-num);
    font-feature-settings: 'tnum' 1;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--sc-text);
    margin: 8px 0 0;
}
.sc-dq__value span { font-size: 1.25rem; color: var(--sc-text-muted); margin-left: 2px; }
.sc-dq__cap { margin: 4px 0 0; font-size: 0.8125rem; color: var(--sc-text-muted); }

.sc-dq__gaugewrap { flex: 1; min-width: 260px; align-self: center; }
.sc-dq__gauge {
    position: relative;
    height: 10px;
    border-radius: var(--sc-radius-pill);
    background: var(--sc-surface-2);
    overflow: hidden;
}
.sc-dq__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--sc-radius-pill); }
.sc-dq__fill.is-ok { background: var(--sc-accent); }
.sc-dq__fill.is-alto { background: #f2545b; }
.sc-dq__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sc-attention, #f5a524); border-radius: 2px; }
.sc-dq__scale {
    position: relative;
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--sc-text-muted);
}
.sc-dq__scale > span:last-child { position: absolute; right: 0; top: 0; }
.sc-dq__limit {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: var(--sc-attention, #f5a524);
    font-weight: 600;
    white-space: nowrap;
}
/* Aviso de infracciones con texto sin clasificar (ver
   /scorecard/calidad-dato::infracciones_sin_clasificar) -- solo se pinta
   cuando la lista no está vacía. */
.sc-dq__warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(242, 84, 91, 0.1);
    color: #f2545b;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.sc-dq__warn svg { flex: none; margin-top: 1px; }
.sc-dq__warn b { font-weight: 600; }
.sc-dq__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    padding-top: 12px;
    border-top: 1px solid var(--sc-border);
}
.sc-dq__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sc-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.sc-dq__meta span { color: var(--sc-text-muted); }
.sc-dq__meta i { color: var(--sc-border-strong, var(--sc-text-muted)); font-style: normal; }
.sc-dq__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-accent);
    text-decoration: none;
    white-space: nowrap;
}
.sc-dq__link:hover { text-decoration: underline; }

/* Grilla de KPI en v2: hasta 3 por fila (la de v1 son 5 tiles de volumen;
   la de v2 son 6 tiles de resultado/acción). */
@media (min-width: 640px) { html.sc-v2 #kpiGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html.sc-v2 #kpiGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Botón tipo píldora. */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--sc-radius-pill);
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sc-btn:focus-visible { outline: none; box-shadow: var(--sc-ring); }
.sc-btn--primary { background: var(--sc-accent); color: var(--sc-accent-fg); }
.sc-btn--primary:hover { background: var(--sc-accent-hover); }
.sc-btn--ghost { background: transparent; border-color: var(--sc-border-strong); color: var(--sc-text); }
.sc-btn--ghost:hover { background: var(--sc-accent-bg); border-color: var(--sc-accent); }

/* Barra de navegación inferior tipo app (mobile). La usará la App
   Conductor en Fase 4; se deja acá porque es parte del lenguaje visual. */
.sc-pillnav {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--sc-surface);
    border-top: 1px solid var(--sc-border);
}
.sc-pillnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: var(--sc-radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--sc-text-muted);
    text-decoration: none;
}
.sc-pillnav a[aria-current='page'] {
    color: var(--sc-accent-fg);
    background: var(--sc-accent);
}

/* Marca. El isotipo real vive en frontend/img/logo-mark.svg; el wordmark
   se compone en HTML para poder colorear "Card" con el acento vivo. */
.sc-wordmark {
    font-family: var(--sc-font-num);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.sc-wordmark b { font-weight: 600; color: var(--sc-accent); }

/* Contenedor con scroll propio para tablas anchas — el body nunca
   scrollea horizontal en mobile. */
.sc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Adopción de utilidades Tailwind bajo .sc-v2 ────────────────────────
   La mayoría de las páginas v1 pintan superficies con utilidades sueltas
   (bg-white, shadow, rounded-xl, text-gray-*). style.css ya reapunta esas
   utilidades a los tokens PERO sólo dentro de html.dark. Acá se hace lo
   mismo para una página v2 en CUALQUIER modo: con agregar la clase sc-v2
   y este stylesheet, la página toma la superficie, los bordes, la
   tipografía y los radios nuevos sin tocar su markup. Sólo neutrales:
   los colores semánticos (azul telemetría, púrpura comportamientos,
   verde/ámbar/rojo de estado) se dejan como están.
   !important para ganarle a la utilidad de Tailwind, igual criterio que
   style.css. */

/* Fondo de página y superficies. gray-100 suele ser el fondo de página;
   gray-50 suele ser un relleno sutil dentro de una tarjeta (recuadros de
   info) — se mandan a niveles distintos para que esos recuadros no
   desaparezcan contra el fondo. */
html.sc-v2 body,
.sc-v2 .bg-gray-100 { background-color: var(--sc-bg) !important; }
.sc-v2 .bg-gray-50,
.sc-v2 .bg-slate-50 { background-color: var(--sc-surface-2) !important; }
.sc-v2 .bg-white { background-color: var(--sc-surface) !important; }

/* Bordes neutrales */
.sc-v2 .border-gray-100,
.sc-v2 .border-gray-200,
.sc-v2 .border-gray-300 { border-color: var(--sc-border) !important; }

/* Texto neutral, en dos niveles: 700/600 legible, 500/400 apagado. */
.sc-v2 .text-gray-900,
.sc-v2 .text-gray-800 { color: var(--sc-text) !important; }
.sc-v2 .text-gray-700,
.sc-v2 .text-gray-600 { color: var(--sc-text-prose) !important; }
.sc-v2 .text-gray-500,
.sc-v2 .text-gray-400 { color: var(--sc-text-muted) !important; }

/* Sombra → borde sutil + lift discreto (el look "flat con borde" del mockup) */
.sc-v2 .shadow,
.sc-v2 .shadow-md,
.sc-v2 .shadow-lg {
    box-shadow: var(--sc-shadow) !important;
    border: 1px solid var(--sc-border);
}

/* Radios un punto más generosos */
.sc-v2 .rounded-lg { border-radius: var(--sc-radius-sm) !important; }
.sc-v2 .rounded-xl { border-radius: var(--sc-radius) !important; }

/* Inputs y selects */
.sc-v2 input,
.sc-v2 select,
.sc-v2 textarea {
    background-color: var(--sc-surface-2);
    border-color: var(--sc-border-strong);
    color: var(--sc-text);
}
.sc-v2 input:focus,
.sc-v2 select:focus,
.sc-v2 textarea:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: var(--sc-ring);
}
.sc-v2 ::placeholder { color: var(--sc-text-muted); opacity: 0.7; }

/* Barra de navegación superior de las páginas v1 (nav.bg-white.shadow) */
.sc-v2 nav.bg-white {
    background-color: var(--sc-surface) !important;
    border-bottom: 1px solid var(--sc-border);
    box-shadow: none !important;
}
/* Pastilla activa de la nav de staff (App.renderNav: .nav-activo.text-white).
   El fondo ya viene del acento vía el puente; el texto blimpio -> fg. */
.sc-v2 .nav-activo { background-color: var(--sc-accent) !important; }
.sc-v2 .nav-activo.text-white,
.sc-v2 a.nav-activo { color: var(--sc-accent-fg) !important; }
/* Hover de las pastillas inactivas (hover:bg-gray-100). */
.sc-v2 .hover\:bg-gray-100:hover { background-color: var(--sc-bg) !important; }
.sc-v2 .hover\:bg-gray-50:hover { background-color: var(--sc-surface-2) !important; }

/* ── Botón de tema (data-theme-toggle) — estándar único ────────────────
   Solo ícono (sol/luna), redondo, en v1 y v2. Reemplaza la píldora
   "🌙 Oscuro" de App.renderNav. Ver js/app.js::wireThemeToggle y
   js/ui/theme-toggle.js. */
[data-theme-toggle],
.sc-nav-logout {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 9999px;
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: transparent;
    color: var(--color-text-muted, #64748b);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sc-nav-logout.hidden { display: none; }
[data-theme-toggle]:hover { color: var(--color-accent, #157D66); border-color: var(--color-accent, #157D66); }
[data-theme-toggle]:focus-visible,
.sc-nav-logout:focus-visible { outline: 2px solid var(--color-accent, #157D66); outline-offset: 2px; }
[data-theme-toggle] svg,
.sc-nav-logout svg { width: 18px; height: 18px; flex: none; }

/* El botón de cerrar sesión comparte forma con el toggle pero mantiene
   el acento de peligro (rojo crítico) en hover/foco. */
.sc-nav-logout:hover { color: #F2545B; border-color: #F2545B; }
.sc-nav-logout:focus-visible { outline-color: #F2545B; }
html.sc-v2 .sc-nav-logout {
    border-color: var(--sc-border-strong);
    color: var(--sc-text-muted);
}
html.sc-v2 .sc-nav-logout:hover {
    color: var(--sc-critical, #F2545B);
    border-color: var(--sc-critical, #F2545B);
    background: rgba(242, 84, 91, 0.10);
}
html.sc-v2 .sc-nav-logout:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242, 84, 91, 0.35); }

/* Sol visible en oscuro (click -> aclara), luna en claro (click -> oscurece). */
[data-theme-toggle] .sc-ico-sol { display: none; }
[data-theme-toggle] .sc-ico-luna { display: block; }
html.dark [data-theme-toggle] .sc-ico-sol { display: block; }
html.dark [data-theme-toggle] .sc-ico-luna { display: none; }

/* Refinamiento en v2: usa los tokens --sc-* y el foco con ring. */
html.sc-v2 [data-theme-toggle] {
    border-color: var(--sc-border-strong);
    color: var(--sc-text-muted);
}
html.sc-v2 [data-theme-toggle]:hover {
    color: var(--sc-accent);
    border-color: var(--sc-accent);
    background: var(--sc-accent-bg);
}
html.sc-v2 [data-theme-toggle]:focus-visible { outline: none; box-shadow: var(--sc-ring); }

/* ── Nav lateral en v2 (App.renderNav) ────────────────────────────────
   Mismo DOM que v1 (barra superior). En v2: sidebar fijo vertical de
   224px como el rediseño (WebDashboard.dc.html), con <main> corrido a la
   derecha. Abajo de 768px vuelve a barra superior con scroll horizontal. */

/* v1: pills solo texto, sin íconos ni wordmark. */
.sc-nav-link svg { display: none; }
#scNav .sc-wordmark { display: none; }

/* v2 (a cualquier ancho): un solo nombre — el wordmark, no el texto plano;
   íconos de nav visibles. Esto arregla el nombre duplicado. */
html.sc-v2 .sc-nav-title { display: none; }
html.sc-v2 #scNav .sc-wordmark { display: inline; font-size: 1em; }
html.sc-v2 .sc-nav-link svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    stroke-width: 1.6;
}

/* v2: sidebar fijo VERTICAL a cualquier ancho (proporciones del rediseño
   WebDashboard.dc.html). Sin media query — siempre vertical, como la
   referencia. */
html.sc-v2 #scNav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 228px;
    margin: 0;
    background: var(--sc-surface) !important;
    border-right: 1px solid var(--sc-border);
    border-bottom: 0 !important;
    box-shadow: none !important;
    z-index: 40;
    overflow-y: auto;
}
html.sc-v2 #scNav .sc-nav-inner {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    max-width: none;
    min-height: 100%;
    padding: 22px 12px;
    gap: 2px;
}
html.sc-v2 #scNav .sc-nav-inner > .flex { flex-direction: column; align-items: stretch; gap: 2px; }

html.sc-v2 .sc-nav-brand {
    font-size: 17px;          /* base del wordmark y del isotipo */
    gap: 9px;
    padding: 0 10px 20px;
}
/* Isotipo proporcional al texto "ScoreCard": alto ~0.9x el font-size del
   wordmark. El SVG tiene viewBox recortado al contenido, así que el alto
   CSS es el alto visual real. */
html.sc-v2 .sc-nav-brand img.sc-logo-v2 { height: 0.9em; width: auto; }

html.sc-v2 .sc-nav-links { flex-direction: column; gap: 2px; }
html.sc-v2 .sc-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 500;
    color: var(--sc-text-muted) !important;
}
html.sc-v2 .sc-nav-link:hover {
    background: color-mix(in srgb, var(--sc-text) 5%, transparent) !important;
    color: var(--sc-text) !important;
}
html.sc-v2 .sc-nav-link.nav-activo {
    background: color-mix(in srgb, var(--sc-text) 9%, transparent) !important;
    color: var(--sc-text) !important;
    font-weight: 600;
}

html.sc-v2 .sc-nav-end {
    margin-top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 10px 2px;
    border-top: 1px solid var(--sc-border);
    font-size: 13px;
}
html.sc-v2 .sc-nav-user { color: var(--sc-text-muted); }
html.sc-v2 .sc-nav-logout { text-align: left; }

/* Correr el contenido a la derecha del sidebar. */
html.sc-v2 #navbar ~ main { padding-left: 256px !important; max-width: none !important; }

/* Pantallas angostas: el sidebar se colapsa a un riel de solo íconos
   (56px) — sigue siendo vertical, como la referencia, sin comerse la
   pantalla. */
@media (max-width: 640px) {
    html.sc-v2 #scNav { width: 56px; }
    html.sc-v2 #scNav .sc-nav-inner { padding: 16px 8px; }
    html.sc-v2 .sc-nav-brand { justify-content: center; padding: 0 0 16px; }
    html.sc-v2 #scNav .sc-wordmark,
    html.sc-v2 .sc-nav-link span,
    html.sc-v2 .sc-nav-user,
    html.sc-v2 .sc-nav-logout { display: none; }
    html.sc-v2 .sc-nav-link { justify-content: center; padding: 0 !important; gap: 0; }
    html.sc-v2 #navbar ~ main { padding-left: 68px !important; }
}

/* ── Micro-iconos de UI (línea, currentColor) — reemplazan emoji ───────
   Mismo lenguaje que el botón de tema. Aplican en v1 y v2. */

/* Ver / ocultar contraseña: ojo <-> ojo tachado, alterna con .pw-shown. */
[data-toggle-password] svg { width: 18px; height: 18px; display: block; }
[data-toggle-password] .sc-ico-eye-off { display: none; }
[data-toggle-password].pw-shown .sc-ico-eye { display: none; }
[data-toggle-password].pw-shown .sc-ico-eye-off { display: block; }

/* Input de búsqueda: lupa de fondo + sangría (clase .sc-search, sin emoji
   en el placeholder). */
.sc-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 38px !important;
}
html.sc-v2 .sc-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

/* Línea de "mensaje ok" (reemplaza el ✅ suelto). */
.sc-ok-msg { display: flex; align-items: flex-start; gap: 6px; }
.sc-ok-msg svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* Punto de estado (reemplaza 🟢 / 🔵). */
.sc-dot {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    border-radius: 999px;
    margin-right: 0.45em;
    vertical-align: 0.03em;
}
.sc-dot--ok { background: #16a34a; }
.sc-dot--info { background: #2563eb; }
html.sc-v2 .sc-dot--ok { background: var(--sc-accent); }
html.sc-v2 .sc-dot--info { background: #5b8def; }

/* ── Ajustes de contraste sobre el acento vivo ─────────────────────────
   .btn-primary de style.css fuerza color:#fff; sobre el teal brillante de
   v2 (#1FC9A8) el blanco queda flojo -> usar el fg del acento. */
.sc-v2 .btn-primary,
.sc-v2 .btn-primary:hover { color: var(--sc-accent-fg); }

/* CTA "¿Cómo neutralizar...?" — la página trae un gradiente azul
   hardcodeado inline; en v2 va con el acento. (El pulse de las keyframes
   queda como está, no molesta.) */
.sc-v2 .btn-neutralizar {
    background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent-hover)) !important;
    color: var(--sc-accent-fg) !important;
}

/* ── Armonización de colores semánticos en oscuro ──────────────────────
   El badge de puntaje es un semáforo (verde nivel 1-2, ámbar 3-5, rojo
   6-7) y las píldoras de estado de las solicitudes usan la misma escala.
   Los bg-*-100 / text-*-800 / border-*-300 de Tailwind cantan al lado del
   teal en fondo casi-negro. Acá se retunan a tonos desaturados y
   consistentes con la superficie oscura; el verde "bueno" tira hacia el
   verde-azulado del acento. Sólo en oscuro: en claro los pales de Tailwind
   funcionan bien sobre blanco. */
html.sc-v2.dark .bg-green-100 { background-color: rgba(45, 180, 140, 0.15) !important; }
html.sc-v2.dark .text-green-800,
html.sc-v2.dark .text-green-700,
html.sc-v2.dark .text-green-600 { color: #6fdcc0 !important; }
html.sc-v2.dark .border-green-300 { border-color: rgba(45, 180, 140, 0.32) !important; }

html.sc-v2.dark .bg-amber-100,
html.sc-v2.dark .bg-yellow-100 { background-color: rgba(217, 174, 74, 0.15) !important; }
html.sc-v2.dark .text-amber-900,
html.sc-v2.dark .text-amber-800,
html.sc-v2.dark .text-orange-700,
html.sc-v2.dark .text-orange-600,
html.sc-v2.dark .text-yellow-800 { color: #e6c56b !important; }
html.sc-v2.dark .border-amber-300,
html.sc-v2.dark .border-yellow-300 { border-color: rgba(217, 174, 74, 0.32) !important; }

html.sc-v2.dark .bg-red-100 { background-color: rgba(224, 108, 117, 0.15) !important; }
html.sc-v2.dark .text-red-800,
html.sc-v2.dark .text-red-700,
html.sc-v2.dark .text-red-600 { color: #e88b93 !important; }
html.sc-v2.dark .border-red-300 { border-color: rgba(224, 108, 117, 0.34) !important; }

/* Títulos de sección "Telemetría" (azul) y "Comportamientos" (púrpura):
   en v2 no van color-codeados por área — pasan a texto fuerte y la
   diferencia queda en el emoji + el borde de la tarjeta. Un filete teal a
   la izquierda de la sección marca el bloque sin volver a meter color en
   el texto. En ambos modos (html.sc-v2, no .dark). */
html.sc-v2 .text-blue-900,
html.sc-v2 .text-blue-800,
html.sc-v2 .text-purple-900,
html.sc-v2 .text-purple-800 { color: var(--sc-text) !important; }
html.sc-v2 .text-blue-700,
html.sc-v2 .text-purple-700 { color: var(--sc-text-prose) !important; }

html.sc-v2 main section.bg-white {
    border-left: 3px solid var(--sc-accent);
}

/* Subtítulos "Nivel X — Acción" de los paneles: teal suave. */
html.sc-v2 .sc-subhead { color: var(--sc-accent-soft) !important; }

/* Barra de filtros navy de rankings (bg-blue-950 + labels text-blue-200):
   se integra a la superficie v2 en vez de quedar como un bloque azul suelto. */
html.sc-v2 .bg-blue-950 { background-color: var(--sc-surface-2) !important; color: var(--sc-text) !important; }
html.sc-v2 .bg-blue-950 .text-blue-200 { color: var(--sc-text-muted) !important; }

/* Mapa de calor (Leaflet). El lienzo de tiles queda claro a propósito
   (un mapa es un mapa), pero el marco y los controles/popups se integran. */
html.sc-v2 #mapa { border: 1px solid var(--sc-border); }
html.sc-v2 .leaflet-bar a,
html.sc-v2 .leaflet-popup-content-wrapper,
html.sc-v2 .leaflet-popup-tip {
    background: var(--sc-surface);
    color: var(--sc-text);
}
html.sc-v2 .leaflet-bar a { border-bottom-color: var(--sc-border); }

/* Grilla de Carga de Salidas: .grid-input/.grid-select tienen borde y
   focus hardcodeados en un <style> inline de la página. */
html.sc-v2 .grid-input,
html.sc-v2 .grid-select {
    background: var(--sc-surface-2);
    border-color: var(--sc-border-strong);
    color: var(--sc-text);
}
html.sc-v2 .grid-input:focus,
html.sc-v2 .grid-select:focus { border-color: var(--sc-accent); }

/* Login (index.html, body.sc-login): pasa del celeste claro al fondo
   oscuro v2 con un glow teal; la grilla de marca se atenúa. */
html.sc-v2 body.sc-login {
    background:
        radial-gradient(ellipse 900px 700px at 50% 12%, rgba(31, 201, 168, 0.12), transparent 60%),
        var(--sc-bg) !important;
    background-attachment: fixed;
}
html.sc-v2 .sc-login .fondo-grilla {
    background-image:
        linear-gradient(rgba(31, 201, 168, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 201, 168, 0.06) 1px, transparent 1px);
}
html.sc-v2 .shadow-2xl { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important; }

/* Lockup de marca (login + otras). Base: en cualquier tema. */
.sc-brand-mark { display: block; width: 84px; height: 84px; margin: 0 auto 14px; }
.sc-brand-word { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.sc-brand-tag {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted, #64748b);
}
.sc-brand-link { color: var(--color-accent, #157D66); }
.sc-brand-link:hover { text-decoration: underline; }

/* v2: la tarjeta del login pasa a ser el tile oscuro con glow teal
   (como la imagen de referencia). */
html.sc-v2 .sc-login-card {
    background:
        radial-gradient(ellipse 300px 200px at 50% 6%, rgba(31, 201, 168, 0.18), transparent 72%),
        var(--sc-surface) !important;
    border: 1px solid var(--sc-border);
}
html.sc-v2 .sc-brand-tag { color: var(--sc-text-muted); }
html.sc-v2 .sc-brand-link { color: var(--sc-accent-soft); }

/* ── Iconos v2 reemplazando emoji ──────────────────────────────────────
   Cada punto trae el emoji en <span class="sc-emoji"> y el SVG en
   <img class="sc-ic">. Fuera de v2 se ve el emoji; en v2, el icono. Así
   las páginas v1 quedan intactas. */
.sc-ic { display: none; }
.sc-v2 .sc-emoji { display: none; }
.sc-v2 .sc-ic {
    display: inline-block;
    width: 1.75em;
    height: 1.75em;
    vertical-align: -0.5em;
    margin-right: 0.32em;
}
.sc-v2 .sc-btn-ic {   /* variante para botones / enlaces: más chico y centrado */
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.32em;
    margin-right: 0.3em;
}
/* Dentro de un botón de acento (fondo teal) el glyph teal se perdía contra
   el fondo -> se lo lleva al color de primer plano del acento (casi-negro). */
.sc-v2 .btn-primary .sc-ic,
.sc-v2 .btn-success .sc-ic,
.sc-v2 .btn-neutralizar .sc-ic,
.sc-v2 a.bg-blue-600 .sc-ic,
.sc-v2 a.bg-amber-600 .sc-ic {
    filter: brightness(0);
    opacity: 0.82;
}
/* Logo de la barra de nav: par v1 / v2 (no se puede cambiar src por CSS). */
.sc-logo-v2 { display: none; }
.sc-v2 .sc-logo-v1 { display: none; }
.sc-v2 .sc-logo-v2 { display: inline-block; }
/* logo-mark.svg no trae width/height intrínsecos: sin una utilidad de
   tamaño (h-5/w-auto de Tailwind) se renderiza gigante. Piso de seguridad
   por si la utilidad falta -- la nav de staff lo pisa con 0.9em (regla más
   específica arriba, .sc-nav-brand). */
.sc-v2 .sc-logo-v2 { height: 1.25rem; width: auto; }

/* Insignia circular de stat-card (App.renderNav nivel 1). En v2 el círculo
   pasa a un tinte teal neutro (los bg-*-100 de color quedaban raros al lado
   del glyph teal) y el icono adentro se dimensiona al círculo. */
.sc-v2 .stat-icon {
    background-color: var(--sc-accent-bg) !important;
}
.sc-v2 .stat-icon .sc-ic {
    width: 1.45rem;
    height: 1.45rem;
    margin: 0;
    vertical-align: middle;
}