/* El calendario, para las DOS caras.
 *
 * Vive aquí y no dentro de la hoja de la app del comité porque el calendario
 * público es EL MISMO calendario: mismos estilos, mismo comportamiento y mismo
 * código, sólo que sin lo que hace falta ser del comité para tocar. Antes eran
 * dos implementaciones distintas que se iban separando cada vez que se tocaba
 * una, y la pública se quedó con el mes en cuadrícula y sin la agenda.
 *
 * Los colores salen de las variables de cada cara (--fondo, --tarjeta, --tinta,
 * --titulo…), que ya son las mismas en las dos, así que esta hoja no sabe nada
 * del tema claro ni del oscuro.
 */

/* ==========================================================================
   CALENDARIO
   La sección de eventos. Vivía en /eventos/ con su propia hoja de estilos;
   ahora es una vista del shell y hereda de aquí los botones, los diálogos y
   los colores.

   Lo primero NO es la rejilla del mes. En unas fiestas casi todo pasa en una
   semana: el mes entero en cuadrícula era media pantalla de casillas vacías, y
   los puntos de color no decían qué había. Manda la agenda, que se lee sin
   tocar nada; la semana va en una tira para moverse cerca; y el mes entero, que
   hace falta de vez en cuando, se abre desde el nombre del mes.
   ========================================================================== */

#view-calendario { display: grid; gap: 14px; align-content: start; }
/* Ninguna de las cajas de dentro puede empujar la sección más allá de la
   pantalla: en una rejilla, el mínimo de un hijo es su contenido salvo que se
   diga lo contrario, y aquí se dice. */
#view-calendario > * { min-width: 0; }

/* Los botones del calendario se visten aquí y no en la hoja de cada cara.
   La del comité reinicia todos los botones y tiene .ghost y .small; la de la
   cara pública no tiene ninguna de las dos cosas, así que "Hoy" salía con la
   letra de Chrome (Arial, 13.3px) y con su gris de sistema —un botón apagado
   en medio del calendario—. Son SUS botones, así que van con él.

   Acotado a #view-calendario para no pisar los botones de fuera: cada cara
   tiene los suyos y no son asunto del calendario. */
#view-calendario button {
  font: inherit;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 9px 14px;
}
#view-calendario button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
#view-calendario .ghost {
  background: var(--tarjeta);
  border-color: var(--borde);
  color: var(--titulo-2);
}
@media (hover: hover) and (pointer: fine) {
  #view-calendario .ghost:hover:not(:disabled) { border-color: var(--azul); }
}
#view-calendario .small { padding: 7px 11px; font-size: 14px; }

/* -------------------------------------------- la edición y su cartel */
/* Los mismos colores de siempre —el azul de marca y el oro— y la misma altura
   de una línea. Lo que cambia es el acabado: un resplandor dorado muy suave
   detrás del número, como el que ya lleva la portada pública, una raya de luz
   arriba y una sombra azul en vez de gris. Nada de esto añade un píxel de alto:
   sigue siendo un rótulo, no una portada. */
.faltan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 16px;
  /* El resplandor va como CAPA DE FONDO y no como un ::before absoluto. Con el
     pseudo-elemento hacía falta overflow: hidden para recortarlo al radio, y
     ese overflow aplastaba la caja: siendo hija de la rejilla de la sección, la
     fila se quedaba en los 24px del padding y el texto se salía por arriba y
     por abajo. Un fondo se recorta solo con el border-radius y no necesita
     nada. */
  background:
    radial-gradient(300px 300px at 13% 50%, rgba(217, 165, 32, .20) 0%, transparent 62%),
    linear-gradient(115deg, var(--sup-baja) 0%, var(--sup-media) 55%, var(--sup-alta) 100%);
  color: #fff;
  /* Sombra del color de la caja, no gris: una sombra gris sobre un azul fuerte
     se ve sucia. Y la raya de luz de dentro es lo que le da el canto. */
  box-shadow: 0 6px 18px rgba(11, 22, 96, .28),
              inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* En una línea y sin envolver al botón: esto es un rótulo, no una portada. Con
   la caja repartida en tres alturas se comía un cuarto de la pantalla antes de
   enseñar un solo acto. */
.faltan-que {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
/* La edición, en una pastilla: separa el "de qué año hablamos" de la cuenta
   atrás sin necesidad de una línea aparte ni de un separador dibujado. */
/* Nada por debajo de 12 px: en el móvil se lee mal y el navegador puede
   ampliar la fuente por su cuenta. Vale para todas las etiquetas de esta hoja. */
.faltan-eti {
  align-self: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--oro-suave);
  font-weight: 700;
  white-space: nowrap;
}
.faltan-num {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(21px, 5.5vw, 30px);
  font-weight: 800;
  /* Apretado: a este tamaño el espaciado de serie hace que "351 días" parezca
     escrito en dos sitios distintos. */
  letter-spacing: -.6px;
  color: var(--oro);
  line-height: 1;
}
.faltan-txt { color: rgba(255, 255, 255, .74); font-size: 13.5px; }

/* El cartel es el programa de las fiestas, así que vive con ellas y no entre
   los botones de navegar. Sólo sale si esa edición tiene uno. */
.faltan-cartel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.faltan-cartel svg { width: 17px; height: 17px; flex: none; }
.faltan-cartel:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .faltan-cartel:hover { background: rgba(255, 255, 255, .22); }
}

/* ------------------------------------------------ la barra de la semana */
/* Nada de esta barra se parte en dos líneas: un botón de dos alturas se lee
   como dos botones. Si algún día no cupiera, que se recorte el nombre del mes,
   que es lo único que se puede adivinar por el contexto. */
.cal-barra { display: flex; align-items: center; gap: 6px; }
.cal-barra > * { flex: none; white-space: nowrap; }
.cal-hueco { flex: 1 1 auto; min-width: 0; }

/* "Hoy" es un atajo, no una acción. Con caja de botón competía con "+ Evento",
   que es lo que de verdad se viene a hacer, y en el móvil los dos juntos no
   cabían. Va como texto: se ve, se pulsa, y no grita. */
.cal-hoy {
  padding: 7px 8px;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 14px;
  border-radius: 8px;
  transition: color 140ms ease, background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cal-hoy:hover { color: var(--titulo-2); background: var(--tarjeta); }
}
.cal-hoy:active { color: var(--titulo-2); }

/* Apuntar un evento. El "+" siempre; la palabra, si cabe. */
.cal-nuevo { display: inline-flex; align-items: center; gap: 6px; }
.cal-nuevo svg { width: 16px; height: 16px; flex: none; }

/* En el móvil se queda en un botón redondo con el "+": la barra lleva el mes,
   dos flechas y "Hoy", y con la palabra "Evento" detrás se salía de la
   pantalla. El nombre completo sigue en el aria-label. */
@media (max-width: 620px) {
  .cal-nuevo-txt { display: none; }
  .cal-nuevo {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  .cal-nuevo svg { width: 19px; height: 19px; }
}

/* Las flechas de mes. Eran un ‹ y un › de texto en una caja de 32: dos
   caracteres finos que cada tipografía dibuja a su manera, más pequeños que
   todo lo que tienen al lado y con un área de toque por debajo de lo que pide
   un dedo. Ahora son SVG del mismo trazo que la flecha del mes, en una caja de
   40, y el icono es lo bastante grande para verse de un vistazo. */
.paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--titulo-2);
  line-height: 1;
  transition: border-color 160ms ease, background-color 160ms ease,
              transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.paso svg { width: 20px; height: 20px; flex: none; }
.paso:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .paso:hover { border-color: var(--azul); color: var(--azul); }
}

/* El nombre del mes es un botón: es la puerta al mes entero. La flechita lo
   dice, porque un texto que parece un título nadie lo pulsa. */
.mes-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--titulo);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.mes-boton:hover { border-color: var(--azul); }
.mes-boton:active { transform: scale(.97); }
.mes-nombre { overflow: hidden; text-overflow: ellipsis; }
/* Apunta hacia abajo con el mes desplegado —"esto se puede plegar"— y hacia
   arriba con sólo la semana. flex: none o se encoge hasta ser un punto, que es
   lo que le pasa a un SVG dentro de un contenedor flexible. */
.mes-flecha {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--tinta-suave);
  transition: transform 300ms cubic-bezier(.23, 1, .32, 1);
}
.mes-boton[aria-expanded="false"] .mes-flecha { transform: rotate(180deg); }

/* ---------------------------------------------------- la tira de la semana */
/* La tira recorta lo que se sale por los lados: es lo que hace que el paso de
   mes se vea como un carrusel y no como dos meses cruzándose por encima de la
   agenda.

   overflow: CLIP y no hidden. "hidden" convierte la caja en un contenedor con
   scroll, y a un hijo de una rejilla eso le pone un mínimo automático de cero
   —es justo lo que aplastó el banner de la cuenta atrás—. "clip" recorta igual
   pero no crea contenedor de scroll, así que el alto sale como siempre. */
#cal-tira {
  position: relative;
  overflow: clip;
  /* Sin esto el recorte va pegado al borde y las casillas se ven cortadas al
     ras; con un pelo de margen respiran. */
  overflow-clip-margin: 2px;
}

/* La copia de lo que se va. Encima de lo nuevo y sin estorbar al dedo. */
.tira-fantasma {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* minmax(0, 1fr) y no 1fr a secas: una columna "1fr" no baja de su contenido
   mínimo, y con aspect-ratio en las casillas ese mínimo salía de la ALTURA, así
   que el mes se hacía 34px más ancho que la pantalla y se comía el domingo. El
   cero de minmax es lo que permite que se encojan. */
.tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.dia-tira {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px 6px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  color: inherit;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.dia-tira:active { transform: scale(.95); }
.dia-letra {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.dia-tira .dia-num {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
}
.dia-tira.finde .dia-letra { color: var(--azul); }
.dia-tira.hoy { border-color: var(--azul); }
.dia-tira.hoy .dia-num { color: var(--azul); }
.dia-tira.elegido { background: var(--azul); border-color: var(--azul); }
.dia-tira.elegido .dia-num,
.dia-tira.elegido .dia-letra { color: var(--elegido-tinta); }

/* Los puntos: uno por acto, del color de su tipo. Sirven en la tira y en el
   mes; no dicen qué hay, sólo que hay algo, y de eso se encarga la agenda. */
.puntos { display: flex; gap: 3px; height: 5px; }
.puntos i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color, var(--tinta-suave));
}
.dia-tira.elegido .puntos i { background: var(--elegido-tinta); opacity: .85; }

/* ------------------------------------------------ ahora / lo siguiente */
/* La pregunta que más se hace en fiestas, arriba y sin pulsar nada. */
.ahora {
  display: grid;
  gap: 2px;
  padding: 12px 15px;
  border-radius: var(--radio);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--color, var(--azul));
  box-shadow: var(--sombra);
}
.ahora-eti {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Lo que está pasando AHORA lleva el punto que late, igual que "en directo" del
   panel: es lo que distingue de un vistazo "esto es ya" de "esto viene luego". */
.ahora.en-curso .ahora-eti { color: var(--verde); }
.ahora.en-curso .ahora-eti::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(31, 157, 85, .5);
  animation: pulse 2s infinite;
}
.ahora-que { font-size: 17px; color: var(--titulo); line-height: 1.3; }
.ahora-cuando { font-size: 14px; color: var(--tinta-suave); }
.ahora-donde { font-size: 14px; color: var(--tinta-suave); }

/* --------------------------------------------------------------- la agenda */
.agenda { display: block; }

/* El día se queda pegado arriba al bajar: sin eso, a media lista ya no sabes de
   qué día es lo que estás leyendo. */
/* La banda del día. Se queda pegada arriba mientras se recorre la agenda, así
   que es lo que dice en todo momento qué día estás mirando: es la pieza que
   más se ve de esta pantalla y era la más sosa —dos textos sueltos sobre el
   fondo—.

   Sigue siendo igual de discreta y con los mismos colores. Lo que cambia:

   · el fondo es translúcido y desenfoca lo que pasa por debajo, en vez de
     taparlo con un rectángulo opaco. Es lo que hace que quedarse pegada
     parezca queriendo y no un recorte;
   · una raya de un pelo debajo, que separa el día de sus actos;
   · y una marca de color a la izquierda: gris para un día cualquiera, azul
     para hoy. Antes "hoy" sólo cambiaba el color de la letra, que en una
     lista de mayúsculas azules no se distinguía de nada. */
/* Cada día, en su caja. Es lo que hace que su cabecera se quede pegada sólo
   mientras ese día está en pantalla, en vez de apilarse con las demás. */
.dia-bloque { display: block; }

/* La banda del día: una PASTILLA, no una barra.
 *
 * Ocupaba el ancho entero con una raya debajo, y al lado de las tarjetas
 * —todas metidas hacia dentro y redondeadas— cantaba: parecía otra cosa
 * pegada encima. Ahora es una pastilla del ancho de su texto, con el mismo
 * radio y el mismo material que las tarjetas, que flota sobre la agenda
 * mientras se recorre.
 *
 * Y con menos piezas: el día y el "hace 12 días" van dentro de la misma
 * pastilla, separados por un punto, en vez de en dos extremos con dos fondos.
 * Un punto de color a la izquierda —gris un día cualquiera, azul hoy— es lo
 * único que queda de adorno. */
.dia-cab {
  position: sticky;
  /* Un pelo de aire al quedarse pegada: es lo que hace que se lea como algo
     que flota por encima y no como algo clavado al borde. */
  top: 6px;
  z-index: 2;
  width: fit-content;
  /* Todas del mismo ancho, no cada una del largo de su texto. Medidas, iban de
     212 a 277px y la escalera se veía: "LUNES, 3 DE AGOSTO · hoy" al lado de
     "MIÉRCOLES, 22 DE JULIO · hace 12 días" parecían dos cosas distintas. Con
     un mínimo por encima de la más larga, todas salen iguales; sólo un idioma
     con nombres muy largos hará crecer alguna, y entonces crecerá esa sola.

     En rem y no en px: con el texto grande de los ajustes, la pastilla tiene
     que crecer con él. Y con el min() no pasa del ancho disponible en un móvil
     estrecho. */
  min-width: min(100%, 18.5rem);
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 9px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  /* El color sólido va primero, para quien no tenga backdrop-filter ni
     color-mix: ahí se queda opaco, que también vale. */
  background: var(--tarjeta);
  background: color-mix(in srgb, var(--tarjeta) 76%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(11, 22, 96, .07);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--titulo);
}
.dia-cab-que {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dia-cab-que::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--borde);
}
.dia-cab.hoy { color: var(--azul); border-color: var(--azul); }
.dia-cab.hoy .dia-cab-que::before { background: var(--azul); }

/* "hoy", "mañana", "en 3 días": dentro de la misma pastilla y a media tinta.
   El punto que lo separa es del CSS y no del marcado, para no tener que tocar
   lo que pinta el módulo. */
.dia-cab-cuando {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.dia-cab-cuando::before {
  content: '·';
  margin-right: 8px;
  color: var(--borde);
}
.dia-cab.hoy .dia-cab-cuando { color: var(--azul); }

/* Un acto: la hora en su columna, que es por donde se lee un programa. */
.acto {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--color, var(--tinta-suave));
  border-radius: 12px;
  background: var(--tarjeta);
}
.acto-hora {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--titulo);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.acto-cuerpo { min-width: 0; }
.acto-titulo { font-weight: 650; color: var(--titulo); }
.acto-cuando, .acto-donde { font-size: 13.5px; color: var(--tinta-suave); }
.acto-notas { margin-top: 5px; font-size: 14px; color: var(--tinta); white-space: pre-wrap; }
.acto-quien { margin-top: 5px; font-size: 12px; color: var(--tinta-suave); }
.acto-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.acto-acciones { display: flex; gap: 4px; }

.icono { display: inline-flex; }
.icono svg { width: 15px; height: 15px; vertical-align: -2px; }

/* Editar y borrar, en icono: son de unos pocos y se leen mil veces. En texto
   competían con el título del acto, que es lo que se ha venido a leer. */
.icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--tarjeta);
  color: var(--tinta-suave);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.icono-btn svg { width: 17px; height: 17px; }
.icono-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .icono-btn:hover { background: var(--fondo); color: var(--titulo-2); }
  .icono-btn.borrar:hover { background: var(--rojo-tenue); color: var(--rojo); border-color: var(--rojo-borde); }
}

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fondo);
  /* Tinte del propio color del tipo. Donde no haya color-mix queda el gris de
     arriba, que también se lee bien. */
  background: color-mix(in srgb, var(--color, #6a7196) 13%, var(--tarjeta));
  color: var(--color, var(--tinta-suave));
}
.chip.publico { background: var(--oro-fondo); color: var(--oro-tinta); }

.mini-btn {
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta-suave);
  border-radius: 8px;
  padding: 4px 9px;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.mini-btn:hover { background: var(--fondo); color: var(--titulo-2); }

.vacio {
  color: var(--tinta-suave);
  font-size: 15px;
  padding: 10px 13px;
  margin: 0 0 8px;
  border: 1px dashed var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
}

/* Enlace al módulo que lleva ese acto (los torneos a Clasificatorias, el bingo
   al bingo, los concursos a lo suyo). Sólo sale si el acto tiene destino. */
.ir-a {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--titulo-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ir-a:hover { border-color: var(--azul); background: #eef2ff; }

/* ------------------------------------------------------------ el mes entero */
/* Va en la propia sección, no en un diálogo: es lo primero que se mira en un
   calendario, y tenerlo detrás de un botón lo escondía. Quien no lo quiera lo
   pliega a una semana desde el nombre del mes. */
.mes { display: grid; gap: 6px; min-width: 0; }

.semana, .rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.semana {
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta-suave);
  text-align: center;
  letter-spacing: .5px;
}
.semana .finde { color: var(--azul); }

.dia-celda {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1;          /* cuadrada: casillas iguales y dedo cómodo */
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  /* Las casillas son <button>. Sin esto el navegador les pone SU tipografía
     (13.3px de Arial), y en la cara del comité no se notaba porque su hoja
     tiene un reinicio de button que la pública no. Lo pide el calendario, así
     que lo trae el calendario. */
  font: inherit;
  color: inherit;
}
.dia-celda .dia-num { font-size: 14px; font-weight: 700; color: var(--tinta); }
.dia-celda .puntos { justify-content: center; }
/* Los días del mes de al lado van un escalón por detrás: tarjeta para los del
   mes, --campo para el finde y --fondo para éstos. Estaban en gris fijo, y con
   el tema oscuro puesto salían cuadros blancos en medio del mes. */
.dia-celda.fuera { background: var(--fondo); }
/* Sin opacidad encima. --tinta-suave ya dice "esto es de otro mes"; el .75 que
   llevaba lo bajaba a 4,21 de contraste, por debajo del mínimo, y para lo poco
   que aportaba no compensa: el fondo más apagado de la casilla ya distingue
   estos días de los del mes. */
.dia-celda.fuera .dia-num { color: var(--fuera-tinta); }
.dia-celda.finde:not(.fuera) { background: var(--campo); }
.dia-celda.hoy { border-color: var(--azul); }
.dia-celda.hoy .dia-num { color: var(--azul); }

/* El día elegido, y va con :not(.fuera) aunque no lo necesite.
   NO es de adorno: :not() suma la especificidad de lo que lleva dentro, así que
   ".dia-celda.finde:not(.fuera)" son tres clases y ".dia-celda.elegido" eran
   dos. Ganaba el finde, y al pulsar un sábado la casilla se quedaba con el
   fondo del finde y el número en blanco encima: en el tema claro, blanco sobre
   casi blanco —1,05 de contraste, invisible— y en el oscuro se leía pero no
   había forma de saber cuál estabas mirando. Empatando en especificidad manda
   el orden, y éste va después. */
.dia-celda.elegido:not(.fuera),
.dia-celda.elegido {
  background: var(--azul);
  border-color: var(--azul);
  /* Un aro por fuera: se distingue del "hoy", que sólo tiñe el borde, y se ve
     igual de bien esté la casilla donde esté. */
  box-shadow: 0 0 0 2px var(--elegido-aro, rgba(29, 63, 232, .25));
}
.dia-celda.elegido .dia-num,
.dia-celda.elegido.hoy .dia-num { color: var(--elegido-tinta); }
.dia-celda.elegido .puntos i { background: var(--elegido-tinta); opacity: .85; }


/* ------------------------------------------------------- ficha del evento */
dialog#dlg-evento {
  width: min(92vw, 520px);
  max-height: 88dvh;
  overflow: auto;
}
#ev-form { display: grid; gap: 6px; }
#ev-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-top: 8px;
}
#ev-form .opc { font-weight: 400; color: var(--tinta-suave); }
/* Las casillas fuera: un checkbox no es un campo de texto. Sin el :not(), la
   de "Visible para todo el pueblo" se llevaba el width:100% y el padding de
   aquí y salía de 428×12 px —una tira aplastada al lado de su texto— porque
   este selector lleva un id y pisaba al ".casilla input" de más abajo. */
#ev-form input:not([type="checkbox"]), #ev-form select, #ev-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  font: inherit;
  color: inherit;
  background: var(--campo);
}
#ev-form input:not([type="checkbox"]):focus, #ev-form select:focus, #ev-form textarea:focus {
  outline: 2px solid rgba(29, 63, 232, .35);
  border-color: var(--azul);
  background: var(--tarjeta);
}
#ev-form textarea { resize: vertical; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


/* ------------------------------------------------------------------ cartel */
/* El horario tal y como se imprimió: una imagen, que es lo que se ve bien en el
   móvil y lo único que la CSP deja enmarcar. */
/* Se viste entero aquí —fondo, borde, sombra y velo— y no sólo el tamaño: el
   mismo diálogo lo abren las dos caras, y la pública no tiene ningún estilo de
   <dialog> que heredar. */
dialog#dlg-cartel {
  padding: 0;
  width: min(900px, calc(100vw - 24px));
  height: min(92dvh, 1200px);
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: 0 20px 50px rgba(11, 22, 96, .28);
}
dialog#dlg-cartel::backdrop { background: rgba(11, 22, 96, .45); }
.cartel-caja { display: flex; flex-direction: column; height: 100%; overflow: auto; }
/* La barra del cartel: el título a la izquierda (se recorta con "…" si no cabe)
   y los botones —ya iconos, compactos— a la derecha, todo en UNA fila hasta en
   un móvil estrecho. Sin flex-wrap: los iconos ocupan poco y no hace falta. */
.cartel-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}
.cartel-barra h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  /* Que no empuje a los iconos fuera: si el título es largo, se recorta. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartel-acciones { display: flex; align-items: center; gap: 6px; flex: none; }
/* Cada acción, un botón cuadrado con su icono. En la cara pública no hay estilo
   de botón del que tirar, así que se pone aquí entero. */
.cartel-accion {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta, var(--fondo));
  color: var(--tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* La opacidad es para apartarse cuando se abre el botón de borrar de la
     misma fila (comun/borrar.css, .borrar-fila). */
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 120ms ease, opacity 160ms ease;
}
.cartel-accion:hover { border-color: var(--azul); color: var(--titulo); }
.cartel-accion:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Al pulsar, se hunde un poco: el gesto se nota aunque no pase nada más. */
.cartel-accion:active { transform: scale(.9); }
.cartel-accion .ic { width: 20px; height: 20px; grid-area: 1 / 1; }
/* El icono de "hecho" (la marca de verificación) vive encima del normal y no se
   ve, hasta que la acción sale bien. */
.cartel-accion .ic-hecho { display: none; }
.cartel-accion.hecho { border-color: var(--verde); color: var(--verde); }
.cartel-accion.hecho .ic-normal { display: none; }
.cartel-accion.hecho .ic-hecho { display: block; animation: cartel-pop 360ms cubic-bezier(.2, 1.3, .35, 1); }
@keyframes cartel-pop {
  0%   { transform: scale(.4); opacity: 0; }
  55%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
/* Con las animaciones al mínimo, la marca aparece sin brincar. */
@media (prefers-reduced-motion: reduce) {
  .cartel-accion, .cartel-accion.hecho .ic-hecho { transition: none; animation: none; }
}
html[data-movimiento="poco"] .cartel-accion.hecho .ic-hecho { animation: none; }
#cartel-img { display: block; width: 100%; height: auto; }
.cartel-pie {
  padding: 8px 14px;
  margin: 0;
  font-size: 13px;
  color: var(--tinta-suave);
  border-top: 1px solid var(--borde);
}

/* ==========================================================================
   ESPERAS Y MOVIMIENTO
   Regla de la casa: nada de esto puede estorbar. Se nota cuando falta, no
   cuando está. Todo va con transform y opacity —lo único que no pasa por
   layout ni por pintar—, todo por debajo de 300 ms, y con ease-out, que
   arranca rápido y por eso se siente inmediato.

   Quien haya pedido menos movimiento en su sistema no ve nada de esto: la
   regla de prefers-reduced-motion de más arriba lo apaga todo. Los esqueletos
   se quedan, porque no son adorno: dicen que se está cargando.
   ========================================================================== */

/* ---------------------------------------------- el calendario en un monitor */
/* La casilla cuadrada es cosa del móvil, donde el ancho manda y hay siete
   columnas en 360px. En un monitor de 1440 esa misma proporción da casillas de
   190px de lado: un mes que no cabe en la pantalla y que hay que scrollear para
   ver entero, justo lo contrario de para lo que sirve un mes. */
@media (min-width: 861px) {
  #view-calendario { max-width: 820px; margin-inline: auto; }
  .dia-celda { aspect-ratio: auto; min-height: 56px; }
}


/* ==========================================================================
   EL HUECO MIENTRAS LLEGAN LOS ACTOS
   --------------------------------------------------------------------------
   El módulo pinta un hueco con la forma que va a tener el calendario y luego
   lo sustituye por lo de verdad. Estas reglas viajan con él y no con la hoja
   de cada cara, porque las dos caras pintan el mismo hueco.

   Van pegadas a .tira y a .agenda a propósito: cada cara tiene ya su propio
   .esqueleto (el de la portada pública es un bloque gris de 74px de alto), y
   sin acotarlas la semana entera se convertía en ese bloque.
   ========================================================================== */

/* El gris del hueco. Va aquí y no en la paleta de cada cara porque es del
   calendario, y porque en oscuro un gris claro es un fogonazo: el hueco tiene
   que ser un poco MÁS claro que la tarjeta, no blanco. */
/* El aro del día elegido: en el tema claro un azul muy diluido sobre fondo
   claro; en el oscuro hace falta más fuerza o no se ve nada.

   Y la tinta que va ENCIMA del día elegido. En el tema claro --azul es un azul
   fuerte y encima va blanco; en el oscuro --azul se aclara (#5a7dff) porque
   ahí hace de acento sobre fondo negro, y como superficie es claro: el blanco
   encima se quedaba en 3,6 de contraste. Es el mismo reparto de siempre en
   esta hoja —un color puede ser superficie o tinta, y no valen los dos a la
   vez—, sólo que aquí faltaba. */
:root {
  --hueco: #e7ebf7;
  --hueco-luz: #f2f5fd;
  --elegido-aro: rgba(29, 63, 232, .22);
  --elegido-tinta: #fff;
  --fuera-tinta: #5b6183;
}
:root[data-tema="oscuro"] {
  --hueco: #1b2444;
  --hueco-luz: #26315a;
  --elegido-aro: rgba(90, 125, 255, .38);
  --elegido-tinta: #0a1130;
  --fuera-tinta: var(--tinta-suave);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    --hueco: #1b2444;
    --hueco-luz: #26315a;
    --elegido-aro: rgba(90, 125, 255, .38);
    --elegido-tinta: #0a1130;
    --fuera-tinta: var(--tinta-suave);
  }
}
:root[data-tema-fijo="oscuro"] {
  --hueco: #1b2444;
  --hueco-luz: #26315a;
  --elegido-aro: rgba(90, 125, 255, .38);
  --elegido-tinta: #0a1130;
  --fuera-tinta: var(--tinta-suave);
}

.tira.esqueleto,
.agenda.esqueleto {
  /* Aquí .esqueleto NO es el bloque gris de la portada: el gris lo ponen los
     hijos, uno por casilla, que es lo que se va a sustituir. */
  height: auto;
  background: none;
  animation: none;
  pointer-events: none;
}
.tira.esqueleto::after,
.agenda.esqueleto::after { display: none; }   /* sin la sota de marca de agua */

.tira.esqueleto { grid-template-columns: repeat(7, 1fr); }

.tira .brillo,
.agenda .brillo {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--hueco, #e7ebf7) 25%, var(--hueco-luz, #f2f5fd) 50%, var(--hueco, #e7ebf7) 75%);
  background-size: 200% 100%;
  animation: cal-brillo 1.4s linear infinite;
}
@keyframes cal-brillo {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.tira.esqueleto .brillo { height: 58px; border-radius: 12px; }
.agenda .brillo.linea { height: 12px; margin-bottom: 9px; }
.agenda .brillo.t1 { width: 45%; height: 15px; }
.agenda .brillo.t2 { width: 72%; }
.agenda .brillo.t3 { width: 30%; }

.agenda.esqueleto .acto {
  border-left-color: var(--borde);
  min-height: 74px;
}

/* Al llegar lo de verdad, entra. Sólo la primera vez, justo después del
   hueco: repetirlo en cada refresco sería un parpadeo constante. */
.tira .entra,
.agenda .entra,
.ahora .entra {
  animation: cal-entra 260ms cubic-bezier(.23, 1, .32, 1) backwards;
}
@keyframes cal-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}