/* ──────────────────────────────────────────────────────────────
   theme-dark.css — Modo oscuro automatico del ecosistema Chatello
   FUENTE UNICA. No editar las copias por servicio: editar este
   archivo y correr ./scripts/sync-frontend-shared.sh --apply

   Se activa solo cuando el sistema operativo del usuario esta en
   modo oscuro (prefers-color-scheme). No hay interruptor manual,
   no hay JS, no hay estado persistido.

   Como funciona: los 9 frontends declaran el MISMO vocabulario de
   variables en su :root (--bg, --surface, --text, --ok, ...). Este
   archivo solo redefine esos valores. Ninguna regla de layout se
   toca, asi que no puede romper posicionamiento.

   REQUISITO: cargarlo DESPUES del app.css del servicio, o la
   cascada no lo dejara pisar el :root base (misma especificidad,
   gana el ultimo).
   ────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    /* Le avisa al navegador que pinte los controles nativos en
       oscuro: scrollbars, <select>, checkboxes, autofill de inputs
       y la barra de busqueda. Sin esto quedan islas blancas que
       ningun CSS nuestro alcanza. */
    color-scheme: dark;

    /* ── Marca ──
       --chatello-charcoal SI se invierte, y la razon es empirica: en
       los app.css del ecosistema se usa unas 40 veces como TINTA
       (`color:`) y solo unas 5 como FONDO (`background:`), siempre
       sobre los mismos selectores compartidos (.sidebar, .login-wrap,
       .btn-primary). Dejarlo oscuro para proteger esos 5 dejaba
       invisibles los 40 — titulos de pagina incluidos.
       Se invierte, y los 5 fondos se fijan explicitamente mas abajo.

       El mismo recuento decide las otras dos: --chatello-beige-soft y
       --chatello-beige-light se usan 8 y 10 veces como fondo y CERO
       como tinta (son los fondos de hover de fila, entre otros), asi
       que se invierten enteras. --chatello-beige, en cambio, es 59
       veces tinta contra 10 de fondo: se queda clara, y sus pocos
       usos como fondo se fijan mas abajo. */
    --chatello-charcoal:    #ECE6E0;
    --chatello-gray:        #BAB3AC;
    --chatello-beige:       #DBD2CB;
    --chatello-beige-light: #2A3237;
    --chatello-beige-soft:  #232A2F;
    --chatello-white:       #1A1F23;   /* usado como fondo de tarjeta */

    /* ── Superficies ──
       En modo oscuro la elevacion se expresa con MAS luz, no con
       mas sombra (al reves que en claro). Por eso --surface es mas
       claro que --bg, y --surface-2 mas claro todavia.
       Nunca negro puro: #000 sobre pantallas OLED produce halos y
       cansa la vista. Arrancamos del charcoal de marca. */
    --bg:            #121619;
    --surface:       #1A1F23;
    --surface-2:     #232A2F;
    --border:        #2F373D;
    --border-strong: #454E55;

    /* ── Texto ──
       Tampoco blanco puro: #FFF sobre fondo oscuro vibra y produce
       halacion. Usamos el beige de marca, que ademas mantiene la
       calidez del branding en la version oscura. */
    --text:   #ECE6E0;
    --text-2: #BAB3AC;
    --muted:  #8B857E;

    /* ── Acento (charcoal era el "primario" en claro) ── */
    --accent:       #DBD2CB;
    --accent-hover: #ECE6E0;
    --accent-text:  #121619;

    /* ── Estados ──
       Los colores de estado NO se pueden reusar del tema claro:
       #3E7B4F (ok) sobre #1A1F23 da ~2.4:1 de contraste, ilegible.
       Regla aplicada: subir luminosidad y BAJAR saturacion para el
       texto; y para el fondo, una version muy oscura del mismo tono
       en vez del pastel claro. Todos verificados >= 4.5:1 (WCAG AA)
       sobre --surface. */
    --ok:        #6FBF84;   --ok-bg:     #17301F;
    --warn:      #E0A94A;   --warn-bg:   #33280F;
    --danger:    #E8705F;   --danger-bg: #3A1C17;
    --info:      #BAB3AC;   --info-bg:   #2A2C2D;
    --success:   var(--ok);           /* alias de compatibilidad */

    /* ── Sucursales ──
       Aca la inversion es de ROL, no de tono: en claro, `-dark` es
       la tinta y `-light` el fondo del badge. En oscuro se cruzan,
       conservando el matiz que identifica cada sucursal
       (HIMNO verde, CARR azul, LOMAS naranja, PROD morado). */
    --suc-himno-dark: #7FC784;  --suc-himno-light: #15301A;  --suc-himno-med: #1F4525;
    --suc-carr-dark:  #82B2F2;  --suc-carr-light:  #101F33;  --suc-carr-med:  #17304F;
    --suc-lomas-dark: #F2926F;  --suc-lomas-light: #331608;  --suc-lomas-med: #4F2410;
    --suc-prod-dark:  #C99DE2;  --suc-prod-light:  #261133;  --suc-prod-med:  #3A1A4F;

    /* ── Sombras ──
       Una sombra negra al 8% es invisible sobre un fondo oscuro.
       Se sube la opacidad y se apoya en un borde sutil para que la
       elevacion siga leyendose. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
  }

  /* ── Correcciones puntuales ──
     Elementos que el navegador pinta por su cuenta y no leen
     nuestras variables. */

  /* Logos. Los SVG de marca traen el fill #231f20 quemado adentro,
     pensados para fondo claro: sobre una tarjeta oscura desaparecen.
     No se puede cambiar el `src` desde CSS, y las variantes -light
     que existen tienen OTRO viewBox (289x276 vs 388x316), asi que
     intercambiarlas deformaria el layout.
     Como el logo es monocromo de un solo fill, invertirlo es exacto:
     #231f20 -> #DCE0DF. El sepia leve lo devuelve al beige de marca
     en vez de dejarlo en un blanco frio.
     El :not() protege a los logos que YA son claros: invertirlos los
     volveria negros. */
  img[src*="logo"]:not([src*="-light"]):not([src*="light."]) {
    filter: invert(1) sepia(0.18) saturate(0.6);
  }

  /* Los inputs con autofill de Chrome quedan azul claro pese a
     color-scheme. Este es el unico override conocido que funciona. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    caret-color: var(--text);
  }

  /* ── Componentes con color hardcodeado en los app.css ──
     Estas reglas NO son estetica: son los puntos donde un valor
     literal (heredado del tema claro) romperia legibilidad si lo
     dejaramos pasar. Se corrigen aca, en la fuente unica, para no
     tener que editar los 9 app.css y para que el rollback siga
     siendo revertir un solo archivo.
     Ganan por cascada, no por !important: este CSS se carga
     DESPUES del app.css y usa la misma especificidad. */

  /* 1. Formularios. `background: #fff` en input/select/textarea
        dejaria campos blancos brillantes dentro de una pagina
        oscura: el error mas visible de todos. */
  input, select, textarea {
    background: var(--surface-2);
    color: var(--text);
  }
  input::placeholder, textarea::placeholder { color: var(--muted); }

  /* 2. Botones solidos de estado. En claro el fondo es oscuro y el
        texto blanco; al aclararse --ok/--danger/--warn en oscuro,
        ese blanco baja de 4.5:1. Se invierte a tinta charcoal.
        OJO: va un literal, NO var(--chatello-charcoal). Esa variable
        se invierte a beige mas arriba, asi que usarla dejaba tinta
        clara sobre fondo claro — 1.79:1 medido en el render. La
        correccion se anulaba a si misma. */
  .btn-success, .btn-danger, .btn-warn {
    color: #121619;
  }
  /* Los :hover tambien venian hardcodeados a tonos MAS oscuros, lo
     que invierte la logica en modo oscuro (hover debe iluminar). */
  .btn-success:hover { background: #8FD6A2; border-color: #8FD6A2; }
  .btn-danger:hover  { background: #F0907F; border-color: #F0907F; }
  /* El hover del primario traia `color:#fff`, que sobre el beige del
     boton invertido quedaba blanco sobre claro. */
  .btn-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-text);
    border-color: var(--accent-hover);
  }

  /* --chatello-beige se queda claro (es tinta 59 veces), asi que los
     pocos lugares que lo usan de FONDO necesitan tinta oscura encima.
     Es el item activo del sidebar en los 5 servicios que lo comparten. */
  .sidebar nav a.active,
  .view-btn.active,
  .btn-add-role:hover,
  .btn-add-row:hover { color: #121619; }

  /* Igual para --chatello-gray, que tambien quedo claro. */
  .schedule-grid th,
  .schedule-grid th.col-horario,
  .turno-divider td,
  .turno-separator td,
  .header .badge { background: #232A2F; color: var(--text); }

  /* 2b. Boton primario. Es el caso mas grave que encontro la revision
         visual: `.btn-primary` se pinta de charcoal, que en oscuro ES
         el fondo de la pagina — el boton "Entrar" del login quedaba
         practicamente invisible. Se invierte a beige sobre charcoal. */
  .btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
  }

  /* 2c. Los cinco lugares donde --chatello-charcoal se usaba como
         FONDO y por eso no puede seguir la inversion de arriba.
         El sidebar se pinta MAS oscuro que el contenido: en claro
         contrasta por ser oscuro sobre beige, y sin esto quedaria
         del mismo tono que el body. */
  .sidebar {
    background: #0D1113;
    border-right: 1px solid var(--border);
  }
  .sidebar-toggle,
  .header,
  .card-header,
  .fab,
  .toast,
  #btn-preview.btn-active { background: #0D1113; }

  /* Pantallas de login que se pintan enteras de charcoal. Sin esto,
     invertir la variable las dejaba en beige a pagina completa: la
     regresion mas ruidosa de todo el cambio. */
  .login-wrap,
  body.login-body,
  #login-screen,
  .screen { background-color: #121619; }

  /* 3. Elementos "activos" pintados de charcoal. En oscuro el
        charcoal ES el fondo de la pagina, asi que el elemento
        seleccionado se volveria invisible. Se invierte a beige.
        Nota: --chatello-dark no esta definida en ningun :root del
        ecosistema, de modo que ahi el fallback #121619 si aplica. */
  .toggle .btn.active,
  .chip-lista.active,
  .etq-chip.active {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
  }

  /* 4. Tema por sucursal (reportes-service).
        Caso especial: applySucursalTheme() de common.js NO lee las
        variables del :root — inyecta --suc-dark/--suc-light/--suc-med
        INLINE en el <body> desde un objeto JS (SUC_THEME). Un estilo
        inline gana sobre cualquier media query, asi que redefinir las
        variables aca no tiene ningun efecto sobre ellas.

        Consecuencia si no se hiciera nada: al elegir una sucursal,
        `body.suc-themed { background: var(--suc-light) }` pintaria la
        pagina ENTERA de verde/azul/naranja muy claro (#E8F5E9) dentro
        del tema oscuro.

        En vez de pelear con el inline, se cambia el ROL del color: el
        fondo vuelve a ser oscuro y la sucursal se sigue leyendo por
        sus acentos (borde superior de card, badge del titulo). Es el
        unico !important del archivo, y hace falta justamente porque
        del otro lado hay un estilo inline. */
  body.suc-themed { background: var(--bg) !important; }

  /* --suc-dark se queda OSCURO (viene del JS), asi que el texto del
     badge tiene que ser claro, no --bg. */
  .suc-title-badge { color: #ECE6E0; }

  /* ── wiki-service ──
     La wiki no comparte el vocabulario del resto: nacio despues, con
     identidad editorial propia (--papel/--tinta en vez de --bg/--text).
     Necesita su propio mapeo. Declarar estas variables aca no molesta
     a los demas servicios: una custom property que nadie consume
     simplemente no hace nada. */
  :root {
    --papel:  #121619;   /* era #fffdfa */
    --panel:  #1A1F23;   /* era #f7f3ee */
    --tinta:  #ECE6E0;   /* era #2b2724 */
    --suave:  #A9A29B;   /* era #6b6259 */
    --linea:  #2F373D;   /* era #e6e0d8 */
    --acento: #D9A273;   /* #7a4a2b es tierra oscura: ilegible sobre
                            fondo oscuro, se sube a su version clara */
    --alerta: #E8935E;   /* idem con #b4531f */
  }
  /* Los tres hardcodes de estilo.css. */
  #buscador, .resultados { background: var(--panel); }
  .aviso { background: #33210F; }

  /* ── horarios-app ──
     Comparte el vocabulario estandar, pero varias reglas piden
     variables que NUNCA se definieron: var(--text-muted, #666),
     var(--chatello-text, #333). Ahi el fallback SI se aplica, y #666
     sobre fondo oscuro da ~2.3:1. Basta con definirlas para que el
     fallback deje de entrar en juego. */
  :root {
    --text-muted:   #9A948D;
    --chatello-text: #ECE6E0;
    --bg-hover:     #232A2F;   /* pedidos: var(--bg-hover, #f5f3f0) */
  }

  /* ── encargado-service ──
     Vocabulario propio (--text-primary/--border-light/--semantic-*),
     con acentos terrosos deliberadamente apagados. En oscuro hay que
     subirles luminosidad o se hunden en el fondo. */
  :root {
    --chatello-charcoal1: #ECE6E0;   /* pasa a ser tinta */
    --chatello-charcoal2: #BAB3AC;
    --chatello-cream:     #1A1F23;   /* pasa a ser superficie */
    --chatello-white:     #1A1F23;
    --chatello-border:    #2F373D;
    --text-primary:       #ECE6E0;
    --text-secondary:     #BAB3AC;
    --border-light:       #2F373D;
    --border-dark:        #454E55;
    --semantic-info:      #7FAEC4;
    --semantic-ok:        #8FBFB0;
    --semantic-warn:      #DCC08A;
    --semantic-danger:    #E08585;
    --info-bg:            #17262E;
    --ok-bg:              #17302A;
    --warn-bg:            #302716;
    --danger-bg:          #301A1A;
  }

  /* Hardcodes de encargado que sobreviven al remapeo de variables.
     El .btn-submit es consecuencia directa de invertir
     --chatello-charcoal1: su `color:#fff` pasaba a ser blanco sobre
     beige. Lo detecto el barrido de luminancia sobre el render, no
     la lectura del CSS. */
  .login-hero-form { background: var(--surface); }
  .login-hero-form input,
  .login-hero-form select { background: #232A2F; border-color: #2F373D; }
  .login-hero-form input:focus,
  .login-hero-form select:focus { background: #2A3237; }
  .login-hero-form .btn-submit { color: #121619; }

  /* ── produccion-service ──
     Vocabulario propio: --surface2 va SIN guion (no --surface-2 como
     el resto), y suma --accent2/--accent3/--gold. Ademas su :root
     declara `color-scheme:light`, que hay que pisar o el navegador
     sigue pintando los controles nativos en claro.
     COLISION DE NOMBRES — por esto el bloque va scopeado y no en
     :root: el ecosistema define --accent como su beige primario,
     mientras que el ERP usa el MISMO nombre para su verde
     institucional (#1a3a2a). Sin scope se pisan en los dos sentidos:
     primero el beige dejo el .btn del ERP beige con `color:#fff`
     encima, y al restaurar el verde en :root los botones de cortes y
     nomina se volvieron verdes.
     Las custom properties heredan, asi que declararlas en el <body>
     alcanza para todos sus descendientes sin tocar a nadie mas. */
  [data-app="produccion"] {
    color-scheme: dark;
    --bg:       #121619;
    --surface:  #1A1F23;
    --surface2: #232A2F;
    --border:   #2F373D;
    --text:     #ECE6E0;
    --muted:    #9A948D;
    --accent:   #1a3a2a;   /* verde del sidebar: ya oscuro, se respeta */
    --accent2:  #3E8F6C;   /* #2d6a4f: se aclara para hover y foco */
    --accent3:  #6BC79A;
    --gold:     #D9BC6A;
    --warn:     #E8934F;
    --danger:   #DC6A5C;
    --success:  #4FBF7D;
  }

  /* Los badges del ERP combinan un fondo rgba muy transparente (.12)
     con tinta oscura: el fondo casi no se ve, pero la tinta queda
     ilegible sobre oscuro. Solo hay que subir la tinta. */
  .b-ok, .b-in       { color: #6FD69A; }
  .b-low             { color: #E8A264; }
  .b-out, .b-out-mv  { color: #E88377; }
  .b-cafe, .b-trans  { color: #6BC79A; }
  .b-prod            { color: #D9BC6A; }

  /* ── portal ──
     Va scopeado con [data-app="portal"] porque el portal reusa nombres
     de clase del ecosistema (.login-card) para un componente
     completamente distinto: aca es una tarjeta de VIDRIO sobre una
     fotografia a pantalla completa, no una tarjeta solida.

     El portal es el unico caso donde "modo oscuro" no significa
     oscurecer el fondo: el fondo ya es una foto oscura con viñeteado.
     Lo que se invierte es el panel de vidrio que flota encima —
     de vidrio beige claro a vidrio ahumado. */
  [data-app="portal"] {
    /* El <body> del portal se pinta `var(--charcoal) url(hero.jpg)`:
       la variable es el color de RESPALDO detras de la foto. Al pasar
       --charcoal a tinta clara, ese respaldo quedaba beige y asomaba
       como un destello mientras la imagen carga. El atributo vive en
       el propio <body>, asi que fijarlo aca lo cubre. */
    background-color: #121619;
    --charcoal:      #ECE6E0;  /* pasa a ser TINTA, no fondo */
    --beige-soft:    #1A1F23;
    --border-light:  rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --muted:         #9A948D;
    --danger:        #E8705F;
  }

  /* Vidrio ahumado: se conserva el backdrop-filter, solo cambia el
     tinte y se sube la opacidad — un vidrio oscuro necesita mas
     cuerpo que uno claro para que el texto se despegue de la foto. */
  [data-app="portal"] .login-card {
    background: rgba(18, 22, 25, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* El viñeteado se intensifica para que la foto no compita con el
     panel ahora que este es oscuro y contrasta menos con ella. */
  [data-app="portal"] .background-overlay {
    background: radial-gradient(circle at center,
                                rgba(18, 22, 25, 0.55) 0%,
                                rgba(18, 22, 25, 0.92) 100%);
  }

  [data-app="portal"] .form-input {
    background: rgba(255, 255, 255, 0.07);
    color: var(--charcoal);
  }
  [data-app="portal"] .form-input:focus {
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }
  /* El boton primario del portal es charcoal solido: mismo problema
     que en el resto del ecosistema, se funde con el fondo. */
  [data-app="portal"] .form-button {
    background-color: #ECE6E0;
    color: #121619;
  }
  [data-app="portal"] .form-button:hover { background-color: #FFFFFF; }

  [data-app="portal"] .service-chip {
    background: rgba(255, 255, 255, 0.07);
    color: var(--charcoal);
  }
  [data-app="portal"] .service-chip:hover {
    background: #ECE6E0;
    color: #121619;
  }
  [data-app="portal"] .service-chip:hover svg { stroke: #121619; }

  /* ══════════════════════════════════════════════════════════════
     INVERSIONES GENERADAS  ·  no editar a mano
     ──────────────────────────────────────────────────────────────
     Producidas por un barrido de todo el frontend que junta cada
     regla cuyo `background` es un color claro — las que se vuelven
     islas dentro del tema oscuro: pills de estado, banners de aviso,
     chips, filas resaltadas.

     La conversion preserva el MATIZ y solo intercambia la
     luminosidad: el fondo baja a L=0.145, la tinta sube hasta cumplir
     4.5:1 contra ese fondo. Asi un pill "ok" sigue siendo verde y uno
     "pendiente" sigue siendo ambar, que es la informacion que el
     color transporta. Los grises, que no tienen matiz que preservar,
     caen en las variables neutras.

     Para regenerarlo tras tocar colores en algun servicio, ver
     scripts/generar-inversiones-dark.js
     ══════════════════════════════════════════════════════════════ */

  /* cortes-service/public/capturas.html */
  .cfdi-pill.facturada { background: #18321e; color: #94e09a; }
  .cfdi-pill.no_se_factura { background: var(--surface-2); color: var(--text-2); }
  .cfdi-pill.pendiente { background: #362e14; color: #e0cd94; }
  .cfdi-pill.recibido { background: #18321e; color: #94e09a; }
  .cl-step.na { background: var(--surface-2); color: var(--text-2); }
  .cl-step.ok { background: #18321e; color: #94e09a; }
  .cl-step.pendiente { background: #362e14; color: #e0cd94; }
  .clasif-cell select.dirty { background: #362a14; }
  .clasif-forzada select.sub-inline.dirty { background: #362a14; }
  .ct-card-body .clasif.unset { background: #362914; color: #e0c794; }
  .ct-card-foto img { background: var(--surface); }
  .ct-card.selected { background: #362b14; }
  .dup-banner { background: #362e14; color: #e0ce94; }
  .hover-preview { background: var(--surface); }
  .ocr-modal .map-pres-select { background: var(--surface); color: #94e0b7; }
  tr.dup-banner-row > td { background: #362e14; }
  tr.row-bloqueada-dup > td { background: #362b14; }

  /* cortes-service/public/snap.html */
  .combo-opt.active { background: #322618; }
  .man-note { background: #362b14; color: #e0cc94; }
  .recent-item img { background: var(--surface); }
  .recent-item.dup { background: #363014; }
  .status.duplicate { background: #362d14; color: #e0ce94; }
  .status.error { background: #361414; color: #e09494; }
  .status.processing { background: #142636; color: #94b7e0; }
  .status.queued { background: var(--surface-2); color: var(--text-2); }
  .status.ready { background: #18321e; color: #94e09a; }
  .status.uploading { background: #362e14; color: #e0cd94; }
  .thumb-manual { background: #322618; }

  /* encargado-service/public/conteo.html */
  .progreso-pill { background: #2d251d; }
  .saltar-link { background: #362a14; color: #e0c294; }
  .saltar-modal { background: #312519; }
  .saltar-opciones label { background: var(--surface); }
  .unidad-ejemplo { background: #361814; color: #e09a94; }

  /* encargado-service/public/css/app.css */
  .action-item:hover { background: #2e251c; }
  .action-list { background: var(--surface); }
  .checklist-card { background: #2f251a; }
  .checklist-v3 { background: var(--surface); }
  .checklist-v3 .ck3-done-badge { background: #1b2f24; }
  .checklist-v3 .ck3-progress { background: #2d261d; }
  .chk-row.chk-ok .chk-mark { background: #19311a; color: #9ada9e; }
  .chk-row.chk-pending .chk-mark { background: #362814; color: #e0af94; }
  .ck3-row .ck3-chip { background: #30261a; }
  .ck3-row.s-ok .ck3-chip { background: #1b2f24; }
  .ck3-row.s-ok .ck3-status { background: #1b2f24; }
  .ck3-row.s-pending .ck3-status { background: #362b14; color: #e0c294; }
  .notif-banner-btn { background: var(--surface); color: #a9bdcb; }
  .reference-card { background: var(--surface); }
  .reference-card[open] { background: #362d14; }
  .resumen-card { background: var(--surface); }
  .shift-chip { background: var(--surface); }
  .shift-chip.no-shift { background: #2f251a; }

  /* encargado-service/public/encuestas-v1.html */
  .counter-pill { background: #362514; color: #dbb59a; }
  .pair-grid .pair-cell.done .file-btn { background: #14361e; color: #94e0ad; }

  /* encargado-service/public/index.html */
  .stale-chip { background: #362f14; color: #e0b194; }

  /* encargado-service/public/transferencias.html */
  .comp-row { background: var(--surface); }
  .status.conflicto { background: #361414; color: #e09494; }
  .status.ok { background: #14361a; color: #94e0a7; }
  .status.pendiente_ocr { background: #362e14; color: #e0c894; }
  .status.requiere_revision { background: #361414; color: #e09494; }
  .summary .pill.esp { background: #142436; color: #94bce0; }
  .summary .pill.falt { background: #361414; color: #e09494; }
  .summary .pill.ok { background: #14361a; color: #94e0a7; }

  /* encuestas-service/public/css/encuestas.css */
  .articulos-table input { background: var(--surface); }
  .articulos-wrap { background: #2a2a20; }
  .badge-capturada { background: #14361e; color: #94e0ad; }
  .badge-descartada { background: #351515; color: #e09494; }
  .badge-modelo-v1 { background: #2f261b; color: #cbbba9; }
  .badge-modelo-v2 { background: #142636; color: #94bbe0; }
  .badge-pendiente { background: #362814; color: #e0c094; }
  .badge-revision { background: #362414; color: #e0b994; }
  .califica-bloque { background: #2a2a20; }
  .califica-head .valor-actual { background: var(--surface); color: #ddbb98; }
  .confianza-info { background: #362a14; color: #e0c094; }
  .modal-form input, .modal-form textarea, .modal-form select { background: #2a2a20; }
  .modal-fotos img { background: #352815; }
  .motivo-ocr_baja_confianza { background: #362a14; color: #e0c094; }
  .motivo-sin_numero_orden { background: #362a14; color: #e0c094; }
  .motivo-wansoft_caido { background: #211436; color: #b29bd9; }
  .motivo-wansoft_no_encontrado { background: #361414; color: #e09494; }
  .notas-readonly { background: #312819; color: #dbb59a; }
  .rad-opt { background: var(--surface); }
  .rad-opt-disabled:has(input:checked) { background: #362714; }
  .rad-opt:has(input:checked) { background: #362714; }
  .resumen .pill { background: var(--surface); }
  .texto-readonly { background: #2a2a20; color: #d4baa0; }
  .ticket-readonly { background: #2a2a20; }
  .v2-col-calif input, .v2-col-ticket input { background: #2a2a20; }
  .v2-col-foto img { background: #352815; }
  .wansoft-miss { background: #361414; color: #e09494; }
  .wansoft-ok { background: #14361e; color: #94e0ad; }

  /* encuestas-service/public/plantilla.html */
  .guia-body .gnote { background: #142436; }
  .guia-body .gwarn { background: #362d14; }
  .guia-modal { background: var(--surface); }
  .pl-card { background: var(--surface); }
  .pl-preg { background: #322518; }
  .pl-tip { background: #142436; color: #9db9d7; }
  .pl-tip-q { background: #362914; color: #d8b89c; }

  /* horarios-app/public/style.css */
  .btn-add-block:hover { background: #322918; color: var(--text-2); }
  .cell-other-suc-tag { background: #322918; }
  .historico-controls { background: var(--surface); }
  .historico-controls select, .historico-controls input[type="search"] { background: var(--surface); }
  .historico-empleados th:hover { background: var(--surface); }
  .historico-table { background: var(--surface); }
  .historico-table tbody tr:hover { background: var(--surface); }
  .historico-table th { background: var(--surface); color: var(--text-2); }
  .move-sheet-btn { background: var(--surface); }
  .move-sheet-btn:hover, .move-sheet-btn:active { background: #322818; }
  .move-sheet-origin { background: #312819; color: var(--text-2); }
  .schedule-grid th.col-today { background: #362d14; color: var(--text-2); }
  .week-banner-current { background: #362f14; color: #e0b094; }
  .week-banner-future { background: #143625; color: #94e0cb; }
  .week-banner-past { background: #202329; color: #a9b7cb; }

  /* nomina-service/public/asistencias.html */
  .cell-holiday-fixed-absent { background: #2a1a30; }
  .cell-manual-correction { background: #1b2f20; }
  table.grilla thead th { background: var(--surface); }

  /* nomina-service/public/auditoria.html */
  .cell-audit.changed-manual { background: #1b2f20; }
  .help-btn { background: var(--surface); }

  /* nomina-service/public/historial.html */
  .ws-chip.err { background: #361417; color: #e0949b; }
  .ws-chip.ok { background: #18321e; color: #94e0a5; }
  .ws-chip.pending { background: #20252a; color: var(--text-2); }
  .ws-chip.warn { background: #362e14; color: #e0cd94; }

  /* nomina-service/public/index.html */
  tr.row-wansoft-ok > td { background: #1b2f20; }
  tr.row-wansoft-ok:hover > td { background: #1c2e20; }

  /* pedidos-service/public/css/app.css */
  .etq-chip { background: var(--surface); color: var(--text-2); }
  .ws-dropdown .ws-opt:hover { background: #2b261f; }
  .ws-dropdown .ws-opt.activo { background: #2b261f; }

  /* portal/index.html */
  .form-input { background: var(--surface); }
  .service-chip { background: var(--surface); }

  /* produccion-service/public/css/app.css */
  .op-rg.is-terminado { background: #183220; }
  .pill-no { background: #361914; color: #e09b94; }
  .pill-ok { background: #193123; color: #94e0b6; }
  .pill-warn { background: #362614; color: #e0b894; }
  #sw-update-banner button { background: var(--surface); }

  /* produccion-service/public/css/erp-base.css */
  .form-input:focus,.form-select:focus,.form-textarea:focus { background: var(--surface); }
  .tbl tbody tr:hover td { background: #2e291c; }

  /* reportes-service/public/benchmarks.html */
  table.granular tr.highlight td { background: #362d14; }

  /* wiki-service/public/login.html */
  .login-card { background: var(--surface); }
}