/* Base a 18px y contraste alto desde el primer día: el cartel lo hereda la
   asociación de discapacitados (criterio de éxito nº9). La auditoría formal es
   la Fase 6, pero no se construye para quien lo necesita menos. */

:root {
  --principal: #1f3a5f;
  --acento: #c9a227;
  --texto: #1a1a1a;
  /* EL PAPEL. Lo sobrescribe `app.js` con el de esta asociación en cuanto llega
     la respuesta (D53); este valor es el del tema —`papelDe("#1f3a5f")`— y es lo
     que se ve el instante previo. Que no sea blanco es lo que hace que las
     tarjetas floten: sobre blanco, una tarjeta con borde de 1 px es un
     rectángulo dibujado, no una tarjeta. */
  --fondo: #e9ebef;
  /* Las tarjetas, que sí son blancas. La pareja papel/tarjeta es el recurso
     visual sobre el que se apoya toda la Fase 8. */
  --tarjeta: #ffffff;
  /* LA BANDA DE SECCIÓN (D61). Respaldo del tema —`tenidoDe("#1f3a5f")` y su
     tinta—; `app.js` los sustituye por los de la asociación en cuanto llega la
     respuesta, igual que hace con el papel.

     EL RELLENO NO DIBUJA LA CAJA. Teñido contra papel da 1,13:1, o sea que casi
     no se distingue del fondo: lo que hace que la banda se vea es el borde de
     2 px de `--banda-tinta`. Quitarlo la hace desaparecer sin que ningún test
     se entere, porque los tests miden pares de colores y no lo que se ve.

     No confundir `--tenido` con `--tenue`: el segundo es el gris de los avisos
     de estado y de los botones de control, y no tiene nada que ver. */
  --tenido: #d7dce2;
  --banda-tinta: #162a44;
  /* La letra de la chapa de la cabecera, elegida por el servidor entre negro y
     blanco según el acento de cada asociación (D63). */
  --chapa-tinta: #1a1a1a;
  --tenue: #eceae6;
  /* Gris de los bordes que dicen dónde empieza un campo o un botón. A 3:1 sobre
     el fondo, que es lo que exige WCAG 1.4.11 para lo que hay que distinguir sin
     ser texto. El gris anterior (#d4d4d4) se quedaba en 1,48. */
  --borde: #767676;
  /* Los separadores decorativos —la línea del pie, la de las secciones— siguen
     siendo claros: WCAG exime expresamente lo decorativo, y oscurecerlos
     ensuciaría el cartel entero sin ganar ni un punto de accesibilidad. */
  --separador: #d4d4d4;
  --secundario: #4a4a4a;

  /* EL FILO Y LA SOMBRA DE LA TARJETA (D67, Fase 12).

     Hasta la Fase 11 la tarjeta la dibujaba un borde gris de 1 px y una sombra
     plana de una sola capa. Eso es un rectángulo dibujado; lo que hace que una
     tarjeta parezca apoyada encima del papel es la luz.

     Son DOS sombras y no una: la de contacto, corta y dura, dice que la hoja
     toca el papel; la de ambiente, larga y suave, dice a qué altura está. Con
     una sola no hay volumen, sólo un manchón.

     Y VAN TEÑIDAS DE VERDE, NO EN GRIS. Una sombra sobre papel verde no es
     gris. Ese detalle es la mitad del efecto y no cuesta ni un byte.

     Ninguna de las tres es un par de contraste: son transparencias sobre el
     papel, no texto sobre fondo. `contraste.test.js` no las mide y no debe. */
  --filo-tarjeta: rgba(19, 77, 37, 0.12);
  --sombra-contacto: 0 1px 2px rgba(19, 77, 37, 0.09);
  --sombra-ambiente: 0 8px 20px -10px rgba(19, 77, 37, 0.30);

  /* EL FOCO NO SALE DEL REGISTRO, Y ES A PROPÓSITO (D42).
     `--principal` y `--acento` los elige cada junta. Si el contorno de foco
     dependiese de ellos, la accesibilidad del teclado —el criterio nº9— se
     rompería la primera vez que alguien pidiera un dorado claro, y nadie se
     enteraría. Estos dos son fijos e iguales para todas las asociaciones.

     Van en pareja a propósito: el contorno oscuro se ve sobre el cartel, y el
     halo claro se ve sobre lo oscuro —un botón del color de la asociación, o la
     capa negra de la foto ampliada—. Con uno solo, siempre hay un fondo donde
     el foco desaparece. */
  --foco: #1a1a1a;
  --foco-halo: #ffffff;

  /* EL VERDE DE WHATSAPP (D59), Y ES FONDO, NUNCA TEXTO.

     El de la parroquia (#1faa52) da 3,03:1 con letra blanca y NO cumple AA: ese
     botón no habría pasado los tests de la Fase 6. Éste es el mismo, oscurecido
     hasta 5,42:1, y sigue leyéndose como WhatsApp.

     La regla de que es fondo y no texto está medida: como texto sobre el papel
     de una asociación de color muy oscuro se queda en 4,34:1, por debajo de AA.
     El par que se usa pasa; el que no se usa, no pasaría. Si algún día hace
     falta como texto, hay que oscurecerlo a algo como #0b6b37 y medir los dos.

     No sale del registro, igual que el foco: no lo elige ninguna junta. Es el
     color de WhatsApp, no el de la asociación. */
  --whatsapp: #0e7a3f;

  /* LA LETRA DE LA MAQUINARIA (Fase 15).

     Es el cuerpo que tenía el cartel ANTES de esta fase, y aquí se queda. La
     Fase 15 subió lo que se lee —el cuerpo pasó de 1,1rem a 1,45rem— y dejó
     quietos los botones, los campos y los desplegables. No es una inconsistencia:
     es lo que hace que ninguna fila se descuadre.

     El motivo está medido a 390 px. En la zona de socios hay tres cosas en una
     misma fila —campo, «Borrar» y «Entrar»— y quien absorbe el crecimiento es el
     campo, que ya baja a 158 px si los botones crecen con el cuerpo. Lo mismo con
     la barra de edición y con los controles de cada tarjeta. Subiendo solo el
     texto, esas filas se quedan EXACTAMENTE como estaban.

     Va como variable y no repetida a mano quince veces para que subirla algún día
     sea tocar un número, no ir a buscar quince reglas. */
  --letra-control: 1.1rem;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  max-width: 42rem;
  margin-inline: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* SEGUNDA SUBIDA DELIBERADA DEL CUERPO (Fase 15). 1rem en las Fases 1-6,
     1,1rem desde la Fase 8, y 1,45rem —26,1 px— desde aquí.

     El motivo de la Fase 8 sigue valiendo entero: el criterio nº9 promete AA y
     esto lo hereda la asociación de discapacitados. Lo que lo empuja otra vez es
     quién lee el cartel: en el pueblo hay mucha gente mayor, y esto se lee de pie
     en la calle, con el móvil en la mano y con vista cansada.

     NO SE TOCA `html { font-size }`, y es a propósito. Subir la base habría
     movido a la vez las letras y TODOS los rellenos, márgenes y anchos en rem
     —o sea, el cartel entero—. Subiendo solo el cuerpo, la composición se queda
     donde estaba y lo único que crece es el texto.

     Se eligió mirando: se montaron tres variantes de la página real con el
     contenido publicado y se compararon a 390 px, que es el móvil más común.
     Ganó ésta. Lo que arrastra el cuerpo hacia arriba —entradilla, título de
     tarjeta— sube con él para no invertir la jerarquía (ver D71). */
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

.oculto { display: none !important; }

/* BARRA DE EDICIÓN. Pegada arriba para que no se pierda al bajar por el cartel:
   quien edita puede recorrer diez tarjetas y tiene que seguir sabiendo que lo
   que toque se va a publicar.

   Va sobre `--texto` y no sobre el color de la asociación a propósito: la
   cabecera y las bandas ya son de ese color, y la barra tiene que leerse como
   algo que NO es el cartel, sino un estado en el que uno está. */
.barra-edicion {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 -1rem;
  padding: 0.5rem 1rem;
  background: var(--texto);
  color: #ffffff;
  /* Maquinaria, no cartel: se queda en el cuerpo de antes de la Fase 15. */
  font-size: var(--letra-control);
}

.barra-edicion-btn {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid #ffffff;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

/* CABECERA. A todo el ancho y con peso: es lo primero que se ve y lo que decide
   si esto parece una web cuidada o un documento sin terminar. El nombre va en
   blanco sobre el color de la asociación —el mismo par que ya valida el
   registro (D43), así que no puede quedar ilegible—.

   DESDE LA FASE 9 ES EL ÚNICO SITIO DE TODA LA PÁGINA CON EL COLOR MACIZO. Las
   bandas pasaron a teñidas (D61) justamente para que esto mande solo. Si algún
   día vuelve a haber dos macizos, no manda ninguno.

   El filete de acento se mudó de abajo a arriba: abajo separaba la cabecera del
   cartel, arriba la remata y deja que la cabecera y el papel se toquen. */
.cabecera {
  background: var(--principal);
  color: #ffffff;
  padding: 0 0 1.4rem;
  /* Se come el relleno lateral del body para llegar a los dos bordes. */
  margin: 0 -1rem 1.6rem;
}

.cabecera-filete {
  height: 8px;
  background: var(--acento);
}

/* El relleno vive aquí y no en `.cabecera` porque el filete tiene que llegar a
   los dos bordes y a ras de arriba. */
.cabecera-int {
  padding: 1.6rem 1rem 0;
}

/* LA CHAPA DEL SOBRETÍTULO (D63, D64). Es la primera vez que `--acento` hace de
   fondo de texto: hasta la Fase 8 solo era un filete decorativo, y por eso el
   registro no lo valida (D42). La letra NO se escribe aquí: la elige el servidor
   entre negro y blanco según el acento de cada asociación, y llega en
   `--chapa-tinta`. Con un acento oscuro, el negro dejaría de cumplir AA.

   El texto sale de partir la descripción por el primer punto, y si no se puede
   partir la chapa no se pinta: `app.js` le deja la clase `oculto`. */
.chapa {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  background: var(--acento);
  color: var(--chapa-tinta);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cabecera h1 {
  margin: 0;
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #ffffff;
  /* Se parte por donde tiene sentido y no por donde cabe. En un nombre de una
     palabra no hace nada; el día que entre una asociación con nombre largo,
     evita la línea huérfana de una sílaba. */
  text-wrap: balance;
}

/* Acotado a la cabecera a propósito: el blanco solo es legible ahí. Suelto,
   sería una trampa el día que alguien use la clase en otro sitio.

   El ancho máximo no es decorativo: una línea de más de unos 45 caracteres se
   lee peor, y la descripción es lo único de la cabecera que es prosa. */
.cabecera .descripcion {
  margin: 0.7rem 0 0;
  /* Sube con el cuerpo (Fase 15) pero se queda por debajo de él: es prosa de
     apoyo, no el texto del cartel. */
  font-size: 1.15rem;
  line-height: 1.45;
  max-width: 32ch;
  color: #ffffff;
}

.seccion { margin-bottom: 2.5rem; }

/* ENCABEZADOS COMO BANDA. Dan ritmo al bajar y dicen dónde empieza cada cosa
   mucho mejor que un texto con una raya debajo. Es el recurso que la parroquia
   usa para separar sus bloques y que el pueblo ya ha visto funcionar.

   HASTA LA FASE 8 ERAN `--principal` MACIZO, Y ESE ERA EL PROBLEMA (D61). Con la
   cabecera del mismo color, el cartel bajaba enseñando cuatro rectángulos
   iguales —cabecera, avisos, tablón y socios—, y un color que aparece cuatro
   veces deja de significar «aquí manda esto». Ahora el macizo se reserva a la
   cabecera y la banda va teñida.

   EL BORDE DE 2 px NO ES UN REMATE, ES LA CAJA. El relleno teñido contra el
   papel da 1,13:1: por sí solo no se ve. Lo que dibuja la banda es el borde. Si
   se quita, la banda desaparece del cartel y ningún test se entera, porque los
   tests miden pares de colores y no lo que se ve. Hay un test en
   `contraste.test.js` que deja ese 1,13 escrito para que conste.

   La barra de 5 px del acento a la izquierda es lo único decorativo que queda. */
.banda {
  background: var(--tenido);
  color: var(--banda-tinta);
  /* 1,05rem hasta la Fase 15. Sube menos que el cuerpo a propósito: la banda ya
     manda por peso (800), color y caja, y con el tamaño del cuerpo se comería la
     cabecera, que es lo único que debe mandar (Fase 9). */
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--banda-tinta);
  border-left: 5px solid var(--acento);
  border-radius: 8px;
}

/* TARJETAS QUE FLOTAN. Es el recurso central de la Fase 8: blanco sobre el
   papel. Sobre un fondo blanco, una tarjeta con borde de 1 px es un rectángulo
   dibujado; sobre el papel, es una tarjeta. */
/* EL FILO SE PONE LADO A LADO, Y NO ES UN CAPRICHO (Fase 12).

   `border-color: var(--filo-tarjeta)` en atajo pinta los CUATRO lados, y el
   izquierdo de esta tarjeta es su franja naranja de 5 px: con el atajo, la
   franja desaparece del cartel. `.actividad.proxima` se salvaría de casualidad
   —su regla tiene más especificidad— y `.aviso` no.

   Se descubrió mirando la maqueta en un navegador, no con los tests. Es la
   trampa de la cascada del proyecto por quinta vez: los tests miden pares de
   colores, no quién gana. */
.aviso {
  background: var(--tarjeta);
  border: 1px solid var(--separador);
  border-top-color: var(--filo-tarjeta);
  border-right-color: var(--filo-tarjeta);
  border-bottom-color: var(--filo-tarjeta);
  border-left: 5px solid var(--acento);
  border-radius: 14px;
  box-shadow: var(--sombra-contacto), var(--sombra-ambiente);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

/* CUÁNDO Y DÓNDE, ENCIMA DEL TÍTULO (D66). Hasta la Fase 8 esto era `.meta`:
   iba debajo del título, en gris pequeño, y era lo último que se leía de la
   tarjeta. En un cartel de pueblo la fecha es lo primero que se busca.

   Las dos piezas van sueltas y sin separador entre ellas: la línea
   `fecha · lugar` de antes dejaba el ` · ` colgando cuando faltaba una mitad. */
.cuando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.15rem;
}

/* La píldora usa el mismo par que la banda, que ya está medido y validado por
   asociación. Es lo que hace que la fecha se vea sin gritar. */
.pildora {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--tenido);
  color: var(--banda-tinta);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.6;
  /* Cifras de caja: con las proporcionales, «DOM 2 AGO» y «DOM 31 MAY» pintan
     dígitos de anchos distintos y las píldoras bailan al bajar por el cartel. */
  font-variant-numeric: tabular-nums;
}

.lugar {
  /* 0,85rem hasta la Fase 15, y era el texto más pequeño del cartel después de
     las chapas. Dónde es una de las dos cosas que se buscan en un cartel de
     pueblo, junto con cuándo: no puede ser lo que peor se lee. */
  font-size: 1.05rem;
  color: var(--secundario);
}

/* La primera frase del cuerpo, destacada por la aplicación. La negrita de
   dentro la pone la junta con sus asteriscos; esto es lo que la aplicación
   aporta sola, y lo que evita que una tarjeta sea un bloque de un solo peso.

   `tarjetas.js` solo se la pone a un párrafo: en un `<ul>` se vería como un
   error de tamaño. */
/* ESTABA MÁS PEQUEÑA QUE EL CUERPO, Y ESO ERA UN DEFECTO (D71, Fase 12).

   La regla decía `1.05rem` con el cuerpo del cartel a `1.1rem`: 18,9 px frente
   a 19,8 px. O sea que la frase que el diseño de la Fase 9 (§5.2) dice que «la
   destaca la aplicación» se estaba pintando MÁS PEQUEÑA que el resto del
   párrafo. En vez de destacarla, la apagaba. Nadie lo vio porque 0,05 rem es
   menos de un píxel de diferencia.

   Se distingue POR TAMAÑO Y NO POR PESO: la Directiva mete sus negritas con
   asteriscos dentro de esta misma frase, y poner el párrafo entero a 600
   dejaría al `<strong>` de 700 sin sitio donde notarse. */
.entradilla {
  /* SIEMPRE POR ENCIMA DEL CUERPO, Y ESE ES TODO EL PUNTO (D71). Cuando el
     cuerpo subió a 1,45rem en la Fase 15, esto tuvo que subir con él o habría
     vuelto el defecto de la Fase 12: la frase que la aplicación dice destacar,
     pintada más pequeña que el resto del párrafo. Si algún día se toca el cuerpo,
     se tocan los tres —cuerpo, entradilla y `.actividad h3`— o ninguno. */
  font-size: 1.55rem;
  line-height: 1.4;
}

/* Las listas del marcado (D65). Sin esto, las viñetas se salen de la tarjeta:
   el relleno por defecto del navegador cuenta desde el borde del `<ul>`. */
.aviso ul,
.actividad ul {
  margin: 0 0 0.6rem;
  padding-left: 1.15rem;
}

.aviso li,
.actividad li {
  margin-bottom: 0.15rem;
}

/* `overflow: hidden` no es cosmético desde la Fase 12: es lo que recorta la
   foto sangrada al radio de la tarjeta. Sin él, la foto asoma por las esquinas
   y la hoja se ve rota. */
.actividad {
  background: var(--tarjeta);
  border: 1px solid var(--filo-tarjeta);
  border-radius: 14px;
  box-shadow: var(--sombra-contacto), var(--sombra-ambiente);
  padding: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.actividad.proxima { border-left: 5px solid var(--principal); }

/* LO PASADO YA NO SE ATENÚA, y es el arreglo de fondo de esta fase. En una
   asociación como Zararte lo que tiene fotos es justo lo que ya ocurrió —el
   certamen celebrado, la exposición montada, la obra terminada—: servirlo con
   `opacity: 0.85` era apagar lo único que la junta quiere enseñar. */
.actividad.pasada { opacity: 1; }

.actividad h3 {
  margin: 0 0 0.35rem;
  /* El tercer escalón de la terna cuerpo < entradilla < título (ver
     `.entradilla`). 1,25rem hasta la Fase 15. */
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--principal);
  text-wrap: balance;
}

/* Aquí vivía `.marca-proxima`, el rótulo «PRÓXIMAMENTE». Se quitó el 2026-08-01
   al ver el cartel en un móvil: no decía nada que la fecha no dijese ya, y en
   una tarjeta de socios eran dos etiquetas seguidas antes del título.
   La franja de color de `.actividad.proxima` sigue distinguiendo lo próximo, y
   el servidor lo sigue mandando primero. */

.actividad p { margin: 0 0 0.5rem; }

/* La prosa del cartel evita las líneas huérfanas. Es lo único de la Fase 12 que
   no se ve nunca hasta que se ve: un aviso que termina con una palabra sola en
   la última línea parece un texto sin terminar. */
.aviso p,
.actividad p,
.cabecera .descripcion,
.consulta-pregunta { text-wrap: pretty; }

/* LA FOTO, QUE EN ZARARTE ES UN CARTEL (D68, D69, Fase 12).

   `auto-fit` Y NO `auto-fill`, Y ES UN ARREGLO. Con `auto-fill` la rejilla
   reserva las columnas que quepan aunque estén vacías, así que UNA foto sola se
   queda a media tarjeta en cuanto la ventana da para dos columnas. A 390 px hay
   una sola columna y no se nota; a 500 px sí.

   Eso es exactamente lo que hizo escribir en la Fase 9 (§10) que «a 390 px
   reales la foto ya ocupa el ancho entero» y que por tanto no había nada que
   hacer con las fotos: la frase es cierta a 390 y falsa a 500, y la conclusión
   salió de mirar en la ventana equivocada. `auto-fit` colapsa la columna vacía
   y la foto sola ocupa el ancho entero SIEMPRE.

   Y SANGRA A LOS DOS BORDES: se come el relleno lateral de la tarjeta. Los
   cuatro carteles que Zararte tiene publicados son verticales, y una foto de
   un cartel pegada al borde se lee como una página de revista. */
.actividad .fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2px;
  margin-top: 0.75rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.actividad .fotos img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

/* UNA foto sola conserva su proporción: es un cartel y se enseña entero. Hasta
   la Fase 11 se recortaba a 1:1, y los cuatro carteles de Zararte —de 0,56 a
   0,71 de proporción— perdían arriba y abajo.

   VARIAS siguen cuadradas, y a propósito: una fila con proporciones distintas
   se lee como un desorden, que es la razón por la que se pusieron cuadradas en
   su día y sigue siendo verdad.

   Un navegador que no entienda `:has()` las deja todas cuadradas, que es
   exactamente lo de antes. Cae bien y no hay nada que remendar. */
.actividad .fotos:not(:has(> :nth-child(2))) img {
  aspect-ratio: auto;
  height: auto;
}

/* Objetivo táctil cómodo y foco siempre visible: teclado y dedo, no solo ratón. */
a {
  color: var(--principal);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

a:focus-visible,
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  /* El halo claro por fuera del contorno oscuro. Es lo que hace que el foco se
     vea igual sobre el cartel blanco que sobre un botón oscuro o sobre la capa
     negra de la foto ampliada. */
  box-shadow: 0 0 0 6px var(--foco-halo);
}

.aviso-vacio,
.aviso-error {
  padding: 1rem;
  border-radius: 4px;
  background: var(--tenue);
}

.aviso-error {
  background: #fdecea;
  color: #7a1c12;
}

.pie {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--separador);
  /* 0,9rem hasta la Fase 15. */
  font-size: 1.1rem;
  color: var(--secundario);
}

/* Un enlace de redes es una URL entera, sin un solo espacio donde partir, y a
   390 px no cabe. Sin esto ensancha la página entera — y eso NO se queda en el
   pie: con el documento más ancho que la pantalla, todo `position: fixed` se
   estira a ese ancho, y el botón «Cerrar» del visor se iba fuera del móvil
   (D-17). `anywhere` y no `break-word` porque solo `anywhere` reduce también el
   ancho mínimo del contenido, que es lo que aquí decide. */
.pie a {
  overflow-wrap: anywhere;
}

/* Acceso al tablón. Va al pie y sin adornos: la parte pública es la que
   importa, y quien tiene PIN solo lo teclea una vez en su vida. */
.acceso {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--separador);
}

/* El h2 de la zona de socios es una banda como las demás. NO se le pone aquí
   ni color ni tamaño: `.acceso h2` tiene más especificidad que `.banda`, y una
   regla de color aquí ganaría y dejaría el texto gris sobre el fondo de la
   asociación —ilegible, y sin que ningún test de contraste lo viese, porque
   miden pares de variables y no quién gana la cascada. */

.form-acceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* LOS RÓTULOS DE CAMPO SUBEN, Y NO ES SIMETRÍA (Fase 15). Con el cuerpo a
   26,1 px, «PIN de la asociación» a 16,2 px se leía como letra pequeña de
   contrato justo encima del campo que hay que rellenar. Siguen por debajo del
   cuerpo —son rótulos, no texto del cartel— pero ya no se caen de la página.
   Cada rótulo ocupa su renglón entero (`flex-basis: 100%` aquí, columna en
   `.form-edicion`), así que crecer no le quita sitio a nada. */
.form-acceso label {
  flex-basis: 100%;
  font-size: 1.05rem;
  color: var(--secundario);
}

.form-acceso input,
.form-acceso button,
.acceso-estado button {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

/* El campo tiene que poder ENCOGERSE, no sólo crecer. Desde la Fase 13 hay tres
   cosas en esta fila —campo, «Borrar» y «Entrar»— y a 390 px, que es el ancho de
   móvil más común, con la base de 8 rem que había antes no cabían: «Entrar» se
   caía a una segunda fila. `min-width: 0` es imprescindible; sin él un `input`
   se planta en su ancho intrínseco (~20 caracteres) y no encoge por mucho que
   se le baje la base.

   Medido a 390 px en el navegador, no a 500. A 500 los tres caben y esto parece
   que no hace falta: es el mismo error de medir en el sitio equivocado que ya
   dio dos veces la conclusión contraria en este proyecto. */
.form-acceso input {
  flex: 1 1 5rem;
  min-width: 0;
}

.form-acceso button,
.acceso-estado button {
  background: var(--principal);
  color: #fff;
  border-color: var(--principal);
  cursor: pointer;
}

/* LA TECLA DE BORRAR DEL PIN (Fase 13). El teclado del móvil no siempre trae
   una, y sin ella una errata no se puede corregir: se envía, y cada envío malo
   gasta uno de los ocho intentos que hay antes de que el limitador deje a la
   Directiva quince minutos sin publicar.

   Va con `.form-acceso` delante A PROPÓSITO. `.pin-borrar` a secas tiene MENOS
   especificidad que la regla `.form-acceso button` de arriba, así que el fondo
   del color de la asociación ganaría y este botón saldría macizo e idéntico al
   de «Entrar». Es la misma trampa que ya mordió en `.acceso h2`, `.volver` y
   `.peligro-texto`, y que ningún test de contraste ve, porque miden pares de
   colores y no quién gana la cascada.

   Secundario, y ése es el motivo del selector: al lado de «Entrar» los dos
   botones tienen que distinguirse de un vistazo, de pie en la calle y sin
   mirar. Conserva los 44 px de alto de la regla de arriba, que es lo que lo
   hace pulsable con el pulgar. */
.form-acceso .pin-borrar {
  background: var(--tarjeta);
  color: var(--texto);
  border-color: var(--borde);
}

/* Apagado mientras no hay nada que borrar. El estado NO se comunica sólo con el
   color: `disabled` ya se lo dice al lector de pantalla y al dedo. Sin
   `opacity`, que rebajaría el contraste a un número que nadie ha medido. */
.form-acceso .pin-borrar:disabled {
  background: var(--tenue);
  color: var(--secundario);
  cursor: default;
}

.acceso-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.acceso-mensaje {
  margin: 0.5rem 0 0;
  min-height: 1.5rem;
  color: #7a1c12;
}

/* Distintivo de lo que no es público. Lo ve quien ha entrado con PIN, y sobre
   todo lo ve la junta: es la única forma de saber, mirando la página, qué está
   publicado para todo el pueblo y qué no. */
.etiqueta-socios {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--principal);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Controles de cada tarjeta, solo visibles en modo edición. Van dentro de la
   propia tarjeta y no en un panel aparte: quien edita ve exactamente lo que ve
   el pueblo, con los botones encima. */
.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.controles button {
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--tenue);
  color: var(--texto);
  cursor: pointer;
}

/* Borrar no se disfraza de botón normal. Hasta 8b, *Corregir*, *Pasar a solo
   socios* y *Borrar* eran tres cajas del mismo peso: la acción que no tiene
   vuelta atrás se veía igual que la que se usa a diario.
   Sigue midiendo 44 px —el objetivo táctil no se negocia (criterio nº9)— y va
   empujado al final de la fila, para que el pulgar no lo encuentre por accidente
   al ir a *Corregir*. */
.controles .peligro {
  border: 0;
  background: none;
  color: #7a1c12;
  text-decoration: underline;
  margin-left: auto;
}

/* Compartir (§7.1). Lo lleva cada tarjeta, dentro y fuera del modo edición:
   quien reenvía es el vecino, no la junta.

   Discreto a propósito. No es el color de WhatsApp ni el de la asociación: es
   una acción secundaria en una tarjeta cuyo protagonista es lo que se publica.
   El verde se reserva para el botón de escribir a la asociación, que sí es una
   llamada a la acción, y si estuviera en las dos partes no significaría nada en
   ninguna.

   44 px de alto, que el objetivo táctil no se negocia (criterio nº9). */
.compartir {
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: none;
  color: var(--texto);
  cursor: pointer;
}

/* Cuando hay controles de edición debajo, el margen lo pone la barra: sin esto
   se sumarían los dos y el botón quedaría flotando lejos de su tarjeta. */
.compartir + .controles {
  margin-top: 0.5rem;
}

/* El botón de escribir a la asociación, y el de compartir lo recién publicado.
   Éste SÍ es verde: es una llamada a la acción, y es el único sitio donde el
   verde de WhatsApp significa algo.

   Letra blanca sobre `--whatsapp`, que es el par medido en `contraste.test.js`
   (5,42:1). El verde va de fondo y nunca de color de letra: como texto sobre el
   papel de una asociación muy oscura se quedaría en 4,34:1.

   Es un `<a>` en la banda de contacto y un `<button>` en la barra de edición, así
   que la regla no puede colgar del elemento: cuelga de la clase, y se declaran
   las dos cosas que un enlace no hereda de un botón. */
.boton-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 6px;
  background: var(--whatsapp);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

/* El de la barra de edición ocupa su línea: aparece después de guardar, y si
   quedase pegado al mensaje de «Guardado.» se leería como parte de él. */
#compartir-recien {
  display: flex;
  margin-top: 0.75rem;
}

/* La frase de encima del botón de escribir. Es lo que convierte un botón en una
   invitación: sin ella, un botón verde suelto no dice para qué sirve. */
.ayuda-contacto {
  margin: 0 0 0.75rem;
  color: var(--secundario);
}

/* Quitar el número no es una caja: es la misma decisión que *Borrar* en una
   tarjeta, y se ve igual —texto rojo subrayado, sin marco— para que no compita
   con Guardar. Sigue midiendo 44 px.

   VA CON `.form-edicion` DELANTE, Y NO ES COSMÉTICO. `.form-edicion button` pinta
   todos los botones del formulario del color de la asociación, y tiene más
   especificidad que una clase suelta: sin este prefijo, «Quitar el número» sale
   como una caja verde igual que «Guardar» —la acción sin vuelta atrás con el
   mismo peso que la normal, que es justo lo que 8b vino a arreglar—.

   Se vio mirando la página en un navegador, no con los tests: éstos miden pares
   de colores, no quién gana la cascada. Es la misma trampa que en 8a dejó
   `.acceso h2` ganándole a `.banda`. */
.form-edicion .peligro-texto {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #7a1c12;
  text-decoration: underline;
  cursor: pointer;
}

/* Modo edición. Cuelga de la misma página, debajo de lo publicado: la junta ve
   el resultado y el formulario a la vez, sin panel aparte. */
.edicion {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--separador);
}

/* El anuncio de corrección. Sobrio y no rojo: corregir no es un error ni un
   peligro, es lo más normal del mundo. El rojo se queda para Borrar. */
.aviso-correccion {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 5px solid var(--acento);
  border-radius: 6px;
  background: var(--tenue);
  color: var(--texto);
}

/* La elección: lo primero que ve la junta al entrar a publicar. Dos objetivos
   grandes, no dos enlaces: se pulsan con el pulgar y de un vistazo se ve que hay
   exactamente dos caminos. */
.eleccion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.tarjeta-eleccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font: inherit;
  font-size: var(--letra-control);
  text-align: left;
  min-height: 44px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--filo-tarjeta);
  border-radius: 14px;
  box-shadow: var(--sombra-contacto), var(--sombra-ambiente);
  background: var(--tarjeta);
  color: var(--texto);
  cursor: pointer;
}

.eleccion-titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--principal);
}

/* La segunda línea es la que evita la pregunta «¿y esto qué es?». Sin ella, los
   dos botones se distinguen solo por un sustantivo que la junta no ha elegido. */
.eleccion-ayuda {
  font-size: 1.05rem;
  color: var(--secundario);
}

/* Volver a la elección. Discreto y al final del formulario: no compite con
   publicar, que es lo que la junta viene a hacer.

   VA CON `.form-edicion` DELANTE, Y NO ES COSMÉTICO. Es exactamente la misma
   trampa que en 8b dejó «Quitar el número» disfrazado de «Guardar»:
   `.form-edicion button` pinta todos los botones del formulario del color de la
   asociación y tiene más especificidad que una clase suelta, así que sin este
   prefijo «Publicar otra cosa» salía como una caja verde igual de gorda que
   «Publicar» —dos llamadas a la acción del mismo peso, y la que manda es la de
   abajo—. A `.peligro-texto` se le puso el prefijo en su día y a éste se le
   olvidó; se encontró mirando la página en un navegador durante la Fase 9,
   porque los tests miden pares de colores y no quién gana la cascada. */
.form-edicion .volver,
.volver {
  align-self: flex-start;
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--secundario);
  text-decoration: underline;
  cursor: pointer;
}

.form-edicion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 2rem;
}

/* El rótulo de qué se está publicando. Mismo tamaño que `.banda` y que el h3 del
   panel de grupos: los tres son títulos de bloque dentro de la zona de edición.
   Hasta la Fase 15 iba a 1rem, y con los rótulos de campo a 1,05rem se habría
   quedado más pequeño que las etiquetas que tiene debajo. */
.form-edicion h3 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  color: var(--secundario);
}

.form-edicion label {
  font-size: 1.05rem;
  color: var(--secundario);
}

/* `select` entra en esta lista desde la Fase 14b. Era el PRIMER desplegable del
   proyecto —hasta entonces no había ninguno—, así que no encajaba en ninguno de
   los selectores enumerados y salía con el estilo crudo del navegador: sin los
   44 px de alto, sin el borde y sin el radio de todos los demás campos. */
.form-edicion input[type="text"],
.form-edicion input[type="date"],
.form-edicion select,
.form-edicion textarea,
.form-edicion button {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

.form-edicion textarea { min-height: 5rem; }

.form-edicion button {
  margin-top: 0.75rem;
  background: var(--principal);
  color: #fff;
  border-color: var(--principal);
  cursor: pointer;
}

/* El interruptor público/socios. Casilla grande: se pulsa con el pulgar. */
.interruptor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.interruptor input { width: 24px; height: 24px; }

.interruptor label {
  font-size: 1.05rem;
  color: var(--texto);
}

.ayuda {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  color: var(--secundario);
}

.opcional { color: var(--secundario); }

/* Rejilla de la galería. Las miniaturas van cuadradas y recortadas: una fila de
   fotos con proporciones distintas se lee como un desorden. */
.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.fotos .foto {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  min-height: 44px;
}

.fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

/* Foto ampliada sobre la propia página: aquí no hay página de actividad. */
/* Todo diálogo del proyecto: la foto ampliada y, desde 8d, la ayuda de
   instalación. Lo común vive aquí porque la lógica también vive en un solo
   sitio (`dialogo.js`). */
.dialogo {
  position: fixed;
  inset: 0;
  /* Por encima de la barra de instalar, que va a z-index 20: un diálogo abierto
     no puede quedar por debajo de la barra que lo abrió. */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.85);
}

/* La foto ampliada, que además del fondo oscuro trae el cursor de «cerrar». */
.ampliada {
  cursor: zoom-out;
}

.ampliada img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* El botón de cerrar de cualquier diálogo. Con texto y no con un aspa dibujada:
   un aspa hay que explicarla a un lector de pantalla y hay que acertar con su
   contraste. Va arriba a la derecha y es lo primero que recibe el foco. */
.cerrar-dialogo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0 1rem;
  border: 2px solid var(--fondo);
  border-radius: 4px;
  background: var(--texto);
  color: var(--fondo);
  cursor: pointer;
}

/* EL SELECTOR DE FOTOS. El control nativo se lee fatal —«Elegir archivos ·
   Ningún archivo seleccionado»— así que hace de botón su etiqueta y el input se
   aparta de la vista.

   SE APARTA, NO SE OCULTA. Nada de `display: none` ni `visibility: hidden`: los
   dos sacan al input del árbol de foco y entonces **subir una foto deja de
   poderse hacer con teclado** (WCAG 2.1.1, nivel A). Es la misma clase de fallo
   que la trampa de teclado de la Fase 6, que Lighthouse no vio dando 100 de 100.
   Hay tests que vigilan esto, incluida esta regla. */
.entrada-fotos {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.boton-fotos {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--tenue);
  color: var(--texto);
  cursor: pointer;
}

/* VA CON `.form-edicion` DELANTE, Y NO ES COSMÉTICO. Séptima vez que muerde la
   misma trampa. Esto es un `<label>` disfrazado de botón, y vive dentro de
   `.form-edicion`: la regla `.form-edicion label` —los rótulos de campo— tiene
   MÁS especificidad (0,1,1) que `.boton-fotos` a secas (0,1,0), así que le gana
   y le pone el tamaño de un rótulo. Se descubrió midiendo la página con el
   navegador después de escribir la Fase 15: la regla decía 1,1rem y el elemento
   salía a 1,05rem. Ningún test lo habría visto.

   Y ES MAQUINARIA, no rótulo: es el botón que abre la galería del teléfono. Va
   al mismo tamaño que «Publicar» y que el resto de los controles. */
.form-edicion .boton-fotos {
  font-size: var(--letra-control);
}

/* El foco del input, dibujado sobre su etiqueta. Es lo ÚNICO que le dice a quien
   navega con teclado que está encima del botón de fotos, porque el input de
   verdad no se ve. Exige que el input vaya antes que la etiqueta en el HTML. */
.entrada-fotos:focus-visible + .boton-fotos {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--foco-halo);
}

/* LA BARRA DE INSTALAR (D58). Fija abajo, que es donde llega el pulgar.

   `z-index: 20` la pone por encima del cartel y por debajo de los diálogos, que
   van a 30: un diálogo abierto no puede quedar tapado por la barra que lo abrió.

   Nace oculta en el HTML y la enseña `instalar.js`. */
.barra-instalar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  /* El mismo fondo oscuro que la barra de edición: las dos son barras del
     sistema y no del cartel, y que se parezcan ahorra aprender dos lenguajes. */
  background: var(--texto);
  color: #ffffff;
  /* En un iPhone con barra de gestos, sin esto los botones caen justo debajo de
     la franja del sistema y se pulsan mal. */
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
}

.barra-instalar-txt {
  flex: 1;
  margin: 0;
  min-width: 0;
}

/* Más pequeño que el cuerpo del cartel, y no por capricho: con el tamaño de
   lectura, el título envolvía a dos líneas en un móvil de 412 px y la barra se
   comía el 14 % de la pantalla. Medido en el navegador, no supuesto. */
.barra-instalar-titulo {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

/* La segunda línea dice para qué sirve. Sin ella, «Guarda esto en tu móvil» le
   pide a alguien que haga algo sin decirle qué gana. */
.barra-instalar-ayuda {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  /* Blanco y no gris: sobre el fondo oscuro, un gris «secundario» no llega a
     4,5:1. Se distingue por tamaño y peso, no bajando el contraste. */
  color: #ffffff;
}

/* Sí y no, con pesos distintos: el «sí» es una caja del color de la asociación y
   el «no» es texto. Los dos con 44 px, que el objetivo táctil no se negocia. */
.barra-instalar-si {
  font: inherit;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 6px;
  background: var(--principal);
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
}

.barra-instalar-no {
  font: inherit;
  font-size: 0.85rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
}

/* Mientras la barra está puesta, el cuerpo deja hueco abajo o la barra tapa la
   última tarjeta del cartel —que en un tablón ordenado por fecha es lo más
   reciente, o sea justo lo que se quería enseñar—. */
body.con-barra-instalar {
  padding-bottom: 6rem;
}

/* Los pasos de la ayuda de instalación, dentro del diálogo. */
.ayuda-instalar {
  max-width: 24rem;
  padding: 1.25rem;
  border-radius: 8px;
  background: var(--tarjeta);
  color: var(--texto);
}

.ayuda-instalar ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.ayuda-instalar li {
  margin-bottom: 0.75rem;
}

.ayuda-instalar-fin {
  margin: 0;
  color: var(--secundario);
}

/* ─── Los avisos al móvil (Fase 10) ────────────────────────────────────────────

   La caja del interruptor, en el pie del cartel.

   COLORES: aquí no se estrena ni un par nuevo. Fondo de tarjeta con borde de
   `--borde`, letra `--secundario` y el botón con el gris y la letra de los
   controles de las tarjetas. Los cuatro pares están ya en `contraste.test.js`,
   y esto es deliberado: los tests miden pares, no lo que gana la cascada, y esa
   trampa ya ha mordido tres veces (`.acceso h2`, `.peligro-texto`, `.volver`). */
.avisos-caja {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1.5rem 0 0;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--tarjeta);
}

.avisos-interruptor {
  font: inherit;
  /* 1rem hasta la Fase 15, y ahí se quedaba por debajo de `.avisos-letra`, que
     es la frase que lo explica: el botón, más pequeño que su propio pie. */
  font-size: var(--letra-control);
  /* El objetivo táctil no se negocia (criterio nº9). */
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--tenue);
  color: var(--texto);
  cursor: pointer;
}

/* La letra que dice qué se guarda. Pequeña, pero legible: es `--secundario`
   sobre la tarjeta, que es el mismo par que la fecha y el lugar. */
.avisos-letra {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--secundario);
}

.avisos-estado:not(:empty) {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

/* El botón «Avisar al pueblo», dentro de los controles de cada tarjeta.

   Hereda el tamaño y los colores de `.controles button`; lo único que cambia es
   el peso de la letra y un borde más marcado. No es rojo —no destruye nada— pero
   tampoco es un botón cualquiera: es la única acción de todo el proyecto que no
   se puede deshacer, porque una notificación ya entregada no se retira. */
.controles .avisar {
  font-weight: 600;
  border: 2px solid var(--texto);
}

/* ─── Consultas (Fase 11) ──────────────────────────────────────────────────
   Se apoya en la tarjeta que ya existe: una consulta se lee como una pieza
   más del cartel, no como un formulario pegado. */
.consulta {
  border: 1px solid var(--filo-tarjeta);
  border-radius: 14px;
  box-shadow: var(--sombra-contacto), var(--sombra-ambiente);
  background: var(--tarjeta);
  padding: 1rem;
  margin-bottom: 1rem;
}

.consulta-pregunta {
  margin: 0 0 0.75rem;
  /* Igual que `.banda`: es el título de la consulta (Fase 15, antes 1,05rem). */
  font-size: 1.25rem;
  color: var(--texto);
}

.consulta-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 44px de alto mínimo: es el dedo, no el ratón. */
/* LA OPCIÓN DE UNA CONSULTA CRECE CON EL CUERPO, Y NO SE CONGELA (Fase 15).
   Es la única pieza con forma de botón que en realidad es texto que hay que
   LEER para decidir: «¿el sábado o el domingo?». Y no puede descuadrar nada,
   porque `.consulta-opciones` es una columna y cada opción ocupa el ancho
   entero: crecer la hace más alta, nunca más ancha. Los dos botones de acción
   que comparten esta regla —«Seguir» y «Confirmar»— sí son maquinaria y se
   sujetan más abajo. */
.consulta-opcion,
.consulta-seguir,
.consulta-confirmar {
  font: inherit;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.consulta-opcion.elegida {
  border-color: var(--principal);
  background: var(--tenido);
  font-weight: 600;
}

.consulta-seguir,
.consulta-confirmar {
  margin-top: 0.75rem;
  background: var(--principal);
  color: var(--foco-halo);
  border-color: var(--principal);
  text-align: center;
  font-weight: 600;
  /* Éstos sí son maquinaria: hacen algo, no se leen para decidir (Fase 15). */
  font-size: var(--letra-control);
}

.consulta-seguir[disabled] {
  opacity: 0.55;
  cursor: default;
}

.consulta-recuento {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La barra va DETRÁS del texto, no al lado: así el número siempre se lee
   entero aunque la barra sea muy corta o muy larga. */
.consulta-fila {
  position: relative;
  margin-bottom: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--tenue);
  overflow: hidden;
}

.consulta-barra {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tenido);
}

.consulta-fila-texto {
  position: relative;
  color: var(--texto);
}

.consulta-nota {
  margin: 0.5rem 0 0;
  color: var(--secundario);
  /* 0,92rem hasta la Fase 15, que era el único 0,92 de toda la hoja. */
  font-size: 1.1rem;
}

.consulta-confirmacion ul {
  margin: 0.25rem 0;
  padding-left: 1.2rem;
  color: var(--texto);
}

/* ─── EL ACUSE DE RECIBO AL DEDO (D70, Fase 12) ─────────────────────────────

   VA AL FINAL DE LA HOJA A PROPÓSITO. Estas reglas tienen que ganar a las de
   arriba con la misma especificidad, y aquí no hay que pelearse con nadie: se
   lee de un vistazo todo lo que se mueve en el proyecto, que hasta la Fase 11
   era exactamente nada.

   Hasta aquí, la hoja entera tenía CERO transiciones y CERO estados `:hover` o
   `:active` en 890 líneas. Ése era el diagnóstico de la fase: no es que
   faltase nada a la vista, es que la página no contestaba al tocarla. Se
   comportaba como un documento impreso.

   LO QUE SE MUEVE ES 1 px Y 110 ms, Y NO MÁS. Esto es un cartel de pueblo que
   se lee de pie: hace falta el acuse de recibo, no una función de circo. La
   entrada escalonada al abrir se descartó a propósito —encanta la primera vez
   y cansa a la vigésima—, no se olvidó.

   LAS TRANSICIONES VAN DETRÁS DE `prefers-reduced-motion`, el desplazamiento
   NO. Quien pide menos movimiento sigue viendo que el botón responde, sólo que
   sin recorrido: quitarle también el acuse de recibo sería dejarle peor que
   antes, y lo que WCAG pide apagar es la animación, no la respuesta. */

@media (prefers-reduced-motion: no-preference) {
  .compartir,
  .controles button,
  .boton-whatsapp,
  .tarjeta-eleccion,
  .form-acceso button,
  .acceso-estado button,
  .form-edicion button,
  .avisos-interruptor,
  .boton-fotos,
  .barra-edicion-btn,
  .barra-instalar-si,
  .barra-instalar-no,
  .cerrar-dialogo,
  .volver,
  .consulta-opcion,
  .consulta-seguir,
  .consulta-confirmar {
    transition: transform 110ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 110ms ease,
      background-color 110ms ease;
  }

  .fotos .foto img { transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}

.compartir:active,
.controles button:active,
.boton-whatsapp:active,
.form-acceso button:active,
.acceso-estado button:active,
.form-edicion button:active,
.avisos-interruptor:active,
.boton-fotos:active,
.barra-edicion-btn:active,
.barra-instalar-si:active,
.barra-instalar-no:active,
.cerrar-dialogo:active,
.volver:active,
.consulta-seguir:active,
.consulta-confirmar:active { transform: translateY(1px); }

/* Los objetivos grandes ceden por escala y no por desplazamiento: una tarjeta
   de 44 px de alto que baja 1 px no se nota, y bajando más daría un respingo. */
.tarjeta-eleccion:active,
.consulta-opcion:active { transform: scale(0.985); }

.tarjeta-eleccion:active { box-shadow: var(--sombra-contacto); }

/* La foto crece dentro de su propio marco antes de abrirse, y por eso el
   recorte va en el botón: sin `overflow`, el zoom se saldría por los bordes de
   la tarjeta —que desde esta fase la foto ya toca— en vez de quedarse dentro. */
.fotos .foto { overflow: hidden; }

.fotos .foto:active img { transform: scale(1.04); }

/* Con ratón se anuncia lo pulsable. DENTRO DE `hover: hover`, o en un móvil el
   estado se queda pegado después de tocar: el navegador simula el `:hover` en
   el último elemento tocado y ya no lo suelta. */
@media (hover: hover) {
  .compartir:hover { background: var(--tenue); }

  .tarjeta-eleccion:hover {
    box-shadow: var(--sombra-contacto), 0 12px 26px -10px rgba(19, 77, 37, 0.40);
  }

  .fotos .foto:hover img { filter: brightness(1.05); }
}

/* ── LAS VENTANAS DE GRUPO (Fase 14) ──────────────────────────────────────

   El enlace del «tengo un PIN de grupo». Botón por dentro —hace algo, no
   navega— y aspecto de enlace por fuera: la mayoría de los socios no va a
   ninguna excursión, y ponerle aquí una caja azul de las de «Entrar» lo
   convertiría en una segunda llamada a la acción compitiendo con la que
   importa. Va discreto a propósito. */
.enlace-sobrio {
  margin-top: 0.75rem;
  padding: 0 0.75rem;
  min-height: 44px;
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 4px;
  font: inherit;
  font-size: var(--letra-control);
  cursor: pointer;
}

/* El panel de la Directiva. Solo existe dentro del modo edición. */
.panel-grupos {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

/* EL TAMAÑO QUE NO ESTABA DECLARADO (Fase 15). Hasta aquí esta regla solo ponía
   el margen, así que la letra se la ponía el navegador: 1,17 × el cuerpo. Era un
   dieciseisavo tamaño que nadie había elegido y que salía a 23,2 px —más grande
   que la banda de sección que tiene encima—, y que además se habría ido a 30,5 px
   solo por subir el cuerpo. Se ata al mismo valor que `.banda` y que
   `.form-edicion h3`: los tres son títulos de bloque de la zona de edición. */
.panel-grupos h3 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.hueco-grupo {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

.hueco-grupo legend {
  padding: 0 0.35rem;
  font-size: 1.05rem;
  color: var(--secundario);
}

.hueco-grupo label {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  color: var(--secundario);
}

.hueco-grupo input {
  font: inherit;
  font-size: var(--letra-control);
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

/* EL PIN SE ENSEÑA GRANDE, y no es capricho: no está guardado en ninguna parte
   —el servidor lo calcula— así que ésta es la única pantalla del mundo donde se
   puede leer. La Directiva lo va a dictar en voz alta en una reunión, muchas
   veces desde un móvil y con luz de calle. `tabular-nums` para que las seis
   cifras no bailen de ancho al leerlas de un tirón. */
.pin-grupo {
  margin: 0.75rem 0 0.25rem;
  /* 1,4rem hasta la Fase 15, y ahí se habría quedado MÁS PEQUEÑO que el título
     de una tarjeta (1,65rem) — el número que la Directiva dicta en voz alta en
     una reunión, más chico que un titular. Sube al mismo escalón que el título:
     en esta pantalla no hay nada más importante que estas seis cifras. */
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* LOS BOTONES DE LAS VENTANAS DE GRUPO, ATADOS CON SU PREFIJO.
   Sexta vez que muerde la misma trampa: `#panel-grupos` vive DENTRO de la
   sección de edición pero FUERA de `.form-edicion`, así que ni la regla verde
   de `.form-edicion button` ni `.form-edicion .peligro-texto` les llegaban, y
   salieron con el botón gris que pone el navegador por defecto. Ningún test lo
   ve, porque los tests miden pares de colores y no quién gana la cascada. Lo
   cazó el director mirando la página en su móvil, igual que las cinco
   anteriores. */
.panel-grupos #grupos-guardar {
  font: inherit;
  font-size: var(--letra-control);
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--principal);
  border-radius: 4px;
  background: var(--principal);
  color: #fff;
  cursor: pointer;
}

/* Renovar echa a todos los que tenían el PIN viejo: es la misma familia que
   «Quitar el número», texto rojo subrayado y sin marco, para que no compita con
   el botón de guardar. */
.panel-grupos .peligro-texto {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #7a1c12;
  text-decoration: underline;
  cursor: pointer;
}

/* CUANDO EL MENSAJE ES UNA BUENA NOTICIA.
   `.acceso-mensaje` es #7a1c12 —el rojo de los errores— porque nació para decir
   «el PIN ha cambiado». La Fase 14 lo reutilizó para «Guardado.» y para «Ya
   estás en el grupo», así que la aplicación daba las buenas noticias en color de
   error. Se corrige con una clase, no con un segundo hueco de mensaje. */
.acceso-mensaje.bien {
  color: var(--principal);
}

/* `.form-edicion` es una columna flex, así que cada hijo directo ocupa una fila
   entera: por eso todas las etiquetas salen encima de su campo. El bloque del
   destino mete etiqueta y desplegable DENTRO de un envoltorio, y ahí dentro no
   había columna: los dos se ponían en la misma línea y rompían la convención de
   toda la aplicación. Se repite la misma columna, con el mismo hueco.

   `.oculto` lleva `!important`, así que gana a esto y el bloque sigue pudiendo
   esconderse cuando no hay ventanas abiertas. */
.form-edicion .campo-apilado {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* «Renovar el PIN» deja de ser texto rojo subrayado.
   En esta aplicación el rojo subrayado significa UNA cosa: que algo se va a
   quitar —«Quitar el número», «Borrar» en una tarjeta—. Renovar no quita nada:
   cambia el PIN y deja fuera a quien tenía el viejo. Pasa a la forma que el
   proyecto ya usa para una acción secundaria de verdad, la misma de la tecla
   «Borrar» del PIN: caja con borde, sin relleno de color, para que no compita
   con «Guardar las ventanas» ni se lea como una destrucción. */
.panel-grupos .accion-secundaria {
  font: inherit;
  font-size: var(--letra-control);
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--tarjeta);
  color: var(--texto);
  cursor: pointer;
}

/* «Estás en …» con su salida al lado, igual que la zona de socios pone su
   «Olvidar el PIN en este móvil» junto al estado. */
.estado-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  color: var(--secundario);
}

/* El rótulo de las ventanas de grupo dentro de la zona de acceso. No es una
   `banda` —eso son los títulos de sección del cartel— sino un subtítulo dentro
   de una sección que ya tiene el suyo. */
.acceso-subtitulo {
  margin: 1.25rem 0 0.25rem;
  font-weight: 600;
  color: var(--secundario);
}