/* tema.css — tema claro/oscuro de la flota (dueño, 5-oct-2026). FUENTE ÚNICA en
   services/_shared-ui/static/; `make sync-ui` lo copia a las 14 apps del tema (no a
   mes, mes-espejo, catalogo, cocheras ni scentcanvas).

   Tres partes:
   1. `.tema-toggle` — el botón ☀/☾ del header, en los dos temas.
   2. La paleta CLARA («papel cálido»): las variables de tokens.css / base.css /
      polish.css redefinidas bajo `:root[data-tema="claro"]`. Sin ese atributo —el
      default, oscuro— este archivo no cambia NADA de lo que ya se ve.
   3. Arreglos de los componentes COMPARTIDOS (components, polish, sidebar, filtros,
      chrome…) que usan colores fijos pensados para fondo negro. Lo propio de una app
      va en su <app>-claro.css, nunca acá.

   · TODO lo claro va dentro de `@media screen`: al imprimir manda print.css, igual
     que hoy, elija cada uno el tema que elija.
   · Se carga DESPUÉS de todas las hojas de la app (y antes de <app>-claro.css), pero
     gana por ESPECIFICIDAD (`:root[data-tema="claro"] …` ≥ 0,2,0), no por orden: los
     `:root {}` de base.css y polish.css son 0,1,0.
   · Dorado en claro: el Pantone 130 C (#F2A900) da ~2:1 como texto sobre blanco. Por
     eso `--accent` pasa a ser el dorado de TEXTO (#855900: AA sobre blanco, sobre el papel
     y sobre sus propios tintes de fondo) y el Pantone queda para RELLENO en `--accent-fill`, siempre con texto
     oscuro (`--fg-inverse`, que en la flota sólo se usa sobre rellenos dorados).
   · Una regla nueva de color en cualquier hoja de la flota tiene que verse bien en
     los dos temas: si usa un color fijo, sumá su variante clara acá o en
     <app>-claro.css. */

/* ── 1. El botón ────────────────────────────────────────────────────────────── */
.tema-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn, 6px);
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-base, 140ms) var(--ease, ease),
                border-color var(--dur-base, 140ms) var(--ease, ease),
                background-color var(--dur-base, 140ms) var(--ease, ease),
                transform var(--dur-fast, 100ms) var(--ease-out, ease-out);
}
.tema-toggle:hover {
    color: var(--fg);
    border-color: var(--border-hover);
    background: var(--bg-soft);
}
.tema-toggle:active { transform: scale(0.94); }
.tema-toggle:focus-visible {
    outline: var(--focus-ring, 2px solid var(--accent));
    outline-offset: var(--focus-ring-offset-btn, 3px);
}
.tema-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tema-toggle__luna { display: none; }
:root[data-tema="claro"] .tema-toggle__sol { display: none; }
:root[data-tema="claro"] .tema-toggle__luna { display: block; }
/* Tablets y celulares: blanco táctil de 44px (las tablets de planta del LIMS). */
@media (pointer: coarse) {
    .tema-toggle { width: 44px; height: 44px; }
    .tema-toggle svg { width: 20px; height: 20px; }
}
@media print {
    .tema-toggle { display: none !important; }
}
/* En el header compartido (_shared/header.html: reports, mrp, meetings, costeador, wapp,
   etoro-dashboard) el botón toma la medida del ⚙ que tiene al lado: 32×32 también en
   táctil, así el header no crece. La app cuyo ⚙ mide otra cosa (reports: 36) o que tiene
   header propio lo ajusta en su -claro.css. */
.header .tema-toggle { width: 32px; height: 32px; margin-block: -8px; }
/* margin-block −8px: la caja EXTERIOR del botón mide 16px, menos que cualquier otro elemento de
   un header (título, chips, ⚙), así que nunca lo hace crecer; el botón usa el padding del
   header (≥ 8px en toda la flota). Sin esto briefing/wapp/etoro crecían 2–18px. */
/* Con el botón, el header del celular tiene un elemento más: el título se achica (ya trae el
   ellipsis de mobile.css) en vez de empujar el ⚙ fuera de la pantalla. Sólo actúa si el header
   desborda, o sea con el botón: sin él, el título nunca necesitó achicarse. */
@media (max-width: 1024px) {
    .header h1 { flex-shrink: 1; }
}

@media screen {

/* ── 2. Paleta clara («papel cálido») ────────────────────────────────────────
   `body` va en el selector porque algunas apps redefinen variables en body
   (y la herencia del body le ganaría a :root). */
:root[data-tema="claro"],
:root[data-tema="claro"] body {
    color-scheme: light;

    /* superficies: papel cálido de fondo, cards blancas que flotan con sombra */
    --bg:           #f4f3ef;
    --bg-card:      #ffffff;
    --bg-soft:      #ecebe5;
    --bg-overlay:   rgba(244, 243, 239, 0.86);
    --border:       #dcd9d0;
    --border-hover: rgba(133, 89, 0, 0.45);

    /* texto: los tres niveles cumplen AA sobre --bg-soft */
    --fg:           #1b1a17;
    --fg-muted:     #55524a;
    --fg-faint:     #646056;
    --fg-inverse:   #1b1a17;

    /* dorado: texto oscuro (≥ 4,5:1 aun sobre el tinte dorado de un segmento activo), relleno Pantone */
    --accent:       #855900;
    --accent-ink:   #855900;
    --accent-fill:  #f2a900;
    --accent-fill-hover: #e09c00;
    --accent-soft:  #7a5200;   /* en la flota es TEXTO (57 usos) salvo el hover de .btn.is-primary (3b) */
    --accent-hot:   #c2361b;
    --accent-grad:  linear-gradient(135deg, #f2a900 0%, #e8590c 100%);
    --accent-bg-soft: rgba(176, 122, 0, 0.10);

    /* metales de los gráficos */
    --metal-gold:    #d99a00;
    --metal-bronze:  #a8703a;
    --metal-titanio: #8b8b95;
    --metal-platino: #6b6b75;

    /* estados: oscurecidos para AA sobre blanco */
    --ok:            #166534;
    --warn:          #854d0e;
    --err:           #b42318;
    --info:          #1d4ed8;
    --color-danger:  #b42318;
    --color-danger-soft: rgba(198, 40, 40, 0.12);
    --delta-up-fg:   #2f6b45;
    --delta-up-bg:   rgba(47, 107, 69, 0.10);
    --delta-down-fg: #9a3f37;
    --delta-down-bg: rgba(154, 63, 55, 0.10);

    /* sombras: en claro la profundidad la da la sombra, no el brillo cenital */
    --shadow:        0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow-pop:    0 10px 30px -8px rgba(30, 25, 10, 0.22);
    --glow-accent:   0 0 0 3px rgba(242, 169, 0, 0.28);
    --glass-bg:        rgba(255, 255, 255, 0.72);
    --glass-bg-hover:  rgba(255, 255, 255, 0.86);
    --surface-elev:    #ffffff;
    --surface-elev-2:  #ffffff;
    --border-elev:     rgba(30, 25, 10, 0.12);
    --glass-border-grad: linear-gradient(180deg,
                rgba(0, 0, 0, 0.06) 0%,
                rgba(0, 0, 0, 0.02) 100%);
    --glow-accent-strong: 0 0 0 1px rgba(176, 122, 0, 0.35),
                          0 6px 18px -6px rgba(176, 122, 0, 0.35);
    --glow-accent-soft:   0 0 0 1px rgba(176, 122, 0, 0.18);
    --glow-live-pulse:    0 0 0 3px rgba(8, 145, 178, 0.25);
    --ambient-accent: radial-gradient(60% 80% at 50% -10%,
                rgba(242, 169, 0, 0.10) 0%,
                rgba(242, 169, 0, 0)    70%);
    --grad-area-accent: linear-gradient(180deg,
                rgba(242, 169, 0, 0.22) 0%,
                rgba(242, 169, 0, 0.05) 60%,
                rgba(242, 169, 0, 0)    100%);
    --shadow-glass-card:
        0 1px 2px rgba(30, 25, 10, 0.06),
        0 8px 24px -12px rgba(30, 25, 10, 0.18),
        0 0 0 1px rgba(30, 25, 10, 0.06);
    --shadow-glass-card-hover:
        0 2px 4px rgba(30, 25, 10, 0.08),
        0 14px 32px -12px rgba(30, 25, 10, 0.24),
        0 0 0 1px rgba(176, 122, 0, 0.22);

    /* polish.css (cockpit) */
    --cockpit-surface:       #ffffff;
    --cockpit-surface-hover: #f7f6f2;

    /* tokens.css: el cian «live» no se ve sobre blanco */
    --accent-live:      #0f6b80;
    --accent-live-soft: rgba(15, 107, 128, 0.18);

    /* tokens.css: los «warm» que usa components.css (texto tenue y fondo secundario) */
    --warm-500: #55524a;
    --warm-700: #646056;
    --warm-900: #ecebe5;
}

/* ── 3. Componentes compartidos ──────────────────────────────────────────────
   3a. GENERADO por claro_gen.py (fuera del repo, /home/seb/tema-claro-2026-10-05/tools/)
       desde base/polish (sin su :root, que es la paleta de arriba), components, sidebar,
       filtros, chrome, colors, palette, mobile y toolbar de _shared-ui: la misma regla
       con el color FIJO traducido a su par claro. Si cambia un color fijo en esas hojas,
       regenerar este bloque (o ajustar a mano su regla acá).
   3b. A MANO, después: los rellenos dorados y lo que la auditoría de contraste marcó. */
    /* ── generado de base.css ── */
    :root[data-tema="claro"] *::-webkit-scrollbar-thumb:hover {
        background: #e3e0d8;
    }

    /* ── generado de polish.css ── */
    @media (min-width: 1025px) {
        :root[data-tema="claro"] .sidebar nav a.active .sidebar-badge {
            background: #f4f3ef;
        }
    }
    :root[data-tema="claro"] .fb-add:hover {
        background: rgba(0, 0, 0, 0.032);
    }
    :root[data-tema="claro"] .fb-add[aria-expanded="true"] {
        background: rgba(0, 0, 0, 0.054);
        border-color: rgba(0, 0, 0, 0.088);
    }
    :root[data-tema="claro"] .vistas-save__btn:hover {
        background: rgba(0, 0, 0, 0.032);
    }
    :root[data-tema="claro"] .card .meta .delta-up, :root[data-tema="claro"] .kpi-yoy.positivo .kpi-yoy-delta {
        color: #166534;
    }
    :root[data-tema="claro"] .card .meta .delta-down, :root[data-tema="claro"] .kpi-yoy.negativo .kpi-yoy-delta {
        color: #a32018;
    }
    :root[data-tema="claro"] .card .meta .delta-flat {
        background: rgba(0, 0, 0, 0.045);
    }
    :root[data-tema="claro"] .feed-alertas__filtros {
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
    :root[data-tema="claro"] .alertas-list .alerta {
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
    :root[data-tema="claro"] .alertas-list .alerta:nth-child(even) {
        background: rgba(0, 0, 0, 0.013);
    }
    :root[data-tema="claro"] .resumen-list .resumen-row {
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
    :root[data-tema="claro"] .resumen-list .resumen-row:nth-child(even) {
        background: rgba(0, 0, 0, 0.013);
    }

    /* ── generado de components.css ── */
    :root[data-tema="claro"] .tag.is-ok {
        color: #166534;
    }
    :root[data-tema="claro"] .tag.is-warn {
        color: #854d0e;
    }
    :root[data-tema="claro"] .tag.is-danger {
        color: #a32018;
    }
    :root[data-tema="claro"] .tag.is-info {
        color: #1d4ed8;
    }
    :root[data-tema="claro"] .btn.is-danger {
        color: #a32018;
    }
    :root[data-tema="claro"] .btn.is-danger:hover {
        color: #a32018;
    }
    :root[data-tema="claro"] .tbl-base tbody tr:hover {
        background: rgba(0, 0, 0, 0.018);
    }
    :root[data-tema="claro"] .tbl-base.is-zebra tbody tr:nth-child(odd) {
        background: rgba(0, 0, 0, 0.013);
    }
    :root[data-tema="claro"] .tbl-base.is-zebra tbody tr:hover {
        background: rgba(0, 0, 0, 0.036);
    }
    :root[data-tema="claro"] dialog {
        box-shadow: 0 24px 48px -20px rgba(30, 25, 10, 0.2);
    }
    :root[data-tema="claro"] dialog::backdrop {
        background: rgba(0, 0, 0, 0.27);
    }

    /* ── generado de filtros.css ── */
    :root[data-tema="claro"] .fb-pill-x:hover {
        background: rgba(0, 0, 0, 0.054);
    }
    :root[data-tema="claro"] .fb-popover {
        box-shadow: 0 10px 40px rgba(30, 25, 10, 0.2);
    }
    :root[data-tema="claro"] .fb-list::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.12);
    }
    :root[data-tema="claro"] .fb-item label:hover {
        background: rgba(0, 0, 0, 0.036);
    }
    :root[data-tema="claro"] .litepicker {
        --litepicker-is-in-range-color: rgba(133, 89, 0, 0.18);
        --litepicker-button-apply-color: #ffffff;
        --litepicker-button-apply-color-hover: #ffffff;
        box-shadow: 0 10px 40px rgba(30, 25, 10, 0.2) !important;
    }

    /* ── generado de chrome.css ── */
    :root[data-tema="claro"] .tbl tr:hover td {
        background: rgba(0, 0, 0, 0.013);
    }
    :root[data-tema="claro"] .badge.ok {
        color: #166534;
    }
    :root[data-tema="claro"] .badge.err {
        color: #a32018;
    }
    :root[data-tema="claro"] .badge.warn {
        color: #854d0e;
    }
    :root[data-tema="claro"] .badge.muted {
        background: rgba(0, 0, 0, 0.054);
    }
    :root[data-tema="claro"] .pill-toggle .pill:hover {
        background: rgba(0, 0, 0, 0.027);
    }
    :root[data-tema="claro"] .pill-toggle.toggle--inactivo {
        border-color: rgba(0, 0, 0, 0.07);
    }
    :root[data-tema="claro"] .card {
        border-color: rgba(0, 0, 0, 0.07);
    }
    :root[data-tema="claro"] .card .meta .delta-flat {
        background: rgba(0, 0, 0, 0.045);
    }

    /* ── generado de colors.css ── */
    :root[data-tema="claro"] {
        --c-comparacion: #625e54;
        --c-acumulado: #23696e;
    }

    /* ── generado de palette.css ── */
    :root[data-tema="claro"] .cmd-palette {
        background: rgba(0, 0, 0, 0.33);
    }
    :root[data-tema="claro"] .cmd-palette__panel {
        box-shadow: 0 20px 60px rgba(30, 25, 10, 0.18);
    }
    :root[data-tema="claro"] .atajos-overlay {
        background: rgba(0, 0, 0, 0.33);
    }
    :root[data-tema="claro"] .atajos-overlay__panel {
        box-shadow: 0 20px 60px rgba(30, 25, 10, 0.18);
    }

    /* ── generado de mobile.css ── */
    @media (max-width: 1024px) {
        :root[data-tema="claro"] .sidebar.drawer-open {
            box-shadow: 4px 0 24px rgba(30, 25, 10, 0.18);
        }
    }
    @media (max-width: 1024px) {
        :root[data-tema="claro"] .drawer-overlay {
            background: rgba(0, 0, 0, 0.33);
        }
    }
    :root[data-tema="claro"] .header-controls-pop {
        box-shadow: 0 12px 40px rgba(30, 25, 10, 0.2);
    }

    /* ── generado de toolbar.css ── */
    :root[data-tema="claro"] .toolbar-seccion.filtros--sticky {
        box-shadow: 0 4px 24px rgba(30, 25, 10, 0.18);
    }

    /* ── 3b. A mano ──────────────────────────────────────────────────────────── */

    /* Login (acceso.html de lims, crm…: estilos en su <style>, el generador no los ve): el
       botón de Google usa var(--surface-2, #16181c) y --surface-2 no existe en ninguna hoja →
       fondo SIEMPRE oscuro, con el texto (--fg) ya oscuro en claro: «Entrar con Google»
       desaparecía. */
    :root[data-tema="claro"] .acceso-google {
        background: var(--bg-card);
        border-color: var(--border);
    }
    :root[data-tema="claro"] .acceso-google:hover {
        background: var(--bg-soft);
        border-color: #cfcbc0;
    }

    /* Rellenos dorados: el Pantone con texto oscuro. En claro `--accent` es el
       dorado de TEXTO (#855900): como relleno con texto oscuro no llega a 4,5:1. */
    :root[data-tema="claro"] .btn.is-primary,
    :root[data-tema="claro"] .skip-link,
    :root[data-tema="claro"] .pill-toggle .pill.pill--secondary.pill--active,
    :root[data-tema="claro"] .fb-add .fb-badge,
    :root[data-tema="claro"] .fb-chip-active,
    :root[data-tema="claro"] .vistas-save__ok,
    :root[data-tema="claro"] .sidebar-badge,
    :root[data-tema="claro"] body .sidebar-badge,
    :root[data-tema="claro"] .litepicker .container__days .day-item.is-start-date,
    :root[data-tema="claro"] .litepicker .container__days .day-item.is-end-date,
    :root[data-tema="claro"] .litepicker .container__footer .button-apply {
        background: var(--accent-fill);
        color: var(--fg-inverse);
    }
    :root[data-tema="claro"] .btn.is-primary:hover,
    :root[data-tema="claro"] .btn.is-primary:focus-visible {
        background: var(--accent-fill-hover);
        color: var(--fg-inverse);
    }

    /* El badge DENTRO del ítem activo del sidebar (escritorio): sidebar.css lo pinta con
       `body .sidebar nav a.active .sidebar-badge` y la regla traducida de polish.css (más
       específica) lo dejaba color papel — que siga siendo el badge dorado de los demás. */
    @media (min-width: 1025px) {
        :root[data-tema="claro"] body .sidebar nav a.active .sidebar-badge {
            background: var(--accent-fill);
            color: var(--fg-inverse);
        }
    }

    /* El logotipo de la marca («lims», «crm»…) es texto con degradé (background-clip: text):
       el degradé de relleno arranca en el Pantone, que sobre el papel apenas se ve. */
    :root[data-tema="claro"] .sidebar .brand .accent {
        background: linear-gradient(135deg, #b77d00 0%, #d9480f 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }

} /* @media screen */