/* PIEZA: cabecera — reescrita el 2026-09-03
 * ---------------------------------------------------------------------------
 * Ya no es una capa de CSS sobre GeneratePress: `cabecera.php` desengancha
 * `generate_construct_header` y renderiza su propio `<header>`. Ver ese
 * fichero para el porque.
 *
 * Los colores, la tipografia y el espaciado salen de `css/tokens.css`. Los
 * pocos radios de borde que no coinciden con `--dl-radio` van sueltos a
 * proposito (ya es el patron del resto de piezas: `autoria.css`,
 * `ficha.css`... cada una afina el radio de sus propios elementos).
 * --------------------------------------------------------------------------- */

.dl-cabecera{
  --dl-cab-alto: 64px;
  position: static;
  top: auto;
  z-index: 60;
  background: var(--dl-azul-700);
  color: #fff;
}
/* `width:100%` + `padding` propio (el buscador, las sugerencias, el panel)
   asume content-box en TODA la pieza: sin esto de raiz, cada elemento que
   junte esas dos cosas se sale por su propio padding del ancho del padre —
   el bug de fondo de la scrollbar horizontal fea del 2026-09-04 en
   `.dl-sugerencia` (314-318px de ancho real contra 289px disponibles). */
.dl-cabecera, .dl-cabecera *, .dl-cabecera *::before, .dl-cabecera *::after{
  box-sizing: border-box;
}
.dl-cabecera :focus-visible{
  outline: 2px solid var(--dl-foco);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Reseteo defensivo de TODO boton de la cabecera. GeneratePress trae VARIAS
   hojas con reglas de tipo `button, input[type=submit]...{...}` (colores de
   marca, relleno 10px 20px, mayusculas): selectores de un solo elemento,
   pero con especificidad real (0,0,1) — un `:where()` a especificidad CERO
   pierde contra ellas, que es justo lo que paso aqui el 2026-09-04 (el boton
   de borrar del buscador salio como un ovalo azul solido de 42x22, con el
   relleno y el color de GP, no los propios). Este reseteo usa `.dl-cabecera
   button` (especificidad real) para ganarles, y CADA boton concreto de mas
   abajo se escribe como `.dl-cabecera .dl-loquesea` para seguir ganando a
   este reseteo. */
.dl-cabecera button{
  box-sizing: border-box;
  background: none; border: 0; margin: 0; padding: 0;
  min-width: 0; min-height: 0; line-height: normal;
  font: inherit; color: inherit; text-transform: none; letter-spacing: normal;
  border-radius: 0; box-shadow: none;
}
/* Sin esto, el navegador pinta cada enlace ya visitado de su morado/azul por
   defecto. OJO: `color:inherit` es una trampa aqui, no la solucion — el
   panel vive DENTRO de la cabecera azul (texto blanco) pero su propio fondo
   es blanco, asi que heredar dio texto blanco sobre blanco, invisible, en
   cualquier seccion ya visitada (bug visto el 2026-09-04). Cada enlace lleva
   su color explicito, el mismo que su estado normal. */
.dl-secciones__enlace:visited{ color: rgba(255,255,255,.86); }
.dl-seccion:visited{ color: var(--dl-azul-900); }
.dl-sugerencia:visited{ color: var(--dl-azul-900); }

.dl-contenedor{ max-width: 1000px; margin: 0 auto; padding: 0 var(--dl-esp-md); }

.dl-oculto-visual{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.dl-cabecera__fila{
  display: flex; align-items: center; gap: 12px; height: var(--dl-cab-alto);
}

/* --------------------------------------------------------------- la marca */
.dl-marca{ display: flex; align-items: stretch; flex: none; margin-right: var(--dl-esp-sm); border-radius: 3px; }
.dl-marca__logo{ display: block; height: 100%; width: auto; }

/* ------------------------------------------------------- secciones sueltas */
.dl-secciones{ position: relative; display: flex; align-items: center; gap: 2px; flex: none; }
.dl-secciones__enlace{
  position: relative; padding: 9px 10px; border-radius: 5px;
  font-size: 14.5px; color: rgba(255,255,255,.86); white-space: nowrap;
  transition: background var(--dl-dur) var(--dl-ease), color var(--dl-dur) var(--dl-ease);
}
.dl-secciones__enlace:hover{ background: rgba(255,255,255,.14); color: #fff; }
.dl-secciones__enlace[aria-current="page"]{ color: #fff; font-weight: 600; }
.dl-secciones__enlace[aria-current="page"]::after{
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -11px;
  height: var(--dl-filete); background: #fff; border-radius: 2px 2px 0 0;
}

/* -------------------------------------- boton «Secciones»: abre el panel
   `.dl-cabecera` delante de cada uno: especificidad (0,2,0), por encima del
   reseteo base (0,1,1) y de las reglas de GP (0,0,1). */
.dl-cabecera .dl-mas{
  flex: none; gap: 6px; padding: 9px 9px; margin-left: 0;
  display: flex; align-items: center;
  border: 0; border-radius: 5px; color: rgba(255,255,255,.86);
  font: 400 14.5px var(--dl-texto); white-space: nowrap;
  transition: background var(--dl-dur) var(--dl-ease), color var(--dl-dur) var(--dl-ease);
}
.dl-cabecera .dl-mas:hover{ background: rgba(255,255,255,.14); color: #fff; }
.dl-mas__icono{ width: 12px; height: 12px; flex: none; transition: transform 240ms var(--dl-ease); }
.dl-mas__barras, .dl-mas__equis{ display: none; }
.dl-cabecera .dl-mas[aria-expanded="true"]{ background: rgba(255,255,255,.18); color: #fff; }
.dl-mas[aria-expanded="true"] .dl-mas__cruz{ transform: rotate(45deg); }

/* --------------------------------------------- el buscador, campo real */
.dl-buscador{ position: relative; flex: 1 1 auto; min-width: 0; max-width: 320px; margin-left: auto; }
.dl-buscador__caja{
  display: flex; align-items: center; gap: 9px; height: 38px;
  padding: 0 12px; background: var(--dl-superficie); border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color var(--dl-dur) var(--dl-ease);
}
/* Solo el borde cambia de color al enfocar, sin el halo hacia fuera de un
   box-shadow: las medidas no cambian nada (comprobado el 2026-09-04, mismo
   rect antes y despues), pero el anillo de 3px se leia como si la caja
   creciera, y asi lo dijo el usuario. */
.dl-buscador__caja:focus-within{ border-color: var(--dl-foco); }
.dl-lupa__icono{ width: 15px; height: 15px; flex: none; color: var(--dl-tinta-suave); }
.dl-buscador__campo{
  flex: 1; min-width: 0; background: none;
  font: 400 14.5px/1.4 var(--dl-texto); color: var(--dl-tinta);
  border: 0 !important; outline: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
.dl-buscador__campo::placeholder{ color: var(--dl-tinta-suave); }
.dl-cabecera .dl-buscador__limpiar{
  display: none; flex: none; width: 20px; height: 20px; border-radius: 50%;
  align-items: center; justify-content: center; color: var(--dl-tinta-suave);
}
.dl-cabecera .dl-buscador__limpiar:hover{ background: var(--dl-azul-100); color: var(--dl-azul-900); }
.dl-buscador.dl-tiene-texto .dl-buscador__limpiar{ display: flex; }

/* --------------------------------------------- sugerencias en vivo */
.dl-sugerencias{
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--dl-superficie); border: 1px solid var(--dl-linea); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(18,63,99,.06), 0 24px 48px -20px rgba(18,63,99,.42);
  max-height: min(64vh, 420px); overflow-y: auto; overflow-x: hidden; padding: 7px;
  display: none;
  /* sin esto, la scrollbar vertical era la del sistema: gris, con flechas,
     fuera de sitio en un panel plano. Firefox via `scrollbar-*`, el resto
     via `::-webkit-scrollbar` un poco mas abajo. */
  scrollbar-width: thin; scrollbar-color: var(--dl-linea) transparent;
}
.dl-sugerencias::-webkit-scrollbar{ width: 8px; }
.dl-sugerencias::-webkit-scrollbar-track{ background: transparent; }
.dl-sugerencias::-webkit-scrollbar-thumb{ background: var(--dl-linea); border-radius: 8px; }
.dl-sugerencias::-webkit-scrollbar-thumb:hover{ background: var(--dl-tinta-suave); }
.dl-sugerencias.dl-abierto{ display: block; animation: dl-aparece 160ms var(--dl-ease); }
@keyframes dl-aparece{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }

.dl-sugerencia{
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 11px 12px 11px 13px; border-radius: 8px;
  font-size: 14.5px; line-height: 1.45; color: var(--dl-azul-900);
  transition: background 120ms var(--dl-ease), padding-left 160ms var(--dl-ease);
}
.dl-sugerencia::before{
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 2px; background: var(--dl-azul-700);
  transition: height 160ms var(--dl-ease);
}
/* mismo hueco que en .dl-seccion: sin `color` explicito, el a:hover de GP
   se lo llevaba por delante. */
.dl-sugerencia:hover, .dl-sugerencia.dl-activo{ background: var(--dl-azul-100); color: var(--dl-azul-900); }
.dl-sugerencia.dl-activo::before{ height: 60%; }
.dl-sugerencia.dl-activo{ padding-left: 17px; }
.dl-sugerencia mark{ background: none; color: var(--dl-azul-500); font-weight: 600; }
.dl-sugerencia__flecha{
  margin-left: auto; flex: none; width: 14px; height: 14px; color: var(--dl-azul-500);
  opacity: 0; transition: opacity 140ms var(--dl-ease);
}
.dl-sugerencia.dl-activo .dl-sugerencia__flecha,
.dl-sugerencia:hover .dl-sugerencia__flecha{ opacity: 1; }

.dl-sugerencia__cargando,
.dl-sin-resultados{ padding: 16px 13px; font-size: 13.5px; line-height: 1.5; color: var(--dl-tinta-suave); }

.dl-cabecera .dl-lupa-movil{ display: none; }

/* ----------------------------------------------------- panel de secciones
   Compacto y anclado bajo el boton «Secciones», no a sangre completa de la
   barra: es un mostrador pequeno, con su propia sombra, no un evento que
   ocupa toda la pantalla. Un icono real (Lucide, ver cabecera.php) por
   seccion en vez de contadores o numeros — decidido el 2026-09-04 tras
   varias rondas de ajuste con el usuario. */
.dl-panel{
  position: absolute; top: 100%; right: 0; left: auto; margin-top: 10px;
  width: 460px; max-width: calc(100vw - 2 * var(--dl-esp-md));
  background: var(--dl-superficie); border-radius: 12px;
  box-shadow: 0 24px 48px -18px rgba(18,63,99,.4);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dl-dur) var(--dl-ease), transform 240ms var(--dl-ease), visibility var(--dl-dur);
  padding: 10px;
}
.dl-panel.dl-abierto{ opacity: 1; visibility: visible; transform: none; }
.dl-panel__rejilla{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
}

.dl-seccion{
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 8px;
  font: 400 16.5px/1.3 var(--dl-display); color: var(--dl-azul-900);
  transition: background 120ms var(--dl-ease), color 120ms var(--dl-ease);
}
/* Sin el `color` explicito aqui, el `a:hover{color:#1c8edb}` de GeneratePress
   (un azul claro generico, de mayor especificidad que un simple hover de
   clase con SOLO el fondo) gana en el estado :hover: el texto saltaba de
   azul oscuro a ese azul claro al pasar el raton — bug visto el 2026-09-04.
   El hover de esta pieza es solo un cambio de fondo; el texto no cambia. */
.dl-seccion:hover{ background: var(--dl-azul-100); color: var(--dl-azul-900); }
.dl-seccion[aria-current="page"]{ color: var(--dl-azul-700); font-weight: 700; }
.dl-seccion[aria-current="page"]:hover{ color: var(--dl-azul-700); }
.dl-seccion__icono{
  width: 19px; height: 19px; flex: none; color: var(--dl-azul-500);
}
.dl-seccion[aria-current="page"] .dl-seccion__icono{ color: var(--dl-azul-700); }

.dl-velo{
  position: fixed; inset: var(--dl-cab-alto) 0 0; z-index: 40;
  background: rgba(18,63,99,.20);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--dl-ease), visibility 220ms;
}
.dl-velo.dl-activo{ opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- movil */
@media (max-width: 900px){
  .dl-secciones__enlace{ display: none; }

  /* hamburguesa a la izquierda, logo centrado, lupa a la derecha */
  .dl-cabecera__fila{
    display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr;
    align-items: center; gap: 8px; height: var(--dl-cab-alto);
  }
  .dl-secciones{ grid-column: 1; grid-row: 1; justify-self: start; }
  .dl-marca{ grid-column: 2; grid-row: 1; justify-self: center; }
  .dl-buscador{ grid-column: 3; grid-row: 1; justify-self: end; width: auto; max-width: none; }

  .dl-buscador__caja{ display: none; }
  /* fixed, no absolute: el contenedor del buscador es una cajita de 36px
     pegada a la derecha, y left/right medidos desde ahi disparaban el campo
     fuera de la pantalla. Fixed lo mide desde la ventana. */
  .dl-buscador.dl-desplegado .dl-buscador__caja{
    display: flex; position: fixed; left: var(--dl-esp-md); right: var(--dl-esp-md);
    top: calc(var(--dl-cab-alto) + 8px); z-index: 70;
  }
  .dl-buscador.dl-desplegado .dl-sugerencias{
    position: fixed; left: var(--dl-esp-md); right: var(--dl-esp-md);
    top: calc(var(--dl-cab-alto) + 56px); z-index: 70;
    max-height: calc(100dvh - var(--dl-cab-alto) - 80px);
  }
  .dl-cabecera .dl-lupa-movil{
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; color: #fff; flex: none; border: 0;
    transition: background var(--dl-dur) var(--dl-ease);
  }
  .dl-cabecera .dl-lupa-movil:hover, .dl-buscador.dl-desplegado .dl-lupa-movil{ background: rgba(255,255,255,.16); }
  /* `.dl-lupa__icono` trae su propio gris (--dl-tinta-suave), pensado para
     ir sobre el campo blanco de escritorio: sin anularlo aqui, ese gris se
     colaba tambien dentro del boton azul de movil. */
  .dl-lupa-movil .dl-lupa__icono{ width: 18px; height: 18px; color: #fff; }

  .dl-cabecera .dl-mas{ width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 8px; color: #fff; }
  .dl-cabecera .dl-mas:hover{ background: rgba(255,255,255,.14); }
  .dl-mas__icono{ width: 19px; height: 19px; flex: none; transition: transform 240ms var(--dl-ease); }
  .dl-mas__cruz, .dl-mas__texto{ display: none; }
  .dl-mas__barras{ display: block; }
  .dl-mas[aria-expanded="true"]{ background: rgba(255,255,255,.16); }
  .dl-mas[aria-expanded="true"] .dl-mas__barras{ display: none; }
  .dl-mas[aria-expanded="true"] .dl-mas__equis{ display: block; }

  /* en movil el panel compacto no cabe: pasa a pantalla completa, con el
     mismo icono por fila y sin ninguna linea entre ellas */
  .dl-panel{
    position: fixed; left: 0; right: 0; top: var(--dl-cab-alto); bottom: 0;
    width: auto; max-width: none; margin-top: 0; border-radius: 0;
    box-shadow: none; overflow-y: auto; padding: var(--dl-esp-sm);
  }
  .dl-panel__rejilla{ grid-template-columns: 1fr; }
  .dl-seccion{ padding: 15px var(--dl-esp-md); font-size: 19px; }
  .dl-seccion:active{ background: var(--dl-azul-100); }
  .dl-seccion__icono{ width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce){
  .dl-cabecera *{ transition-duration: 120ms !important; animation: none !important; }
  .dl-panel{ transform: none !important; }
}