/* ============================================================================
   tema-oscuro.css — modo oscuro de la parte publica
   ----------------------------------------------------------------------------
   Solo actua con <html data-theme="dark">, que pone el script del <head> de
   layout.html a partir de la preferencia guardada por el boton de la cabecera.
   Sin ese atributo esta hoja no cambia nada: el tema claro sigue siendo el de
   siempre.

   Casi todo el tema sale de redefinir los tokens de sistema.css y los
   heredados de dark.css. Lo que va debajo son los sitios que todavia llevan
   el color escrito a mano.

   Todos los selectores van prefijados con :root[data-theme="dark"]: varias
   paginas vuelven a enlazar dark.css, banner.css o 404.css dentro del <body>,
   despues de esta hoja, y con la misma especificidad nos pisarian.

   --primary/--secondary/--footerColor/--footerTextColor no se tocan: son del
   tenant.
   ========================================================================= */

:root[data-theme="dark"] {
    color-scheme: dark;

    /* --- heredados de dark.css (invertidos: --light es el fondo) ---------- */
    --light: #141312;
    --dark: #e7e5e2;
    --text: #e7e5e2;

    /* --- texto ------------------------------------------------------------ */
    --ink: #e7e5e2;
    --ink-muted: #a8a29e;
    --ink-faint: #8a837e;

    /* --- superficies ------------------------------------------------------ */
    --surface: #1e1c1b;
    --surface-sunken: #191716;

    /* --- lineas ----------------------------------------------------------- */
    --line: #34302d;
    --line-field: #4a4542;

    /* --- elevacion -------------------------------------------------------- */
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-raise: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .5);

    /* --- disponibilidad --------------------------------------------------- */
    --ok-bg: #16281a;
    --ok-fg: #8fd19a;
    --ok-line: #25452c;
    --warn-bg: #2d2312;
    --warn-fg: #e8b765;
    --warn-line: #4a3a1c;
    --hot-bg: #331b15;
    --hot-fg: #f0a08e;
    --hot-line: #552b21;
    --out-bg: #262423;
    --out-fg: #a8a29e;
    --out-line: #3a3633;

    /* --- banner.css ------------------------------------------------------- */
    --dark-gray: #5c5652;
}

/* ============================================================================
   Texto claro sobre relleno de marca
   Estas reglas usan var(--light) como "blanco" encima de --primary o
   --secondary. En oscuro --light pasa a ser el fondo de pagina, asi que hay
   que devolverles el blanco.
   ========================================================================= */
:root[data-theme="dark"] .seat-plan-wrapper li .movie-name .location-icon,
:root[data-theme="dark"] .page-title-area .date-item .date,
:root[data-theme="dark"] .single-seat .sit-num,
:root[data-theme="dark"] .tooltip > div,
:root[data-theme="dark"] .tarjeta_club a i,
:root[data-theme="dark"] .panel_puntos a i {
    color: #ffffff;
}

/* ============================================================================
   Superficies con el blanco escrito a mano
   ========================================================================= */
:root[data-theme="dark"] .preloader,
:root[data-theme="dark"] section.compra-valida,
:root[data-theme="dark"] .loading-content,
:root[data-theme="dark"] .checkout-widget.checkout-contact section,
:root[data-theme="dark"] .bg-one:not(.movie-content),
:root[data-theme="dark"] .panel-varios,
:root[data-theme="dark"] #booking-summery,
:root[data-theme="dark"] .disclaimer-modal {
    background-color: var(--surface);
}

:root[data-theme="dark"] .disclaimer-modal {
    border-color: var(--line);
}

:root[data-theme="dark"] .carrito-top::-webkit-scrollbar {
    background-color: var(--surface);
}

:root[data-theme="dark"] .loading-text,
:root[data-theme="dark"] .banner-cupon__title-bottom {
    color: var(--ink);
}

:root[data-theme="dark"] .close-modal-disclaimer {
    color: var(--ink-muted);
}

:root[data-theme="dark"] .loading-spinner {
    border-color: var(--line);
    border-top-color: var(--primary);
}

/* Bordes y textos grises del resumen de compra y de la pasarela. */
:root[data-theme="dark"] .booking-summery,
:root[data-theme="dark"] .checkout-widget .payment-option li a,
:root[data-theme="dark"] .checkout-widget.checkout-card .payment-card-form .form-group input {
    border-color: var(--line-field);
}

:root[data-theme="dark"] .booking-summery .side-shape .info-contenedor,
:root[data-theme="dark"] .datos-resumen > div {
    border-bottom-color: var(--line);
}

:root[data-theme="dark"] .booking-summery .title {
    color: var(--ink-muted);
}

/* Tintes claros del color de marca: en oscuro, mezcla con la superficie. */
/* :not(.ui-state-active) para no tapar el fondo del dia seleccionado. */
:root[data-theme="dark"] .bono-cultural-msg,
:root[data-theme="dark"] .diaconsesion a:not(.ui-state-active) {
    background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

:root[data-theme="dark"] .bono-cultural-msg {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--surface));
}

/* ============================================================================
   Modales
   SweetAlert (tiempo agotado, PMR, avisos de butacas...) trae el popup en
   blanco escrito a mano; sus reglas van con :where(), asi que cualquier clase
   les gana. Los <dialog> nativos y los de cupon tambien llevan el fondo fijo.
   ========================================================================= */
:root[data-theme="dark"] .swal2-popup,
:root[data-theme="dark"] dialog,
:root[data-theme="dark"] .cupon-descuento-second,
:root[data-theme="dark"] .cupon-especial-second {
    background-color: var(--surface);
    color: var(--ink);
}

:root[data-theme="dark"] .cupon-descuento-second,
:root[data-theme="dark"] .cupon-especial-second {
    border-color: var(--line);
}

:root[data-theme="dark"] .swal2-footer {
    border-top-color: var(--line);
}

:root[data-theme="dark"] .swal2-validation-message {
    background-color: var(--surface-sunken);
    color: var(--ink-muted);
}

:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea {
    border-color: var(--line-field);
}

:root[data-theme="dark"] .close-modal-descuento:hover,
:root[data-theme="dark"] .close-modal-especial:hover,
:root[data-theme="dark"] .close-modal-disclaimer:hover {
    color: var(--ink);
}

/* Aviso de tiempo agotado y contador del TPV: colores en el <style> de
   tpvIframe.html, con id, de ahi el id tambien aqui. */
:root[data-theme="dark"] #msgTiempoCompraAgotado,
:root[data-theme="dark"] .timeoutContainer {
    background-color: var(--surface);
    border-color: var(--line-field);
    color: var(--ink);
}

/* ============================================================================
   Etiquetas del patio (PMR, ESCENARIO...)
   El plano de butacas no cambia con el tema, asi que sus etiquetas tampoco:
   se devuelve el valor claro de --dark (dark.css). .infoEtiqueta ya lleva su
   gris fijo.
   ========================================================================= */
:root[data-theme="dark"] .screen-area .subtitle:not(.infoEtiqueta) {
    color: #535353;
}