/* Capa propia del tema, por encima de la del padre.
 *
 * ⚠️ Va SIN `@layer` a propósito. El padre organiza su CSS en
 * `@layer base, tokens, components, utilities`, y lo que va sin capa gana
 * siempre a lo que va dentro de una, con cualquier especificidad. Así que aquí
 * no hace falta subir selectores para ganar. Es la misma trampa que costó una
 * tarde en el panel el 6 de agosto, y que solo salió midiendo el CSS compilado.
 *
 * Lo que NO está aquí es la maqueta de las páginas: esa va en línea dentro de
 * cada plantilla, verbatim del boceto aprobado. Aquí vive solo el armazón, que
 * el boceto resolvía por estado de JavaScript y en HTML de verdad es CSS.
 */

body { background: #f1eee6; color: #33443e; }

.lvdlc-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: #146349; color: #f1eee6; font-weight: 600;
}
.lvdlc-saltar:focus { left: 8px; top: 8px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────
 * La maqueta vive en los estilos en línea de `header.php`, copiados del boceto.
 * Aquí solo queda lo que en el boceto decide el JavaScript y en HTML de verdad
 * decide el CSS: cuál de las dos barras se ve.
 */
.lvdlc-barra-estrecha { display: none !important; }
.lvdlc-menu-boton { visibility: hidden; }
.lvdlc-enlace-barra { text-decoration: none; }
.lvdlc-enlace-barra:hover { color: #ffce01 !important; }

@media (max-width: 900px) {
  .lvdlc-barra-ancha { display: none !important; }
  .lvdlc-barra-estrecha { display: flex !important; }
  .lvdlc-menu-boton { visibility: visible; }
  /* `hidden` lo gobierna el JavaScript, así que sin JavaScript el menú queda
     abierto y navegable en vez de inalcanzable. */
  .lvdlc-menu-movil:not([hidden]) { display: flex; }
  .lvdlc-menu-movil a:hover { background: #e3ded1; color: #b8195e; }
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.lvdlc-pie { background: #f1eee6; }
.lvdlc-pie-cuerpo {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(28px, 3.5vw, 44px);
}
.lvdlc-pie-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vw, 38px);
}
.lvdlc-pie-nav a { font: 600 15px Poppins, sans-serif; color: #146349; white-space: nowrap; text-decoration: none; }
.lvdlc-pie-nav a:hover { color: #b8195e; }
.lvdlc-pie-sello { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.lvdlc-pie-sello img { display: block; width: 100%; max-width: 236px; height: auto; }
.lvdlc-pie-legal { background: #189260; }
.lvdlc-pie-legal p {
  max-width: 1180px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px);
  text-align: center; font: 500 15px Poppins, sans-serif; color: #f1eee6;
}
.lvdlc-pie-legal a { color: #f1eee6; text-decoration: underline; text-underline-offset: 3px; }
.lvdlc-pie-legal a:hover { color: #ffce01; }

/* El foco va en el amarillo de marca y no en el azul del navegador: sobre el
   verde de las secciones de acceso el azul se pierde. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #ffce01; outline-offset: 3px; border-radius: 4px;
}

/* ── Estados :hover del boceto ────────────────────────────────────────
 * En el prototipo van en un atributo `style-hover` que es del motor del
 * lienzo y que el navegador ignora. Aquí son CSS de verdad. */
/* Nuestra iniciativa */
.lvdlc-nuestra-iniciativa-h1:hover { background:#17553f; color:#ffce01 }
.lvdlc-nuestra-iniciativa-h2:hover { background:#146349; color:#f1eee6 }

/* Las cosas */
.lvdlc-las-cosas-h1:hover { background:#164682; color:#ffce01 }
.lvdlc-las-cosas-h2:hover { background:#1c57a5; color:#f1eee6 }

/* La reciclase */
.lvdlc-la-reciclase-h1:hover { background:#8e2454; color:#ffce01 }
.lvdlc-la-reciclase-h2:hover { background:#164682; color:#ffce01 }

/* Soy profe */
.lvdlc-soy-profe-h1:hover { background:#8e2454; color:#ffce01 }
.lvdlc-soy-profe-h3:hover { background:#f1eee6 }

/* Soy papá-mamá */
.lvdlc-soy-papa-mama-h1:hover { background:#17553f; color:#ffce01 }
.lvdlc-soy-papa-mama-h3:hover { background:#f1eee6 }

/* Avisos legales */
.lvdlc-legales-h1:hover { background:#146349; color:#f1eee6 }
.lvdlc-legales-h2:hover { background:#146349; color:#f1eee6 }
.lvdlc-legales-h3:hover { background:#146349; color:#f1eee6 }
.lvdlc-legales-h4:hover { background:#146349; color:#f1eee6 }


/* ── El municipio activo ───────────────────────────────────────────────────
 * Su maqueta va en línea en `header.php`, copiada del boceto. Aquí solo lo que
 * la coloca; el desplegable es el combobox compartido de más abajo.
 *
 * ⚠️ Aquí vivía un `:focus-within` que dibujaba el aro de foco alrededor de la
 * píldora entera, y era necesario cuando dentro había un `<select>` invisible,
 * porque el foco lo tenía él y la píldora no lo enseñaba. Con el combobox
 * sobra y además ESTORBA: el buscador del panel está dentro, así que el aro se
 * encendía todo el rato que el panel estaba abierto, también con el ratón. El
 * botón trae su propio `:focus-visible`, que es lo que ve quien va por teclado. */
.lvdlc-pildora-municipio, #lvdc-indicador-municipio { position: absolute; }

@media (max-width: 620px) { .lvdlc-pildora-rotulo { display: none; } }

/* ── La capa de municipio (pin 42) ──────────────────────────────────────────
 * La enciende la clase del `<html>`, que pone un guion del `<head>`. Gana al
 * `hidden` del marcado por especificidad, y cuando se elige el JavaScript quita
 * la clase y deja el `hidden`. */
html.lvdc-sin-municipio .lvdlc-mun-capa { display: flex; }
html.lvdc-sin-municipio body { overflow: hidden; }
.lvdlc-mun-capa {
  position: fixed; inset: 0; z-index: 1000;
  /* Arriba y no centrada: el desplegable se abre hacia abajo, y centrada en un
     móvil de 812 px de alto la lista se salía por el borde inferior. */
  align-items: flex-start; justify-content: center;
  padding: max(16px, 12vh) 16px 16px; overflow-y: auto;
  background: rgba(23, 85, 63, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lvdlc-mun-capa[hidden] { display: none; }

.lvdlc-mun-cta:hover { background: #17553f; color: #ffce01; }
.lvdlc-mun-cambiar:hover { background: #e3ded1; }

/* ── Realce dentro del texto ───────────────────────────────────────────────
 * El boceto colorea algunas negritas dentro del cuerpo, y ese color viaja en un
 * atributo `style` del propio texto. Como ese texto vive ahora en un campo que
 * edita el cliente, la lista blanca de `lvdlc_texto()` NO admite atributos: si
 * los admitiera, el editor sería una vía para meter estilo arbitrario.
 *
 * Así que el color se declara aquí y se marca el PÁRRAFO, no la negrita. El
 * cliente edita el texto y el diseño decide cómo se ve, que es el reparto
 * correcto. Y no se pone una regla general para `strong`, porque hay negritas
 * sobre fondo azul donde el verde estaría mal. */
/* La clase cae unas veces en el párrafo y otras en la propia negrita, según
 * dónde esté el campo, así que la regla cubre las dos formas. */
.lvdlc-realce-verde strong, strong.lvdlc-realce-verde { color: #146349; }
.lvdlc-realce-azul strong, strong.lvdlc-realce-azul { color: #1c57a5; }

/* ⚠️ El diseño usa negrita de 600, no la 700 que el navegador da por defecto a
 * `<strong>`. En el boceto va escrita en línea dentro del propio texto, y ese
 * texto vive ahora en un campo cuyo marcado se filtra sin atributos, así que el
 * peso se declara aquí. */
strong, b { font-weight: 600; }

/* Portada · estados :hover del boceto, que allí van en un atributo del motor */
.lvdlc-camino-visita:hover { background: #a5d9f6 !important; }
.lvdlc-camino-casa:hover   { background: #d8e8b9 !important; }
.lvdlc-camino-profe:hover  { background: #f8cfe2 !important; }
.lvdlc-cta-solida:hover { background: #17553f !important; color: #ffce01 !important; }
.lvdlc-cta-linea:hover  { background: #146349 !important; color: #f1eee6 !important; }
.lvdlc-cta-app:hover    { background: #164682 !important; color: #ffce01 !important; }

/* ── El desplegable de municipios ──────────────────────────────────────────
 * ⚠️ Un `<select>` nativo se dimensiona con su OPCIÓN MÁS LARGA, y ni
 * `flex: 1 1 220px` lo encoge por debajo de ese ancho mientras el elemento
 * tenga `min-width: auto`, que es lo que trae un elemento flex por defecto.
 * Con la lista de hoy, que son las 394 localidades de la Comunitat porque el
 * maestro está vacío, medía 403 px dentro de una pantalla de 390 y sacaba 28 px
 * de desplazamiento horizontal.
 *
 * Se cierra con `min-width: 0`, que es lo que permite encoger, y el nombre
 * largo se recorta con puntos suspensivos. Al desplegarlo se lee entero.
 */
/* ── El combobox de municipios ─────────────────────────────────────────────
 * Sustituye al desplegable nativo, que con las 394 localidades de hoy era una
 * rueda inservible en móvil y además se salía de la pantalla, porque un
 * `<select>` se dimensiona con su opción más larga.
 *
 * Toda la maqueta cuelga de `.lvdlc-combo`, así que no alcanza a nada más.
 */
.lvdlc-combo { position: relative; flex: 1 1 220px; min-width: 0; max-width: 100%; }

.lvdlc-combo-boton {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 18px;
  border: 2px solid #146349; border-radius: 999px; background: #f1eee6;
  font: 600 16px Poppins, system-ui, sans-serif; color: #146349;
  cursor: pointer; text-align: left;
}
.lvdlc-combo-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sin elegir, el rótulo es una indicación y no un valor: pesa menos. */
.lvdlc-combo-valor[data-vacio] { font-weight: 400; }
.lvdlc-combo-flecha {
  flex: 0 0 auto; width: 13px; height: 13px;
  border-right: 2.25px solid #146349; border-bottom: 2.25px solid #146349;
  transform: rotate(45deg) translate(-2px, -2px);
}
.lvdlc-combo-boton[aria-expanded="true"] .lvdlc-combo-flecha {
  transform: rotate(225deg) translate(-3px, -3px);
}

.lvdlc-combo-panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  padding: 10px; border: 2px solid #146349; border-radius: 22px;
  background: #ffffff; box-shadow: 0 12px 28px rgba(20, 99, 73, .18);
}
.lvdlc-combo-buscar {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px;
  border: 1px solid #c2cfc7; border-radius: 12px; background: #ffffff;
  font: 400 16px Poppins, system-ui, sans-serif; color: #33443e;
}
/* ⚠️ 16px y no menos: por debajo de eso iOS hace zoom al enfocar un campo. */
.lvdlc-combo-lista {
  margin: 4px 0 0; padding: 0; list-style: none;
  max-height: min(46vh, 320px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lvdlc-combo-op {
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  font: 400 16px/1.3 Poppins, system-ui, sans-serif; color: #33443e;
}
.lvdlc-combo-op.activa, .lvdlc-combo-op:hover { background: #e4efcd; color: #146349; }
/* València y «mi municipio no está» se distinguen de la lista larga. */
.lvdlc-combo-op-fija { font-weight: 600; color: #146349; }
.lvdlc-combo-vacio { margin: 14px 4px; font: 400 15px Poppins, system-ui, sans-serif; color: #5b6f66; }

@media (max-width: 620px) {
  /* En móvil la lista se lleva más alto, que es donde el desplegable nativo
     era peor: aquí se teclea para filtrar en vez de girar una rueda. */
  .lvdlc-combo-lista { max-height: min(52vh, 360px); }
}

/* ── La píldora de la cabecera, que es el mismo combobox ───────────────────
 * Antes llevaba un `<select>` nativo. Se cambió por el mismo componente que la
 * portada para no mantener dos controles distintos para una sola decisión, que
 * es la clase de duplicidad que acaba divergiendo.
 *
 * Aquí el botón ES la píldora, así que su maqueta va en línea en `header.php`,
 * copiada del boceto, y esto solo coloca el panel.
 */
.lvdlc-combo-pildora { flex: none; }
.lvdlc-combo-pildora .lvdlc-combo-boton:hover { border-color: #146349; }
.lvdlc-combo-pildora .lvdlc-combo-valor { max-width: 40vw; }
.lvdlc-combo-pildora .lvdlc-combo-flecha {
  width: 9px; height: 9px; border-width: 2px;
  transform: rotate(45deg) translate(-1px, -1px);
}
.lvdlc-combo-pildora .lvdlc-combo-boton[aria-expanded="true"] .lvdlc-combo-flecha {
  transform: rotate(225deg) translate(-2px, -2px);
}
/* ⚠️ El panel es MÁS ANCHO que la píldora, que mide poco más de 200 px: una
 * lista de municipios ahí dentro sería ilegible. Se ancla a su izquierda y se
 * acota al ancho de la ventana menos el margen, así que a 393 px no se sale. */
.lvdlc-combo-pildora .lvdlc-combo-panel {
  right: auto; width: min(340px, calc(100vw - 32px)); top: calc(100% + 8px);
}

/* Página no encontrada: en pantalla estrecha NicoLata sube encima del título y
   se hace pequeña. Debajo del botón ocupaba casi una pantalla entera antes de
   los tres caminos, que son la salida de la página. */
@media (max-width: 700px) {
  .lvdlc-404-cosa { order: -1; flex: 0 0 auto !important; min-width: 0 !important; justify-content: flex-start !important; }
  .lvdlc-404-cosa img { max-width: 92px !important; }
}