/* Hoja de estilos COMÚN a todos los directorios de la fábrica.
 *
 * No lleva ni un color ni una tipografía escritos: solo lee las variables que
 * `app/config.variables_css()` genera desde `sitios/<slug>.toml`. Ese es todo
 * el mecanismo de "un juego de plantillas, N temas". Si aquí aparece un
 * `#hexadecimal`, el mecanismo está roto.
 *
 * Móvil primero: quien busca el nombre de una cafetería suele estar en la calle.
 */

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipografia_texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--tipografia_titulos); line-height: 1.15; margin: 0; }
h1 { font-size: calc(1.75rem * var(--escala)); letter-spacing: -.02em; }
h2 { font-size: calc(1.15rem * var(--escala)); letter-spacing: -.01em; }
a  { color: var(--acento_enlace); }

.envoltura { max-width: 46rem; margin: 0 auto; padding: calc(1rem * var(--escala)); }

/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: var(--acento_texto);
  padding: .6rem 1rem; border-radius: var(--radio);
}
.saltar:focus { left: 1rem; top: 1rem; z-index: 10; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* --- La cabecera del sitio ------------------------------------------------ */
/* Su único trabajo es que desde cualquier página se pueda volver al índice.
 * Sin ella a la portada no llegaba NI UN enlace interno desde las miles de
 * fichas: el rastreador entra por una ficha, la lee y no tiene por dónde
 * salir. Una línea, sin menú y sin botón: el sitio tiene una portada, fichas y
 * listados, y un menú de tres entradas sería decorado. */
.cabecera-sitio {
  border-bottom: 1px solid var(--linea); background: var(--superficie);
}
.cabecera-sitio .marca {
  display: block; max-width: 46rem; margin: 0 auto;
  padding: .75rem calc(1rem * var(--escala));
  font-family: var(--tipografia_titulos); font-weight: 700;
  color: var(--tinta); text-decoration: none; letter-spacing: -.01em;
}

/* --- Cabecera de la ficha ------------------------------------------------ */

.cabecera { margin-bottom: calc(1.25rem * var(--escala)); }
.migas { font-size: .82rem; color: var(--tinta_suave); margin: 0 0 .5rem; }
.migas a { color: inherit; }
.rotulo { color: var(--tinta_suave); font-size: .95rem; margin: .35rem 0 0; }
/* La frase que va justo debajo del h1 y dice de qué va la pantalla. Un punto
 * por encima del cuerpo y no en gris: es texto que hay que leer, no un pie. */
.entradilla { font-size: calc(1.05rem * var(--escala)); line-height: 1.5;
              margin: .4rem 0 0; max-width: 42rem; }

.nota { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
        margin: .6rem 0 0; }
.nota strong { font-size: calc(1.3rem * var(--escala)); font-family: var(--tipografia_titulos); }
/* La valoración NUNCA va sin su número de reseñas: ese número es su fiabilidad. */
.nota .de { color: var(--tinta_suave); font-size: .9rem; }

/* «Abierto ahora» / «Cerrado». Lo escribe `estatico/horario.js` y hasta
 * entonces el hueco está oculto: el servidor no puede decirlo sin que se le
 * quede pegado en la caché del borde. Sin JavaScript no aparece, y punto. */
/* `:not([hidden])` NO SOBRA, y sin él esto estaba roto de verdad: un `display`
 * escrito por nosotros gana SIEMPRE al `[hidden] { display: none }` de la hoja
 * del navegador —es cascada por origen, no por especificidad—, así que un
 * `.estado { display: inline-flex }` a secas desactivaba el atributo `hidden`
 * del hueco. El hueco va vacío, pero su `::before` sí pinta: un punto gris
 * suelto en las sesenta y cinco filas de la página y en todas las fichas, sin
 * JavaScript y también en el rato que va del pintado a que corra el script.
 * Justo el hueco visible que esta pantalla no puede tener. Lo encontró
 * `auditor-codigo` el 2026-09-12. */
.estado:not([hidden]) { display: inline-flex; align-items: center; gap: .4rem; }
/* El punto NO es el que dice si está abierto —eso lo dice la palabra—: es lo
 * que deja distinguir los dos estados de un vistazo en una lista larga sin
 * leerla. Toma el color del texto, así que no hay un color escrito aquí. */
.estado::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
}
.abierto  { color: var(--acento_enlace); font-weight: 600; }
/* Cerrado va con el punto hueco: dos señales distintas, no solo dos colores,
 * que es lo que hace falta para quien no distingue el verde del rojo. */
.cerrado  { color: var(--aviso);  font-weight: 600; }
.cerrado::before { background: none; box-shadow: inset 0 0 0 2px currentColor; }

/* --- Botonera ------------------------------------------------------------ */
/* Cada botón desaparece si falta su dato. Nunca se narra la ausencia. */

.botonera { display: flex; flex-wrap: wrap; gap: .5rem; margin: calc(1rem * var(--escala)) 0; }
.boton {
  flex: 1 1 auto; min-width: 8rem; text-align: center;
  padding: .7rem 1rem; border-radius: var(--radio);
  background: var(--acento); color: var(--acento_texto);
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.boton.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }

/* --- Bloques ------------------------------------------------------------- */

section { margin: calc(1.75rem * var(--escala)) 0; }
section > h2 { margin-bottom: .75rem; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: calc(1rem * var(--escala));
}

/* El aviso de contradicción: atribuido a los clientes, nunca afirmado por el
 * sitio, y sin forma de ocultarlo. */
.aviso {
  border-left: 3px solid var(--aviso);
  background: var(--superficie); border-radius: var(--radio);
  padding: calc(.9rem * var(--escala)) calc(1rem * var(--escala));
}
.aviso h2 { color: var(--aviso); font-size: 1rem; }

/* --- Fotos --------------------------------------------------------------- */
/* Se muestran desde el servidor de Google y no se aloja ninguna. Google puede
 * caducar una URL, así que el hueco está diseñado: ver `.sin-foto`. */

.principal { width: 100%; aspect-ratio: 3/2; object-fit: cover;
             border-radius: var(--radio); background: var(--superficie); }
.tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
        gap: .5rem; margin-top: .5rem; }
.tira img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); }
.sin-foto {
  aspect-ratio: 3/2; display: grid; place-items: center;
  background: var(--superficie); border: 1px dashed var(--linea);
  border-radius: var(--radio); color: var(--tinta_suave);
  font-family: var(--tipografia_titulos); font-size: 1.1rem; text-align: center;
  padding: 1rem;
}

/* --- Lo que dicen los clientes -------------------------------------------
   UNA COLUMNA QUE CRECE, y eso es la mitad del diseño: salen los temas que dé
   de sí el corpus —de dos a diecinueve, *medido el 2026-09-14*—, no seis
   huecos que haya que rellenar. Con `grid` y sin `grid-template-columns` una
   ficha de tres párrafos se ve terminada y una de diecisiete también. */
.temas { display: grid; gap: 1.4rem; }
.temas article { margin: 0; }
.temas h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.temas p { margin: 0; }
/* Cuántas reseñas sostienen ESE párrafo. Va debajo y en pequeño a propósito:
   es procedencia, no titular — pero no se esconde, porque es lo único que
   distingue un resumen de un texto inventado (CLAUDE.md §9.2). */
.cuantas-lo-dicen { margin-top: .3rem !important; color: var(--tinta_suave);
                    font-size: .8rem; font-variant-numeric: tabular-nums; }

/* --- Términos, atributos, horario ---------------------------------------- */

.terminos { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.terminos li {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 999px; padding: .3rem .75rem; font-size: .9rem;
}
.terminos .cuenta { color: var(--tinta_suave); font-variant-numeric: tabular-nums; }

.grupos { display: grid; gap: .9rem; }
.grupos h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
             color: var(--tinta_suave); margin-bottom: .3rem; }
.grupos ul { list-style: none; padding: 0; margin: 0;
             display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .95rem; }

table { width: 100%; border-collapse: collapse; font-size: .95rem;
        font-variant-numeric: tabular-nums; }
td { padding: .45rem 0; border-bottom: 1px solid var(--linea); }
td:last-child { text-align: right; }
tr:last-child td { border-bottom: 0; }

/* --- Reseñas ------------------------------------------------------------- */
/* Sin identidad del reseñador: ni nombre, ni iniciales, ni avatar. La tarjeta
 * se resuelve con las estrellas y la fecha, no con un hueco gris. */

.resena { border-bottom: 1px solid var(--linea); padding: calc(1rem * var(--escala)) 0; }
.resena:last-child { border-bottom: 0; }
.resena .fila { display: flex; justify-content: space-between; align-items: baseline;
                gap: 1rem; margin-bottom: .4rem; }
.estrellas { letter-spacing: .1em; }
.fecha { color: var(--tinta_suave); font-size: .82rem; white-space: nowrap; }
.respuesta { margin: .7rem 0 0; padding-left: .9rem;
             border-left: 2px solid var(--linea); color: var(--tinta_suave); font-size: .95rem; }
.respuesta .quien { display: block; font-size: .78rem; text-transform: uppercase;
                    letter-spacing: .06em; margin-bottom: .2rem; }

/* --- Caja del dueño ------------------------------------------------------ */
/* Pública, corta y gratis. El visitante la ignora; el dueño ve un problema suyo. */

.dueno { background: var(--superficie); border: 1px solid var(--acento);
         border-radius: var(--radio); padding: calc(1rem * var(--escala)); }
.dueno h2 { font-size: 1.05rem; margin-bottom: .4rem; }

/* --- Procedencia y pie --------------------------------------------------- */

.procedencia { color: var(--tinta_suave); font-size: .8rem;
               border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: 2rem; }

@media (min-width: 46rem) {
  body { font-size: 18px; }
  h1 { font-size: calc(2.1rem * var(--escala)); }
  .boton { flex: 0 1 auto; }
}

/* --- El mapa de barrio ---------------------------------------------------- */
/* Antes de pulsar: el botón y la lista de vecinos, que es lo que ve el
 * rastreador. Después: el mosaico de teselas con los pines. Ni una tesela se
 * pide antes de pulsar. El proveedor lo dice el fichero del sitio. */

.mapa-tarjeta { padding: 0; overflow: hidden; }
.mapa { position: relative; overflow: hidden; width: 100%; background: var(--fondo); }
.mapa img { position: absolute; display: block; }
.pin {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--superficie); border: 3px solid var(--tinta_suave);
  box-shadow: 0 1px 3px rgba(0,0,0,.35); display: block;
}
.pin.principal { width: 20px; height: 20px; margin: -10px 0 0 -10px;
                 background: var(--acento); border-color: var(--acento_texto); z-index: 1; }
.mapa-previo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
               margin: 0; padding: calc(1rem * var(--escala)); }
.vecinos { list-style: none; margin: 0; padding: 0 calc(1rem * var(--escala)) calc(.5rem * var(--escala)); }
.vecinos li { display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: baseline;
              padding: .45rem 0; border-top: 1px solid var(--linea); font-size: .95rem; }
.vecinos .de { color: var(--tinta_suave); font-size: .85rem; }
.mapa-atribucion { margin: 0; padding: .3rem calc(1rem * var(--escala));
                   font-size: .72rem; color: var(--tinta_suave); text-align: right; }

/* --- La galería en modal, y el hueco de la foto que no carga ---------------- */
/* La principal se pinta ENCIMA del rótulo tipográfico de la ficha sin foto: si
 * Google caduca el enlace, la imagen se quita y el rótulo queda. */

.principal-caja { position: relative; }
.principal-caja .sin-foto { margin: 0; }
.principal-caja .principal { position: absolute; inset: 0; height: 100%; }
.tira img.rota, .galeria-fotos img.rota { display: none; }

.galeria { border: 0; padding: 0; width: min(96vw, 60rem); max-height: 92vh;
           background: var(--fondo); color: var(--tinta); border-radius: var(--radio); }
.galeria::backdrop { background: rgba(0, 0, 0, .7); }
.galeria-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                 margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--linea);
                 position: sticky; top: 0; background: var(--fondo); }
.galeria-barra span { font-family: var(--tipografia_titulos); font-weight: 600; }
.galeria-fotos { display: grid; gap: .5rem; padding: .75rem;
                 grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.galeria-fotos img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
                     border-radius: var(--radio); background: var(--superficie); }

/* --- El listado de ciudad. Encargo 02, dirección 1a ------------------------ */
/* Sin fotos, y la fila DICE ALGO: debajo del nombre va la primera frase que
 * escribió el dueño, al mismo cuerpo con que se lee un párrafo, porque es lo
 * que se lee para descartar. Cuando no la hay, el término más citado en un
 * distintivo; si tampoco, sus otras categorías; si tampoco, la fila sale corta
 * y se nota. Cada dato desaparece si falta. */

/* LA BANDA DE LA FECHA. Va arriba, antes de la lista, y en el material de las
 * cajas de la página: es honestidad —la nota y el horario son de ese día— y es
 * el anzuelo del dueño. Sin botón: se reclama una ficha desde ella. */
.banda-fecha {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: calc(.9rem * var(--escala)) 1.1rem;
  margin: 1.2rem 0;
}
.banda-fecha p { margin: 0; }
.banda-fecha-dato  { font-weight: 600; }
.banda-fecha-dueno { color: var(--tinta_suave); font-size: .95rem; margin-top: .25rem !important; }

/* El rótulo de un bloque: barrios, filtros. Del mismo material que el resto de
 * los rótulos grises, para que no compitan con los nombres de la lista. */
.rotulo-bloque {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--tinta_suave); margin: 0 0 .5rem;
}
.indice-barrios, .filtros { margin: 1.2rem 0; }

/* Los distintivos: barrios arriba y filtros. Se pulsan con el dedo, así que el
 * relleno no baja de lo que cabe en un pulgar. */
.fichas-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fichas-chip a {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 999px; padding: .5rem .85rem; font-size: .95rem;
}
.fichas-chip a:hover { border-color: var(--tinta_suave); }
/* Los filtros van en el acento porque CADA UNO ES OTRA PÁGINA, no un estado de
 * esta: el color dice «esto te lleva a otro sitio», que es lo que hace. */
.filtros-chip a { color: var(--acento_enlace); border-color: var(--acento_enlace); font-weight: 600; }
.filtros-chip a .de { color: var(--acento_enlace); }

.orden { margin: 1.2rem 0 .4rem; }

/* La cabecera de un barrio. Parte la lista en trozos que caben en una pantalla,
 * que es de lo que se trata: una lista de 560 no se recorre. */
.barrio {
  font-size: 1.15rem; margin: 1.8rem 0 0; padding-bottom: .35rem;
  border-bottom: 2px solid var(--acento);
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
}
.barrio .de { font-size: .9rem; font-weight: 400; }

.listado { list-style: none; margin: 0; padding: 0; counter-reset: fila; }
.fila { padding: calc(.9rem * var(--escala)) 0; border-bottom: 1px solid var(--linea); }
.fila:last-child { border-bottom: 0; }
/* La marca de lo que se paga. Es un RÓTULO de la página —del mismo material
 * que cualquier otro rótulo gris—, no un adorno que se le añade a la fila: si
 * pareciera un premio, el listado dejaría de servir para descartar, que es lo
 * único para lo que sirve. Por eso no lleva fondo, ni borde, ni el acento: aquí
 * el acento es enlace y es acción, y en verde esto pediría que lo pulsaras. */
.patrocinado {
  display: block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta_suave); margin-bottom: .15rem;
}

.fila-nombre { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: baseline; }
.fila-nombre a { font-family: var(--tipografia_titulos); font-size: 1.1rem; font-weight: 600;
                 text-decoration: none; color: var(--tinta); }
.fila-nombre a:hover { text-decoration: underline; }
/* LA NOTA PEQUEÑA Y GRIS, EL RECUENTO GRANDE. Al revés de como estaba: la nota
 * no manda, manda cuántas reseñas la sostienen. Empuja a la derecha para que
 * las cifras queden en columna y se comparen de un vistazo. */
.fila-nota { margin-left: auto; white-space: nowrap; font-size: .9rem; }
.fila-nota strong { font-family: var(--tipografia_titulos); font-size: 1.05rem; }

/* EL PRIMER ESCALÓN, y va al cuerpo con que se lee un párrafo y no en letra
 * pequeña: es la línea que se lee para descartar, no un pie de foto. */
.fila-frase { margin: .35rem 0 0; max-width: 46rem; }
.fila-categorias { margin: .35rem 0 0; font-size: .95rem; color: var(--tinta_suave); }
.fila-termino { margin: .35rem 0 0; font-size: .95rem; }
/* El término va en un distintivo porque NO es una frase: es una palabra suelta
 * sacada de las reseñas, y sin el marco se lee como si la hubiéramos escrito
 * nosotros sobre el negocio. El marco dice de dónde sale. */
.termino-chip {
  display: inline-block; border: 1px solid var(--acento); color: var(--acento_enlace);
  border-radius: 999px; padding: .15rem .7rem; font-weight: 600;
}
.termino-chip .de { color: var(--acento_enlace); font-weight: 400; }
.fila-datos { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem;
              align-items: baseline; font-size: .9rem; }
.fila .de { color: var(--tinta_suave); }
.paginas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.paginas a, .paginas strong { padding: .35rem .7rem; border: 1px solid var(--linea);
                              border-radius: var(--radio); text-decoration: none; }
.paginas strong { background: var(--acento); color: var(--acento_texto); border-color: var(--acento); }

/* --- La página de provincia / estado ---------------------------------------- */
.municipios { list-style: none; margin: 0; padding: 0;
              display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .2rem 1.5rem; }
.municipios li { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
                 padding: .45rem 0; border-bottom: 1px solid var(--linea); }
.municipios a { text-decoration: none; color: var(--tinta); }
.municipios a:hover { text-decoration: underline; }
.municipios .de { color: var(--tinta_suave); font-variant-numeric: tabular-nums; font-size: .9rem; }

/* --- La portada. Encargo 04 ------------------------------------------------ */
/* AQUÍ NO LLEGA NADIE DESDE GOOGLE: cuatro clics en dieciséis meses, el
 * 0,045 %. Así que no hay hero, ni buscador, ni fotos. Lo que hay es un índice,
 * y la cabecera es una ficha técnica: qué hay dentro, cuánto, y de cuándo. */
.portada-cabecera { margin-bottom: calc(1.6rem * var(--escala)); }

/* LA FECHA ARRIBA Y NO EN EL PIE. Es honestidad —este directorio no finge estar
 * al día— y es el anzuelo de la reclamación: el dueño que ve una fecha de hace
 * meses entiende de golpe para qué sirve entrar. */
.portada-fecha {
  font-family: var(--tipografia_titulos);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta_suave); margin: 0 0 .55rem;
}
.portada-entradilla {
  font-size: calc(1.05rem * var(--escala)); line-height: 1.5;
  margin: .5rem 0 0; max-width: 44rem;
}

/* Los tres números. Se envuelven solos en el móvil; nada de rejilla fija, que
 * es lo que se rompe cuando un directorio nuevo tiene tres provincias. */
.portada-cifras {
  list-style: none; margin: calc(1.1rem * var(--escala)) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 2.2rem;
  color: var(--tinta_suave); font-size: .9rem;
}
.portada-cifras strong {
  display: block; font-family: var(--tipografia_titulos);
  font-size: calc(1.7rem * var(--escala)); font-weight: 700; color: var(--tinta);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}

/* EL ENLACE AL ÍNDICE, que en la portada sustituye al índice entero desde el
 * 2026-09-21. Va ARRIBA y se ve: el dueño al que le hemos escrito busca su
 * pueblo, y este enlace es su camino. No es un botón —esta portada no vende
 * nada— pero tampoco es una línea más de texto.
 *
 * Usa los tokens del tema, NO el CSS del .dc.html: copiar el aspecto de un
 * diseño a esta hoja es como la fábrica acaba teniendo N códigos en vez de uno
 * (docs/disenos/README.md, y hay guardián en el CI). */
.portada-indice {
  margin: calc(1.6rem * var(--escala)) 0 0;
  padding: calc(.9rem * var(--escala)) calc(1.1rem * var(--escala));
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.portada-indice a {
  font-family: var(--tipografia_titulos);
  font-size: calc(1.05rem * var(--escala)); font-weight: 700;
}

/* EL ÍNDICE DE LA A A LA Z: el sustituto honesto del buscador que no hay.
 * Columnas estrechas porque son nombres de municipio, no frases, y así los 226
 * caben en pantalla y media. Misma fila que `.municipios` para que las dos
 * listas de esta página se lean igual. */
.indice-az {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .1rem 1.4rem;
}
.indice-az li { display: flex; justify-content: space-between; align-items: baseline;
                gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--linea); }
.indice-az a { text-decoration: none; color: var(--tinta); }
.indice-az a:hover { text-decoration: underline; }
.indice-az .de { color: var(--tinta_suave); font-variant-numeric: tabular-nums;
                 font-size: .82rem; }

/* LO ÚNICO QUE ESTA PANTALLA VENDE, y va al final: arriba competiría con el
 * índice, que es a lo que vino el dueño. */
.portada-reclamar {
  margin-top: calc(2.2rem * var(--escala));
  padding: calc(1.2rem * var(--escala));
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.portada-reclamar p { margin: .5rem 0 0; max-width: 42rem; }

/* --- El pie, y las dos páginas legales -------------------------------------- */
/* El pie sale en TODAS las páginas, y eso no es estética: el art. 14.5.b del
   RGPD solo exime de avisar uno a uno si la información se hace pública, y
   pública quiere decir alcanzable desde la ficha, que es donde está el dato. */
.pie { margin: 3rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--linea);
       font-size: .85rem; color: var(--tinta_suave);
       display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
       align-items: baseline; justify-content: space-between; }
.pie-procedencia { margin: 0; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 1rem; }
.pie-enlaces a { color: var(--tinta_suave); }

.legal { max-width: 42rem; }
.legal h1 { margin-bottom: .2rem; }
.legal h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.legal p, .legal li { line-height: 1.6; }
.legal-fecha { color: var(--tinta_suave); font-size: .9rem; margin-top: 0; }
.legal-identidad { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem;
                   margin: .5rem 0 0; }
.legal-identidad dt { color: var(--tinta_suave); }
.legal-identidad dd { margin: 0; }
.legal-vuelta { margin-top: 2.5rem; }

/* El teléfono: la rejilla de dos columnas de la identidad no cabe. */
@media (max-width: 30rem) {
  .legal-identidad { grid-template-columns: 1fr; gap: 0 0; }
  .legal-identidad dt { margin-top: .6rem; }
}

/* --- La pantalla de reclamación ------------------------------------------- */
/* Es la única por la que entra dinero y hasta hoy se servía SIN UNA SOLA REGLA:
 * once de sus trece clases no existían aquí. Se veía como HTML de 1995 justo
 * donde el dueño decide si esto es serio.
 *
 * La caja lleva borde de acento y no de línea: es lo único de la página que
 * pide una acción, y tiene que distinguirse de las dos listas informativas que
 * van debajo, que sí son tarjetas normales. */

.reclamar {
  background: var(--superficie); border: 1px solid var(--acento);
  border-radius: var(--radio); padding: calc(1.1rem * var(--escala));
}
.reclamar > h2 { margin-bottom: .4rem; }
.reclamar > p { margin: .4rem 0 0; }

/* La frase que dice qué le pasa a ESTA ficha. Va un punto por encima del resto
 * del bloque porque es lo único de la pantalla que habla de él y no de
 * nosotros, y es lo que hace que siga leyendo. No lleva color de aviso: lo que
 * señala es culpa de Google, no suya, y esta frase la lee también su cliente. */
.frase { font-size: calc(1.05rem * var(--escala)); line-height: 1.5; }

.reclamar-alta { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.reclamar-alta label { font-size: .9rem; font-weight: 600; color: var(--tinta_suave); }

/* Un solo campo en toda la pantalla. Hereda la tipografía a propósito: el
 * tamaño por defecto de un `input` en móvil es menor de 16px y Safari hace
 * zoom al enfocarlo, que descoloca la página entera en el momento de escribir. */
.reclamar-alta input {
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  padding: .75rem .85rem; width: 100%;
  color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.reclamar-alta input::placeholder { color: var(--tinta_suave); }

/* `.boton` estaba escrito para un enlace. En un `<button>` el navegador pone su
 * propia tipografía y su propio borde, así que sin esto el botón de la única
 * pantalla que cobra salía en Helvetica gris del sistema. */
button.boton { border: 0; cursor: pointer; font-family: inherit; width: 100%; }

@media (min-width: 46rem) {
  button.boton { width: auto; align-self: flex-start; padding-inline: 1.6rem; }
}

/* LAS CONDICIONES NO SE ACHICAN. `docs/consentimiento/es-2026-09-c.md` lo dice
 * por escrito y forma parte del texto: van en el mismo cuerpo que el resto del
 * formulario, porque unas condiciones en letra pequeña son unas condiciones
 * discutibles y aquí lo que se juega es poder escribirle (LSSI art. 21.2).
 * Por eso no hay `font-size` en esta regla: si algún día alguien lo añade, está
 * cambiando el texto legal sin cambiar el fichero versionado. */
.condiciones {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: calc(.9rem * var(--escala)) 0;
  display: flex; flex-direction: column; gap: .55rem;
}
.condiciones p { margin: 0; }

.ayuda { color: var(--tinta_suave); font-size: .9rem; margin: 0; }

/* --- Lo que se lleva gratis y lo que cuesta -------------------------------- */
/* Las dos listas son la misma lista: una tarjeta con filas separadas por línea.
 * Nada distingue visualmente a la de pago, y es a propósito — lo de pago se
 * distingue por lo que dice, no por un marco dorado. */

.lo-gratis, .lo-de-pago {
  list-style: none; margin: 0; padding: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.lo-gratis li, .lo-de-pago li {
  padding: calc(.8rem * var(--escala)) calc(1rem * var(--escala));
  border-bottom: 1px solid var(--linea);
}
.lo-gratis li:last-child, .lo-de-pago li:last-child { border-bottom: 0; }

.escaparate > p { margin-top: 0; }

/* --- La escalera de precios ----------------------------------------------- */
/* Va en tabla porque es una tabla: dos columnas con cabecera. Con lector de
 * pantalla se lee «Del 1 al 26 de noviembre, 149 €» y no dos celdas sueltas. */

.escalera { margin: 1rem 0 0; border: 1px solid var(--linea);
            border-radius: var(--radio); overflow: hidden; }
.escalera caption { text-align: left; padding: 0 0 .5rem; }
.escalera th {
  text-align: left; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta_suave);
  background: var(--superficie);
  padding: calc(.55rem * var(--escala)) calc(.9rem * var(--escala));
  border-bottom: 1px solid var(--linea);
}
.escalera th:last-child { text-align: right; }
.escalera td { padding: calc(.7rem * var(--escala)) calc(.9rem * var(--escala)); }
.escalera td strong { font-family: var(--tipografia_titulos);
                      font-size: calc(1.15rem * var(--escala)); }
.escalera .de { display: block; color: var(--tinta_suave); font-size: .85rem; }

/* El tramo de hoy, marcado por el borde y no por un fondo de color: el fondo
 * tendría que ser un tinte del acento, y un tinte es un color nuevo que no está
 * en el tema. La franja lo dice igual de claro y funciona en los dos modos. */
.escalera .hoy { background: var(--superficie); box-shadow: inset 3px 0 0 var(--acento); }
.escalera .marca {
  display: inline-block; vertical-align: .08em; margin-left: .4rem;
  background: var(--acento); color: var(--acento_texto);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; padding: .15rem .5rem; border-radius: 999px;
}

/* --- Las salidas ---------------------------------------------------------- */
/* Quien te deja irte no te está estafando: van a la vista, no en el pie y no en
 * letra más pequeña que el resto. */
.salidas { border-top: 1px solid var(--linea); padding-top: calc(1rem * var(--escala)); }
.salidas p { margin: 0 0 .4rem; }
.salidas p:last-child { margin-bottom: 0; }

/* --- Quitar la ficha ------------------------------------------------------ */
/* La salida. No lleva rojo ni advertencia: el art. 21.2 del RGPD hace la
 * oposición absoluta, así que irse es una acción normal de esta casa y no un
 * error que haya que confirmar. El botón va en secundario por lo mismo. */

.retirada { display: flex; flex-direction: column; gap: .8rem; }
/* La URL entera, que es como reconoce su página: puede ser lo único que
 * reconozca, porque es la que ha visto en el correo. Se parte donde quepa en
 * vez de desbordar el móvil. */
.url-publica { overflow-wrap: anywhere; }

/* El rótulo de cada grupo de áreas en la portada: la comunidad sobre sus
 * provincias. Es un separador, no un título de sección — la sección es «por
 * provincia» y esto solo dice dónde buscar—, así que va al cuerpo de un rótulo
 * y no al de un h2. */
.grupo-area {
  font-family: var(--tipografia_titulos);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta_suave);
  margin: calc(1.1rem * var(--escala)) 0 .3rem;
}
.grupo-area:first-of-type { margin-top: 0; }

/* --- «¿Ves algo mal?»: la puerta ------------------------------------------ */
/* LAS CUATRO A LA VEZ, y por eso son tarjetas y no un acordeón: un desplegable
 * esconde tres de las cuatro y el que viene a corregir un horario abre la
 * primera que ve. En el móvil se apilan; a partir de 46rem van de dos en dos,
 * que es lo que permite verlas las cuatro sin desplazarse.
 *
 * NINGUNA DESTACA SOBRE LAS OTRAS. La primera lleva el botón de acento porque
 * es la acción que esta casa recomienda —corregir es mejor que irse—, pero la
 * tarjeta es la misma: destacar una caja sería decidir por él, y aquí no
 * sabemos a qué ha venido. */

.salidas-cuatro {
  display: grid; gap: calc(.9rem * var(--escala));
  margin: calc(1.4rem * var(--escala)) 0;
}
@media (min-width: 46rem) {
  .salidas-cuatro { grid-template-columns: 1fr 1fr; }
}

.salida {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: calc(1.1rem * var(--escala));
  display: flex; flex-direction: column;
}
/* El título en primera persona —«no quiero que mi centro salga aquí»— es lo que
 * hace que alguien se reconozca en dos segundos, así que va al tamaño de un h2
 * de verdad y no al de un rótulo. */
.salida h2 { margin: 0 0 .4rem; font-size: calc(1.1rem * var(--escala)); }
.salida p { margin: 0 0 .7rem; }
/* El botón abajo del todo y alineado entre tarjetas: con textos de distinto
 * largo, sin esto las cuatro acciones salen a cuatro alturas. */
.salida p:has(.boton) { margin: auto 0 0; padding-top: .4rem; }
.salida .ayuda { margin-top: .6rem; }

/* --- El formulario del art. 16 -------------------------------------------- */
/* Hereda de `.reclamar-alta`, que ya sabe maquetar un formulario de esta casa.
 * Lo único suyo es el `textarea`, que aquel no tenía: la explicación motivada
 * del art. 16.2.a no cabe en una línea, y un campo de una línea para contar por
 * qué algo es ilícito es una forma de pedir menos de lo que la ley pide. */

.aviso-form textarea {
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  padding: .75rem .85rem; width: 100%; resize: vertical;
  color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio);
}

/* La casilla y su texto, en la misma línea y con el texto legible: la
 * declaración de buena fe es parte del aviso, no un adorno del botón. */
.casilla { display: flex; gap: .6rem; align-items: flex-start;
           font-size: 1rem; font-weight: 400; color: var(--tinta); line-height: 1.5; }
.casilla input { margin-top: .25rem; flex: 0 0 auto; }

/* El error de un campo. Usa el color de acento y no un rojo: no hay rojo en el
 * tema, y un rojo escrito aquí no cambiaría entre directorios ni en modo
 * oscuro. Lo que señala el error es la barra de la izquierda, no el color. */
.error {
  margin: 0; padding-left: .7rem; font-size: .95rem;
  border-left: 3px solid var(--acento);
}

/* --- El acuse del aviso --------------------------------------------------- */
/* El número es lo único grande de la página porque es lo único que hay que
 * copiar. Tabular para que no baile al leerlo en voz alta por teléfono. */

.acuse {
  background: var(--superficie); border: 1px solid var(--acento);
  border-radius: var(--radio); padding: calc(1.1rem * var(--escala));
}
.numero-aviso {
  font-family: var(--tipografia_titulos); font-size: calc(1.6rem * var(--escala));
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  margin: .2rem 0 .6rem; overflow-wrap: anywhere;
}

/* --- El panel del dueño --------------------------------------------------- */
/* Hereda de `.reclamar-alta`, que ya sabe maquetar un formulario de esta casa.
 * Lo único suyo son los títulos de bloque —el panel tiene cuatro y el alta uno
 * solo— y la rejilla del horario.
 *
 * LA MARCA DE AGUA ES EL DATO DE GOOGLE. Un campo vacío enseña en gris lo que
 * se publica hoy, así que el dueño ve lo que hay sin que nosotros le guardemos
 * una copia de algo que no ha escrito él. Por eso el gris del `placeholder`
 * tiene que ser legible y no decorativo. */

/* EL PANEL DEL ENCARGO 07·A: la ficha escrita, con un «cambiar» por línea.
 * Antes eran veinte cajas abiertas de golpe —incluidas las siete del horario—,
 * y una caja abierta con algo dentro pide que lo cambies aunque esté bien. */
.panel-bloque { margin: calc(1.8rem * var(--escala)) 0; }
.panel-bloque-cabeza { margin-bottom: .7rem; }
.panel-bloque-cabeza h2 { font-size: 1.15rem; }
.panel-bloque-cabeza .ayuda { margin-top: .2rem; }

/* Una línea de lo publicado: rótulo, valor, y el «cambiar». En pantalla ancha
 * van en fila y el rótulo en columna, que es lo que deja recorrer los cuatro de
 * un vistazo; en el móvil se apilan. */
.lineas { background: var(--superficie); border: 1px solid var(--linea);
          border-radius: var(--radio); overflow: hidden; }
.linea { padding: .9rem 1rem; border-bottom: 1px solid var(--linea);
         display: grid; gap: .3rem .9rem; }
.linea:last-child { border-bottom: 0; }
@media (min-width: 38rem) {
  .linea { grid-template-columns: 8.5rem 1fr auto; align-items: baseline; }
  .linea-cambiar { grid-column: 3; grid-row: 1; }
  .linea-form { grid-column: 1 / -1; }
}
.linea-rotulo { font-size: .88rem; font-weight: 600; color: var(--tinta_suave); }
.linea-valor { line-height: 1.45; }
.linea-antes { display: block; font-size: .88rem; }
/* La línea que falta. Sin color propio: lo que la señala es la barra de acento,
 * igual que el aviso de guardado — lo que las distingue es el texto. */
.linea-falta { border-left: 3px solid var(--acento); }

/* EL «CAMBIAR» ES UN `<details>`, no un botón con JavaScript: abrir una cosa y
 * cerrarla lo hace el navegador, con teclado y con lector de pantalla. */
.linea-cambiar > summary {
  cursor: pointer; color: var(--acento_enlace); font-weight: 600; font-size: .95rem;
  list-style: none;
}
.linea-cambiar > summary::-webkit-details-marker { display: none; }
.linea-cambiar > summary:hover { text-decoration: underline; }
/* Las tres que solo puede poner él llevan BOTÓN, no enlace: es una acción que
 * se le está pidiendo, no un cambio sobre algo que ya está bien. */
.linea-cambiar > summary.como-boton {
  display: inline-block; margin-top: .6rem;
  background: var(--acento); color: var(--acento_texto);
  padding: .7rem 1rem; border-radius: var(--radio); font-weight: 600;
  font-size: 1rem;
}
.linea-cambiar > summary.como-boton:hover { text-decoration: none; opacity: .92; }
/* Abierto pasa a secundario, y NO se esconde: el `summary` es el mando que lo
 * cierra, y esconderlo deja el bloque abierto para siempre a quien navega con
 * teclado. Cambiar de aspecto ya dice que está abierto. */
.linea-cambiar[open] > summary.como-boton {
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea); font-weight: 400;
}
.linea-form { margin-top: .7rem; display: grid; gap: .5rem; justify-items: start; }
.linea-form input, .linea-form textarea, .linea-form .horario-editable { width: 100%; }
.linea-form .ayuda { margin: 0; }

/* Las tres que solo puede poner él. Van en tarjeta y con su motivo dentro: el
 * motivo de subir fotos propias es que las de Google pueden caducar, y es
 * cierto — sin decirlo, subirlas es un trámite más. */
.panel-suyo { margin-bottom: .8rem; }
.panel-suyo-cabeza { display: flex; justify-content: space-between;
                     align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.panel-suyo-cabeza h3 { font-size: 1.05rem; }
.panel-suyo-valor { margin: .5rem 0; line-height: 1.5; }

/* LA OFERTA, UNA VEZ Y ABAJO. No hay candados arriba: lo de pago no sale
 * apagado en el panel, sale aquí con su precio. Un panel con la mitad de las
 * filas en gris se lee como un producto que no funciona. */
.panel-oferta { margin: calc(2.2rem * var(--escala)) 0 1rem; }
.panel-oferta-caja { display: flex; gap: 1.5rem; flex-wrap: wrap;
                     align-items: flex-start; }
.panel-oferta-que { flex: 1 1 18rem; min-width: 0; }
.panel-oferta-que h2 { font-size: 1.3rem; margin-bottom: .4rem; }
.panel-oferta-precio { flex: none; }
.panel-oferta-precio p { margin: 0 0 .2rem; }
.precio-anual { font-family: var(--tipografia_titulos); font-size: 1.9rem;
                font-weight: 700; line-height: 1.1; }
.precio-sube { color: var(--aviso); font-size: .92rem; margin-top: .4rem !important; }

.panel-pie { margin: 1.6rem 0 0; padding-top: 1rem;
             border-top: 1px solid var(--linea);
             color: var(--tinta_suave); font-size: .92rem; line-height: 1.55; }

/* Para los rótulos que hacen falta con lector de pantalla y estorban a la
 * vista: el valor ya está escrito encima del campo. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.panel h2 { margin: calc(1.6rem * var(--escala)) 0 .2rem; font-size: 1.15rem; }
.panel h2:first-of-type { margin-top: .4rem; }
.panel textarea, .linea-form textarea {
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  padding: .75rem .85rem; width: 100%; resize: vertical;
  color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.panel input::placeholder, .panel textarea::placeholder { color: var(--tinta_suave); }

/* EL HORARIO LEÍDO, que es como sale en el panel antes de tocar nada: siete
 * líneas que se leen de un vistazo, no veintiocho campos. Las horas en cifras
 * de ancho fijo para que las columnas cuadren y se vea de un golpe qué día se
 * sale de lo normal. */
.horario-leido { display: grid; gap: .15rem .8rem; margin: 0;
                 font-variant-numeric: tabular-nums; }
@media (min-width: 26rem) {
  .horario-leido { grid-template-columns: 6.5rem 1fr; }
}
.horario-leido dt { color: var(--tinta_suave); }
.horario-leido dd { margin: 0; }

/* Siete días, dos columnas: el rótulo y el campo. En el móvil se apilan, que es
 * lo que hace que el nombre del día no se coma la mitad del ancho útil. */
.horario-editable { display: grid; gap: .35rem .8rem; align-items: center; }
@media (min-width: 34rem) {
  .horario-editable { grid-template-columns: 8rem 1fr; }
  .horario-editable label { margin: 0; }
}

.panel-fotos { margin: calc(1.8rem * var(--escala)) 0; }
.tira-fotos { list-style: none; margin: .8rem 0; padding: 0;
              display: flex; flex-wrap: wrap; gap: .7rem; }
.tira-fotos li { display: flex; flex-direction: column; gap: .35rem; width: 10rem; }
.tira-fotos img { width: 100%; aspect-ratio: 3/2; object-fit: cover;
                  border-radius: var(--radio); background: var(--superficie); }

/* El informe. Va al FINAL del panel a propósito: durante meses va a decir
 * números pequeños, y abrir con eso es abrir diciéndole que esto no sirve. */
.panel-informe { margin: calc(1.8rem * var(--escala)) 0; }
.informe { width: 100%; border-collapse: collapse; margin: .6rem 0;
           border: 1px solid var(--linea); border-radius: var(--radio); }
.informe th { text-align: left; font-weight: 600; padding: .55rem .8rem; }
.informe thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
                    color: var(--tinta_suave); background: var(--superficie); }
.informe td { padding: .55rem .8rem; text-align: right;
              font-variant-numeric: tabular-nums; }
.informe tbody tr + tr th, .informe tbody tr + tr td { border-top: 1px solid var(--linea); }

/* El «guardado» después de guardar. Verde no: no hay verde en el tema y un
 * color escrito aquí no cambiaría entre directorios. Lo que lo señala es la
 * barra de acento, igual que en el error — lo que los distingue es el texto. */
.aviso-bueno {
  margin: 0 0 1rem; padding: .6rem .8rem;
  background: var(--superficie); border-left: 3px solid var(--acento);
  border-radius: var(--radio);
}

/* --- La pregunta del motivo, DESPUÉS de retirar --------------------------- */
/* «Saltar» tiene que verse igual que «enviar». Una pregunta con la salida
 * escondida debajo es una pregunta obligatoria disfrazada, y el art. 21.2 del
 * RGPD no deja condicionar la oposición a nada. */

.motivo { border-top: 1px solid var(--linea); margin-top: calc(1.6rem * var(--escala));
          padding-top: calc(1.2rem * var(--escala)); }
.motivo h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.dos-salidas { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
               margin-top: .6rem; }
@media (max-width: 46rem) {
  .dos-salidas button.boton { width: auto; padding-inline: 1.4rem; }
}

/* Los enlaces propios y el vídeo: lo que se compra. Misma botonera que la de
 * arriba y a propósito — lo de pago no lleva marco dorado, se distingue por lo
 * que dice. Solo se separa del bloque anterior. */
.botonera.propios { margin-top: -.25rem; }

/* El resumen de errores de un formulario, antes de los campos. Existe para que
 * un lector de pantalla anuncie que algo ha fallado: los mensajes de cada campo
 * están debajo de él y no se leen hasta llegar. */
.resumen-errores {
  border-left: 3px solid var(--acento); background: var(--superficie);
  border-radius: var(--radio); padding: .7rem 1rem; margin: 0 0 1rem;
}
.resumen-errores ul { margin: 0; padding-left: 1.1rem; }

/* El grupo de radios del motivo. `fieldset` trae borde y márgenes propios del
 * navegador que no encajan con nada de esta hoja. */
.grupo-motivo { border: 0; padding: 0; margin: 0;
                display: flex; flex-direction: column; gap: .5rem; }
.grupo-motivo legend { padding: 0; font-family: var(--tipografia_titulos);
                       font-size: calc(1.1rem * var(--escala)); }

/* Las otras intersecciones de la misma ciudad, al pie de una de ellas. Reusa
 * `.terminos`, que ya es una fila de pastillas: lo que hay aquí es exactamente
 * eso, formas de acotar. Solo se separa del bloque anterior. */
.otras-intersecciones { margin-top: calc(1.8rem * var(--escala)); }

/* ------------------------------------------------------------------------
   EL ALTA DEL HORARIO EN TRES PREGUNTAS. Encargo 07·A.

   La regla que ordena todo esto: **nunca más de dos pares de horas en pantalla
   a la vez**, y el único sitio donde pueden aparecer cuatro es el paso 2 con la
   parada de mediodía abierta. Si alguna vez hay más, lo que está mal no es la
   hoja de estilos: es que alguien ha vuelto a meter los 28 campos.
   ------------------------------------------------------------------------ */
.horario-alta { max-width: 32rem; }
.horario-paso { margin-top: -.4rem; }

/* Los siete días como botones y no como casillas: en un móvil, una casilla de
 * trece píxeles al lado de una letra es la mitad de los fallos de este
 * formulario. La casilla sigue ahí —es lo que se envía y lo que lee un lector
 * de pantalla—, solo que no se pinta. */
.horario-dias { border: 0; padding: 0; margin: 0 0 .8rem;
                display: flex; flex-wrap: wrap; gap: .4rem; }
.horario-dia { flex: 1 1 2.6rem; }
.horario-dia input { position: absolute; opacity: 0; pointer-events: none; }
.horario-dia span[aria-hidden] {
  display: block; text-align: center; cursor: pointer;
  padding: .7rem .2rem; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--superficie);
  font-weight: 600; line-height: 1;
}
.horario-dia input:checked + span[aria-hidden] {
  background: var(--acento); color: var(--acento_texto); border-color: var(--acento);
}
/* El foco tiene que verse: la casilla está escondida, así que el anillo lo
 * lleva el recuadro. Sin esto, quien va con el tabulador no sabe dónde está. */
.horario-dia input:focus-visible + span[aria-hidden] {
  outline: 2px solid var(--acento); outline-offset: 2px;
}

.horario-tramo { display: flex; flex-wrap: wrap; align-items: center;
                 gap: .5rem; margin: .6rem 0; }
.horario-tramo input { flex: 0 1 6rem; min-width: 0; }
.horario-tramo label { flex: none; color: var(--tinta_suave); }

/* El segundo tramo viene cerrado a propósito: es el único sitio del panel donde
 * pueden aparecer cuatro horas juntas, y la mayoría de los centros no lo
 * necesita. */
.horario-parte { margin: .8rem 0 1.2rem; }
.horario-parte summary { cursor: pointer; color: var(--acento_enlace); }

.horario-abre { border: 0; padding: 0; margin: 0 0 .6rem;
                display: flex; gap: 1.2rem; }

/* El repaso del paso 3: cada día es un botón de ancho completo que abre su
 * propia hoja. Se pinta como una fila, no como un botón, porque lo que hace es
 * entrar en un sitio. */
.horario-repaso { list-style: none; margin: 0 0 1.2rem; padding: 0;
                  border: 1px solid var(--linea); border-radius: var(--radio);
                  overflow: hidden; }
.horario-repaso li + li { border-top: 1px solid var(--linea); }
.horario-repaso-dia {
  width: 100%; display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; padding: .8rem 1rem; border: 0; cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  font: inherit; text-align: left;
}
.horario-repaso-dia:hover { background: var(--fondo); }
.horario-repaso-nombre { font-weight: 600; }
.horario-repaso-horas { color: var(--tinta_suave); }

.horario-tambien { margin-top: 1.2rem; }
.horario-tambien legend { padding: 0 0 .4rem; }
.horario-cita { margin-top: 2rem; }
.horario-salida { margin-top: 2rem; }

/* «Las dos respuestas de Google no cuadran». No lleva color de aviso ni icono
 * de alarma: no es un problema del negocio, es un dato que no cuadra, y
 * pintarlo en rojo sería un veredicto que la propia sección dice no dar. */
.no-cuadra ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.no-cuadra li + li { margin-top: .3rem; }