/**
 * webfe — modo oscuro (sitio público).
 *
 * Aditivo: se carga último, después de style/components/layout/utilities/plaza.
 * No reemplaza ni reescribe esos archivos — layout.css y components.css usan
 * colores hardcodeados sin variables, así que en vez de refactorizarlos esta
 * hoja les pisa los mismos selectores puntualmente cuando `data-theme="dark"`
 * está presente en <html>. plaza.css sí es variable-driven (`--plz-*`), así
 * que ahí alcanza con redefinir el valor de esas variables acá.
 *
 * Ver docs/Bitacora Diseno.md para el detalle de esta sesión.
 */

[data-theme="dark"] {
  --plz-brand-deep: #FFA733;
  --plz-brand-tint: rgba(250, 140, 0, 0.16);
  --plz-brand-tint-line: rgba(250, 140, 0, 0.38);
  --plz-ink: #F2F0EC;
  --plz-text: #D6D2CB;
  --plz-text-muted: #A29D93;
  --plz-white: #242220;
  --plz-panel: #171613;
  --plz-line: #3A3733;
  --plz-shadow-soft: rgba(0, 0, 0, 0.45);
  --plz-shadow-brand: rgba(250, 140, 0, 0.3);
}

/* .ticker/.radio-player/.plz-footer usan --plz-ink como fondo (son barras
   oscuras "a propósito" incluso en tema claro) — al flippear --plz-ink a un
   valor claro para que sirva de color de texto en el resto del sitio, estos
   tres quedarían con fondo claro y texto blanco encima. Se fijan a un fondo
   oscuro propio, sin depender de --plz-ink. */
[data-theme="dark"] .ticker,
[data-theme="dark"] .radio-player,
[data-theme="dark"] .plz-footer {
  background: #0f0e0c;
}

/* ==================== base (style.css) ====================
 * Los selectores de acá van envueltos en :where(...) a propósito: eso les
 * saca peso de especificidad (:where() siempre cuenta 0), así quedan al
 * mismo nivel que la etiqueta sola. Alcanza para ganarle a style.css (que
 * también es solo la etiqueta, y esta hoja carga después), pero NO le gana
 * a ningún selector de plaza.css con clase (ej. `.plz-tramite-tile p`,
 * que sigue mandando su propio `--plz-text-muted`). Sin el :where(), estas
 * reglas quedarían con la misma especificidad que esas de plaza.css y, por
 * cargar último, se las comerían — texto muted terminaría igual que el
 * texto principal en un montón de componentes. */
:where([data-theme="dark"]) body { background: var(--plz-panel); color: var(--plz-ink); }
:where([data-theme="dark"]) h1, :where([data-theme="dark"]) h2, :where([data-theme="dark"]) h3,
:where([data-theme="dark"]) h4, :where([data-theme="dark"]) h5, :where([data-theme="dark"]) h6,
:where([data-theme="dark"]) p { color: var(--plz-ink); }
:where([data-theme="dark"]) small, :where([data-theme="dark"]) .small { color: var(--plz-text-muted); }
:where([data-theme="dark"]) code { background: var(--plz-white); color: var(--plz-ink); }
:where([data-theme="dark"]) a { color: var(--plz-brand); }
:where([data-theme="dark"]) a:hover { color: var(--plz-brand-deep); }
:where([data-theme="dark"]) hr { border-top-color: var(--plz-line); }
:where([data-theme="dark"]) thead { background: var(--plz-white); }
:where([data-theme="dark"]) th, :where([data-theme="dark"]) td { color: var(--plz-ink); border-bottom-color: var(--plz-line); }
:where([data-theme="dark"]) tbody tr:hover { background: var(--plz-white); }
:where([data-theme="dark"]) tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

/* ==================== botones (components.css) ==================== */
[data-theme="dark"] .btn-secondary { background: var(--plz-white); color: var(--plz-ink); border-color: var(--plz-line); }
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: var(--plz-panel); }
[data-theme="dark"] .btn-secondary:active:not(:disabled) { background: var(--plz-line); }

/* ==================== formularios (components.css) ==================== */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--plz-white);
  color: var(--plz-ink);
  border-color: var(--plz-line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--plz-text-muted); }
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled { background: var(--plz-panel); color: var(--plz-text-muted); }
[data-theme="dark"] .form-label { color: var(--plz-text); }
[data-theme="dark"] .form-text { color: var(--plz-text-muted); }

/* ==================== alerts (components.css) ==================== */
[data-theme="dark"] .alert-success { background: rgba(40, 167, 69, 0.16); color: #8fe3a6; border-color: #28a745; }
[data-theme="dark"] .alert-error { background: rgba(230, 82, 74, 0.16); color: #f3a7a2; border-color: #e6524a; }
[data-theme="dark"] .alert-info { background: rgba(30, 140, 158, 0.16); color: #8fd6e0; border-color: #1e8c9e; }
[data-theme="dark"] .alert-warning { background: rgba(255, 193, 7, 0.16); color: #ffe08a; border-color: #ffc107; }

/* ==================== cards (components.css) ==================== */
[data-theme="dark"] .card { background: var(--plz-white); border-color: var(--plz-line); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { background: var(--plz-panel); border-color: var(--plz-line); color: var(--plz-text-muted); }
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text { color: var(--plz-ink); }

/* ==================== badges (components.css) ==================== */
[data-theme="dark"] .badge-secondary { background: var(--plz-line); color: var(--plz-ink); }

/* ==================== modales (components.css) ==================== */
[data-theme="dark"] .modal-content { background: var(--plz-white); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--plz-line); background: var(--plz-panel); }
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-close { color: var(--plz-ink); }

/* ==================== auth (login/registro/olvidé contraseña) ====================
 * El resto del contenido de estas 3 vistas (login.php/register.php/
 * forgot_password.php) sigue teniendo bastante `style="color:#666;
 * background:#f9f9f9;..."` inline puntual (título, botón de Google, cajita
 * de "crear cuenta") — un atributo `style` inline le gana a cualquier regla
 * de hoja de estilos salvo `!important`, así que esos detalles menores se
 * quedan con su tono claro original en modo oscuro. Se resuelve el fondo de
 * página completo acá (era el que más se notaba, por tapar toda la pantalla)
 * y se deja el resto como límite conocido para una pasada futura si hace
 * falta más pulido en esas 3 vistas puntuales. */
[data-theme="dark"] .plz-auth-wrap { background: linear-gradient(135deg, var(--plz-panel) 0%, var(--plz-white) 100%); }

/* ==================== paginación (layout.css) ==================== */
[data-theme="dark"] .pagination-link { border-color: var(--plz-line); background: var(--plz-white); color: var(--plz-brand-deep); }
[data-theme="dark"] .pagination-link:hover:not(.disabled) { background: var(--plz-panel); }
[data-theme="dark"] .pagination-item.active .pagination-link { background: var(--plz-brand); color: #1a1408; border-color: var(--plz-brand); }

/* ==================== utilidades de color (utilities.css) ==================== */
[data-theme="dark"] .bg-white { background-color: var(--plz-white); }
[data-theme="dark"] .bg-light { background-color: var(--plz-panel); }
[data-theme="dark"] .bg-dark { background-color: #0f0e0c; }
[data-theme="dark"] .text-dark { color: var(--plz-ink); }
[data-theme="dark"] .text-secondary { color: var(--plz-text); }
[data-theme="dark"] .text-muted { color: var(--plz-text-muted); }
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right,
[data-theme="dark"] .border-1,
[data-theme="dark"] .border-2 { border-color: var(--plz-line); }
[data-theme="dark"] .icon.text-dark { color: var(--plz-ink); }
[data-theme="dark"] .icon.text-secondary { color: var(--plz-text); }
[data-theme="dark"] .icon.text-muted { color: var(--plz-text-muted); }