/* Hoja única. Sin marco de terceros y sin JavaScript: la política de
   seguridad de esta web no deja ejecutar scripts ni poner estilos sueltos en
   el HTML (style="…"), así que todo lo visual vive aquí.

   Se ve en el móvil de la responsable en plena calle tanto como en un
   portátil, y se imprime: la hoja del día sale de esta misma página.

   La imagen es la del festival (web FMD, `prototype/src/styles.css`): lima
   #eeff01, magenta #ec008c, tinta #201d20 y papel #f6f2ea, con Saira para el
   texto y Jura para las cifras. Dos ajustes para que se lea al sol y pase
   las pautas de contraste (WCAG AA, medido el 2026-09-24):
   - El magenta del festival con texto blanco da 4,25:1 y no llega a 4,5. En
     enlaces, botones y el día elegido va un magenta más oscuro, #c7007a
     (5,66 con blanco, 5,07 sobre papel).
   - El lima nunca va como texto sobre claro (1,01 sobre papel): va de fondo,
     con texto en tinta (15:1), o como texto sobre tinta en modo oscuro. */

/* Saira y Jura: variables, licencia SIL OFL, servidas desde aquí (la
   política de seguridad solo deja cargar fuentes de este mismo sitio). El
   subconjunto latin-ext solo se pide si una página lo necesita. Rangos
   copiados de la web del festival. */
@font-face {
  font-family: "Saira";
  src: url("/estatico/fuentes/saira-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  src: url("/estatico/fuentes/saira-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jura";
  src: url("/estatico/fuentes/jura-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jura";
  src: url("/estatico/fuentes/jura-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fondo: #f6f2ea;          /* papel del festival */
  --superficie: #ffffff;
  --hundido: #ece6da;
  --texto: #201d20;          /* tinta */
  --apagado: #5f595b;
  --borde: #ddd5c6;          /* separadores: no necesitan 3:1 */
  --borde-campo: #85807a;    /* el contorno de un campo sí (WCAG 1.4.11): 3,91 */
  --acento: #c7007a;         /* magenta, oscurecido para texto */
  --acento-suave: #fce4f1;
  --sobre-acento: #ffffff;
  --marca: #eeff01;          /* lima: la cabecera, como en la web */
  --sobre-marca: #201d20;
  --boton: #201d20;          /* el «botón oscuro» de la web: tinta con lima */
  --sobre-boton: #eeff01;
  --si: #e3f1e6;       --si-texto: #1f5130;
  --no: #f7e2e0;       --no-texto: #8a2b22;
  --parcial: #fdf0d9;  --parcial-texto: #7a4f0b;
  --duda: #eceaf3;     --duda-texto: #4a4566;
  --grave: #b3261e;
  --alerta: #c2410c;   --alerta-texto: #ffffff;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .03);
  --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Al revés que en claro: fondo tinta y el lima para lo que se toca. */
    --fondo: #201d20; --superficie: #2a272a; --hundido: #363236; --texto: #f6f2ea;
    --apagado: #b3ada9; --borde: #413c41; --borde-campo: #827c80;
    --acento: #eeff01; --acento-suave: #3b3f12; --sobre-acento: #201d20;
    --marca: #161416; --sobre-marca: #f6f2ea; --boton: #eeff01; --sobre-boton: #201d20;
    --si: #1f3a2a; --si-texto: #a8dbb6; --no: #3d2422; --no-texto: #f0aaa3;
    --parcial: #3b3020; --parcial-texto: #f1cf8f; --duda: #2a2833; --duda-texto: #c5c0e0;
    --grave: #f2877e; --alerta: #fb923c; --alerta-texto: #1c0a02; --sombra: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.5 "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
main.ancho { max-width: 78rem; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
h3 { font-size: 1rem; margin: 0 0 .25rem; }
a { color: var(--acento); }
p { margin: .4rem 0 .8rem; }
.apagado { color: var(--apagado); }
.pequeno { font-size: .875rem; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

/* --- Barra del panel ------------------------------------------------------ */

/* La cabecera va en lima con el texto en tinta, como la de la web del
   festival; en modo oscuro, tinta con el logo en lima. Todo lo que hay dentro
   usa --sobre-marca: el magenta sobre lima (3,8:1) no vale para texto. */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: var(--marca); color: var(--sobre-marca); border-bottom: 1px solid var(--texto);
}
.cabecera-dentro {
  max-width: 78rem; margin: 0 auto; padding: .6rem 1rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
}
.cabecera.publica .cabecera-dentro { max-width: 60rem; padding-bottom: .6rem; }
.marca { display: flex; align-items: center; gap: .7rem; font-weight: 650; text-decoration: none;
         color: var(--sobre-marca); margin-right: auto; line-height: 1.2; }
.marca small { display: block; font-weight: 450; font-size: .8rem; opacity: .8; }
/* El logo va dentro de la página y se pinta con el color del texto: sale en
   tinta en claro y en lima en oscuro sin pedir nada al servidor. */
.logo { display: block; height: 2rem; width: auto; flex: none; }
@media (prefers-color-scheme: dark) { .cabecera .logo { color: var(--acento); } }
.cabecera button.enlace { color: var(--sobre-marca); }
.pestanas {
  order: 3; width: 100%; display: flex; gap: .25rem; overflow-x: auto;
  scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem;
}
.pestanas a {
  white-space: nowrap; text-decoration: none; color: var(--sobre-marca); opacity: .78;
  padding: .55rem .75rem; border-bottom: 3px solid transparent; font-weight: 550;
}
.pestanas a[aria-current="page"] { opacity: 1; font-weight: 700; border-bottom-color: var(--sobre-marca); }
.pestanas .cuenta {
  display: inline-block; min-width: 1.35rem; padding: 0 .35rem; margin-left: .25rem;
  border-radius: 999px; background: var(--sobre-marca); color: var(--marca);
  font-size: .75rem; text-align: center;
}
.salir { font-size: .9rem; }
/* En un móvil (375 px) la cabecera va en dos líneas: marca y «Salir» arriba,
   pestañas debajo. Para que las cinco pestañas quepan sin desplazarse se
   quitan los contadores y el «voluntarios» de «Nuevos voluntarios», y el
   subtítulo pierde «panel de la responsable». Es fija: cada línea de más le
   quita pantalla al día. */
@media (max-width: 480px) {
  .cabecera-dentro { padding-top: .45rem; gap: 0 .75rem; }
  .logo { height: 1.55rem; }
  .marca { gap: .55rem; }
  .solo-ancho { display: none; }
  .pestanas { gap: 0; justify-content: space-between; }
  .pestanas a { padding: .5rem .3rem; font-size: .88rem; }
  .pestanas .cuenta { display: none; }
}
.pie { max-width: 78rem; margin: 0 auto; padding: 0 1rem 2rem; color: var(--apagado); font-size: .8rem; }

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

.titular { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
           gap: .5rem 1rem; margin-bottom: 1rem; }
.titular p { margin: 0; }
.sin-margen { margin: 0; }
.tarjeta > .titular { margin-bottom: .5rem; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .9rem 1rem; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: .6rem; }
.rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .rejilla.dos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.seccion-lateral h2:first-child { margin-top: 0; }
.vacio {
  border: 1px dashed var(--borde); border-radius: var(--radio); padding: 1.25rem;
  color: var(--apagado); text-align: center; background: var(--superficie);
}
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.lista li:last-child { border-bottom: 0; }

/* --- Avisos ------------------------------------------------------------------- */

.alertas { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.alertas li { border-radius: 8px; padding: .55rem .8rem; display: flex; gap: .6rem; align-items: baseline; }
.alertas .grave { background: var(--no); color: var(--no-texto); }
.alertas .aviso { background: var(--parcial); color: var(--parcial-texto); }
.alertas .info  { background: var(--duda); color: var(--duda-texto); }
.alertas a { color: inherit; font-weight: 600; }
.alertas .icono { font-weight: 700; }
.todo-bien { background: var(--si); color: var(--si-texto); border-radius: 8px; padding: .55rem .8rem;
             margin: 0 0 1.25rem; }
.hecho { background: var(--acento-suave); border: 1px solid var(--acento); border-radius: 8px;
         padding: .6rem .8rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
         align-items: center; }
.error, .errores { background: var(--no); color: var(--no-texto); padding: .6rem .8rem; border-radius: 8px; }
.errores ul, .avisos-guardar ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.aviso, .avisos-guardar { background: var(--parcial); color: var(--parcial-texto);
                          padding: .6rem .8rem; border-radius: 8px; }
.cerrado { background: var(--hundido); padding: .6rem .8rem; border-radius: 8px; }

/* Lo que el voluntario no puede pasar por alto en su hoja: que algo ha
   cambiado. Color lleno y tres latidos al cargar, que luego se paran: un
   parpadeo sin fin cansa y a alguna gente le sienta mal. Quien tenga
   pedido en el sistema reducir el movimiento no lo ve latir. */
.aviso-fuerte { background: var(--alerta); color: var(--alerta-texto); font-weight: 600;
                font-size: 1.05rem; padding: .8rem 1rem; border-radius: 8px;
                animation: latido 1.2s ease-in-out 3; }
.aviso-fuerte strong { font-weight: 800; }
@keyframes latido {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  50% { transform: scale(1.03); box-shadow: 0 0 0 6px var(--parcial); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-fuerte { animation: none; }
}

/* --- Pestañas de días ------------------------------------------------------------ */

.dias { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; }
.dias a {
  flex: 0 0 auto; text-decoration: none; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 999px; padding: .35rem .8rem; font-size: .92rem;
}
.dias a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.dias .num { opacity: .75; margin-left: .3rem; }
.dias .hoy { font-weight: 700; }

/* --- Encargos en la línea del día --------------------------------------------------- */

.encargos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.encargo {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .25rem .9rem;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid var(--si-texto);
  border-radius: var(--radio); padding: .75rem .9rem; box-shadow: var(--sombra);
}
.encargo.falta { border-left-color: var(--grave); }
.encargo.recien { outline: 3px solid var(--acento); }
.encargo:target { outline: 3px solid var(--acento); }
/* Las horas en Jura, la tipografía de las cifras del festival. Su cero lleva
   un punto dentro: la dirección de la web lo aceptó como parte del sistema. */
.hora { font-family: "Jura", "Saira", system-ui, sans-serif; font-variant-numeric: tabular-nums;
        font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.hora small { display: block; font-weight: 500; color: var(--apagado); font-size: .85rem; }
.encargo h3 { font-size: 1.02rem; }
.encargo .donde { color: var(--apagado); font-size: .92rem; margin: 0 0 .35rem; }
.encargo .detalle { font-size: .9rem; margin: .35rem 0 0; white-space: pre-line; }
.encargo .pie-encargo { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem .9rem;
                        align-items: center; font-size: .88rem; margin-top: .35rem; }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .12rem .6rem;
  background: var(--hundido); font-size: .86rem; text-decoration: none; color: var(--texto);
}
a.chip:hover { background: var(--acento-suave); }
.chip.peligro { background: var(--no); color: var(--no-texto); }
.chip.ojo { background: var(--parcial); color: var(--parcial-texto); }
.chip.hueco { background: transparent; border: 1px dashed var(--grave); color: var(--grave); }
.etiqueta { display: inline-block; background: var(--duda); color: var(--duda-texto); border-radius: 999px;
            padding: .08rem .55rem; margin-right: .3rem; font-size: .8rem; font-weight: 550; }
.etiqueta.verde { background: var(--si); color: var(--si-texto); }
.etiqueta.roja { background: var(--no); color: var(--no-texto); }
.etiqueta.ambar { background: var(--parcial); color: var(--parcial-texto); }

/* Movimientos de compañías en el día */
.movimientos { list-style: none; padding: 0; margin: 0; }
.movimientos li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .1rem .6rem;
                  padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.movimientos li:last-child { border-bottom: 0; }
.movimientos .hora { font-size: .95rem; }
.movimientos .tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }

/* --- Cuadrícula de personas ------------------------------------------------------- */

.desplazable { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio);
               background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--borde); padding: .45rem .55rem; text-align: left; vertical-align: top; }
thead th { background: var(--hundido); position: sticky; top: 0; font-size: .82rem; white-space: nowrap; }
tbody th { font-weight: 550; min-width: 11rem; background: var(--superficie); position: sticky; left: 0; }
td.celda { min-width: 7.5rem; }
td.celda .enc { display: block; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.estado-si { background: var(--si); color: var(--si-texto); }
.estado-no { background: var(--no); color: var(--no-texto); }
.estado-parcial { background: var(--parcial); color: var(--parcial-texto); }
.estado-duda { background: var(--duda); color: var(--duda-texto); }
.estado-sin_respuesta { color: var(--apagado); }
.estado-baja { background: var(--no); color: var(--no-texto); }
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; align-items: center; }
.filtros select { width: auto; max-width: 100%; margin-top: 0; }

/* --- Ficha ------------------------------------------------------------------------ */

.datos { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .25rem 0 0; color: var(--apagado); }
.datos a { font-weight: 600; }
.dia-ficha { margin-top: .6rem; }
.dia-ficha > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem;
                      align-items: baseline; margin-bottom: .45rem; }
.dia-ficha h3 { font-size: 1rem; }
.mensaje { width: 100%; min-height: 9rem; font: .9rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Formularios ---------------------------------------------------------------- */

form { margin: 0; }
form.estrecho { max-width: 28rem; }
form.en-linea { display: inline; }
label { display: block; margin: .75rem 0; font-weight: 550; }
label .ayuda, .ayuda { display: block; font-weight: 400; color: var(--apagado); font-size: .85rem; }
.opcional { font-weight: 400; color: var(--apagado); font-size: .85rem; }
label.casilla { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; font-weight: 400; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel],
input[type=time], input[type=number], select, textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .6rem;
  border: 1px solid var(--borde-campo); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font: inherit;
}
textarea { min-height: 4.5rem; resize: vertical; }
.campos { display: grid; gap: 0 1rem; }
/* En el móvil, lugar a lo ancho y las dos horas lado a lado. */
.campos.tres { grid-template-columns: 1fr 1fr; }
.campos.tres > :first-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .campos.tres > :first-child { grid-column: auto; }
  .campos.tres { grid-template-columns: 2fr 1fr 1fr; }
  .campos.dos { grid-template-columns: 1fr 1fr; }
}
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: .4rem 1rem 1rem;
           margin: 1rem 0; background: var(--superficie); }
legend { font-weight: 650; padding: 0 .35rem; }
/* Ficha de viaje: terminal y nº de vuelo solo en avión, sin JS. Se esconden
   al elegir otro medio y, con «Sin saber» en la vuelta, si la ida no es en
   avión. Un navegador sin :has() las enseña siempre, que es lo seguro. */
fieldset:has(select.medio option:checked:not([value="avion"]):not([value=""])) .solo-avion,
fieldset[data-como-la-ida]:not([data-como-la-ida="avion"]):has(select.medio option:checked[value=""]) .solo-avion,
/* La ida la elige ella en este mismo formulario: la vuelta en «Sin saber» la
   sigue en el momento, igual que hace `medio_del_tramo` al guardar. Sin esta
   regla la casilla se veía y lo escrito en ella se descartaba. */
form:has(select[name="medio"] option:checked:not([value="avion"]):not([value=""]))
  fieldset:has(select[name="vuelta_medio"] option:checked[value=""]) .solo-avion {
  display: none;
}

button, .boton {
  display: inline-block; margin-top: 1rem; padding: .6rem 1.1rem; border: 0; border-radius: 8px;
  background: var(--boton); color: var(--sobre-boton); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.3;
}
.boton.secundario, button.secundario { background: var(--hundido); color: var(--texto); }
button.peligro { background: var(--no); color: var(--no-texto); }
.boton.pequeno, button.pequeno { margin-top: 0; padding: .3rem .7rem; font-size: .88rem; }
button.enlace { background: none; color: var(--acento); padding: 0; margin: 0; font-weight: 500;
                text-decoration: underline; }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* La de guardar del encargo, pegada abajo mientras se baja por la lista. */
.botonera.fija { position: sticky; bottom: 0; z-index: 5; margin: 1rem -1rem 0; padding: .6rem 1rem;
                 background: var(--fondo); border-top: 1px solid var(--borde); flex-wrap: nowrap; }
.avisos-guardar { margin-bottom: 1rem; }
.botonera button, .botonera .boton { margin-top: 0; }
.whatsapp { background: #1f7a4a; color: #fff; }

/* Personas del formulario de encargo */
.candidatos { list-style: none; padding: 0; margin: .4rem 0 0; }
.candidato { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .15rem .6rem;
             padding: .5rem .25rem; border-bottom: 1px solid var(--borde); }
.candidato:last-child { border-bottom: 0; }
.candidato input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.candidato label { margin: 0; font-weight: 550; }
.candidato .nota { grid-column: 2; font-size: .85rem; color: var(--apagado); }
.candidato:has(input:checked) { background: var(--acento-suave); border-radius: 8px; }
details { margin-top: .5rem; }
summary { cursor: pointer; color: var(--acento); font-weight: 550; padding: .35rem 0; }

/* --- Encargo en dos pasos ------------------------------------------------------- */

/* Paso 1: la tarea en botones y, debajo, solo el desplegable del programa que
   le toca. Se hace con :has() y no con JavaScript, que la política de
   seguridad de esta web no permite. Se oculta desde aquí y solo si el
   navegador entiende :has(): sin eso se ven todos, y el formulario sigue
   funcionando. */
.tareas { display: flex; flex-wrap: wrap; gap: .4rem; }
.tarea-opcion { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .45rem .75rem;
                border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie);
                font-weight: 550; cursor: pointer; }
.tarea-opcion:has(input:checked) { background: var(--acento-suave); border-color: var(--acento); }
.bloque-programa select { width: 100%; }
@supports selector(:has(a)) {
  .paso1 .bloque-programa { display: none; }
  .paso1:has(input[data-tipo="transfer"]:checked) .bloque-programa[data-para="transfer"],
  .paso1:has(input[data-tipo="acompanamiento"]:checked) .bloque-programa[data-para="acompanamiento"],
  .paso1:has(input[data-tipo="pase"]:checked) .bloque-programa[data-para="pase"],
  .paso1:has(input[data-tipo="linoleo"]:checked) .bloque-programa[data-para="linoleo"],
  .paso1:has(input[data-tipo="escenario"]:checked) .bloque-programa[data-para="escenario"],
  .paso1:has(input[data-tipo="actividad"]:checked) .bloque-programa[data-para="actividad"] { display: block; }
}

/* Paso 2: lo que viene del programa, fijo arriba. */
.resumen-encargo { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline;
                   padding: .6rem .8rem; border-radius: 8px; background: var(--acento-suave); margin-bottom: 1rem; }
.resumen-encargo strong { font-size: 1.05rem; }
.acompanan { margin: .25rem 0 .75rem; }

/* El cometido de quien va a un pase sin acompañar a la compañía: solo
   aparece al marcarla. Mismo criterio que arriba si no hay :has(). */
.candidato .cometido { grid-column: 2; margin: .25rem 0 0; }
.candidato .cometido input { width: 100%; }
@supports selector(:has(a)) {
  .candidato .cometido { display: none; }
  .candidato:has(input[type="checkbox"]:checked) .cometido { display: block; }
}

/* Ficha de viaje: lo que ya está en LUXfest, a la vista pero sin campo. */
.dato-luxfest { display: flex; flex-direction: column; gap: .1rem; padding: .35rem 0; }
.dato-luxfest .etiqueta-campo { font-weight: 550; }
.contacto-gira { margin: .2rem 0 0; }

/* --- Hoja personal del voluntario ----------------------------------------------- */

.personal { max-width: 34rem; }
.personal .dia-personal { margin-top: 1.25rem; }
.personal .dia-personal h2 { margin: 0 0 .5rem; }

/* «Acepto» y «No puedo», uno junto al otro. «No puedo» es un <details> con
   aspecto de botón: al abrirlo baja a su propia línea con el porqué. Sin
   JavaScript, que la política de seguridad de esta web no lo permite. */
.respuesta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; margin-top: 1.25rem; }
.respuesta > form { margin: 0; }
.respuesta button { margin-top: 0; }
.no-puedo { margin-top: 0; }
.no-puedo[open] { flex-basis: 100%; }
.no-puedo > summary { list-style: none; display: inline-block; padding: .6rem 1.1rem; border-radius: 8px;
                      background: var(--hundido); color: var(--texto); font-weight: 600; line-height: 1.3; }
.no-puedo > summary::-webkit-details-marker { display: none; }
.no-puedo form { margin-top: .75rem; }
.no-puedo textarea { width: 100%; box-sizing: border-box; }
.no-puedo form button { margin-top: .6rem; }
.dijiste q { white-space: pre-line; }
.cambiar { margin-top: 1rem; }

/* El porqué, en la ficha de la responsable. */
.motivo blockquote { margin: .25rem 0 .5rem; padding: .5rem .75rem; white-space: pre-line;
                     border-left: 3px solid var(--no-texto); background: var(--no); border-radius: 0 6px 6px 0; }
.motivo.antiguo blockquote { border-left-color: var(--borde); color: var(--apagado); }
.motivo form { margin: .4rem 0 1rem; }

/* --- Formulario público ------------------------------------------------------------ */

/* El campo trampa: invisible para una persona, visible para un robot que lee
   el HTML. Fuera de pantalla en vez de display:none, que algunos detectan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Descartada: apagada con el color, no con opacidad, que dejaba el texto en
   2,26:1 y no se leía. */
.alta.apagada, .alta.apagada * { color: var(--apagado); }

/* La matrícula solo se pide a quien marca que trae coche. Se hace con el
   selector de hermanos y no con JavaScript, que la política de seguridad de
   esta web no lo permite. Ojo al sentido: se OCULTA desde CSS en vez de
   mostrarse, para que si la hoja de estilos no cargara el campo siguiera a la
   vista en vez de desaparecer sin que nadie lo sepa. */
#coche { margin-right: .4rem; }
.casilla-suelta { display: inline; font-weight: 550; }
#bloque-matricula { display: none; }
#coche:checked ~ #bloque-matricula { display: block; }

/* Disponibilidad guiada: las horas solo se enseñan si se elige «Unas horas».
   Mismo criterio que la matrícula: se ocultan desde aquí, así que sin hoja
   de estilos se ven. */
.dia-alta { border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem;
            margin: .6rem 0; background: var(--superficie); }
.opciones-dia { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.opciones-dia label { display: inline-flex; gap: .35rem; align-items: center; margin: .25rem 0; font-weight: 400; }
.horas-alta { display: none; gap: .75rem; }
.dia-alta:has(input[value="horas"]:checked) .horas-alta { display: flex; }
.horas-alta label { flex: 1; margin: .4rem 0 0; }
.preferencias { columns: 2 14rem; }
.preferencias label { break-inside: avoid; }

/* --- Impresión: la hoja del día ------------------------------------------------------ */

.solo-impresion { display: none; }
@media print {
  :root { --fondo: #fff; --superficie: #fff; --borde: #bbb; --sombra: none; }
  body { font-size: 11pt; }
  .cabecera, .pie, .no-imprimir, .alertas, .mas-alertas, .dias, .hecho, button, .boton,
  .seccion-lateral .libres { display: none !important; }
  .solo-impresion { display: block; }
  main, main.ancho { max-width: none; padding: 0; }
  .rejilla.dos { display: block; }
  .encargo { break-inside: avoid; box-shadow: none; border-left-width: 3px; }
  a { color: inherit; text-decoration: none; }
  .chip { background: none; border: 1px solid #999; }
}

/* «Avisó de que no viene…» en la ficha: plegado, para no pulsarlo sin querer. */
.no-viene { margin: 0; }
.no-viene > summary { display: inline-block; padding: .3rem .7rem; font-size: .88rem; }
.no-viene[open] { flex-basis: 100%; }
.no-viene form { margin-top: .4rem; }
.no-viene button { margin-top: .3rem; }

/* --- Móvil y accesibilidad (revisión del 2026-09-24) ------------------------------ */

/* Las alertas que no son graves, plegadas (D14). */
.mas-alertas { margin: 0 0 1.25rem; }
.mas-alertas > summary { font-weight: 600; }
.mas-alertas .alertas { margin-top: .4rem; }
section[aria-label="Lo que hay que mirar"] > .alertas { margin-bottom: .5rem; }
/* Un teléfono no se parte por la mitad (D20). */
a[href^="tel:"] { white-space: nowrap; }
/* El buscador de Voluntarios. */
.filtros input.buscar { width: auto; flex: 1 1 12rem; margin-top: 0; }
.solo-movil { display: none; }
@media (max-width: 480px) {
  /* En la tabla de Voluntarios la columna de aviso quedaba fuera de la
     pantalla: en el móvil, el estado va bajo el nombre (D18). */
  .solo-movil { display: inline; }
  .col-aviso { display: none; }
  /* Objetivos de toque: los enlaces de acción medían 19–21 px de alto; con
     este relleno pasan de 32 (D15; WCAG 2.5.8 pide 24). */
  .pie-encargo a, .salir, .dias a, .filtros .chip, .no-viene > summary {
    display: inline-block; padding-top: .45rem; padding-bottom: .45rem;
  }
  .candidato input { width: 1.35rem; height: 1.35rem; }
  .candidato label { padding: .15rem 0; }
}
@media (max-width: 480px) {
  /* Los desplegables conservan su triángulo: solo se les da más alto. */
  summary { padding-top: .45rem; padding-bottom: .45rem; }
}

/* Ficha de viaje: si elige «Vehículo propio» para la ida, la vuelta no se
   pregunta (vuelve en su vehículo, y el servidor descarta lo que llegue). */
form:has(select[name="medio"] option:checked[value="vehiculo_propio"]) .vuelta-medio { display: none; }