/* ==========================================================================
   VisionLovers · MODO OSCURO (inc/modo-oscuro.php · interruptor VL_MODO_OSCURO) · 28/09/2026
   Solo con html[data-tema="oscuro"], que pone el botón ☾/☀. La web nace clara y NO sigue al aparato (norma 12 de Sergio).
   Sin !important. Contraste medido (texto sobre fondo de página #0b1220 / tarjeta #131d33):
     texto #e8eef7 16,0 / 14,4 · texto suave #b8c4d6 10,6 / 9,5 · texto claro #a3b1c6 8,6 / 7,7 · rosa que se lee #f5a3fb 10,3 / 9,2
     enlaces #8ccaf5 10,6 / 9,5 · neón #d946ef 5,4 / 4,9 · bordes de campo #6b7d99 4,5 / 4,0 (≥ 3) · blanco sobre botón #066aab 5,7
   ========================================================================== */

/* 1 · Tokens de la casa */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --vl-bg: #0b1220;
  --vl-bg-soft: #0f1729;
  --vl-bg-gray: #111b2e;
  --vl-bg-hero: #1b1231;
  --vl-bg-card: #131d33;
  --vl-text: #e8eef7;
  --vl-text-muted: #b8c4d6;
  --vl-text-light: #a3b1c6;
  --vl-border: #26344f;
  --vl-border-strong: #3b4d6e;
  --vl-border-field: #6b7d99;
  --vl-border-brand: #4a2356;
  --vl-primary-light: #3b1745;
  --vl-primary-dark: #f5a3fb;
  --vl-secondary-light: #0f2a44;
  --vl-secondary-dark: #8ccaf5;
  --vl-footer-bg: #050b16;
  --vl-footer-text: #e5f0ff;
  --vl-success: #4ade80;
  --vl-warning: #fdba74;
  --vl-danger: #fca5a5;
  --vl-info: #8ccaf5;
  --vl-success-bg: #12301f; --vl-warning-bg: #3a2410; --vl-danger-bg: #3a1414; --vl-info-bg: #0f2a44; /* avisos: texto 8,2–8,7 sobre su fondo */
  --vl-focus: #8ccaf5;
  --vl-texto-azul: #8ccaf5;
  --vl-fila-blanca: #0b1220; --vl-fila-gris: #0f1729; --vl-fila-lila: #1b1231; --vl-fila-azul: #0f2a44; /* filas de WPBakery (inc/modo-oscuro.php) */ /* solo en oscuro: el azul #066aab escrito como texto en el HTML de las páginas */
  --vl-neon-suave: #2a1433;
  --vl-sello-0-bg: #1c2740;
  --vl-sello-1-bg: #0f2a44;
  --vl-sello-2-bg: #3b1745;
  --vl-skeleton: #1c2740;
  --vl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --vl-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.45);
  --vl-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --vl-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  /* el neón luce de verdad en oscuro: halo y aro un punto más fuertes, la mancha también */
  --vl-halo: 0 10px 30px rgba(0, 0, 0, 0.5), 0 8px 36px rgba(var(--vl-neon-rgb), 0.30), 0 0 0 1px rgba(var(--vl-neon-rgb), 0.40);
  --vl-halo-fuerte: 0 14px 40px rgba(0, 0, 0, 0.55), 0 10px 48px rgba(var(--vl-neon-rgb), 0.42), 0 0 0 1px rgba(var(--vl-neon-rgb), 0.55);
  --vl-aro: 0 0 0 1px var(--vl-neon), 0 0 0 4px rgba(var(--vl-neon-rgb), 0.25);
  --vl-mancha: rgba(var(--vl-neon-rgb), 0.30);
  /* 2 · Woodmart */
  --wd-main-bgcolor: #0b1220;
  --bgcolor-white: #131d33;
  --bgcolor-white-rgb: 19, 29, 51;
  --bgcolor-gray-100: #111b2e;
  --bgcolor-gray-200: #111b2e;
  --bgcolor-gray-300: #1c2740;
  --color-gray-100: #111b2e;
  --color-gray-200: #1c2740;
  --color-gray-300: #3b4d6e;
  --color-gray-400: #6b7d99;
  --color-gray-500: #a3b1c6;
  --color-gray-600: #b8c4d6;
  --color-gray-700: #c9d3e1;
  --color-gray-800: #dbe3ee;
  --color-gray-900: #e8eef7;
  --wd-text-color: #b8c4d6;
  --wd-title-color: #e8eef7;
  --wd-entities-title-color: #e8eef7;
  --wd-entities-title-color-hover: #8ccaf5;
  --wd-widget-title-color: #e8eef7;
  --wd-link-color: #8ccaf5;
  --wd-link-color-hover: #b9defa;
  --wd-navigation-color: 232, 238, 247;
  --wd-form-brd-color: rgba(255, 255, 255, 0.22);
  --wd-form-brd-color-focus: rgba(255, 255, 255, 0.4);
  --wd-form-bg: #0f1729;
  /* 3 · Directorist y WPForms (sus variables) */
  --directorist-color-white: #131d33;
  --directorist-color-body: #b8c4d6;
  --directorist-color-dark: #e8eef7;
  --directorist-color-bg-light: #111b2e;
  --directorist-color-border: #26344f;
  --directorist-color-border-light: #26344f;
  --wpforms-field-background-color: #0f1729;
  --wpforms-field-text-color: #e8eef7;
  --wpforms-field-border-color: #6b7d99;
  --wpforms-label-color: #e8eef7;
  --wpforms-label-sublabel-color: #b8c4d6;
}

/* 4 · Fondos que Woodmart y los plugins ponen fijos (blanco) */
html[data-tema="oscuro"] body,
html[data-tema="oscuro"] body .website-wrapper,
html[data-tema="oscuro"] body .wd-page-content,
html[data-tema="oscuro"] body .main-page-wrapper { background-color: var(--vl-bg); color: var(--vl-text-muted); }
html[data-tema="oscuro"] body .whb-header .whb-row:not(.whb-top-bar),
html[data-tema="oscuro"] body .whb-header .whb-main-header,
html[data-tema="oscuro"] body .whb-sticked .whb-row,
html[data-tema="oscuro"] body nav.vl-barra-iconos,
html[data-tema="oscuro"] body .mobile-nav,
html[data-tema="oscuro"] body .wd-dropdown,
html[data-tema="oscuro"] body .wd-sub-menu,
html[data-tema="oscuro"] body .vl-cta-fija { background-color: var(--vl-bg); border-color: var(--vl-border); }
html[data-tema="oscuro"] body .whb-header .wd-nav-main > li > a,
html[data-tema="oscuro"] body .mobile-nav .wd-nav-mobile li a,
html[data-tema="oscuro"] body .whb-header .wd-tools-element > a { color: var(--vl-text); }
html[data-tema="oscuro"] body :is(h1, h2, h3, h4, h5, h6) { color: var(--vl-text); }
html[data-tema="oscuro"] body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea, .select2-selection) { background-color: #0f1729; color: var(--vl-text); border-color: var(--vl-border-field); }
html[data-tema="oscuro"] body ::placeholder { color: var(--vl-text-light); opacity: 1; }
/* Logo negro de la cabecera → blanco (el fichero no cambia) */
html[data-tema="oscuro"] body .whb-header .wd-logo img,
html[data-tema="oscuro"] body .whb-header .site-logo img { filter: brightness(0) invert(1); }
/* Enlaces y pastillas que usan el azul #066aab como color de TEXTO (3,3 sobre oscuro): el azul claro de enlaces */
html[data-tema="oscuro"] body :is(.vl-chip, .vl-btn--ghost, .vl-header-botones__enlace, .vl-listado__llegar, .vl-link, .vl-migas a, .breadcrumbs a, .vl-barra-iconos a[aria-current="page"], .vl-barra-iconos a[aria-current="page"] svg) { color: var(--vl-secondary-dark); }
html[data-tema="oscuro"] body .vl-btn--secondary { color: var(--vl-primary-dark); background-color: transparent; }
html[data-tema="oscuro"] body main :is(p, figcaption, dd) > a:not([class]) { color: var(--vl-secondary-dark); }
/* Las fotos no se oscurecen; los iconos de línea heredan el color del texto */
html[data-tema="oscuro"] body img { filter: none; }
html[data-tema="oscuro"] body .whb-header .wd-logo img { filter: brightness(0) invert(1); }

/* 5 · Amelia (reservador): sus colores van en variables en línea en #amelia-container; se redefinen un nivel por debajo */
html[data-tema="oscuro"] body #amelia-container > * {
  --am-c-main-bgr: #131d33; --am-c-main-text: #e8eef7; --am-c-main-heading-text: #e8eef7;
  --am-c-inp-bgr: #0f1729; --am-c-inp-text: #e8eef7; --am-c-inp-border: #6b7d99; --am-c-inp-placeholder: #a3b1c6;
  --am-c-drop-bgr: #131d33; --am-c-drop-text: #e8eef7; --am-c-card-bgr: #131d33; --am-c-card-text: #e8eef7; --am-c-card-border: #26344f;
  --am-c-select-text: #e8eef7;
  /* 29/09: el desplegable de «Seleccione el servicio» seguía blanco en oscuro (texto #a3b1c6 sobre blanco = 2,17). Fondo, borde y opciones oscuros. */
  --am-c-select-bgr: #0f1729; --am-c-select-border: #6b7d99; --am-c-select-placeholder: #a3b1c6; --am-c-select-option-bgr: #131d33; --am-c-select-option-text: #e8eef7; --am-c-select-text-op: #a3b1c6;
}

/* 5b · 29/09: Amelia vuelve a poner los colores del desplegable en línea en .am-select (fondo #FFFFFF): se redefinen en sus hijos.
   Medido en la web real: «Seleccione el servicio» #a3b1c6 sobre blanco = 2,17. Con esto, sobre #0f1729. */
html[data-tema="oscuro"] body #amelia-container .am-select > *,
html[data-tema="oscuro"] body .el-select-dropdown,
html[data-tema="oscuro"] body .am-select-popper {
  --am-c-select-bgr: #0f1729; --am-c-select-border: #6b7d99; --am-c-select-text: #e8eef7; --am-c-select-placeholder: #a3b1c6;
  --am-c-select-text-op: #a3b1c6; --am-c-select-option-bgr: #131d33; --am-c-select-option-text: #e8eef7;
}

/* 6 · El botón ☾/☀ (inc/modo-oscuro.php · assets/js/modo-oscuro.js) · también en claro */
html body button.vl-tema-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: var(--vl-radius-aro, 14px); background: transparent; box-shadow: none; color: var(--vl-text); font: 600 16px/1.2 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; transition: box-shadow 120ms ease-out, border-color 120ms ease-out; }
html body button.vl-tema-boton svg { width: 22px; height: 22px; flex: 0 0 22px; }
html body button.vl-tema-boton:hover { box-shadow: var(--vl-aro); }
html body button.vl-tema-boton:focus-visible { outline: 3px solid var(--vl-focus); outline-offset: 2px; }
html body button.vl-tema-boton--icono { width: 48px; padding: 0; }
html body .mobile-nav li.vl-tema-item { padding: 8px 8px; border-top: 1px solid var(--vl-border); } /* icono alineado con las demás entradas (20 px) */
html body .mobile-nav button.vl-tema-boton--menu { width: 100%; justify-content: flex-start; }
@media (max-width: 1200px) { html body .whb-general-header button.vl-tema-boton--icono { display: none; } }
@media (prefers-reduced-motion: reduce) { html body button.vl-tema-boton { transition: none; } }
/* Con el botón ☾/☀ (48 px) la cabecera no cabía entre 1201 y 1365 px (medido: el último botón acababa 39 px fuera a 1201).
   En ese tramo «Entrar» se queda en su icono de persona (48 × 48); la palabra sigue ahí para los lectores de pantalla
   (letra a 0 px, no display:none). Medido después: cabe en 1201 · 1280 · 1366 · 1440 · 1600 · 1800 · 1920. */
@media (min-width: 1201px) and (max-width: 1365px) {
  html body .whb-general-header .vl-header-botones:has(> .vl-tema-boton) a.vl-header-botones__enlace[href*="/login"] { justify-content: center; width: 48px; min-width: 48px; padding: 0; font-size: 0; gap: 0; }
  html body .whb-general-header .vl-header-botones:has(> .vl-tema-boton) a.vl-header-botones__enlace[href*="/login"] svg { width: 22px; height: 22px; }
  html body .whb-general-header .vl-header-botones:has(> .vl-tema-boton) { gap: 2px; }
}
@media (min-width: 1201px) and (max-width: 1439px) {
  html body.vl-df .whb-header:has(.vl-tema-boton) .wd-nav.wd-nav-main > li > a { padding-inline: 4px; }
}
@media (min-width: 1201px) and (max-width: 1319px) {
  html body .whb-general-header .vl-header-botones:has(> .vl-tema-boton) .vl-btn { padding-left: 14px; padding-right: 14px; }
  html body.vl-df .whb-header:has(.vl-tema-boton) .wd-nav.wd-nav-main > li > a { padding-inline: 3px; font-size: 12px; }
  html body.vl-df .whb-header:has(.vl-tema-boton) .whb-col-left :is(.wd-logo, .site-logo) img { max-height: 26px; }
}

/* 7 · Medido con axe en oscuro (28/09): el azul #066aab se usa como fondo de botón (blanco encima: 5,7 ✓) y como color de texto
   (sobre #0b1220: 3,3 ✗). El fondo se queda; el TEXTO azul pasa al azul claro de enlaces (#8ccaf5, 10,6). */
html[data-tema="oscuro"] body a:not(:is(.vl-btn, .btn, .button, [class*="btn"], [class*="button"], .vl-chip, .page-numbers, .woodmart-nav-link, .vl-cta-fija__principal, .vl-cta-fija__contacto)) { color: var(--vl-secondary-dark); }
html[data-tema="oscuro"] body :is(.vl-ficha__dato, .vl-ficha__direccion, .vl-center-card__location, .vl-donde__direccion, .vl-entrada__meta, .vl-autor__datos, .vl-ficha-acciones__direccion, .vl-404__salidas) svg,
html[data-tema="oscuro"] body :is(.vl-accordion__icon, .vl-icons__item[aria-current="page"], .vl-plantilla-aux .vl-aux__card .vl-aux__resalte) { color: var(--vl-secondary-dark); }
/* Botón blanco (sobre la franja azul): el texto vuelve al azul oscuro, el botón sigue blanco */
html[data-tema="oscuro"] body a.vl-btn.vl-btn--white { background-color: #ffffff; color: #035377; }
/* WhatsApp: el verde de fondo se queda oscuro (#15803d, blanco encima 5,0); el verde claro #4ade80 es solo para textos */
html[data-tema="oscuro"] body .vl-btn--whatsapp { background-color: #15803d; border-color: #15803d; color: #ffffff; }
/* Sellos, insignias y la caja verde «Ficha revisada»: fondos claros fijos → sus versiones oscuras */
html[data-tema="oscuro"] body .vl-badge--verificado,
html[data-tema="oscuro"] body .vl-badge { background-color: #12301f; color: #4ade80; }
html[data-tema="oscuro"] body .vl-revisado.vl-card { background-color: #12301f; color: #cfe9d9; }
html[data-tema="oscuro"] body .vl-revisado.vl-card a { color: #8ccaf5; }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-0 { background-color: var(--vl-sello-0-bg); color: var(--vl-text-muted); }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-0 .vl-sello__texto { color: var(--vl-text-muted); }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-1 { background-color: var(--vl-sello-1-bg); color: #8ccaf5; }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-1 .vl-sello__texto { color: #8ccaf5; }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-2 { background-color: var(--vl-sello-2-bg); color: #f5a3fb; }
html[data-tema="oscuro"] body .vl-sello.vl-sello--nivel-2 .vl-sello__texto { color: #f5a3fb; }
/* Filas de WPBakery con fondo propio (su CSS de página pone, p. ej., .vc_custom_…{background-color:#fff}): en oscuro, el fondo
   suave de la casa. Solo el color: si una fila lleva foto de fondo, la foto se queda. */
html[data-tema="oscuro"] body .vc_row.vc_row-has-fill,
html[data-tema="oscuro"] body .vc_row.vc_row-has-fill > .vc_column_container > .vc_column-inner { background-color: var(--vl-bg-soft); }

/* 8 · Medido con axe en oscuro a 375 (28/09, 64 páginas): el título antiguo de Woodmart (franja lila de /wishlist/ y
   /formulario-alta-profesionales/) conservaba su fondo claro. */
html[data-tema="oscuro"] body .page-title { background-color: var(--vl-bg-hero); }
html[data-tema="oscuro"] body .page-title :is(.title, h1) { color: var(--vl-text); }
/* Últimos 6 de axe en oscuro (28/09): código en «Condiciones de uso» (#a52a2a de Woodmart), pestaña no activa del login (#3e3e3e),
   aviso naranja de Directorist (/checkout/) y «Recuperar la contraseña» (/sign-in/). */
html[data-tema="oscuro"] body main code { color: #fca5a5; background-color: #1c2740; }
html[data-tema="oscuro"] body .vl-tabs-login .vl-tab-btn { color: var(--vl-text-muted); }
html[data-tema="oscuro"] body .vl-tabs-login .vl-tab-btn.vl-active { color: var(--vl-text); }
html[data-tema="oscuro"] body .directorist-alert { background-color: #3a2410; color: #fdba74; }
html[data-tema="oscuro"] body .directorist-alert a,
html[data-tema="oscuro"] body .vl-plantilla-aux .vl-aux .vl-aux__card .directorist-authentication__form__actions a.atbdp_recovery_pass,
html[data-tema="oscuro"] body .vl-plantilla-aux .vl-aux .vl-aux__card :is(a, button).directorist-authentication__btn--signup { color: var(--vl-secondary-dark); }