/* 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) var(--ease),
                border-color var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease),
                transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .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: 2.12;   /* 1,5 px renderizados: 1,5 × 24 / 17 */
    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; stroke-width: 1.8; }   /* 1,5 × 24 / 20 */
}
@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; }
}
/* Blanco táctil de 44 px del ☀ y el ⚙ SIN cambiar lo que se ve (siguen en 32): un ::after
   transparente centrado, como la hamburguesa (mobile.css). El ⚙ ya usa su ::before para otra
   cosa (inset −4px), por eso el área va en ::after. */
@media screen {
    .header :is(.tema-toggle, .btn-configuracion) { position: relative; }
}
@media screen and (pointer: coarse) {
    .header :is(.tema-toggle, .btn-configuracion)::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

@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:    #b98200;   /* 3,36:1 sobre blanco (= lo que ya pintaba ECharts) */
    --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 rgb(var(--sombra-rgb) / 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 rgb(var(--sombra-rgb) / 0.06),
        0 8px 24px -12px rgb(var(--sombra-rgb) / 0.18),
        0 0 0 1px rgb(var(--sombra-rgb) / 0.06);
    --shadow-glass-card-hover:
        0 2px 4px rgb(var(--sombra-rgb) / 0.08),
        0 14px 32px -12px rgb(var(--sombra-rgb) / 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;

    /* tokens.css: velos (S02) al alfa que tenía cada regla gemela de §3a */
    --velo-015: rgba(0, 0, 0, 0.013);
    --velo-02:  rgba(0, 0, 0, 0.018);
    --velo-035: rgba(0, 0, 0, 0.032);
    --velo-04:  rgba(0, 0, 0, 0.036);
    --velo-05:  rgba(0, 0, 0, 0.045);
    --velo-06:  rgba(0, 0, 0, 0.054);
    --velo-08:  rgba(0, 0, 0, 0.088);
    --velo-linea-04: rgba(0, 0, 0, 0.07);
    --velo-linea-05: rgba(0, 0, 0, 0.07);
    /* --sombra-rgb claro (60 40 0) lo fija interaccion.css §0: también lo lee mrp, que conserva su
       tema.css propio (excepción del manifiesto). */

    /* tokens.css: tinta de texto de estado (S03) */
    --ok-fg:  #166534;
    --err-fg: #b42318;
}

/* ── 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: nada (la barra de scroll sale de --fg, S09) ──
       ── generado de polish.css: velos y --ok-fg ya cambian solos (S02); queda el rojo de delta,
          que en claro no es --err-fg ── */
    :root[data-tema="claro"] .card .meta .delta-down, :root[data-tema="claro"] .kpi-yoy.negativo .kpi-yoy-delta {
        color: var(--err);   /* D7-C: la tinta de error del claro (#b42318). Los otros #a32018 de este bloque quedan: en pantalla
                                  sólo los ve la isla de filtros (las pastillas van por el molde, el botón por interaccion.css §25) */
    }

    /* ── generado de components.css ── */
    :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;
    }
    @media (hover: hover) and (pointer: fine) {
        :root[data-tema="claro"] .btn.is-danger:hover {
            color: #a32018;
        }
    }
    :root[data-tema="claro"] dialog {
        box-shadow: var(--shadow-pop);   /* D7-C: la altura «popover» */
    }
    :root[data-tema="claro"] dialog::backdrop {
        background: rgba(0, 0, 0, 0.27);
    }

    /* ── generado de filtros.css (la isla: sus sombras quedan con su tinta propia) ── */
    :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"] .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 ── */
    @media (hover: hover) and (pointer: fine) {
        :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);
    }
    @media (hover: hover) and (pointer: fine) {
        :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: color-mix(in srgb, var(--fg) 28%, transparent);   /* D7-C: velo desde la tinta */
    }
    :root[data-tema="claro"] .cmd-palette__panel {
        box-shadow: var(--shadow-pop);   /* D7-C */
    }
    :root[data-tema="claro"] .atajos-overlay {
        background: color-mix(in srgb, var(--fg) 28%, transparent);   /* D7-C: velo desde la tinta */
    }
    :root[data-tema="claro"] .atajos-overlay__panel {
        box-shadow: var(--shadow-pop);   /* D7-C */
    }

    /* ── generado de mobile.css ── */
    @media (max-width: 1024px) {
        :root[data-tema="claro"] .sidebar.drawer-open {
            box-shadow: var(--shadow-pop);   /* D7-C */
        }
    }
    @media (max-width: 1024px) {
        :root[data-tema="claro"] .drawer-overlay {
            background: color-mix(in srgb, var(--fg) 28%, transparent);   /* D7-C: velo desde la tinta */
        }
    }
    :root[data-tema="claro"] .header-controls-pop {
        box-shadow: var(--shadow-pop);   /* D7-C */
    }

    /* ── 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: var(--border);   /* D7-C (era #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:focus-visible {
        background: var(--accent-fill-hover);
        color: var(--fg-inverse);
    }
    @media (hover: hover) and (pointer: fine) {
        :root[data-tema="claro"] .btn.is-primary:hover {
            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);
        }
    }

} /* @media screen */