/* ============================================================
   DESK-09 (PARIDAD-2026-10) -- modo oscuro del PANEL (todos los anchos). Amaury: "trabajamos 24 horas... a veces es un
   dolor ver BLANCO a las 3 am". La MISMA marca en oscuro: solo se redefinen los tokens de editorial.css / app-shell.css /
   desk.css (las hojas de cada pantalla ya pintan con tokens; DESK-09 paso a tokens los blancos y grises fijos que
   quedaban). Se activa con la clase html.tema-oscuro, que pone el servidor (users.tema = 'oscuro') o el guion del
   <head> (tema 'auto' + prefers-color-scheme: dark) ANTES del primer cuadro: sin parpadeo blanco.
   El sitio publico, los portales y los correos usan otras hojas y no cambian.
   Contraste (AA) medido con axe en bandeja, calendario, Hoy y operaciones: docs/kb/ux-2026-09/armazon.md (DESK-09).
   ============================================================ */
html.tema-oscuro {
  color-scheme: dark;
  --bg:         #141416;
  --bg-warm:    #1b1b1f;
  --card-bg:    #1f1f24;
  --ink:        #ececf0;
  --ink-soft:   #b4b4bc;
  --ink-faint:  #94949c;
  --mustard:    #f08cbb;
  --mustard-dk: #f5a3c9;
  --olive:      #8e89f2;
  --olive-dk:   #aaa6f7;
  --terra:      #b4b4bc;
  --terra-soft: #3a3a41;
  --sage:       #a4a4ac;
  --rule:       #3a3a41;
  --rule-soft:  #2c2c32;
  --ok:         #5fd583;
  --ok-bg:      #16351f;
  --ok-t:       #5fd583;
  --ko:         #ff8a75;
  --ko-bg:      #401b15;
  --warn:       #e3c14d;
  --warn-bg:    #3a3214;
  --ghost:      #26262c;
  --blue:       #8e89f2;
  --blue-bg:    #2c2a52;
  --sobre-marca: #141416;
  --sobre-tinta: #141416;
  --app-material: rgba(31, 31, 36, 0.8);
  --app-sombra-cabecera: 0 1px 0 var(--rule-soft), 0 8px 20px -14px rgba(0, 0, 0, 0.7);
  --vacio-ok-t: #6fdc8f;
}
html.tema-oscuro body, html.tema-oscuro body.bg-cream { background: var(--bg); color: var(--ink); }
@media (min-width: 1024px) {
  html.tema-oscuro {
    --desk-activo-fondo: var(--blue-bg);
    --desk-activo-tinta: #c3c0fa;
    --desk-activo-marca: var(--olive);
    --desk-primario: var(--olive-dk);
    --desk-primario-tinta: var(--sobre-marca);
    --desk-sombra-flota: 0 12px 32px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--rule);
  }
}
/* Imagenes y logos pensados para fondo claro: el logo del rail ya va invertido a tinta; en oscuro, a blanco. */
html.tema-oscuro .app-rail-logo { filter: none; }
html.tema-oscuro img.pms-logo-oscuro { filter: invert(1) hue-rotate(180deg); }
/* Interruptor sol-luna (rail y cajon): solo se ve el icono del modo actual. */
.pms-tema-btn .pms-tema-ico { display: none; width: 20px; height: 20px; flex: none; }
html[data-tema="claro"] .pms-tema-btn .pms-tema-ico-claro,
html[data-tema="oscuro"] .pms-tema-btn .pms-tema-ico-oscuro,
html[data-tema="auto"] .pms-tema-btn .pms-tema-ico-auto { display: block; }
/* En el cajon del celular el interruptor se ve como los demas renglones del menu. */
.pms-drawer-item .pms-tema-cajon {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer;
}
.pms-drawer-item .pms-tema-cajon:hover { background: var(--ghost); }
.pms-drawer-item .pms-tema-cajon:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: -2px; }
.pms-drawer-item .pms-tema-cajon .pms-tema-ico { color: var(--ink-soft); }

/* ---------- colores fijos de pantallas que no son tokens (fondos claros pensados para el modo claro) ---------- */
html.tema-oscuro .hoy { --hoy-ok-t: #5fd583; --hoy-ko-t: #ff8a75; --hoy-warn-t: #e3c14d; }
html.tema-oscuro .wa-msg.outgoing, html.tema-oscuro .pms-esq-burbuja.pms-esq-out { background: #1f3b27; }
html.tema-oscuro .pms-aviso-fila { background: var(--warn-bg); border-bottom-color: #6b5a1c; }
html.tema-oscuro .pms-aviso-fila:hover { background: #4a3f18; }
html.tema-oscuro .pms-aviso-fila .material-symbols-outlined { color: var(--warn); }
html.tema-oscuro .pms-ops-report-card .pms-ops-status-asignado { color: var(--warn); }
html.tema-oscuro .pms-ops-report-card .pms-ops-status-hecho { color: var(--ok); }
/* Pantallas de Breeze (Perfil) con clases de Tailwind de texto gris fijo. */
html.tema-oscuro .text-gray-900, html.tema-oscuro .text-gray-800, html.tema-oscuro .text-gray-700 { color: var(--ink); }
html.tema-oscuro .text-gray-600, html.tema-oscuro .text-gray-500 { color: var(--ink-soft); }
html.tema-oscuro .bg-white { background-color: var(--card-bg); }
html.tema-oscuro .pms-ops-report-card .pms-ops-status-pendiente { color: var(--warn); }
/* Cabecera del hilo clasico (< 1024 px, "barra negra"): en oscuro, superficie con texto claro. */
html.tema-oscuro .wa-pane-hdr { background: var(--card-bg); color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); }
html.tema-oscuro body .pms-inbox .wa-pane-hdr .pms-hilo-casa, html.tema-oscuro body .pms-inbox .wa-pane-hdr .pms-daterange-header { color: var(--ink-soft); }

/* ---------- DARK-01: lo que flota sobre la pantalla (hojas, inspector, buscador, modales, menu, SweetAlert) ----------
   Amaury: "cuando te sales de la pantalla principal como que no se aplico el tema en todos lados". La hoja de la reserva, el
   buscador y las cabeceras de modal tenian blancos fijos; ahora son tokens (app-shell.css / editorial.css) y aqui se
   redefinen. Claro: mismos valores de siempre. */
html.tema-oscuro {
  --app-material-hoja: rgba(31, 31, 36, 0.94);
  --app-material-barra: rgba(31, 31, 36, 0.95);
  --app-material-busca: rgba(31, 31, 36, 0.92);
  --app-relleno-suave: rgba(255, 255, 255, 0.07);
  --app-relleno: rgba(255, 255, 255, 0.09);
  --app-relleno-fuerte: rgba(255, 255, 255, 0.16);
  --app-velo: rgba(0, 0, 0, 0.55);
  --app-sombra-inspector: 0 0 0 1px var(--rule), 0 18px 50px -12px rgba(0, 0, 0, 0.75);
  --app-sombra-modal: 0 0 0 1px var(--rule), 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  --app-sombra-tarjeta: 0 0 0 1px var(--rule), 0 16px 40px -12px rgba(0, 0, 0, 0.75);
  /* cabecera de modales y del cajon: superficie elevada con texto claro (la "barra de tinta" del claro) */
  --cabeza-fondo: var(--bg-warm);
  --cabeza-tinta: var(--ink);
  --cabeza-relleno: rgba(255, 255, 255, 0.08);
  --cabeza-relleno-fuerte: rgba(255, 255, 255, 0.16);
}
html.tema-oscuro .modal-header, html.tema-oscuro .pms-drawer-header { box-shadow: inset 0 -1px 0 var(--rule); }
/* Logo de la barra de arriba: el PNG es blanco y en claro se invierte a negro; en oscuro va tal cual. */
html.tema-oscuro .pms-brand-logo { filter: none; }
/* Campos que no entran en la lista de editorial.css (search, tel, url...): en oscuro el navegador los pintaba blancos. */
html.tema-oscuro input[type=search], html.tema-oscuro input[type=tel], html.tema-oscuro input[type=url], html.tema-oscuro input[type=datetime-local], html.tema-oscuro input[type=month], html.tema-oscuro input[type=week] {
  background-color: var(--card-bg); color: var(--ink); border-color: var(--rule);
}
/* Calendario Ano: el dia reservado es blanco sobre cafe y la tarjeta sin sincronizar va al 72 %: en oscuro el cafe se hunde
   hacia el fondo (3.8:1); un cafe mas hondo deja el blanco en 5.8:1 tambien atenuado. */
html.tema-oscuro .cyr-day.cyr-reserved { background: #5c4826; }

/* SweetAlert2 (confirmaciones y toasts): su hoja propia es blanca. Sus selectores van con :where() (especificidad 0), asi
   que basta con la clase del tema. Mismos tokens que la hoja. */
html.tema-oscuro .swal2-popup { background: var(--card-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 64px -16px rgba(0, 0, 0, 0.8); }
html.tema-oscuro .swal2-title { color: var(--ink); }
html.tema-oscuro .swal2-html-container, html.tema-oscuro .swal2-footer { color: var(--ink-soft); }
html.tema-oscuro .swal2-footer { border-top-color: var(--rule); }
html.tema-oscuro .swal2-close { color: var(--ink-soft); }
html.tema-oscuro .swal2-close:hover { color: var(--ink); }
html.tema-oscuro .swal2-input, html.tema-oscuro .swal2-file, html.tema-oscuro .swal2-textarea, html.tema-oscuro .swal2-select { background: var(--bg-warm); color: var(--ink); border-color: var(--rule); }
html.tema-oscuro .swal2-validation-message { background: var(--ghost); color: var(--ink); }
html.tema-oscuro .swal2-timer-progress-bar { background: rgba(255, 255, 255, 0.3); }
html.tema-oscuro .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, 0.6); }
html.tema-oscuro .swal2-icon.swal2-success [class^=swal2-success-circular-line], html.tema-oscuro .swal2-icon.swal2-success .swal2-success-fix { background: var(--card-bg); }
/* Insignia informativa (.badge.bg-info): violeta sobre violeta hondo quedaba en 4.49:1; el violeta claro del tema da 6.9:1. */
html.tema-oscuro .badge.bg-info, html.tema-oscuro .badge.text-bg-info { color: var(--olive-dk) !important; }
/* Bandeja: tarjetas del hilo (Sitio web, Socio, pre-aprobar, escalacion) con fondo pastel fijo y tinta del tema (clara en
   oscuro = ilegible). unified-inbox.css las pinta con var(--ib-*, <color de siempre>); aqui la version oscura. */
html.tema-oscuro {
  --ib-ok-fondo: #13291b; --ib-ok-borde: #2f6b43;
  --ib-ko-fondo: #351a17; --ib-ko-borde: #7a3328; --ib-ko-anillo: #7a3328; --ib-ko-tinta: #ffb4a6;
  --ib-violeta: #b9b5fa;
  --ib-web-fondo: #12253a; --ib-web-borde: #1f4b6e; --ib-web-tinta: #8fd0ff;
  --ib-socio-fondo: #33172a; --ib-socio-borde: #6e2c55; --ib-socio-tinta: #f5a3c9;
}