/*
 * 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);
}

/* Selector de idioma: píldora con el idioma actual + ▾ (mockups móvil y web).
   El área táctil se estira a 44px con un ::after para cumplir --tacto-min sin
   engordar la píldora, que en el diseño mide ~28px de alto. */
.idioma {
  position: relative;
}

.idioma > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 5px 12px;
  border: 1.5px solid #cfd9d4;
  border-radius: var(--radio-pill);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  color: var(--primario);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.idioma > summary::-webkit-details-marker {
  display: none;
}

.idioma > summary::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

.idioma > summary:hover {
  border-color: var(--primario);
}

.idioma[open] > summary {
  border-color: var(--primario);
}

.idioma__menu {
  position: absolute;
  right: 0;
  /* 10px, no 6px: la píldora amplía su zona táctil 8px hacia abajo con un
     ::after y con 6px el overlay pisaba el borde superior de «Español». */
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 150px;
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  box-shadow: 0 6px 18px rgb(34 48 58 / 12%);
  overflow: hidden;
}

.idioma__menu a {
  display: flex;
  align-items: center;
  min-height: var(--tacto-min);
  padding: 0 var(--esp-4);
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}

.idioma__menu a:hover {
  background: #f5f1e8;
  color: var(--primario);
}

.idioma__menu a[aria-current] {
  color: var(--primario);
  font-weight: 700;
}

.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 {
  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='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);
}

.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;
}

/* ── 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);
}

.legal-doc .pendiente {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  border-radius: var(--radio-s);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--t-etiqueta);
}

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

.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: center;
}

/* 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;
}

/* ── 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);
}

.fila-guia {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--borde);
  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);
}

.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);
}

.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; }

.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;
}

.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;
  }

  .home-direcciones {
    background: #f0ebe0;
    border: none;
    border-radius: var(--radio-m);
    padding: 18px;
  }

  /* ── Í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;
  }

  .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;
  }

  .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 ── */

  .pie {
    padding-block: var(--esp-5) var(--esp-6);
    text-align: left;
  }
}


/* 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. */
  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;
}