/*
 * Base layout styles — Sprint 0 chrome (header, footer, forms, cards).
 * Every value comes from the design tokens (tokens.css); do not invent
 * colors or sizes outside of them (see CLAUDE.md and design/DESIGN.md).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-lectura);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primario);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--foco);
  outline-offset: 2px;
}

.sitio {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────── */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4);
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

.logo {
  font-size: 21px;
  font-weight: 800;
  color: var(--tinta-titular);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tacto-min);
}

.logo .punto {
  color: var(--acento);
}

.logo em {
  font-size: var(--t-ui);
  font-weight: 400;
  color: var(--tinta-tenue);
}

.cabecera-nav {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.nav-enlace {
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--primario);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tacto-min);
}

.nav-enlace:hover {
  color: var(--primario-oscuro);
  text-decoration: underline;
}

/* ── Main ───────────────────────────── */

.contenido {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--esp-4) var(--esp-4) var(--esp-8);
}

.contenido--ancho {
  max-width: 720px;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.25;
  color: var(--tinta-titular);
  font-weight: 800;
  margin: var(--esp-4) 0 var(--esp-4);
}

h2 {
  font-size: var(--t-h2);
  color: var(--tinta-titular);
  margin: var(--esp-6) 0 var(--esp-3);
}

.kicker {
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--primario);
  margin: var(--esp-5) 0 0;
}

.meta {
  font-style: italic;
  color: var(--tinta-tenue);
  font-size: var(--t-nota);
}

/* ── Cards ──────────────────────────── */

.card {
  /* Sin esto, `<a class="card">` sigue siendo inline: sus <p> lo parten en
     fragmentos y el fondo sale a trozos alrededor del texto. Pasó en móvil, en
     la tarjeta de direcciones de la portada. En escritorio no se veía porque
     el contenedor es un grid y eso ya bloquea a los hijos. */
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--esp-5);
  margin: var(--esp-4) 0;
}

/* ── Flashes / avisos ───────────────── */

.flash {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-s);
  margin: var(--esp-3) 0;
  font-size: var(--t-ui);
  line-height: var(--alto-ui);
}

.flash-success {
  background: var(--urg-contiempo-fondo);
  color: var(--urg-contiempo-texto);
}

.flash-error {
  background: var(--urg-vencido-fondo);
  color: var(--urg-vencido-texto);
}

.flash-warning {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
}

.flash-info {
  background: var(--primario-suave);
  color: var(--primario-oscuro);
}

/* ── Forms ──────────────────────────── */

.formulario label {
  display: block;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  margin: var(--esp-4) 0 var(--esp-1);
}

.formulario input[type='text'],
.formulario input[type='search'],
.formulario input[type='email'],
.formulario input[type='password'],
.formulario input[type='date'],
.formulario input[type='datetime-local'],
.formulario input[type='time'],
.formulario input[type='number'],
.formulario textarea,
.formulario select {
  width: 100%;
  min-height: var(--tacto-min);
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
}

.formulario input:hover,
.formulario textarea:hover,
.formulario select:hover {
  border-color: var(--primario);
}

.formulario textarea {
  min-height: 120px;
  line-height: var(--alto-lectura);
  resize: vertical;
}

/* El desplegable nativo trae su propia flecha y su propio alto; igualarlo al
   resto en vez de dejar que cada navegador decida. */
.formulario select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
                    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--esp-7);
}

.fila-web {
  margin: var(--esp-4) 0 0;
  font-size: var(--t-ui);
}

.fila-web a {
  overflow-wrap: anywhere;
}

/* ── Horarios de una dirección: por franjas ──
   Cada franja es un fieldset: chips de días arriba, abre/cierra abajo. Las
   franjas 2 y 3 llegan con `hidden` hasta que se piden. */
.franjas {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.franja {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  min-width: 0;
}

.franja-titulo {
  padding: 0 6px;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Chips de día: la casilla real queda debajo (accesible al teclado y al lector
   de pantalla); el relleno lo decide :has(:checked), sin una línea de JS. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* `.formulario .chip` y no `.chip`: la regla global `.formulario label` pone
   display:block y un margin-top de campo, y ganaba por especificidad — los
   chips salían como bloques altos con el texto arriba y un hueco entre filas.
   Rectángulo redondeado y no píldora: con tres letras, una píldora de 44px de
   alto es casi un círculo, y un círculo no se lee como botón. */
.formulario .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: var(--tacto-min);
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--superficie);
  font-size: var(--t-ui);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  user-select: none;
}

.formulario .chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.formulario .chip:has(input:checked) {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--sobre-primario);
}

.formulario .chip:has(input:focus-visible) {
  outline: var(--foco);
  outline-offset: 2px;
}

.chips-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
}

.atajo {
  min-height: var(--tacto-min);
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  color: var(--acento-tinta);
  text-decoration: underline;
  cursor: pointer;
}

/* Abre y cierra, cada uno en su fila: tres desplegables cortos (hora, minutos,
   a.m./p.m.). En 375px caben holgados; dos filas de tres se leen mejor que
   seis piezas en una. */
.franja-horas {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

.formulario .franja-horas label {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: var(--t-etiqueta);
}

.hora-partes {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1.4fr;
  gap: 6px;
  align-items: center;
}

.hora-sep {
  font-weight: 700;
  color: var(--tinta-tenue);
}

.formulario .hora-partes select {
  /* La flecha del desplegable ocupa 30px a la derecha; con tres en fila hay
     que dejarla respirar pero no regalarle el ancho de un campo entero. */
  padding-right: 28px;
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
}

.franja ul {
  margin-top: var(--esp-2);
}

/* En la ficha: «Abierto ahora · cierra a las 2:00», con la escala de urgencia
   como manda CLAUDE.md — nunca el tono pleno como texto. Y el día de hoy en
   negrita, como hace Google. */
.horario-estado {
  display: inline-block;
  margin: 0 0 var(--esp-3);
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--t-etiqueta);
  font-weight: 700;
}

.horario-estado--abierto {
  color: var(--urg-contiempo-texto);
  background: var(--urg-contiempo-fondo);
}

.horario-estado--cerrado {
  color: var(--tinta-suave);
  background: #f0ebe0;
}

.horario-etiqueta {
  display: inline-block;
  min-width: 5.5em;
}

.horario-hoy {
  font-weight: 700;
}

/* Un campo que ya viene resuelto: se lee, no se escribe. Gris y sin el borde
   de foco activo, para que se distinga de un campo vacío que espera algo. */
.formulario .campo-fijado {
  color: var(--tinta-tenue);
  background: #f5f1e8;
  cursor: default;
}

.formulario .campo-fijado:hover {
  border-color: var(--borde-fuerte);
}

.formulario .help-text {
  font-style: italic;
  font-size: var(--t-nota);
  color: var(--tinta-tenue);
  margin: var(--esp-1) 0 0;
}

.formulario ul {
  list-style: none;
  margin: var(--esp-1) 0 0;
  padding: 0;
  font-size: var(--t-etiqueta);
  color: var(--urg-vencido-texto);
}

.fila-checkbox {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
}

.fila-checkbox input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--primario);
  flex-shrink: 0;
}

/* Pulsar la etiqueta marca la casilla: es ella la que debe medir 44px, no la
   casilla de 22px. El padding la engorda y el margen negativo lo compensa, así
   que la zona táctil crece sin mover ni un píxel del texto. Se queda en block
   para que el enlace «política de privacidad» siga fluyendo dentro de la frase. */
.fila-checkbox label {
  display: block;
  min-height: var(--tacto-min);
  padding-block: 13px;
  margin-block: -13px;
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--tinta);
  line-height: var(--alto-ui);
  cursor: pointer;
}

/* Grupo de casillas de un ChoiceType expandido (las franjas de edad).
   El tema de formularios las emite planas —input, label, input, label— así que
   la rejilla de dos columnas es lo que vuelve a emparejarlas: casilla a la
   izquierda, texto a la derecha, una fila por opción. */
.casillas-grupo {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.casillas-grupo input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--primario);
}

/* Es la etiqueta la que mide 44px, no la casilla de 22: el padding la engorda
   y la fila entera queda pulsable sin mover el texto. */
.casillas-grupo label {
  display: flex;
  align-items: center;
  min-height: var(--tacto-min);
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--tinta);
  cursor: pointer;
}

/* ── Buttons ────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--tacto-min);
  padding: 0 var(--esp-5);
  font: inherit;
  font-size: var(--t-ui);
  font-weight: 700;
  border: none;
  border-radius: var(--radio-m);
  cursor: pointer;
  text-decoration: none;
}

.btn-bloque {
  width: 100%;
}

.btn-primario {
  background: var(--primario);
  color: var(--sobre-primario);
}

.btn-primario:hover {
  background: var(--primario-oscuro);
}

.btn-ghost {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--borde-fuerte);
}

.btn-ghost:hover {
  border-color: var(--primario);
}

.btn-peligro {
  background: var(--urg-vencido-fondo);
  color: var(--urg-vencido-texto);
  border: 1.5px solid var(--urg-vencido);
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.separador-o {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
  color: var(--tinta-tenue);
  font-size: var(--t-etiqueta);
  font-style: italic;
}

.separador-o::before,
.separador-o::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--borde-fuerte);
}

/* ── Legal documents ────────────────── */

.legal-doc h1 {
  margin-bottom: var(--esp-2);
}

.legal-doc h2 {
  border-top: 2px solid var(--filete);
  padding-top: var(--esp-3);
  margin-top: var(--esp-7);
}

.legal-doc p,
.legal-doc li {
  font-size: var(--t-cuerpo);
}

/* ── Footer ─────────────────────────── */

/* En móvil el prototipo apila las dos líneas alineadas a la izquierda; en
   escritorio el mockup web las pone en una fila, disclaimer a un lado y enlaces
   al otro. Ambos alinean a la izquierda: centrado nunca estuvo en el diseño, y
   con la frase a dos renglones se leía peor. */
.pie {
  border-top: 1px solid var(--borde-fuerte);
  margin-top: var(--esp-8);
  padding: var(--esp-5) var(--esp-4) var(--esp-7);
  font-size: var(--t-nota);
  color: var(--tinta-tenue);
  text-align: left;
}

/* 44px táctiles con padding de verdad, no con un ::after: el pie rompe en dos
   renglones en pantallas estrechas y un overlay de la primera línea acabaría
   tapando el enlace de la segunda. El padding crece dentro de la caja de línea,
   así que los renglones se separan en vez de solaparse. */
.pie a {
  display: inline-block;
  padding-block: 15px;
  color: var(--tinta-suave);
}

.pie p {
  margin: 0 0 var(--esp-2);
  font-style: italic;
}

/* ── Bottom navigation (mobile) ─────── */
/* Per design/DESIGN.md §1: fixed bar, Radar as the elevated central action. */

.nav-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--superficie);
  border-top: 1.5px solid var(--borde);
  display: flex;
  padding: var(--esp-2) 6px calc(10px + env(safe-area-inset-bottom));
}

.nav-inferior a {
  flex: 1;
  /* Sin esto los cinco destinos no pueden encoger por debajo de su texto y la
     barra se hace más ancha que la pantalla: a 320px salía scroll horizontal en
     todas las páginas del sitio. El diseño apunta a 380px, pero los teléfonos
     de 320 siguen existiendo y son justo los de mucha gente que llega. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tacto-min);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  color: #6b7972;
}

.nav-inferior a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-inferior a svg {
  stroke: #6b7972;
}

.nav-inferior a.activo {
  font-weight: 700;
  color: var(--primario);
}

.nav-inferior a.activo svg {
  stroke: var(--primario);
}

.nav-inferior .nav-radar {
  position: relative;
  top: -14px;
  color: var(--acento-tinta);
  font-weight: 700;
}

.nav-inferior .nav-radar .circulo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgb(217 111 78 / 40%);
}

.nav-inferior .nav-radar .circulo svg {
  stroke: #fff;
}

.con-nav-inferior {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .nav-inferior {
    display: none;
  }

  .con-nav-inferior {
    padding-bottom: var(--esp-8);
  }
}

.nav-secciones {
  display: none;
  gap: var(--esp-4);
}

@media (min-width: 900px) {
  .nav-secciones {
    display: flex;
  }
}

/* ── Search box ─────────────────────── */

.buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  padding: 2px var(--esp-4);
  box-shadow: 0 1px 0 #e8e2d6;
}

.buscador svg {
  flex: none;
  stroke: var(--tinta-tenue);
}

/* La segunda mitad del selector no sobra: `.formulario input[type='text']`
   tiene más especificidad que `.buscador input` y le devolvía su borde al
   campo, así que el comentario salía como una caja dentro de otra. */
.buscador input,
.formulario .buscador input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  padding: var(--esp-3) 0;
  min-height: 20px;
}

.buscador input:focus-visible {
  outline: none;
}

.buscador:focus-within {
  outline: var(--foco);
  outline-offset: 2px;
}

/* ── Radar preview module (home) ────── */

.modulo-radar {
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-l);
  overflow: hidden;
  margin: var(--esp-4) 0;
}

.modulo-radar__cabecera {
  padding: 14px var(--esp-4) 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.modulo-radar__cuerpo {
  padding: 0 var(--esp-4);
}

.modulo-radar__pie {
  padding: var(--esp-3) var(--esp-4) 14px;
}

.fila-tarea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #efe9dc;
  font-size: 13px;
  font-weight: 600;
}

.fila-tarea .punto-urg {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.fila-tarea span:nth-child(2) {
  flex: 1;
}

.fila-tarea--atenuada {
  opacity: 0.55;
}

/* Urgency scale: full tones only as dots/bars, never as text (tokens). */
.punto-urg--vencido { background: var(--urg-vencido); }
.punto-urg--urgente { background: var(--urg-urgente); }
.punto-urg--proximo { background: var(--urg-proximo); }
.punto-urg--contiempo { background: var(--urg-contiempo); }

.badge-urg {
  flex: none;
  font-size: var(--t-nota);
  font-weight: 700;
  border-radius: var(--radio-pill);
  padding: 3px 9px;
}

.badge-urg--vencido { color: var(--urg-vencido-texto); background: var(--urg-vencido-fondo); }
.badge-urg--urgente { color: var(--urg-urgente-texto); background: var(--urg-urgente-fondo); }
.badge-urg--proximo { color: var(--urg-proximo-texto); background: var(--urg-proximo-fondo); }
.badge-urg--contiempo { color: var(--urg-contiempo-texto); background: var(--urg-contiempo-fondo); }

/* ── Guide cards (home) ─────────────── */

.lista-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tarjeta-guia {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px var(--esp-4);
  display: flex;
  gap: var(--esp-3);
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.tarjeta-guia:hover {
  border-color: var(--primario);
}

.tarjeta-guia .tile {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radio-s);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile--primario { background: var(--primario-suave); }
.tile--primario svg { stroke: var(--primario); }
.tile--acento { background: var(--acento-suave); }
.tile--acento svg { stroke: var(--acento-tinta); }

.tarjeta-guia .titulo {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}

.tarjeta-guia .meta {
  margin-top: 2px;
  font-size: 11.5px;
}

.seccion-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--esp-5) 0 var(--esp-3);
}

.seccion-cabecera .titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta-titular);
}

.seccion-cabecera a {
  font-size: var(--t-etiqueta);
  font-weight: 700;
  color: var(--primario);
  text-decoration: none;
}

.seccion-cabecera a:hover {
  text-decoration: underline;
}

/* ── Photo placeholder (until real community photos exist) ── */

.foto-rayas {
  height: 88px;
  background: repeating-linear-gradient(45deg, #e9e3d6 0 10px, #efe9dc 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #626b63;
  font-size: var(--t-nota);
  font-style: italic;
}

/* Panel de direcciones de la portada. El beige es lo que lo separa de las
   tarjetas blancas de arriba, y vale en los dos anchos: no es una decisión de
   escritorio. */
.home-direcciones {
  background: #f0ebe0;
  border: none;
  border-radius: var(--radio-m);
  padding: 18px;
}

/* ── Mapa de direcciones ────────────── */

/* Nace hidden en el HTML; mapa.js lo enseña solo cuando MapLibre arrancó.
   Alto fijo: el mapa acompaña a la lista, no la sustituye. */
#mapa-direcciones {
  height: 240px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  margin-top: var(--esp-4);
  overflow: hidden;
}

[data-mapa-ficha] {
  height: 200px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  margin: var(--esp-4) 0;
  overflow: hidden;
}

.mapa-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-2);
}

/* Pin: un botón circular con los colores de marca. Uniformes a propósito:
   con el filtro activo solo se ve una categoría, y cinco categorías no caben
   en dos colores de marca sin robarle tonos a la escala de urgencia. */
.pin-direccion {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: var(--primario);
  border: 2.5px solid var(--superficie);
  box-shadow: 0 1px 4px rgb(20 52 60 / 0.35);
  cursor: pointer;
}

.pin-direccion--activa {
  background: var(--acento);
  transform: scale(1.35);
}

/* La posición del visitante: distinta de los pines para que nadie la confunda
   con una dirección. Solo existe en su navegador. */
.pin-yo {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--acento);
  border: 2.5px solid var(--superficie);
  outline: 3px solid var(--acento-suave);
}

.tarjeta-guia.destacada {
  border-color: var(--acento);
}

.popup-direccion {
  font-family: var(--fuente);
  font-size: var(--t-ui);
  line-height: var(--alto-ui);
}

.popup-direccion a {
  color: var(--primario);
}

/* ── Guides index ───────────────────── */

.grupo-indice {
  margin-top: var(--esp-5);
}

.grupo-indice__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--filete);
  padding-bottom: 7px;
}

.grupo-indice__cabecera .etiqueta {
  font-size: var(--t-nota);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--primario);
}

.grupo-indice__cabecera .meta {
  font-size: var(--t-nota);
}

/* El filete cierra la guía ENTERA —título, meta y sus acciones—, no solo el
   título. Cuando estaba en `.fila-guia`, «Editar esta guía / Historial»
   quedaba por debajo de la línea y parecía de la guía de abajo. */
.fila-guia-bloque {
  border-bottom: 1px solid var(--borde);
}

.fila-guia {
  display: block;
  padding: 13px 2px;
  text-decoration: none;
  color: inherit;
}

.fila-guia:hover {
  background: #f5f1e8;
}

.fila-guia .titulo {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}

.fila-guia .meta {
  margin-top: 3px;
}

.filete-intro {
  border-top: 2px solid var(--filete);
  border-bottom: 1px solid var(--borde-fuerte);
  padding: 8px 2px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--tinta-tenue);
  margin-bottom: 14px;
}

/* ── Canonical guide article ────────── */

.articulo-guia .breadcrumb {
  font-size: var(--t-nota);
  font-style: italic;
  color: var(--tinta-tenue);
  margin-bottom: 14px;
}

.articulo-guia .breadcrumb a {
  color: inherit;
}

.kicker--acento {
  color: var(--acento-tinta);
  letter-spacing: 0.14em;
  margin: 0 0 var(--esp-2);
}

.franja-confianza {
  border-top: 2px solid var(--filete);
  border-bottom: 1px solid var(--borde-fuerte);
  padding: 9px 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--esp-4);
}

.franja-confianza .verificada {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ok);
}

.franja-confianza .verificada svg {
  flex: none;
  stroke: var(--urg-contiempo);
}

.franja-confianza .fuentes {
  font-size: var(--t-nota);
  font-style: italic;
  color: var(--tinta-tenue);
}

.card-toc {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 13px var(--esp-4);
  margin: var(--esp-4) 0;
}

.card-toc .etiqueta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--primario);
  margin-bottom: var(--esp-2);
}

.card-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: toc;
}

.card-toc li {
  counter-increment: toc;
  font-size: 13px;
  font-weight: 600;
}

.card-toc li::before {
  content: counter(toc) '.';
  color: var(--acento-tinta);
  font-weight: 800;
  margin-right: 6px;
}

.card-toc a {
  color: var(--tinta);
  text-decoration: none;
}

.card-toc a:hover {
  color: var(--primario);
}

/* Rendered markdown body: editorial numbered sections (DESIGN.md §2). */

.guia-cuerpo {
  counter-reset: seccion;
}

.guia-cuerpo p,
.guia-cuerpo li {
  font-size: var(--t-cuerpo);
  line-height: var(--alto-lectura);
  color: var(--tinta);
}

.guia-cuerpo h2 {
  counter-increment: seccion;
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  border-top: 2px solid var(--filete);
  padding-top: var(--esp-3);
  margin: var(--esp-6) 0 var(--esp-2);
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--tinta-titular);
  line-height: 1.3;
}

.guia-cuerpo h2::before {
  content: counter(seccion);
  font-size: 30px;
  font-weight: 800;
  color: var(--acento);
  line-height: 1;
  flex: none;
}

.guia-cuerpo ul {
  padding: 0;
  margin: 0 0 var(--esp-4);
  list-style: none;
}

/* El guion va posicionado, no en flex. Con `display: flex` en el <li>, cada
   hijo en línea del markdown —una negrita, un enlace, una cursiva— se convierte
   en columna propia: «Un | justificatif de domicile | de menos de 6 meses» en
   tres bloques que no se entienden. Aquí el texto vuelve a fluir como texto. */
.guia-cuerpo ul > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--esp-2);
  font-size: 14px;
}

.guia-cuerpo ul > li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primario);
  font-weight: 800;
}

/* Warnings: "> **OJO:** ..." blockquotes become the aviso callout. */
.guia-cuerpo blockquote {
  border: 1.5px solid var(--aviso-borde);
  background: var(--aviso-fondo);
  border-radius: 12px;
  padding: 13px 15px;
  margin: 0 0 var(--esp-5);
}

.guia-cuerpo blockquote p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--aviso-texto);
}

/* Anti-scam block: injected by the template on housing guides (SPEC Eje 2).
   The salmon label color comes straight from design/DESIGN.md §2. */
.bloque-antiestafa {
  background: var(--primario);
  border-radius: var(--radio-m);
  padding: var(--esp-4);
  margin: 0 0 var(--esp-5);
  color: var(--sobre-primario);
}

.bloque-antiestafa .etiqueta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #f2b28f;
  margin-bottom: 7px;
}

.bloque-antiestafa .etiqueta svg {
  stroke: #f2b28f;
}

.bloque-antiestafa p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.banner-radar {
  border-top: 1px solid var(--borde-fuerte);
  border-bottom: 1px solid var(--borde-fuerte);
  padding: 13px 4px;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-5);
  text-decoration: none;
  color: inherit;
}

.banner-radar:hover {
  background: #f5f1e8;
}

.banner-radar svg {
  flex: none;
  stroke: var(--primario);
}

.banner-radar .texto {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta);
}

.banner-radar .cta {
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--acento-tinta);
}

/* Community experiences under a guide. */

.cierre-editorial {
  border-top: 2.5px solid var(--filete);
  padding-top: 14px;
  margin-top: var(--esp-5);
}

.tarjeta-experiencia {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px var(--esp-4);
  margin-bottom: 10px;
}

.tarjeta-experiencia .quien {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--esp-2);
}

.tarjeta-experiencia .avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-etiqueta);
  font-weight: 800;
}

.tarjeta-experiencia .avatar--anonimo {
  background: var(--borde-fuerte);
  color: var(--tinta-suave);
}

.tarjeta-experiencia .nick {
  font-size: 13px;
  font-weight: 700;
}

.tarjeta-experiencia .cita {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinta);
  font-style: italic;
}

/* Disclaimer + glossary boxes (background documented in DESIGN.md). */

.caja-disclaimer {
  background: #f0ebe0;
  border-radius: var(--radio-s);
  padding: 9px 14px;
  text-align: center;
  font-size: var(--t-nota);
  font-style: italic;
  color: var(--tinta-suave);
  margin: var(--esp-5) 0 0;
}

/* ── Textareas (experience form) ────── */

.formulario textarea {
  width: 100%;
  padding: var(--esp-3);
  font: inherit;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  resize: vertical;
}

.formulario select {
  width: 100%;
  min-height: var(--tacto-min);
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
}

/* ── Report form ────────────────────── */

.form-reporte {
  margin-top: var(--esp-5);
}

/* El mismo patrón que el reporte: un summary de texto, no un botón — un
   <summary class="btn"> pinta el triángulo de detalle dentro del botón. */
.form-reporte summary,
.form-rectificar summary {
  cursor: pointer;
  font-size: var(--t-etiqueta);
  color: var(--tinta-tenue);
  min-height: var(--tacto-min);
  display: flex;
  align-items: center;
}

/* ── Radar questionnaire & results (DESIGN.md §3-4) ── */

.radar-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-2);
}

.radar-salir {
  font-size: var(--t-etiqueta);
  font-weight: 700;
  color: var(--tinta-tenue);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  padding: 5px 12px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.radar-salir:hover {
  color: var(--tinta);
}

.progreso {
  display: flex;
  gap: 5px;
  margin: var(--esp-2) 0 var(--esp-4);
}

.progreso__seg {
  flex: 1;
  height: 6px;
  border-radius: var(--radio-pill);
  background: var(--borde);
}

.progreso__seg--activo {
  background: var(--primario);
}

.radar-titulo {
  font-size: 22px;
  line-height: 1.3;
  margin: var(--esp-3) 0 var(--esp-1);
}

.radar-pregunta {
  font-size: 16px;
  font-weight: 800;
  color: var(--tinta-titular);
  margin: var(--esp-5) 0 var(--esp-2);
}

.opciones {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.opcion-card {
  position: relative;
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  padding: 13px var(--esp-4);
  min-height: var(--tacto-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  cursor: pointer;
  width: 100%;
}

.opcion-card:hover {
  border-color: var(--primario);
}

.opcion-card--activa {
  border-color: var(--primario);
  box-shadow: inset 0 0 0 1.5px var(--primario);
}

.opcion-card__label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tinta);
}

.opcion-card__sub {
  font-size: 11.5px;
  font-style: italic;
  color: var(--tinta-tenue);
  margin-top: 2px;
}

.opcion-card__check {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-fecha {
  width: 100%;
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  padding: 13px var(--esp-4);
  font: inherit;
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  min-height: var(--tacto-min);
}

.radar-botonera {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: var(--esp-6);
}

.radar-privacidad {
  text-align: center;
  font-size: var(--t-nota);
  font-style: italic;
  color: var(--tinta-tenue);
  margin-top: 14px;
}

.radar-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--esp-4);
}

.tarjeta-tarea {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px var(--esp-4);
}

.tarjeta-tarea--descartada {
  opacity: 0.55;
}

.tarjeta-tarea__fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tarjeta-tarea__nombre {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}

.tarjeta-tarea__fecha {
  font-size: var(--t-etiqueta);
  font-style: italic;
  color: var(--tinta-suave);
  margin-top: 3px;
}

.tarjeta-tarea__fuente {
  font-size: var(--t-nota);
  color: var(--tinta-tenue);
  margin-top: 3px;
}

.radar-stale {
  margin-top: 6px;
  font-size: var(--t-nota);
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  border-radius: var(--radio-s);
  padding: 4px 8px;
}

.tarjeta-tarea__guia {
  display: flex;
  align-items: center;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #efe9dc;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primario);
  text-decoration: none;
  min-height: 44px;
}

/* Sin ::after de área táctil: «rehacer» va dentro de una frase que rompe en
   dos o tres renglones en pantallas estrechas, y un overlay vertical acabaría
   encima del texto de arriba — tocar ahí borraría el cuestionario. Los enlaces
   en línea dentro de un párrafo están exceptuados por la propia WCAG (2.5.8). */
.radar-rehacer {
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--primario);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-style: normal;
}

/* ── Events (DESIGN.md §5 y §7) ─────── */

.tarjeta-evento {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px var(--esp-4);
  display: flex;
  gap: 13px;
  text-decoration: none;
  color: inherit;
}

.tarjeta-evento:hover {
  border-color: var(--primario);
}

.tarjeta-evento .titulo {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}

.bloque-calendario {
  flex: none;
  width: 46px;
  text-align: center;
  border: 1.5px solid var(--filete);
  border-radius: var(--radio-s);
  overflow: hidden;
  align-self: flex-start;
}

.bloque-calendario .mes {
  display: block;
  background: var(--filete);
  color: var(--fondo);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 0;
  letter-spacing: 0.06em;
}

.bloque-calendario .dia {
  display: block;
  font-size: 19px;
  font-weight: 800;
  padding: 3px 0 4px;
  color: var(--tinta-titular);
}

.fila-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--esp-2);
}

.pill-info {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  background: #f0ebe0;
  border-radius: var(--radio-pill);
  padding: 3px 10px;
}

.pill-info--franja {
  color: var(--urg-proximo-texto);
  background: var(--urg-proximo-fondo);
}

.pill-info--van {
  color: var(--urg-contiempo-texto);
  background: var(--urg-contiempo-fondo);
}

/* Aforo agotado. Rojo de la escala de urgencia y, como manda CLAUDE.md, el
   tono pleno nunca de color de texto: -texto sobre -fondo. */
.pill-info--lleno {
  color: var(--urg-vencido-texto);
  background: var(--urg-vencido-fondo);
}

.pill-pro {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sobre-primario);
  background: var(--primario);
  border-radius: var(--radio-pill);
  padding: 2px 8px;
  vertical-align: middle;
}

.pill-asistente {
  font-size: var(--t-etiqueta);
  font-weight: 600;
  color: var(--tinta);
  background: #f0ebe0;
  border-radius: var(--radio-pill);
  padding: 5px 12px;
}

.pill-asistente--tu {
  font-weight: 700;
  color: var(--sobre-primario);
  background: var(--primario);
}

/* Cada asistente es un enlace a su perfil. La pastilla mide 28px de alto y la
   zona táctil tiene que medir 44: engordarla con padding pintaría el fondo más
   grande y la fila dejaría de parecerse al mockup, así que la zona crece con un
   pseudo-elemento invisible y la pastilla se queda igual. La fila reserva 16px
   entre líneas para que las zonas de dos filas seguidas no se pisen. */
a.pill-asistente {
  position: relative;
  text-decoration: none;
}

a.pill-asistente::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

a.pill-asistente:hover {
  background: #e6dfd0;
}

a.pill-asistente--tu:hover {
  background: var(--primario-oscuro);
}

.evento-asistentes .fila-pills {
  gap: 16px 6px;
}

.aviso-seguridad {
  border: 1.5px solid #cfd9d4;
  background: #eef3f1;
  border-radius: 12px;
  padding: 11px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: var(--esp-4);
  font-size: var(--t-etiqueta);
  line-height: 1.55;
  color: #33504a;
}

.aviso-seguridad svg {
  flex: none;
  margin-top: 2px;
  stroke: var(--ok);
}

.filtro-franjas {
  display: flex;
  flex-wrap: wrap;
  /* La separación horizontal es la del prototipo; la vertical sube a 10px para
     que las zonas táctiles ampliadas de dos filas de chips no se solapen. */
  column-gap: 6px;
  row-gap: 10px;
  margin: var(--esp-3) 0;
}

.pill-filtro {
  position: relative;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  color: var(--tinta-suave);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  padding: 6px 14px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pill-filtro::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.pill-filtro.activo {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--sobre-primario);
}

/* ── Comments ───────────────────────── */

.tarjeta-comentario {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 12px 15px;
}

.tarjeta-comentario .quien {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tarjeta-comentario .nick {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
}

.tarjeta-comentario .cuerpo {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta);
}

.avatar--mini {
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
}

.quien {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El atributo hidden lo pierde cualquier elemento con display propio: la regla
   del navegador es [hidden] { display: none } y una clase la gana. El botón
   «Guardar foto» se ocultaba con hidden y seguía viéndose. */
[hidden] {
  display: none !important;
}

/* El avatar es un componente compartido (components/_avatar.html.twig) y hasta
   ahora solo tenía forma dentro de .quien o .tarjeta-experiencia: sacado de
   ellos se quedaba en una letra suelta. La base va aquí; los contenedores solo
   ajustan tamaño y color. */
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--fondo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}

.avatar--anonimo {
  background: var(--borde-fuerte);
  color: var(--tinta-suave);
}

.quien .avatar {
  display: flex;
}

.quien .nick a {
  color: inherit;
}

/* Índice de guías: móvil = título, filete, buscador (prototipo móvil).
   Escritorio = título izquierda + buscador derecha, filete debajo. */
.indice-cabecera {
  display: flex;
  flex-direction: column;
}

.indice-titulo { order: 1; }
.indice-cabecera .filete-intro { order: 2; }
.indice-buscador { order: 3; }

/* Las URLs de las fuentes son cadenas sin puntos de corte: sin esto ensanchan
   la columna (min-width:auto de grid) y provocan scroll horizontal en móvil. */
.guia-principal .card a,
.lista-fuentes a {
  overflow-wrap: anywhere;
}

/* ── Orden móvil de las páginas con columnas (guía y evento) ──
   Los wrappers son transparentes en móvil (display: contents) para que el
   orden lo fije `order` y no haga falta duplicar markup entre mockups. */

.guia-col-izq,
.guia-col-der,
.evento-col-izq,
.evento-col-der {
  display: contents;
}

.guia-layout .breadcrumb { order: 1; }
.guia-cabecera { order: 2; }
.guia-layout .card-toc { order: 3; }
.guia-principal { order: 4; }

.evento-card { order: 1; }
.evento-rsvp { order: 2; }
.evento-aviso { order: 3; }
.evento-descripcion { order: 4; }
.evento-asistentes { order: 5; }
.evento-comentarios { order: 6; }
/* Retirar y reportar cierran la página. Sin este `order` caen en 0 —el valor
   por defecto— y aparecen ANTES de la tarjeta del evento: lo primero que leía
   un visitante era «reportar esta publicación», antes incluso de saber cuál. */
.evento-layout .form-reporte { order: 7; }

.guia-layout,
.evento-layout {
  display: flex;
  flex-direction: column;
}

/* La card del RSVP es una card solo en escritorio. */
.evento-rsvp {
  background: none;
  border: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
}

/* Un evento terminado no ofrece inscripción, y en el hueco del botón queda
   este aviso: mismo tamaño y misma posición, borde discontinuo para que se lea
   como un estado y no como un botón apagado que se pueda intentar pulsar. */
.evento-pasado {
  margin: 0;
  padding: 13px var(--esp-4);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio-m);
  text-align: center;
  font-weight: 600;
  color: var(--tinta-suave);
}

.lista-experiencias {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   ESCRITORIO — recreación del mockup web (design/Acá en Francia - Web.dc.html).
   Por debajo de 900px manda el prototipo móvil; desde 900px, el web:
   lienzo de 1180px, header con filete de 2px, y las grillas de cada pantalla.
   ══════════════════════════════════════════════════════════════ */

/* Visibilidad por viewport (una misma pieza cambia de sitio entre mockups). */
.solo-escritorio {
  display: none;
}

@media (min-width: 900px) {
  .solo-movil {
    display: none !important;
  }

  .solo-escritorio {
    display: block;
  }

  /* ── Marco de página ──
     OJO: el lienzo redondeado con sombra sobre fondo beige del mockup web es el
     marco de presentación de la herramienta de diseño (los chips navegan "fuera
     del device", DESIGN.md), no parte del diseño. El sitio real ocupa toda la
     pantalla: filetes de header y pie a sangre, contenido centrado a 1180px. */

  .cabecera,
  .contenido,
  .contenido--ancho,
  .pie {
    padding-inline: max(40px, calc((100% - 1180px) / 2));
  }

  .cabecera {
    max-width: none;
    padding-block: var(--esp-4);
    border-bottom: 2px solid var(--filete);
  }

  .cabecera-nav {
    gap: 26px;
  }

  .nav-secciones {
    gap: 26px;
  }

  .nav-enlace {
    font-size: var(--t-ui);
    color: var(--tinta-suave);
  }

  .nav-enlace:hover {
    color: var(--acento-tinta);
    text-decoration: none;
  }

  /* El contenido ocupa el ancho de la página; el padding-inline de arriba lo
     centra en una columna de 1180px. */
  .contenido,
  .contenido--ancho {
    max-width: none;
    padding-block: 30px 34px;
  }

  h1 {
    font-size: 30px;
  }

  .contenido > .flash {
    margin-bottom: var(--esp-4);
  }

  /* ── Home ── */

  .home-hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: start;
    margin: 6px 0 0;
    padding: 6px 0 30px;
    border-bottom: 1px solid var(--borde);
  }

  .home-hero h1 {
    font-size: 36px;
    line-height: 1.22;
    font-weight: 700;
    margin: 0 0 var(--esp-3);
    text-wrap: pretty;
  }

  .home-hero .home-sub {
    font-size: var(--t-cuerpo-l);
    line-height: 1.6;
    margin: 0 0 22px;
  }

  .home-hero form {
    max-width: 520px;
  }

  .home-hero .buscador input {
    font-size: var(--t-cuerpo);
    padding: 14px 0;
  }

  .home-frecuentes {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--tinta-tenue);
  }

  .home-frecuentes a {
    color: inherit;
  }

  .modulo-radar {
    margin: 0;
    align-self: start;
  }

  .home-destacadas {
    padding-top: 26px;
  }

  .home-destacadas .seccion-cabecera .titulo {
    font-size: 19px;
  }

  .home-destacadas .lista-tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  /* En web la tarjeta apila icono arriba y texto abajo. */
  .home-destacadas .tarjeta-guia {
    flex-direction: column;
    align-items: stretch;
    padding: var(--esp-4);
    gap: 0;
  }

  .home-destacadas .tarjeta-guia .tile {
    margin-bottom: var(--esp-3);
  }

  .home-destacadas .tarjeta-guia .titulo {
    font-size: 14.5px;
  }

  .home-destacadas .tarjeta-guia .meta {
    margin-top: 5px;
    font-size: 11.5px;
  }

  .home-cierre {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
    align-items: stretch;
    padding-top: 24px;
  }

  .home-cierre .card {
    margin: 0;
  }

  /* Tarjeta de evento horizontal: foto a la izquierda. */
  .home-evento {
    display: flex;
    overflow: hidden;
    border: 1.5px solid var(--borde);
  }

  .home-evento:hover {
    border-color: var(--primario);
  }

  .home-evento .foto-rayas {
    flex: none;
    width: 170px;
    height: auto;
  }

  .home-evento .home-evento__cuerpo {
    padding: var(--esp-4) 18px;
    align-self: center;
  }

  /* ── Índice de guías ── */

  .indice-cabecera {
    display: grid;
    grid-template-columns: 1fr 320px;
    column-gap: 30px;
    align-items: end;
    margin-bottom: 6px;
  }

  .indice-titulo {
    grid-column: 1;
    grid-row: 1;
  }

  .indice-cabecera h1 {
    margin: 0;
    font-size: 30px;
  }

  .indice-buscador {
    grid-column: 2;
    grid-row: 1;
    width: 320px;
  }

  .indice-cabecera .filete-intro {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .indice-cabecera .buscador input {
    font-size: var(--t-ui);
    padding: 11px 0;
  }

  .filete-intro {
    border-bottom: none;
    padding: 6px 2px 0;
    margin-bottom: 22px;
  }

  #lista-guias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 40px;
    align-items: start;
  }

  .grupo-indice {
    margin-top: 0;
    margin-bottom: 18px;
  }

  /* En escritorio hay sitio de sobra a la derecha del título, así que las
     acciones suben a su misma línea en vez de gastar un renglón propio: la
     guía y lo que puedes hacer con ella se leen de una pasada. En móvil no
     caben y siguen debajo de la meta. */
  .fila-guia-bloque {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
  }

  .fila-guia-bloque .fila-guia {
    flex: 1;
    min-width: 0;
  }

  .fila-guia-bloque .fila-guia-editar {
    flex: none;
    padding: 0;
  }

  .banner-radar {
    margin-top: 26px;
    gap: 14px;
    padding: 14px 4px;
  }

  .banner-radar .texto {
    font-size: 14px;
  }

  /* ── Guía canónica: 210px / 1fr / 250px ── */

  .guia-layout {
    display: grid;
    grid-template-columns: 210px 1fr 250px;
    gap: 36px;
    align-items: start;
  }

  .guia-col-izq {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 20px;
  }

  .guia-cabecera {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .guia-principal {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .guia-col-der {
    grid-column: 3;
    display: flex;
    grid-row: 1 / span 2;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* TOC como lista de la columna izquierda, sin card. */
  .guia-col-izq .card-toc {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .guia-col-izq .card-toc .etiqueta {
    border-bottom: 1px solid var(--borde-fuerte);
    padding-bottom: 7px;
    margin-bottom: 10px;
  }

  .guia-col-izq .card-toc ol {
    gap: 9px;
  }

  .guia-col-izq .caja-disclaimer {
    margin-top: 22px;
    text-align: left;
    line-height: 1.6;
  }

  .guia-cabecera h1 {
    font-size: 33px;
    line-height: 1.22;
    margin: 0 0 var(--esp-4);
  }

  .guia-cabecera .franja-confianza {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 2px;
    margin-bottom: 22px;
  }

  .guia-cuerpo p,
  .guia-cuerpo ul > li {
    font-size: var(--t-cuerpo-l);
    line-height: 1.75;
  }

  .guia-cuerpo h2 {
    gap: 14px;
    padding-top: 14px;
    font-size: 22px;
  }

  .guia-cuerpo h2::before {
    font-size: 34px;
  }

  /* Las experiencias van en dos columnas bajo el artículo. */
  .cierre-editorial .lista-experiencias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cierre-editorial .tarjeta-experiencia {
    margin-bottom: 0;
  }

  /* Card del radar en la columna derecha. */
  .card-lateral {
    background: var(--superficie);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-l);
    overflow: hidden;
  }

  .card-lateral__cabecera {
    padding: 13px 15px 10px;
  }

  .card-lateral__cabecera .titulo {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tinta-titular);
  }

  .card-lateral__pie {
    padding: 0 15px 14px;
  }

  .card-lateral__pie .btn {
    min-height: 0;
    padding: 12px;
    font-size: var(--t-ui);
    border-radius: 11px;
  }

  .lista-lateral {
    border-top: 1px solid var(--borde-fuerte);
    border-bottom: 1px solid var(--borde-fuerte);
    padding: var(--esp-3) 2px;
  }

  .lista-lateral a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tacto-min);
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .lista-lateral a:last-child {
    margin-bottom: 0;
  }

  .lista-lateral a:hover {
    color: var(--primario);
  }

  .lista-lateral .meta {
    display: block;
    font-weight: 400;
  }

  /* ── Radar: columnas centradas ── */

  /* wrap y no nowrap: en escritorio esto es un flex centrado, así que cualquier
     bloque que se añada debajo del radar —el glosario— se colocaba como segunda
     columna a la derecha en vez de debajo. */
  .radar-web {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 34px 40px 40px;
  }

  .radar-web > * {
    width: 100%;
    max-width: 680px;
  }

  .radar-titulo {
    font-size: 29px;
  }

  .tarjeta-tarea__nombre {
    font-size: 15.5px;
  }

  /* ── Eventos ── */

  .eventos-lista,
  .direcciones-lista,
  .perfil-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* En escritorio el mapa respira más, pero sigue encima de la lista: una
     sola disposición que entender, en los dos anchos. */
  #mapa-direcciones {
    height: 320px;
  }

  [data-mapa-ficha] {
    height: 260px;
  }

  .eventos-pie {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    align-items: stretch;
  }

  .eventos-pie .aviso-seguridad {
    flex: 1;
    margin-top: 0;
    align-items: center;
    font-size: 12.5px;
  }

  .eventos-pie .btn {
    flex: none;
    width: auto;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--primario);
  }

  .evento-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .evento-col-izq {
    display: block;
    min-width: 0;
  }

  .evento-col-der {
    display: flex;
    min-width: 0;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .evento-rsvp {
    background: var(--superficie);
    border: 1.5px solid var(--borde-fuerte);
    padding: var(--esp-4);
  }

  .evento-col-der .card {
    margin: 0;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-l);
    padding: var(--esp-4);
  }

  .evento-col-der .aviso-seguridad {
    margin-top: 0;
  }

  .evento-col-izq .foto-rayas {
    height: 190px;
  }

  .evento-col-izq h1 {
    font-size: 27px;
  }

  /* Formularios y textos legales: columna estrecha, legible. El resto de
     páginas usa el ancho completo de 1180px. */
  .contenido--columna,
  .contenido--ancho {
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 40px;
  }

  .contenido--columna {
    max-width: 620px;
  }

  /* ── Pie ── */

  /* Fila: el disclaimer a la izquierda, los enlaces a la derecha. `flex-wrap`
     porque en francés la frase es más larga y a 1024px las dos partes no caben
     en un renglón; entonces baja y las dos siguen alineadas a la izquierda. */
  .pie {
    padding-block: var(--esp-5) var(--esp-6);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px var(--esp-4);
  }

  .pie p {
    margin: 0;
  }
}


/* La foto rellena el círculo que ya dibuja el span; sin esto saldría cuadrada
   y deformada, porque el border-radius vive en el contenedor, no en la imagen. */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Comentario retenido por el filtro de palabras clave: solo lo ve su autor,
   con el aviso de que está en revisión. */
.tarjeta-comentario--pendiente {
  border-style: dashed;
  background: var(--aviso-fondo);
}


/* ── Cuenta: la foto es el botón ───── */

.perfil-cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
  flex-wrap: wrap;
}

.perfil-cabecera__datos {
  flex: 1 1 220px;
  min-width: 0;
}

/* Invisible pero no ausente: display:none sacaría el campo del orden de
   tabulación y la foto dejaría de poder cambiarse con el teclado. */
.campo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Con .formulario delante: la regla genérica `.formulario label` es más
   específica que `.foto-disparador` y le imponía display:block, así que el
   flex no llegaba a aplicarse nunca. */
.formulario .foto-disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  cursor: pointer;
  border-radius: var(--radio-m);
  padding: var(--esp-1);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

/* El foco vive en el input, que no se ve; el anillo tiene que dibujarse sobre
   la etiqueta o el teclado se queda sin pista de dónde está. */
.campo-oculto:focus-visible + .foto-disparador {
  outline: var(--foco);
  outline-offset: 2px;
}

.foto-disparador__pista {
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primario);
  text-decoration: underline;
}

.foto-disparador:hover .foto-disparador__pista {
  color: var(--primario-oscuro);
}


/* ── Portada de evento ──────────────── */

.evento-portada {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--primario-suave);
}


/* ── Comentario: un solo control ───── */

.buscador--comentario {
  box-shadow: none;
  padding-right: var(--esp-1);
}

/* Enviar vive dentro de la caja, no al lado. Padding para llegar a los 44px
   táctiles sin engordar la caja, que se queda a la altura del campo. */
.boton-enviar-comentario {
  flex: none;
  min-height: var(--tacto-min);
  padding-inline: var(--esp-3);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-etiqueta);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--acento-tinta);
  cursor: pointer;
}

.boton-enviar-comentario:hover {
  color: var(--primario);
}


/* ── Editor de guías ────────────────── */

.barra-editor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.barra-editor .btn {
  font-size: var(--t-etiqueta);
  padding-inline: var(--esp-3);
}

.formulario [data-editor-guia] {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
}

.vista-previa {
  padding: var(--esp-5) 18px;
}

.fila-guia-editar {
  /* Dos enlaces ahora, no uno: sin el hueco se leen como una sola palabra.
     En móvil van bajo la meta de su guía; en escritorio, a la derecha del
     título (ver la regla de ≥900px). */
  display: flex;
  gap: var(--esp-4);
  padding: 0 0 var(--esp-3) 2px;
  font-size: var(--t-etiqueta);
}

.fila-guia-editar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tacto-min);
  font-weight: 700;
  color: var(--acento-tinta);
}


/* ── Suplantación (solo super_admin) ── */

.banda-suplantacion {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  background: var(--urg-vencido);
  color: #fff;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.banda-suplantacion a {
  min-height: var(--tacto-min);
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: underline;
}


/* ── Glosario ───────────────────────── */

.glosario {
  margin-top: var(--esp-5);
  background: var(--primario-suave);
  border-radius: var(--radio-m);
  padding: var(--esp-3) var(--esp-4);
}

.glosario > summary {
  cursor: pointer;
  min-height: var(--tacto-min);
  display: flex;
  align-items: center;
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--primario);
}

.glosario dl {
  margin: var(--esp-2) 0 var(--esp-2);
}

.glosario dt {
  font-weight: 800;
  color: var(--tinta-titular);
  margin-top: var(--esp-3);
}

.glosario dd {
  margin: 2px 0 0;
  font-size: var(--t-cuerpo);
  line-height: var(--alto-lectura);
  color: var(--tinta-suave);
}

.glosario dd a {
  color: var(--acento-tinta);
  white-space: nowrap;
}

/* Diff del historial de guías. Monoespaciada a propósito: aquí se comparan
   frases carácter a carácter, y Bitter —que es lo correcto para leer— hace que
   dos líneas casi iguales parezcan idénticas. */
.diff {
  margin-top: var(--esp-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.diff p {
  margin: 0 0 2px;
  padding: 2px 6px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.diff-fuera {
  background: var(--urg-vencido-fondo);
  color: var(--urg-vencido-texto);
}

.diff-dentro {
  background: var(--urg-contiempo-fondo);
  color: var(--urg-contiempo-texto);
}

/* ── Flujo editorial de guías ── */

.estado-guia {
  margin-bottom: var(--esp-5);
}

.acciones-flujo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.lista-permisos {
  margin: var(--esp-3) 0;
  padding: 0;
  list-style: none;
}

.lista-permisos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: var(--tacto-min);
}

/* Los <summary> de las pantallas de guía son controles: 44px como cualquier
   otro (--tacto-min). Sin esto, abrir «quién puede editar» en un móvil es un
   ejercicio de puntería. */
.estado-guia summary,
.guia-cuerpo details > summary,
.card > details > summary {
  display: flex;
  align-items: center;
  min-height: var(--tacto-min);
  cursor: pointer;
}

/* ── Eventos sin cuenta: la invitación y el esqueleto ───────────────────────

   El esqueleto es forma sin contenido. No hay nada que ocultar aquí porque el
   servidor no manda ni un título: son cajas grises escritas en el template.
   Por eso el gris es sólido y no un `filter: blur()` sobre datos reales — eso
   último sería enseñar el dato y pedirle al navegador que no lo mire. */

.card--invitacion {
  border-color: var(--primario);
  border-width: 1.5px;
  margin-top: var(--esp-5);
}

.esqueleto {
  /* `pointer-events: none` porque no lleva a ningún sitio, y `user-select`
     porque seleccionar cajas vacías solo confunde. */
  pointer-events: none;
  user-select: none;
  display: flex;
  gap: 13px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px var(--esp-4);
}

.esqueleto + .esqueleto {
  margin-top: var(--esp-3);
}

.esqueleto__bloque,
.esqueleto__linea {
  display: block;
  background: #ece6da;
  border-radius: var(--radio-s);
}

.esqueleto__bloque {
  flex: none;
  width: 46px;
  height: 46px;
}

.esqueleto__linea--titulo {
  height: 13px;
  width: 72%;
}

.esqueleto__linea--meta {
  height: 10px;
  width: 88%;
  margin-top: 9px;
}

.esqueleto__linea--pill {
  height: 15px;
  width: 96px;
  margin-top: 12px;
  border-radius: var(--radio-pill);
}

/* Cada tarjeta un pelo más pálida que la anterior: el índice real se desvanece
   hacia abajo y el ojo entiende «hay más» sin que se lo digan. */
.esqueleto:nth-child(2) { opacity: 0.75; }
.esqueleto:nth-child(3) { opacity: 0.5; }
.esqueleto:nth-child(4) { opacity: 0.3; }

/* ══════════════════════════════════════════════════════════════
   SUSPENSIÓN — la pantalla que ve quien tiene la cuenta suspendida.

   Deliberadamente sobria y sin la escala --urg-*: esos tonos son para
   vencimientos de trámites, y teñir de rojo una sanción del sitio la pondría
   al mismo nivel que un titre de séjour que caduca. Lo que hace falta aquí es
   que se lea, no que grite.
   ══════════════════════════════════════════════════════════════ */

.suspension-hasta {
  margin: 0 0 var(--esp-3);
  font-size: 20px;
  line-height: 1.3;
}

.suspension-norma {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-ui);
}

/* El mensaje que escribió quien moderó, tal cual lo escribió: los saltos de
   línea son suyos y se respetan. */
.suspension-mensaje {
  margin: 0;
  padding: 13px 15px;
  background: var(--fondo);
  border-radius: var(--radio-s);
  line-height: 1.7;
}

.suspension-citado {
  margin-top: var(--esp-4);
}

.suspension-citado ul,
.suspension-lista {
  margin: var(--esp-2) 0 0;
  padding-left: 18px;
  line-height: 1.8;
}

.suspension-lista li {
  margin-bottom: 4px;
}