/* =====================================================================
   Agenda cultural de Gijón - estilos
   Identidad (spec 010): papel de programa, tinta y un unico acento
   ultramar. Una sola familia tipografica (Archivo, autoalojada).
   Organizado por bloques numerados: fuente, variables, base, botones,
   contenedor y disposicion, cabecera, fechas y calendario, vista,
   avisos, filtro, lista y actividades, bloques destacados, modal, pie
   y menos animaciones. Responsive "movil primero" con calendario
   lateral permanente desde 900px.
   ===================================================================== */

/* --- 1. Fuente Archivo (autoalojada) ------------------------------ */
/* Descargada de Google Fonts (licencia OFL) a css/fuentes/ para no
   depender de un CDN en tiempo de ejecucion (RF-2 y RNF-3). Variable de
   pesos 400-700, con dos subsets y su unicode-range, como los sirve la
   API css2. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fuentes/archivo-latin.woff2') format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fuentes/archivo-latin-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Variables: aqui se cambian los colores y medidas ---------- */
:root {
  --papel: #fafaf8;
  --superficie: #ffffff;
  --superficie-alterna: #f4f4f1;
  --texto: #14181d;
  --texto-suave: #5a6068;
  /* Gris para el texto secundario que aun debe leerse (contraste AA 4,95:1
     sobre el papel): los dias del mes anterior y siguiente del calendario. */
  --texto-tenue: #6b6e69;
  /* Un unico acento (ultramar): enlaces, foco, hora, fechas destacadas,
     chips activos y dia elegido. El dia de hoy se marca con negrita y
     subrayado, no con otro color. */
  --acento: #1f4fa3;
  --acento-oscuro: #163a78;
  --acento-tenue: #e9eef7;
  --filete: #e2e2dc;
  --borde: #e2e2dc;

  --radio: 10px;
  --radio-pequeno: 6px;
  --sombra: 0 1px 2px rgba(20, 24, 29, .04);

  /* Escala tipografica fija (RF-2). */
  --t12: 12px;
  --t13: 13px;
  --t15: 15px;
  --t16: 16px;
  --t19: 19px;
  --t24: 24px;
  --t30: 30px;
  --t38: 38px;
}

/* --- 3. Base ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t16);
  line-height: 1.55;
  /* Cifras tabulares en toda la app: las horas y los conteos no bailan. */
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Algunos bloques se pintan con display:flex, que gana al atributo hidden.
   Sin esto, una lista apareceria aunque este escondida. */
[hidden] { display: none !important; }

/* --- 4. Botones --------------------------------------------------- */
.boton {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radio-pequeno);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.boton:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.boton--suave {
  background: var(--acento-tenue);
  color: var(--acento-oscuro);
}
.boton--suave:hover { background: #dbe5f4; }

/* Boton de texto para abrir el calendario en el movil (RF-7: sin emoji). */
.boton--calendario {
  width: 100%;
  margin-top: 2px;
  background: var(--superficie);
  border-color: var(--filete);
  color: var(--texto);
}
.boton--calendario:hover { border-color: var(--acento); color: var(--acento); }

.boton--icono {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--t19);
  line-height: 1;
  background: var(--superficie);
  border-color: var(--filete);
  color: var(--texto-suave);
}
.boton--icono:hover { border-color: var(--acento); color: var(--acento); }

.boton--ancho { width: 100%; margin-top: 14px; }

/* --- 5. Contenedor y disposicion ---------------------------------- */
.contenedor {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

.disposicion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding-block: 26px 40px;
}

.barra {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.principal { min-width: 0; }

/* El panel del calendario solo se ve en escritorio: en el movil se usa el
   modal (RF-5). */
.calendario-panel { display: none; }

@media (min-width: 900px) {
  .disposicion {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .barra { position: sticky; top: 24px; }
  .calendario-panel { display: block; }
  .boton--calendario { display: none; }
}

/* --- 6. Cabecera -------------------------------------------------- */
.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--filete);
  padding-block: 22px;
}

.cabecera__contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
}

.marca__titulo {
  font-size: var(--t24);
  font-weight: 700;
  letter-spacing: -.01em;
}
.marca__lema { font-size: var(--t13); color: var(--texto-suave); margin-top: 2px; }

.cabecera__estado { font-size: var(--t12); color: var(--texto-suave); }

.estado__actualizando {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t12);
  font-weight: 600;
  color: var(--acento);
}

.progreso {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid var(--acento-tenue);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* --- 7. Fechas y calendario --------------------------------------- */
.fechas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fechas__etiqueta {
  font-size: var(--t13);
  font-weight: 600;
  color: var(--texto-suave);
}

.fechas__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font: inherit;
  font-size: var(--t13);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radio-pequeno);
  border: 1px solid var(--filete);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--acento); }
/* El acceso directo elegido no depende solo del color: lleva fondo lleno. */
.chip[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.calendario__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.calendario__titulo {
  font-size: var(--t15);
  font-weight: 700;
  text-transform: capitalize;
}

.calendario__dias-semana,
.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendario__dias-semana { margin-bottom: 6px; }

.dia-semana {
  text-align: center;
  font-size: var(--t12);
  font-weight: 600;
  color: var(--texto-suave);
}

.dia {
  position: relative;
  font: inherit;
  font-size: var(--t13);
  aspect-ratio: 1 / 1;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio-pequeno);
  color: var(--texto);
  cursor: pointer;
  transition: background-color .15s;
}
.dia:hover { background: var(--acento-tenue); }
.dia:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Dias del mes anterior o siguiente: solo como referencia. */
.dia--de-otro-mes { color: var(--texto-tenue); }

/* Hoy: negrita y subrayado ultramar (no un color de texto distinto). */
.dia--hoy {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.dia--elegido {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Puntito bajo los dias que tienen actividades. */
.dia--con-actividad::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acento);
}
.dia--elegido.dia--con-actividad::after { background: #fff; }

/* --- 8. Vista: la fecha del dia en grande ------------------------- */
.vista { margin-bottom: 22px; }

.vista__etiqueta {
  font-size: var(--t13);
  font-weight: 600;
  color: var(--texto-suave);
}

.vista__fecha {
  font-size: var(--t38);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-top: 2px;
  overflow-wrap: break-word;
}

.vista__cuenta {
  font-size: var(--t15);
  color: var(--texto-suave);
  margin-top: 6px;
}

@media (max-width: 520px) {
  .vista__fecha { font-size: var(--t30); }
}

/* --- 9. Avisos ---------------------------------------------------- */
.aviso {
  padding: 12px 14px;
  font-size: var(--t13);
  background: #fdf6e8;
  border: 1px solid #e8d9b0;
  border-radius: var(--radio-pequeno);
  color: #6b5320;
  margin-bottom: 20px;
}
.aviso a { color: inherit; }

/* --- 10. Filtro de categorias (desplegable) ----------------------- */
.filtro {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  margin-bottom: 22px;
}

.filtro__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--t15);
  font-weight: 600;
  text-align: left;
  color: var(--texto);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.filtro__toggle:hover { background: var(--superficie-alterna); }
.filtro__toggle:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.filtro__icono { flex: 0 0 auto; color: var(--acento); }
.filtro__titulo { flex: 1 1 auto; }
.filtro__flecha { flex: 0 0 auto; color: var(--texto-suave); transition: transform .15s; }
.filtro__toggle[aria-expanded="true"] .filtro__flecha { transform: rotate(180deg); }

.filtro__resumen {
  padding: 0 16px 13px;
  font-size: var(--t13);
  color: var(--texto-suave);
  overflow-wrap: break-word;
}
.filtro__resumen:empty { display: none; }

.filtro__cuerpo { padding: 0 16px 16px; }

.filtro__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Cada categoria es una etiqueta que envuelve su casilla: pulsar el texto
   marca la casilla sin tener que apuntar al cuadradito. */
.filtro__opcion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--superficie-alterna);
  border: 1px solid var(--filete);
  border-radius: var(--radio-pequeno);
  font-size: var(--t13);
  cursor: pointer;
}

.filtro__opcion:hover { border-color: var(--acento); }

.filtro__opcion input {
  margin: 0;
  accent-color: var(--acento);
}

.filtro__nombre { font-weight: 600; }
.filtro__cuenta { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* El foco se ve en toda la pastilla, no solo en el cuadradito. */
.filtro__opcion:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-tenue);
}
.filtro__opcion input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* En pantallas estrechas las opciones se apilan y el numero se va a la
   derecha; nada de nowrap ni anchos fijos que provoquen scroll horizontal. */
@media (max-width: 520px) {
  .filtro__opciones { flex-direction: column; }
  .filtro__opcion { width: 100%; }
  .filtro__cuenta { margin-left: auto; }
}

/* --- 11. Lista y actividades -------------------------------------- */
.lista-bloque { margin-bottom: 8px; }

.lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Separador entre los dias de una vista de varios dias (el finde). */
.grupo-dia {
  font-size: var(--t13);
  font-weight: 700;
  color: var(--texto-suave);
  padding-top: 6px;
}

.vacio {
  padding: 24px 16px;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--filete);
  border-radius: var(--radio-pequeno);
}
.vacio__titulo { font-weight: 600; }
.vacio__texto { font-size: var(--t13); color: var(--texto-suave); margin-top: 4px; }

/* Centinela del final de la lista: avisa de que se están cargando más
   actividades. No se ve (aria-hidden) pero ocupa hueco al llegar al final. */
.cargar-mas {
  padding: 6px;
  text-align: center;
  font-size: var(--t13);
  color: var(--texto-suave);
}

/* Cada actividad es una tarjeta de papel blanco; la tarjeta entera es el
   enlace cuando hay ficha oficial, y sin enlace es un <div> con el mismo
   aspecto (spec 007). El <li class="actividad"> solo lleva los modificadores. */
.actividad__enlace {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  color: inherit;
  text-decoration: none;
}

.actividad--con-imagen .actividad__enlace { align-items: flex-start; }

/* Solo las tarjetas con enlace responden al puntero y al teclado (RF-4). */
a.actividad__enlace { transition: border-color .15s, box-shadow .15s; }
a.actividad__enlace:hover { border-color: var(--acento); box-shadow: var(--sombra); }
a.actividad__enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.actividad__imagen {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radio-pequeno);
  background: var(--acento-tenue);
}

.actividad__cuerpo { flex: 1 1 auto; min-width: 0; }

.actividad__titulo {
  font-size: var(--t16);
  font-weight: 600;
  overflow-wrap: break-word;
}

/* Ya ha terminado: se sigue viendo, pero se nota que se paso (RF-2). */
.actividad--terminada .actividad__titulo {
  text-decoration: line-through;
  color: var(--texto-suave);
}

.actividad__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
}

.actividad__hora {
  flex: 0 0 auto;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  background: var(--acento-tenue);
  color: var(--acento-oscuro);
  border-radius: 4px;
  font-size: var(--t13);
  font-weight: 700;
  white-space: nowrap;
}

/* Del apartado «Sin fecha»: sin tachado, porque no se sabe si ya pasó. */
.actividad--sin-fecha .actividad__hora { background: var(--superficie-alterna); color: var(--texto-suave); }

.actividad__lugar {
  font-size: var(--t13);
  color: var(--texto-suave);
  overflow-wrap: break-word;
}

.actividad__direccion {
  font-size: var(--t13);
  color: var(--texto-suave);
  margin-top: 2px;
  overflow-wrap: break-word;
}

.actividad__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.etiqueta {
  font-size: var(--t12);
  padding: 2px 9px;
  border: 1px solid var(--filete);
  border-radius: 4px;
  background: transparent;
  color: var(--texto-suave);
}

.actividad__nota {
  font-size: var(--t13);
  color: var(--texto-suave);
  margin-top: 8px;
  overflow-wrap: break-word;
}

/* --- 12. Bloques destacados: novedades y larga duracion ----------- */
/* Al final de la pagina (spec 010, RF-4): sin banda de color, separados
   del bloque anterior por un filete. Comparten titulo y tarjetas. */
.bloque {
  border-top: 1px solid var(--filete);
  padding-top: 22px;
  margin-top: 28px;
}

.bloque__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 14px;
}

.bloque__titulo {
  font-size: var(--t19);
  font-weight: 700;
}

.bloque__cuenta {
  font-size: var(--t13);
  color: var(--texto-suave);
}
.bloque__cuenta:empty { display: none; }

/* Carrusel horizontal: solo se desplaza la pista, nunca la pagina (RNF-2).
   Lo comparten «Novedades» y «Larga duración». */
.novedades__pista,
.larga-duracion__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: 8px;
  /* Barra de scroll fina y discreta en los navegadores que la soportan. */
  scrollbar-width: thin;
}

.novedad,
.larga-duracion__tarjeta {
  scroll-snap-align: start;
  min-width: 0;
}

/* La tarjeta entera es el enlace; sin enlace es un <div> con el mismo aspecto. */
.novedad__enlace,
.larga-duracion__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

/* Solo las tarjetas con enlace responden al puntero y al teclado (RF-4). */
a.novedad__enlace,
a.larga-duracion__enlace { transition: border-color .15s, box-shadow .15s; }
a.novedad__enlace:hover,
a.larga-duracion__enlace:hover { border-color: var(--acento); box-shadow: var(--sombra); }
a.novedad__enlace:focus-visible,
a.larga-duracion__enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.novedad__imagen,
.larga-duracion__imagen {
  width: 100%;
  height: 104px;
  object-fit: cover;
  background: var(--acento-tenue);
}

.novedad__cuerpo,
.larga-duracion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
}

.novedad__fecha,
.larga-duracion__fecha {
  font-size: var(--t12);
  font-weight: 600;
  color: var(--acento);
}

.novedad__titulo,
.larga-duracion__titulo {
  font-size: var(--t15);
  font-weight: 600;
  overflow-wrap: break-word;
}

.novedad__lugar,
.larga-duracion__lugar {
  font-size: var(--t13);
  color: var(--texto-suave);
  overflow-wrap: break-word;
}

/* Etiqueta de "nueva" en la lista del dia y realce de la tarjeta. */
.actividad--nueva .actividad__enlace { border-color: var(--acento); }

.etiqueta--nueva {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 700;
}

/* En el móvil las tarjetas ocupan casi todo el ancho, dejando asomar la
   siguiente para invitar a deslizar. */
@media (max-width: 520px) {
  .novedades__pista,
  .larga-duracion__pista { grid-auto-columns: minmax(200px, 82%); }
  .novedad__imagen,
  .larga-duracion__imagen { height: 128px; }
}

/* --- 13. Modal (calendario completo en el movil) ------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 29, .55);
}

.modal__caja {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: 0 20px 60px rgba(20, 24, 29, .28);
}

.modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal__titulo { font-size: var(--t19); font-weight: 700; }

/* Con el modal abierto no se hace scroll de la pagina de fondo. */
body.modal-abierto { overflow: hidden; }

/* --- 14. Pie ------------------------------------------------------ */
.pie { border-top: 1px solid var(--filete); }

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 22px;
  font-size: var(--t13);
  color: var(--texto-suave);
}

.pie a { color: var(--acento); }
.pie__nota { width: 100%; }

/* --- 15. Respetar la preferencia de menos animaciones ------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}