/* ============================================================================
   SIG_V1 — Tema oscuro (modo nocturno)
   ----------------------------------------------------------------------------
   Se activa con <html data-theme="dark"> (lo pone js/nucleo/tema.js y el
   script en línea del <head> de index.php, antes del primer pintado).
   Estrategia:
     1. Redefinir los design tokens de rediseno.css y las variables antiguas
        de estilos.css (--bg, --surface, --text...). Todo lo que ya usa tokens
        cambia solo.
     2. Overrides dirigidos a los colores fijos (hex) de estilos.css que más
        superficie ocupan: fondos de pantalla, tablas, campos, modales, admin.
     3. Los colores semánticos (rojo/verde/ámbar de estados y badges) NO se
        tocan: se conservan tal cual para que sigan significando lo mismo.
     4. Documentos generados (vistas *-print, membretes, certificados) e
        impresión quedan SIEMPRE en claro.
   Todo va dentro de @media screen: al imprimir no aplica nada de esto.
   Reversible: basta con quitar el <link> de index.php.
   ============================================================================ */

@media screen {

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Paleta de referencia del tema (propuesta del usuario) */
  --fondo:     #0f172a;
  --texto:     #e2e8f0;
  --panel:     #1e293b;
  --borde:     #334155;
  --boton:     #3b82f6;
  --resaltado: #1e3a5f;
  --tabla-par: #1e293b;

  /* Marca. REGLA DE CONTRASTE: fondo claro => letra oscura; fondo oscuro =>
     letra clara. Los tonos 500-900 se usan como FONDO de cabeceras y mosaicos
     con letra blanca, así que siguen siendo OSCUROS (antes se invertían a
     celeste y quedaba texto blanco sobre celeste). Solo 50-400 se invierten.
     Los pocos textos que usan 600-900 como color se aclaran en la sección 1b. */
  --c-brand-900: #0b1a38;
  --c-brand-800: #10244a;
  --c-brand-700: #163264;
  --c-brand-600: #1d3f78;
  --c-brand-500: #2856a8;
  --c-brand-400: #5b8fe0;
  --c-brand-300: #3d5f96;
  --c-brand-200: #2b4670;
  --c-brand-100: #1e3a5f;
  --c-brand-50:  #172a45;

  /* Neutros */
  --c-ink:       #e2e8f0;
  --c-ink-soft:  #b6c2d4;
  --c-ink-faint: #8a98ad;
  --c-line:      #334155;
  --c-line-soft: #273449;
  --c-surface:   #1e293b;
  --c-surface-2: #0f172a;
  --c-surface-3: #172033;

  /* Semánticos: mismo tono, fondos oscurecidos y texto aclarado (AA) */
  --c-success:    #4ade80;
  --c-success-bg: #12301f;
  --c-warning:    #fbbf24;
  --c-warning-bg: #3a2c0c;
  --c-danger:     #f87171;
  --c-danger-bg:  #3b1414;
  --c-info:       #60a5fa;
  --c-info-bg:    #132b4a;

  --sh-xs: 0 1px 2px rgba(0,0,0,.40);
  --sh-sm: 0 2px 6px rgba(0,0,0,.45);
  --sh-md: 0 6px 18px rgba(0,0,0,.50);
  --sh-lg: 0 14px 40px rgba(0,0,0,.60);
  --sh-focus: 0 0 0 3px rgba(59,130,246,.45);

  /* Variables antiguas de estilos.css (dashboard, dm-main...) */
  --surface-screen: #0f172a;
  --bg: #0f172a; --surface: #1e293b; --surface2: #172033; --surface3: #273449;
  --border: #334155; --border2: #475569;
  --text: #e2e8f0; --text2: #b6c2d4; --text3: #8a98ad;
  --green-dim: #12301f; --green-mid: #17402a; --red-dim: #3b1414;
  --orange-dim: #3a2410; --blue-dim: #132b4a; --amber-dim: #3a2c0c;
  --purple-dim: #261c4a;
}

/* ─── 1b. CONTRASTE: textos que usaban brand-600..900 como COLOR ─────────
   Con esos tonos oscuros, sobre superficies oscuras quedarían ilegibles.
   Fondo oscuro => letra clara. */
html[data-theme="dark"] .portal-h1,
html[data-theme="dark"] .portal-kpi-num,
html[data-theme="dark"] .portal-btn,
html[data-theme="dark"] .admin-pag-btn,
html[data-theme="dark"] .sfb-informe,
html[data-theme="dark"] #screen-salida .sfb-pagar,
html[data-theme="dark"] .menu-grid-brand-badge,
html[data-theme="dark"] .um-badge-vendido,
html[data-theme="dark"] .eye-btn:hover { color: #dbe7fb; }

/* "no-print" contiene la palabra "print" y caía en la regla que deja en claro
   los documentos imprimibles ([class*="print"]): la columna Acción de las
   tablas quedaba blanca. Se devuelve al tema de la tabla. */
html[data-theme="dark"] th[class*="print"].no-print {
  background: var(--c-brand-700) !important;
  color: #f1f5fb !important;
}
html[data-theme="dark"] td[class*="print"].no-print {
  background: transparent !important;
  color: var(--texto) !important;
}
html[data-theme="dark"] :not(th):not(td)[class*="print"].no-print {
  background: transparent !important;
  color: inherit !important;
}

/* ─── PORTADA (login) — regla de contraste fondo oscuro => letra clara ─────
   Medido el 2026-09-15: "H&G ASOCIADOS S.A.C" 1,33:1 y "Versión · entorno"
   1,17:1 (invisibles), SIG/Created 2,39, enlaces 2,7–3,2. Mínimo AA 4,5:1. */
html[data-theme="dark"] #screen-login .login-sig     { color: #9ec0f2 !important; }
html[data-theme="dark"] #screen-login .login-company { color: #dbe7fb !important; }
html[data-theme="dark"] #screen-login .login-created { color: #b6c8e6 !important; }
html[data-theme="dark"] #screen-login .login-version { color: #b6c2d4 !important; }
html[data-theme="dark"] #screen-login a             { color: #8fbcff !important; }
html[data-theme="dark"] #screen-login a:hover       { color: #cfe2ff !important; }
/* Botón principal (Iniciar / Guardar cambios): una regla de botones neutros le
   ponía letra #1e293b sobre el azul noche y el texto no se veía. */
html[data-theme="dark"] #screen-login .btn-iniciar,
html[data-theme="dark"] #screen-cambiar-clave .btn-iniciar {
  background: linear-gradient(135deg, #1d4fa8, #2a63c9) !important;
  color: #ffffff !important;
}
/* "✕ Salir" (2,42:1) y el ojo de la contraseña (3,37:1). */
html[data-theme="dark"] #screen-login .exit-btn-login { background: #b3261e !important; color: #ffffff !important; }
html[data-theme="dark"] #screen-login .eye-btn        { color: #cbd5e1 !important; }
html[data-theme="dark"] #screen-login .login-right span[style*="c62828"],
html[data-theme="dark"] #screen-login .login-right span[style*="#c62828"] { color: #ff8a8a !important; }

/* Listas desplegables de autocompletar (sal-cliente-list, epp-personal-list,
   sal-empresa-list...). Sus filas cambian el fondo a #fff / #e8f2fc por
   JavaScript (onmouseover/onmouseout), lo que dejaba letra clara sobre blanco:
   los nombres solo se leían al pasar el mouse. !important gana al estilo en línea. */
html[data-theme="dark"] [id$="-list"] {
  background: #111c30 !important;
  border-color: #3a5480 !important;
}
html[data-theme="dark"] [id$="-list"] > div {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-bottom-color: #26354d !important;
}
html[data-theme="dark"] [id$="-list"] > div:hover {
  background: #1d3f78 !important;
  color: #ffffff !important;
}

/* Cabeceras y mosaicos azules del Portal: fondo oscuro con letra clara. */
html[data-theme="dark"] .portal-card-title,
html[data-theme="dark"] .portal-modtile,
html[data-theme="dark"] .portal-modtile-lbl { color: #f1f5fb; }
html[data-theme="dark"] .portal-modtile { border: 1px solid #2f4d7e; }
html[data-theme="dark"] .portal-modtile-sub { color: #c9d6ea; opacity: 1; }

/* ─── 2. BASE ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] body { background: var(--fondo); color: var(--texto); }

html[data-theme="dark"] .screen,
html[data-theme="dark"] .submenu-split,
html[data-theme="dark"] .submenu-tiles,
html[data-theme="dark"] .submenu-content-block,
html[data-theme="dark"] [id^="screen-"]:not(#screen-login) { background-color: var(--fondo); }

html[data-theme="dark"] ::selection { background: rgba(59,130,246,.40); color: #fff; }

/* Barras de cabecera y estado: azul noche en vez del marino */
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .status-bar,
html[data-theme="dark"] .portal-bar {
  background: linear-gradient(180deg,#0b1224,#111c33);
  border-color: var(--borde);
}

/* ─── 3. CAMPOS ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #0b1324;
  color: var(--texto);
  border-color: var(--borde);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7c8aa0; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea[readonly] { background-color: #172033; color: #9fb0c6; }
html[data-theme="dark"] option { background: #1e293b; color: var(--texto); }
html[data-theme="dark"] label { color: inherit; }

/* ─── 4. TABLAS ─────────────────────────────────────────────────────────── */
/* estilos.css fuerza "table td { color:#000 }" — en oscuro se aclara. */
html[data-theme="dark"] table td { color: var(--texto); border-color: var(--borde); }
html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] table tbody td { background-color: var(--fondo); }
html[data-theme="dark"] table tbody tr:nth-child(even),
html[data-theme="dark"] table tbody tr:nth-child(even) td { background-color: var(--tabla-par); }
html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover td { background-color: var(--resaltado); }
/* Los thead azules se quedan azules (ya son oscuros con texto blanco) */
html[data-theme="dark"] [class*="table-wrap"],
html[data-theme="dark"] [class*="tabla-wrap"] { background: var(--panel); border-color: var(--borde); }

/* ─── 5. SUPERFICIES: tarjetas, paneles, cajas de modal ─────────────────── */
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .cfg-box,
html[data-theme="dark"] .cfg-item,
html[data-theme="dark"] .usr-box,
html[data-theme="dark"] .vr-box,
html[data-theme="dark"] .noti-item,
html[data-theme="dark"] .sub-cfg-fieldset,
html[data-theme="dark"] .admin-content,
html[data-theme="dark"] .admin-table-wrap,
html[data-theme="dark"] .admin-kpi-row > *,
html[data-theme="dark"] .admin-section-header,
html[data-theme="dark"] [class$="-card"],
html[data-theme="dark"] [class*="-card "],
html[data-theme="dark"] [class$="-panel"],
html[data-theme="dark"] [class*="-panel "],
html[data-theme="dark"] [class$="-box"],
html[data-theme="dark"] [class*="-box "],
html[data-theme="dark"] [class$="-field"],
html[data-theme="dark"] [class$="-fieldset"] {
  background-color: var(--panel);
  border-color: var(--borde);
  color: var(--texto);
}
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-sub,
html[data-theme="dark"] .admin-section-header h3 { color: var(--texto); }
html[data-theme="dark"] .admin-input { background-color: #0b1324; color: var(--texto); border-color: var(--borde); }
html[data-theme="dark"] .admin-form-row label { color: #b6c2d4; }

/* Estilos en línea con fondos claros frecuentes en los módulos */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background:#f"],
html[data-theme="dark"] [style*="background: #f"] { background: var(--panel) !important; }
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color:#1a"],
html[data-theme="dark"] [style*="color:#0a"] { color: var(--texto) !important; }

/* Botones neutros (grises/blancos). Los de color de estado no se tocan. */
html[data-theme="dark"] .modal-no,
html[data-theme="dark"] .admin-btn:not(.admin-btn-primary):not(.admin-btn-danger):not(.admin-btn-success) {
  background: #273449; color: var(--texto); border-color: var(--borde);
}

/* Imágenes/logos con fondo transparente pensados para claro: leve realce */
html[data-theme="dark"] .brand-corner-logo { filter: brightness(1.1); }

/* ─── 6. DOCUMENTOS: siempre en claro ───────────────────────────────────── */
/* Vistas previas de impresión, membretes, certificados y actas generadas se
   ven como el papel: se restauran los tokens claros dentro de ellas. */
html[data-theme="dark"] [id*="print"],
html[data-theme="dark"] [class*="print"],
html[data-theme="dark"] [class*="membrete"],
html[data-theme="dark"] [class*="certificado"],
html[data-theme="dark"] [class*="documento-hoja"],
html[data-theme="dark"] .doc-preview,
html[data-theme="dark"] iframe {
  color-scheme: light;
  --c-ink: #0f1b33; --c-ink-soft: #41506b; --c-surface: #ffffff;
  --c-surface-2: #f4f7fb; --c-line: #d2dcea;
  --texto: #1a202c; --fondo: #ffffff; --panel: #ffffff; --borde: #cbd5e1;
  --tabla-par: #f7fafc; --resaltado: #ebf8ff;
  background-color: #fff;
  color: #1a202c;
}

/* ─── 7. BOTÓN DE TEMA ──────────────────────────────────────────────────── */
}

/* El botón existe en ambos temas (fuera del bloque dark) */
.sig-tema-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px; padding: 5px 12px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.sig-tema-btn:hover { background: rgba(255,255,255,.22); }
.sig-tema-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.portal-bar .sig-tema-btn { margin-left: 0; }

@media print {
  .sig-tema-btn { display: none !important; }
}