/*
 * Archivo propiedad de Z-Bombilla Spain, S.L con cif B54689120
 *  Prohibido la utilizacion de este fichero salvo acuerdo legal.
 */

/* ==========================================================================
   Modo noche de los paneles del WAR de Amazon.

   Lo carga tema.jsp (solo en paneles con alguien dentro) y todo cuelga de
   [data-bs-theme="dark"], que pone tema.jsp en <html>. Con el tema claro,
   este fichero no hace nada.

   Tres capas, en este orden:
     1. Variables. El tema de la web (main.css, plantilla Selecao) y Bootstrap
        5.3 pintan casi todo con variables; cambiándolas aquí se da la vuelta a
        fondos, textos, tarjetas, tablas, modales y formularios sin tocar nada
        más. Las de Bootstrap se igualan a las del tema para que una tarjeta
        no sea de otro gris que la página.
     2. Utilidades de Bootstrap que NO cambian solas con data-bs-theme:
        .bg-light, .bg-white, .text-dark, .table-light...
     3. Colores escritos a mano en las CSS y <style> de cada panel. Es la capa
        que hay que ampliar cuando un panel salga con un blanco suelto: se
        añade aquí, con el selector del panel, sin tocar su CSS.

   Los selectores por [style*="..."] de la capa 3 son a propósito: hay fondos
   claros en style="" dentro de JSP y de JS que pintan filas. Tocarlos uno a
   uno es tocar cinco paneles para una preferencia; aquí se cubren de una vez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root[data-bs-theme="dark"] {
    --zb-o-fondo: #1b1d26;
    --zb-o-superficie: #242733;
    --zb-o-superficie-2: #2d3140;
    --zb-o-hover: #353a4b;
    --zb-o-borde: #3a3f51;
    --zb-o-texto: #d5d8e1;
    --zb-o-texto-suave: #9aa0b1;
    --zb-o-titulo: #f2f3f7;
    --zb-o-enlace: #6ea8fe;
    --zb-o-seleccion: #2b3a55;

    /* Tema (main.css) */
    --background-color: var(--zb-o-fondo);
    --default-color: var(--zb-o-texto);
    --heading-color: var(--zb-o-titulo);
    --surface-color: var(--zb-o-superficie);
    --nav-mobile-background-color: var(--zb-o-superficie);
    --nav-dropdown-background-color: var(--zb-o-superficie);
    --nav-dropdown-color: var(--zb-o-texto);

    /* Bootstrap 5.3 */
    --bs-body-bg: var(--zb-o-fondo);
    --bs-body-bg-rgb: 27, 29, 38;
    --bs-body-color: var(--zb-o-texto);
    --bs-body-color-rgb: 213, 216, 225;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(213, 216, 225, 0.7);
    --bs-secondary-bg: var(--zb-o-superficie-2);
    --bs-tertiary-bg: var(--zb-o-superficie);
    --bs-tertiary-bg-rgb: 36, 39, 51;
    --bs-border-color: var(--zb-o-borde);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
}

/* .light-background del tema fija su propio gris claro. */
[data-bs-theme="dark"] .light-background {
    --background-color: var(--zb-o-superficie);
    --surface-color: var(--zb-o-superficie-2);
}

/* Superficies: un escalón por encima del fondo para que se distingan. */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--zb-o-superficie);
    --bs-card-cap-bg: var(--zb-o-superficie-2);
    --bs-card-border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .modal {
    --bs-modal-bg: var(--zb-o-superficie);
    --bs-modal-border-color: var(--zb-o-borde);
    --bs-modal-header-border-color: var(--zb-o-borde);
    --bs-modal-footer-border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--zb-o-superficie);
    --bs-dropdown-border-color: var(--zb-o-borde);
    --bs-dropdown-link-hover-bg: var(--zb-o-hover);
}
[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--zb-o-superficie);
    --bs-list-group-border-color: var(--zb-o-borde);
    --bs-list-group-action-hover-bg: var(--zb-o-hover);
}
[data-bs-theme="dark"] .offcanvas {
    --bs-offcanvas-bg: var(--zb-o-superficie);
}
[data-bs-theme="dark"] .popover {
    --bs-popover-bg: var(--zb-o-superficie-2);
    --bs-popover-header-bg: var(--zb-o-hover);
    --bs-popover-border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--zb-o-superficie);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--zb-o-superficie-2);
}

/* --------------------------------------------------------------------------
   2. Utilidades de Bootstrap que no se dan la vuelta solas
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--zb-o-superficie-2) !important;
}
[data-bs-theme="dark"] .bg-white {
    background-color: var(--zb-o-superficie) !important;
}
/* text-dark sobre amarillo o azul claro (badges de aviso) se queda oscuro:
   esos fondos no cambian con el tema. */
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info),
[data-bs-theme="dark"] .text-black:not(.bg-warning):not(.bg-info) {
    color: var(--zb-o-texto) !important;
}
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--zb-o-titulo);
    --bs-table-bg: var(--zb-o-superficie-2);
    --bs-table-border-color: var(--zb-o-borde);
    --bs-table-striped-bg: var(--zb-o-hover);
    --bs-table-striped-color: var(--zb-o-titulo);
    --bs-table-active-bg: var(--zb-o-hover);
    --bs-table-active-color: var(--zb-o-titulo);
    --bs-table-hover-bg: var(--zb-o-hover);
    --bs-table-hover-color: var(--zb-o-titulo);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--zb-o-texto);
    --bs-btn-bg: var(--zb-o-superficie-2);
    --bs-btn-border-color: var(--zb-o-borde);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--zb-o-hover);
    --bs-btn-hover-border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--zb-o-texto);
    --bs-btn-border-color: var(--zb-o-texto-suave);
    --bs-btn-hover-color: var(--zb-o-fondo);
    --bs-btn-hover-bg: var(--zb-o-texto);
    --bs-btn-hover-border-color: var(--zb-o-texto);
}

/* Select2 viene en claro y no sabe nada de data-bs-theme. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-results__option {
    color: var(--zb-o-texto) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--zb-o-seleccion);
    color: #ffffff !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--zb-o-hover);
}
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--zb-o-fondo);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}

/* --------------------------------------------------------------------------
   3. Colores escritos a mano en los paneles
   -------------------------------------------------------------------------- */

/* Fondos claros en style="" (JSP y JS). */
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#fff;"],
[data-bs-theme="dark"] [style*="background: #fff;"] {
    background: var(--zb-o-superficie-2) !important;
    color: var(--zb-o-texto);
}
/* El aviso amarillo se queda amarillo, pero con el texto oscuro: heredaría
   el claro de la página y no se leería. */
[data-bs-theme="dark"] [style*="background:#fff3cd"] {
    color: #664d03 !important;
}

/* Enlaces azules de Bootstrap: el #0d6efd casi no se lee sobre oscuro. */
[data-bs-theme="dark"] .link-asin,
[data-bs-theme="dark"] a.link-asin,
[data-bs-theme="dark"] #tablaPedidos a.link-pedido,
[data-bs-theme="dark"] .obs-loc-set,
[data-bs-theme="dark"] .obs-copy-btn:hover {
    color: var(--zb-o-enlace);
}

/* /pedidos (assets/css/pedidos/pedidos.css) */
[data-bs-theme="dark"] .stats-bar,
[data-bs-theme="dark"] .amazon-order-card {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .amazon-order-card-header {
    background: var(--zb-o-superficie-2);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .stat-divider {
    background: var(--zb-o-borde);
}
[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .agencia-fecha {
    color: var(--zb-o-texto-suave);
}
[data-bs-theme="dark"] .agencia-nombre,
[data-bs-theme="dark"] .filtro-usuario-amazon + .select2-container .select2-selection__rendered {
    color: var(--zb-o-texto);
}

/* /pedidos, panel de TikTok (assets/css/pedidos/pedidosTiktok.css) */
[data-bs-theme="dark"] .tk-card,
[data-bs-theme="dark"] .tk-toast {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tk-card-cabecera,
[data-bs-theme="dark"] .tk-obs-pred {
    background: var(--zb-o-superficie-2);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tk-card-col:first-child,
[data-bs-theme="dark"] .tk-card-seccion {
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tk-link-pedido,
[data-bs-theme="dark"] .tk-obs-propia {
    color: var(--zb-o-enlace);
}
[data-bs-theme="dark"] .tk-obs-predefinida {
    color: #b197fc;
}
[data-bs-theme="dark"] .tk-variante,
[data-bs-theme="dark"] .tk-obs-original,
[data-bs-theme="dark"] .tk-card-etiqueta,
[data-bs-theme="dark"] .tk-calculando,
[data-bs-theme="dark"] .tk-conf-omitido {
    color: var(--zb-o-texto-suave);
}
[data-bs-theme="dark"] .tk-grupo-linea {
    background: var(--zb-o-superficie-2) !important;
}
[data-bs-theme="dark"] .tk-grupo-chip {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tk-grupo-chip-principal {
    border-color: var(--zb-o-titulo);
}
[data-bs-theme="dark"] .tk-chip-3pl,
[data-bs-theme="dark"] .tk-medidas-propio {
    background: var(--zb-o-seleccion);
    color: var(--zb-o-enlace);
}
[data-bs-theme="dark"] .tk-chip-otro,
[data-bs-theme="dark"] .tk-medidas-tiktok,
[data-bs-theme="dark"] .tk-plazo-et {
    background: var(--zb-o-superficie-2);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tk-chip-4pl,
[data-bs-theme="dark"] .tk-logo-tiktok,
[data-bs-theme="dark"] .tk-cabecera-tienda {
    background: #000;
    box-shadow: 0 0 0 1px var(--zb-o-borde);
}
[data-bs-theme="dark"] .tk-alertas,
[data-bs-theme="dark"] .tk-plazo-espera {
    color: #ffda6a;
}
[data-bs-theme="dark"] .tk-aviso-agencia,
[data-bs-theme="dark"] .tk-conf-error {
    color: #ea868f;
}
[data-bs-theme="dark"] .tk-conf-ok {
    color: #75b798;
}
[data-bs-theme="dark"] .tk-sel-cuenta + .select2-container .select2-selection--single {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tk-sel-cuenta + .select2-container .select2-selection__rendered {
    color: var(--zb-o-texto);
}

/* /pedidos, panel de Temu (assets/css/pedidos/pedidosTemu.css). Todo acotado
   bajo .tm-pedidos (el panel) o [id^="tmModal"] (sus modales): este fichero se
   carga en todas las páginas, y el panel de productos de Temu usa el mismo id
   #zbpContenidoTemu y sus propias clases tm-* (por eso no sirve acotar por id).
   .tm-logo-temu y .tm-cabecera-tienda mantienen el naranja de Temu. */
[data-bs-theme="dark"] .tm-pedidos .tm-card,
[data-bs-theme="dark"] .tm-pedidos .tm-toast {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tm-pedidos .tm-card-cabecera,
[data-bs-theme="dark"] [id^="tmModal"] .tm-obs-pred {
    background: var(--zb-o-superficie-2);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tm-pedidos .tm-card-col:first-child,
[data-bs-theme="dark"] .tm-pedidos .tm-card-seccion {
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tm-pedidos .tm-pedido,
[data-bs-theme="dark"] .tm-pedidos .tm-obs-propia {
    color: var(--zb-o-enlace);
}
[data-bs-theme="dark"] .tm-pedidos .tm-obs-predefinida {
    color: #b197fc;
}
[data-bs-theme="dark"] .tm-pedidos .tm-linea-variante,
[data-bs-theme="dark"] [id^="tmModal"] .tm-obs-original,
[data-bs-theme="dark"] .tm-pedidos .tm-card-etiqueta,
[data-bs-theme="dark"] .tm-pedidos .tm-calculando,
[data-bs-theme="dark"] .tm-pedidos .tm-conf-omitido {
    color: var(--zb-o-texto-suave);
}
[data-bs-theme="dark"] .tm-pedidos .tm-grupo-linea {
    background: var(--zb-o-superficie-2) !important;
}
[data-bs-theme="dark"] .tm-pedidos .tm-grupo-chip {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tm-pedidos .tm-grupo-chip-principal {
    border-color: var(--zb-o-titulo);
}
[data-bs-theme="dark"] .tm-pedidos .tm-medidas-propio {
    background: var(--zb-o-seleccion);
    color: var(--zb-o-enlace);
}
[data-bs-theme="dark"] .tm-pedidos .tm-chip-info,
[data-bs-theme="dark"] .tm-pedidos .tm-chip-otro,
[data-bs-theme="dark"] .tm-pedidos .tm-medidas-temu,
[data-bs-theme="dark"] .tm-pedidos .tm-plazo-et {
    background: var(--zb-o-superficie-2);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .tm-pedidos .tm-chip-firma {
    background: var(--zb-o-superficie-2);
    color: #b197fc;
}
[data-bs-theme="dark"] .tm-pedidos .tm-logo-temu {
    background: #FB7701;
    color: #fff;
}
[data-bs-theme="dark"] .tm-pedidos .tm-cabecera-tienda {
    color: #FB7701;
}
[data-bs-theme="dark"] .tm-pedidos .tm-alertas,
[data-bs-theme="dark"] .tm-pedidos .tm-plazo-espera {
    color: #ffda6a;
}
[data-bs-theme="dark"] .tm-pedidos .tm-aviso-agencia,
[data-bs-theme="dark"] .tm-pedidos .tm-conf-error {
    color: #ea868f;
}
[data-bs-theme="dark"] .tm-pedidos .tm-conf-ok {
    color: #75b798;
}
[data-bs-theme="dark"] .tm-pedidos .tm-sel-cuenta + .select2-container .select2-selection--single {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .tm-pedidos .tm-sel-cuenta + .select2-container .select2-selection__rendered {
    color: var(--zb-o-texto);
}

/* /productos (<style> de productosAmazon.jsp) */
[data-bs-theme="dark"] .fila-expandida > td {
    background: var(--zb-o-superficie-2) !important;
    border-top-color: var(--zb-o-borde) !important;
}
[data-bs-theme="dark"] tr.fila-activa > td {
    background-color: var(--zb-o-seleccion) !important;
}

/* /resumenPedidos (<style> de resumenPedidosAmazon.jsp) */
[data-bs-theme="dark"] .etiqueta-card {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .agencia-grupo-header {
    background: var(--zb-o-superficie-2);
    color: var(--zb-o-texto);
}

/* /automatizaciones (<style> de automatizacionesAmazon.jsp) */
[data-bs-theme="dark"] .seccion-titulo,
[data-bs-theme="dark"] .stat-box .stat-label {
    color: var(--zb-o-texto-suave);
}

/* /obsPredefinidas (assets/css/observaciones/obsPredefinidaMaster.css) */
[data-bs-theme="dark"] .obs-upsell-card,
[data-bs-theme="dark"] .obs-huerfano-card,
[data-bs-theme="dark"] .obs-card {
    background: var(--zb-o-superficie);
    border-color: var(--zb-o-borde);
}
[data-bs-theme="dark"] .obs-upsell-badge,
[data-bs-theme="dark"] .obs-upsell-plan-actual,
[data-bs-theme="dark"] .obs-thumb-placeholder,
[data-bs-theme="dark"] .det-variante-row,
[data-bs-theme="dark"] .obs-fuera-catalogo-body {
    background: var(--zb-o-superficie-2);
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .obs-huerfano-card-header-asin,
[data-bs-theme="dark"] .obs-variante-obs-linea {
    color: var(--zb-o-texto);
}
[data-bs-theme="dark"] .obs-huerfano-card-header-nombre,
[data-bs-theme="dark"] .obs-variante-fecha {
    color: var(--zb-o-texto-suave);
}
[data-bs-theme="dark"] .obs-fuera-catalogo-toggle {
    background: var(--zb-o-seleccion);
    color: var(--zb-o-enlace) !important;
}
[data-bs-theme="dark"] .obs-fuera-catalogo-toggle:hover {
    background: var(--zb-o-hover);
    color: var(--zb-o-enlace) !important;
}