/* ============================================================
   cabecera.css · VISIONLOVERS · Sistema VL 1.1 (24/09/2026)
   La cabecera de Woodmart (Header Builder «Header Medical Overlap»,
   id header_986247), vestida. Selectores medidos en la web viva.
   Objetivo del encargo: en móvil la cabecera entera mide ≤ 120 px
   (60 del logo + 56 de la barra de iconos = 116) y pegada ≤ 64 (60).
   En tableta (768–1024) se usa la misma cabecera que en móvil: es donde
   la versión anterior se rompía (botones que se salían, barra a dos filas).
   Cero !important: este fichero carga después de Woodmart.
   Alturas y colores: tokens.css (--vl-header-*).
   ============================================================ */

/* ---------- 1 · Fila del logo (móvil y tableta) ---------- */
@media (max-width: 1024px) {
  .whb-header .whb-main-header, .whb-header .whb-general-header, .whb-header .whb-column { height: var(--vl-header-h); min-height: var(--vl-header-h); }
  .whb-header .whb-main-header { background: var(--vl-bg); border-bottom: 1px solid var(--vl-border); }
  .whb-header .site-logo img, .whb-header .wd-logo img { max-height: 40px; width: auto; }
  /* El botón de menú (hamburguesa) y el de cuenta miden 48 px, no 30 */
  .whb-header .wd-tools-element > a, .whb-header .wd-header-mobile-nav > a { min-width: var(--vl-touch); min-height: var(--vl-touch); display: inline-flex; align-items: center; justify-content: center; color: var(--vl-text); }
}

/* ---------- 2 · Cabecera pegada (sticky): solo la fila del logo, más compacta ---------- */
.whb-header.whb-sticked .whb-main-header { background-color: var(--vl-bg); box-shadow: var(--vl-shadow-xs); height: var(--vl-header-sticky-h); min-height: var(--vl-header-sticky-h); }
.whb-header.whb-sticked .whb-main-header .whb-general-header, .whb-header.whb-sticked .whb-main-header .whb-column { height: var(--vl-header-sticky-h); min-height: var(--vl-header-sticky-h); }
.whb-header.whb-sticked .whb-header-bottom { display: none; }   /* pegada, la barra de iconos se recoge */
@media (min-width: 1025px) {
  .whb-header.whb-sticked .whb-main-header, .whb-header.whb-sticked .whb-main-header .whb-general-header, .whb-header.whb-sticked .whb-main-header .whb-column { height: 64px; min-height: 64px; }
}

/* ---------- 3 · Escritorio: 76 px, menú + un solo botón principal ---------- */
@media (min-width: 1025px) {
  .whb-header .whb-main-header, .whb-header .whb-general-header, .whb-header .whb-column { height: var(--vl-header-desktop-h); min-height: var(--vl-header-desktop-h); }
  .whb-header .whb-main-header { background: var(--vl-bg); border-bottom: 1px solid var(--vl-border); }
  .whb-header .whb-column-right { display: flex; align-items: center; gap: var(--vl-space-sm); }
  .whb-header-bottom { display: none; }   /* la barra de iconos es de móvil/tableta */
}

/* ---------- 4 · Enlaces del menú: gris oscuro legible (10,5:1), no el #838383 del tema ---------- */
.whb-header a.woodmart-nav-link, .mobile-nav a.woodmart-nav-link, .wd-nav a.woodmart-nav-link { color: var(--vl-text); font-size: var(--vl-font-small); font-weight: 500; }
.whb-header a.woodmart-nav-link:hover, .wd-nav a.woodmart-nav-link:hover { color: var(--vl-secondary); }
.wd-nav > li.current-menu-item > a.woodmart-nav-link { color: var(--vl-secondary-dark); box-shadow: inset 0 -2px 0 var(--vl-secondary); }
.mobile-nav a.woodmart-nav-link { min-height: var(--vl-touch); font-size: var(--vl-font-body); }

/* ---------- 5 · Barra de aviso superior (si se activa): azul de marca, letra blanca ---------- */
.header-banner.wd-hb { background-color: var(--vl-secondary); }
.header-banner, .header-banner p, .wd-hb-wrapp.color-scheme-light, .wd-hb-wrapp.color-scheme-light p { color: var(--vl-on-color); }

/* ---------- 6 · Botones de la cabecera (bloque HTML 11505 «vl-header-botones») ----------
   Un solo botón principal («Empezar el triaje»), el resto como enlaces.  */
.vl-header-botones { display: flex; align-items: center; gap: var(--vl-space-sm); flex-wrap: nowrap; }
.vl-header-botones .vl-btn { min-height: 44px; padding: 8px var(--vl-space-md); font-size: var(--vl-font-small); white-space: nowrap; }
.vl-header-botones__enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 8px var(--vl-space-sm); color: var(--vl-secondary-dark); font-weight: 600; font-size: var(--vl-font-small); border-radius: var(--vl-radius-pill); white-space: nowrap; }
.vl-header-botones__enlace:hover { background: var(--vl-bg-gray); text-decoration: none; }
@media (max-width: 1024px) { .vl-header-botones__enlace { display: none; } }   /* en móvil/tableta solo queda el botón */
@media (max-width: 1024px) { .vl-header-botones .vl-btn { padding: 8px 12px; font-size: var(--vl-font-caption); min-height: 40px; } .vl-header-botones .vl-btn__icon { display: none; } }
/* Los enlaces del builder que ya existen (por href) heredan el mismo estilo, para no dejar dos versiones */
.whb-header a[href*="triaje"]:not(.vl-btn):not(.woodmart-nav-link), .whb-mobile-header a[href*="triaje"]:not(.vl-btn):not(.woodmart-nav-link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px var(--vl-space-md);
  background: var(--vl-secondary); color: var(--vl-on-color); border: 2px solid var(--vl-secondary);
  border-radius: var(--vl-radius-pill); font-weight: 600; font-size: var(--vl-font-small); white-space: nowrap; text-decoration: none;
  transition: background var(--vl-transition-normal);
}
.whb-header a[href*="triaje"]:not(.vl-btn):not(.woodmart-nav-link):hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
.whb-header a[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link), .whb-header a[href*="login"]:not(.vl-btn):not(.woodmart-nav-link), .whb-header a[href*="reserva-tu-cita"]:not(.vl-btn):not(.woodmart-nav-link) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px var(--vl-space-sm); color: var(--vl-secondary-dark); font-weight: 600; font-size: var(--vl-font-small); border-radius: var(--vl-radius-pill); white-space: nowrap; text-decoration: none;
}
.whb-header a[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link):hover, .whb-header a[href*="login"]:not(.vl-btn):not(.woodmart-nav-link):hover, .whb-header a[href*="reserva-tu-cita"]:not(.vl-btn):not(.woodmart-nav-link):hover { background: var(--vl-bg-gray); }
@media (max-width: 1024px) { .whb-header a[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link), .whb-header a[href*="reserva-tu-cita"]:not(.vl-btn):not(.woodmart-nav-link) { display: none; } }

/* ---------- 7 · Barra de iconos (fila header-bottom del builder, info boxes «vl-header-nav-icons») ----------
   SOLO móvil y tableta. 56 px. Una sola versión (sustituye a las tres del CSS anterior). Títulos a 15 px (--vl-font-small).  */
@media (max-width: 1024px) {
  .whb-header-bottom { height: var(--vl-header-icons-h); background: var(--vl-bg); border-bottom: 1px solid var(--vl-border); }
  .whb-header-bottom .container { max-width: 100%; width: 100%; padding: 0; margin: 0; }
  .whb-header-bottom-inner { height: var(--vl-header-icons-h); padding: 0; margin: 0; display: flex; align-items: stretch; justify-content: space-between; gap: 0; }
  .whb-header-bottom-inner .whb-col, .whb-header-bottom-inner .info-box-wrapper { flex: 1 1 0; min-width: 0; max-width: none; width: auto; margin: 0; padding: 0; display: flex; }
  .whb-header-bottom-inner .wd-info-box, .vl-header-nav-icons { position: relative; width: 100%; height: var(--vl-header-icons-h); margin: 0; padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; box-shadow: none; border: 0; }
  .whb-header-bottom-inner .box-icon-wrapper, .whb-header-bottom-inner .info-box-icon { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; display: flex; align-items: center; justify-content: center; }
  .whb-header-bottom-inner .info-box-icon img, .whb-header-bottom-inner .info-box-icon svg { width: 26px; height: 26px; display: block; object-fit: contain; }
  .whb-header-bottom-inner .info-box-title { font-family: var(--font-titulos); font-size: var(--vl-font-small); line-height: 1.2; margin: 0; padding: 0; text-align: center; letter-spacing: 0; font-weight: 600; color: var(--vl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .whb-header-bottom-inner .info-box-content, .whb-header-bottom-inner .info-box-inner { margin: 0; padding: 0; min-width: 0; max-width: 100%; }
  .whb-header-bottom-inner .wd-info-box-link { position: absolute; inset: 0; z-index: 2; }
  .whb-header-bottom-inner .info-box-wrapper:hover { background: var(--vl-bg-soft); }
  .whb-header-bottom-inner .info-box-wrapper:focus-within { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: -3px; }
}
/* Tableta (768–1024): mismo diseño, icono un punto más grande porque hay sitio.
   Los títulos van a 15 px (decisión 4 de Sergio: nunca menos de 15) y en minúsculas; por eso dos son cortos:
   «Únete» (Profesionales) y «Marcas» (Proveedores). En mayúsculas o con las palabras largas no caben seis en 375. */
@media (min-width: 768px) and (max-width: 1024px) {
  .whb-header-bottom-inner .info-box-icon img, .whb-header-bottom-inner .info-box-icon svg { width: 28px; height: 28px; }
}

/* ---------- 8 · Barra de iconos como bloque propio (04-bloques/barra-iconos-movil.html) ----------
   Alternativa al builder: seis enlaces con SVG en línea, 56 px, un solo estilo.  */
.vl-icons { display: flex; background: var(--vl-bg); border-top: 1px solid var(--vl-border); border-bottom: 1px solid var(--vl-border); list-style: none; margin: 0; padding: 0; }
.vl-icons__item { flex: 1 1 0; min-width: 0; text-align: center; min-height: var(--vl-header-icons-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0; color: var(--vl-text); text-decoration: none; font-family: var(--font-titulos); font-size: var(--vl-font-small); line-height: 1.2; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-icons__item:hover { background: var(--vl-bg-soft); color: var(--vl-secondary-dark); text-decoration: none; }
.vl-icons__item[aria-current="page"] { color: var(--vl-secondary); box-shadow: inset 0 -3px 0 var(--vl-secondary); }
.vl-icons__svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .vl-icons__svg { width: 28px; height: 28px; } }
@media (min-width: 1025px) { .vl-icons { display: none; } }

/* ---------- 9 · Barra fija inferior de Woodmart (sticky toolbar): que no tape el contenido ---------- */
.wd-toolbar { height: 60px; background: var(--vl-bg); border-top: 1px solid var(--vl-border); }
body.wd-toolbar-enabled { padding-bottom: 60px; }

/* ---------- 10 · Menú móvil desplegable: letra 17, 48 px por fila, colores del sistema ---------- */
.mobile-nav, .wd-side-hidden { background: var(--vl-bg); color: var(--vl-text); }
.mobile-nav .wd-nav > li > a { min-height: var(--vl-touch); font-size: var(--vl-font-body); color: var(--vl-text); border-bottom: 1px solid var(--vl-border); }
.mobile-nav .wd-nav > li > a:hover { color: var(--vl-secondary); }


/* ============================================================
   VL 1.1 (24/09/2026) · arreglos de arreglos.css 2.2.3 absorbidos aquí (§1.3 del encargo)
   ============================================================ */
/* c-5 · Cabecera móvil: medía 200 px y el 2º botón se salía (body de 478 px a 375).
   Cowork (decisión 12): logo + barra de iconos, UN botón. */
@media (max-width: 1024px) {
  .wd-hb-wrapp, .header-banner.wd-hb { display: none; }               /* el banner azul de 40 px */
  .whb-mobile-right { flex-wrap: nowrap; gap: 6px; }
  .whb-mobile-right .wd-button-wrapper { flex: 0 1 auto; min-width: 0; }
  .whb-mobile-right .wd-button-wrapper a.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px;
    font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
    border-radius: var(--vl-radius-pill);
    color: var(--vl-secondary); background: var(--vl-bg); border: 2px solid var(--vl-secondary);
  }
  .whb-mobile-right .wd-button-wrapper a.btn:hover { color: var(--vl-on-color); background: var(--vl-secondary); }
  /* El 2º botón («¿Eres Profesional?») se oculta en móvil: ya está en la barra de iconos (PROFESIONALES) y en el menú. */
  .whb-mobile-right .wd-button-wrapper + .wd-button-wrapper { display: none; }
}
@media (max-width: 480px) {
  .whb-mobile-right .wd-button-wrapper a.btn { padding: 0 12px; font-size: 13px; }
}

/* c-6 · Cabecera de escritorio: los 3 enlaces del bloque 11505 no tenían separación. */
.vl-header-botones { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--vl-space-sm); }

/* c-14 (24/09, capturas de Sergio a ~850 px) · Cabecera PEGADA al subir en móvil/tableta: Woodmart pintaba la fila del
   logo en negro (#212121) con el logo de letras blancas casi invisible, y arrastraba la barra de 4 iconos (192 px en total).
   Ahora: fila del logo blanca con el logo normal, y la barra de iconos no va pegada (queda en 132 px). */
@media (max-width: 1024px) {
  /* c-17 (24/09 16:15, VL 1.0): la cabecera ya NO va por encima del contenido (overlap apagado en el Header Builder); sin el
     hero lila debajo, Woodmart pinta la fila del logo en negro (#212121, «whb-color-light») SIEMPRE, no solo pegada → blanca. */
  .whb-header .whb-row.whb-top-bar.whb-color-light.whb-without-bg,
  .whb-sticked .whb-row.whb-top-bar.whb-color-light.whb-without-bg { background-color: var(--vl-bg); }
  /* con .whb-top-bar delante para ganar a header-el-logo-opt-swap.css de Woodmart, que carga después */
  .whb-sticked .whb-top-bar .wd-switch-logo .wd-main-logo { display: block; }
  .whb-sticked .whb-top-bar .wd-switch-logo .wd-sticky-logo { display: none; }
  .whb-sticked .whb-header-bottom { display: none; }
}

/* c-16 (24/09, pasada de diseño móvil-primero a 375/850/1440, 26 páginas) */

/* c-16a · La barra inferior de Woodmart (CONTACTO / NOSOTROS, letra de 11 px) seguía saliendo en las páginas SIN la
   barra fija del triaje (formulario, reserva, registros, mi cuenta). Decisión 16 de Sergio: fuera en todas. */
body.sticky-toolbar-on .wd-toolbar { display: none; }       /* con el body delante: la parte CSS de Woodmart (opt-bottom-toolbar) carga después que esta hoja */
body.sticky-toolbar-on, body.wd-toolbar-enabled { padding-bottom: 0; }

/* c-16b · Barra de 4 iconos a 375: «PROVEEDORES» se salía 10 px por la derecha. Cuatro columnas iguales y letra de 10 px. */
@media (max-width: 480px) {
  .whb-header-bottom .whb-col-mobile { display: flex; width: 100%; margin-inline: 0; }   /* Woodmart le pone margin -10px: de ahí los 385 px */
  .whb-header-bottom .whb-col-mobile > .info-box-wrapper { flex: 1 1 25%; min-width: 0; padding-inline: 2px; }
  .whb-header-bottom .wd-info-box .info-box-title { font-size: 10px; letter-spacing: 0; overflow-wrap: anywhere; }
}

/* c-19 (24/09 17:20, captura de Sergio a 1440) · Cabecera de ESCRITORIO: el menú real tiene 8 entradas (932 px) y el bloque 11505
   nuevo 4 piezas; no cabían: el menú se partía en 2 filas y «Buscar un centro / Soy profesional» se subían al banner.
   Ahora: en escritorio quedan «Entrar» + el botón (Buscar y Soy profesional ya están en el menú), el menú un poco más
   compacto y la columna del bloque no se estrecha. Cowork dibujó un menú de 5 entradas: eso es decisión de Sergio (Apariencia → Menús). */
@media (min-width: 1025px) {
  .whb-header .vl-header-botones__enlace:not([href="/login/"]) { display: none; }
  .whb-header .vl-header-botones { flex-wrap: nowrap; gap: var(--vl-space-xs); }
  .whb-header .whb-column:has(> .vl-header-botones), .whb-header .whb-column:has(.vl-header-botones) { flex: 0 0 auto; }
  .whb-header .wd-nav.wd-nav-main { flex-wrap: nowrap; }
  .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 9px; font-size: 14px; letter-spacing: 0; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 6px; font-size: 13px; }
}

/* 26/09 (revisión de diseño): el enlace del logo medía 138×20 px (área táctil por debajo de 24). Sin cambiar la imagen, el enlace
   ocupa 44 px de alto y centra el logo. */
html body .whb-header .wd-logo { display: inline-flex; align-items: center; min-height: var(--vl-touch); }

/* 26/09/2026 (Claude Code en la nube · F3, C2·§0 «logo fantasma»): Woodmart imprime dos logos en la fila de arriba (el normal y el
   «pegado», blanco) y a 375 se veían los dos, uno blanco sobre blanco al lado del bueno. La cabecera es blanca en los dos estados,
   así que el logo blanco no hace falta nunca: fuera siempre (antes solo se escondía con la cabecera pegada). */
.whb-header .wd-switch-logo .wd-sticky-logo { display: none; }
.whb-header .whb-sticked .wd-switch-logo .wd-main-logo, .whb-sticked .whb-header .wd-switch-logo .wd-main-logo { display: block; }