/* =============================================================
   PILARES Piloto — hoja de estilo única.
   Pensada primero para teléfono; los cambios a pantalla grande
   están al final, en un solo @media.
   ============================================================= */

:root {
  /* Interfaz: el color fuerte se reserva para los badges, así que
     la navegación y los botones usan una tinta casi negra. */
  --tinta:        #1B2033;
  --tinta-suave:  #4A5168;
  --tinta-tenue:  #8A90A6;
  --linea:        #E4E6EE;
  --papel:        #FFFFFF;
  --papel-velo:   rgba(255, 255, 255, .82);

  /* Horas de acceso restringido. Gris azulado, translúcido porque se
     pinta ENCIMA de las actividades: al teñir la ficha entera se
     distingue sin necesidad de un color aparte. */
  --restringido-velo:  rgba(96, 110, 160, .13);
  --restringido-linea: #A8AEC2;

  --radio:      14px;
  --radio-chico: 9px;
  --sombra:     0 1px 2px rgba(27, 32, 51, .06), 0 4px 16px rgba(27, 32, 51, .06);
  --ancho:      1080px;

  /* Alto de la navegación pegajosa; app.js lo remide al cargar y al
     cambiar el tamaño, porque depende de la fuente del sistema. */
  --alto-nav: 45px;

  /* Cuadrícula del horario: lo calcula app.js según config.js */
  --filas: 40;
  --alto-fila: 15px;

  color-scheme: light;
}

* { box-sizing: border-box; }

/*
 * El navegador oculta [hidden] con display:none, pero cualquier regla
 * nuestra que fije un display propio (inline-block, flex, grid...) le
 * gana por ser de autor y el elemento reaparece. Esto lo zanja de una
 * vez para todo el sitio.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: #FFFFFF;
  /* `clip` y no `hidden`: recorta igual, pero no convierte al body en
     contenedor de scroll, que es lo que dejaba muerto al sticky. */
  overflow-x: clip;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
a { color: inherit; }

/* ---------------------------------------------------------------
   Fondo: una mancha de color tenue sobre blanco que cada ~20 s cede
   el turno a la siguiente tonalidad, y que además va a la deriva.
   El ciclo completo dura 100 s y cada mancha entra por una esquina
   distinta, así que el color no sólo cambia: también se muda de sitio.

   Sólo se animan `opacity` y `transform`, que el navegador resuelve
   en la GPU: no repinta nada y no calienta teléfonos modestos.
   --------------------------------------------------------------- */
.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #FFFFFF;
  pointer-events: none;
}

.fondo span {
  position: absolute;
  display: block;
  width: 68vmax;
  height: 68vmax;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation:
    turno 100s linear infinite,
    vagar 46s ease-in-out infinite alternate;
}

/* Cada mancha toma su turno 20 s después que la anterior y entra por
   un punto distinto de la pantalla. */
.fondo span:nth-child(1) {
  background: radial-gradient(circle, rgba(13, 148, 136, .46), rgba(13, 148, 136, 0) 64%);
  top: -20vmax; left: -16vmax;
  animation-delay: 0s, -5s;
}
.fondo span:nth-child(2) {
  background: radial-gradient(circle, rgba(124, 58, 237, .42), rgba(124, 58, 237, 0) 64%);
  top: -24vmax; right: -20vmax;
  animation-delay: -20s, -17s;
}
.fondo span:nth-child(3) {
  background: radial-gradient(circle, rgba(202, 138, 4, .44), rgba(202, 138, 4, 0) 64%);
  bottom: -26vmax; right: -14vmax;
  animation-delay: -40s, -29s;
}
.fondo span:nth-child(4) {
  background: radial-gradient(circle, rgba(219, 39, 119, .40), rgba(219, 39, 119, 0) 64%);
  bottom: -22vmax; left: -22vmax;
  animation-delay: -60s, -8s;
}
.fondo span:nth-child(5) {
  background: radial-gradient(circle, rgba(37, 99, 235, .42), rgba(37, 99, 235, 0) 64%);
  top: -8vmax; left: 18vmax;
  animation-delay: -80s, -35s;
}

/* Visible entre el 0 % y el 28 % de su ciclo: los turnos se solapan en
   los extremos, así que el relevo de color es un fundido, no un salto. */
@keyframes turno {
  0%        { opacity: 0; }
  7%,  20%  { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes vagar {
  0%   { transform: translate3d(0, 0, 0) scale(.9); }
  50%  { transform: translate3d(12vw, 9vh, 0) scale(1.14); }
  100% { transform: translate3d(-9vw, 5vh, 0) scale(.98); }
}

/*
 * Con "reducir movimiento" activado se quita el desplazamiento, que es
 * lo que puede marear, pero se conserva el relevo de color: es un
 * fundido de opacidad, sin movimiento, y sin él el fondo quedaría
 * congelado en un solo tono.
 */
@media (prefers-reduced-motion: reduce) {
  .fondo span {
    animation: turno 100s linear infinite;
    transform: scale(1.04);
  }
}

/* ------------------------- Encabezado ------------------------- */

.encabezado {
  text-align: center;
  padding: 22px 16px 10px;
}

.marca img {
  display: block;
  width: 190px;
  max-width: 62vw;
  height: auto;
  margin: 0 auto;
}

/* "PILOTO" alineado ópticamente al ancho del logotipo. */
.marca .piloto {
  display: block;
  margin-top: 4px;
  font-size: clamp(.95rem, 4.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .46em;
  text-indent: .46em;      /* compensa el espacio sobrante a la derecha */
  color: #9F2241;
  text-transform: uppercase;
}

/* -------------------------- Navegación ------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: var(--papel-velo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
}
.nav a[aria-current="page"] { background: var(--tinta); color: #fff; }

/* --------------------------- Estructura ----------------------- */

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 14px 64px; }

.seccion[hidden] { display: none; }

.titulo-seccion {
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  text-align: center;
  margin-bottom: 4px;
}
.subtitulo {
  text-align: center;
  color: var(--tinta-suave);
  font-size: .95rem;
  margin-bottom: 18px;
}

.tarjeta {
  background: var(--papel-velo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
}

/* ---------------------------- Badges -------------------------- */

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  background: var(--tinte, #EEF0F5);
  color: var(--texto, var(--tinta-suave));
}
.badge-edad {
  background: #EEF0F5;
  color: var(--tinta-suave);
  font-weight: 600;
}
.badges { display: flex; flex-wrap: wrap; gap: 3px; }

/* --------------------------- Filtros -------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}

.chip {
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta-suave);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"] {
  background: var(--tinte, var(--tinta));
  color: var(--texto, #fff);
  border-color: transparent;
}
.chip-limpiar { color: var(--tinta-tenue); font-weight: 500; }

.filtro-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.filtro-fila label { font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }

select, input[type="text"], input[type="password"], input[type="number"], input[type="time"], textarea {
  font: inherit;
  font-size: .95rem;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--papel);
  color: var(--tinta);
  max-width: 100%;
}
textarea { resize: vertical; min-height: 74px; width: 100%; }

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

/* Acompañan al scroll, como la cabecera de días en pantalla grande:
   con la columna de un día entero por delante, si no se pierde de
   vista cuál se está mirando. Mismo velo y mismo desenfoque que la
   navegación, para que los dos se lean como una sola barra.
   Los márgenes negativos compensan el padding de .envoltura, así el
   velo llega de borde a borde y nada asoma por los lados. */
.dias-tabs {
  position: sticky;
  top: var(--alto-nav);
  z-index: 5;
  display: flex;
  gap: 4px;
  margin: 0 -14px 10px;
  padding: 8px 14px;
  background: var(--papel-velo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.dias-tabs::-webkit-scrollbar { display: none; }

.dias-tabs button {
  flex: 1 0 auto;
  min-width: 56px;
  padding: 8px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--papel);
  color: var(--tinta-suave);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  scroll-snap-align: start;
}
.dias-tabs button[aria-selected="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.dias-tabs button .hoy { display: block; font-size: .62rem; font-weight: 600; opacity: .75; }

/* -------------------------- El horario ------------------------ */

.horario {
  display: grid;
  grid-template-columns: 44px 1fr;
  background: var(--papel-velo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 8px 8px 8px 0;
  overflow: clip;   /* recorta las esquinas sin romper el sticky */
}

/* Cabecera con los nombres de los días (sólo en pantalla grande) */
.horario-dias { display: none; }

.columna-horas {
  display: grid;
  grid-template-rows: repeat(var(--filas), var(--alto-fila));
}
.columna-horas .hora.fin {
  align-self: end;
  transform: translateY(.5em);
}

.columna-horas .hora {
  grid-column: 1;
  font-size: .68rem;
  font-weight: 600;
  color: var(--tinta-tenue);
  text-align: right;
  padding-right: 6px;
  transform: translateY(-.55em);
}

.pistas {
  display: grid;
  grid-template-columns: 1fr;   /* una columna por día visible */
  position: relative;
}

/* Líneas horizontales de cada hora, dibujadas con un degradado
   repetido: cero elementos extra en el DOM. */
.pistas::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--linea) 0, var(--linea) 1px,
    transparent 1px, transparent calc(var(--alto-fila) * 4)
  );
}

.dia-col {
  display: grid;
  grid-template-rows: repeat(var(--filas), var(--alto-fila));
  grid-template-columns: repeat(var(--carriles, 1), 1fr);
  gap: 0 3px;
  padding: 0 3px;
  border-left: 1px solid var(--linea);
  min-width: 0;
}

.bloque {
  grid-column: var(--carril) / span 1;
  grid-row: var(--desde) / var(--hasta);
  /* Los <button> centran su contenido en vertical por hoja de estilo
     del navegador, y en una ficha alta eso dejaba el nombre y la hora
     flotando en mitad de la franja, justo donde cae la línea del
     acceso restringido. En columna y desde arriba, como una agenda. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  margin: 1px 0;
  padding: 4px 5px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento, var(--tinta-tenue));
  border-radius: 7px;
  background: var(--papel);
  box-shadow: 0 1px 2px rgba(27, 32, 51, .05);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bloque:hover { border-color: var(--tinta-tenue); }

.bloque .nombre {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.bloque .hora-bloque { display: block; font-size: .62rem; color: var(--tinta-tenue); margin-bottom: 2px; }
.bloque .badges { gap: 2px; }
.bloque .badge {
  font-size: .6rem;
  padding: 1px 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bloques muy cortos: sólo cabe el nombre. */
.bloque.compacto .hora-bloque,
.bloque.compacto .badges { display: none; }

/* Días con tres o más actividades a la vez: las columnas quedan
   demasiado estrechas para las etiquetas, así que se deja sólo el
   nombre. El detalle completo está a un toque, en el catálogo. */
.bloque.estrecho { padding: 3px 4px; }
.bloque.estrecho .nombre { font-size: .67rem; }
.bloque.estrecho .hora-bloque,
.bloque.estrecho .badges { display: none; }

/* Franjas de acceso restringido (antes de abrir y después de cerrar). */
.franja-restringida {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--alto-fila) * var(--desde));
  height: calc(var(--alto-fila) * (var(--hasta) - var(--desde)));
  background: var(--restringido-velo);
  pointer-events: none;   /* se puede tocar la ficha que hay debajo */
  z-index: 4;             /* por encima de las columnas (1) */
}
.franja-restringida.arriba { border-bottom: 2px dashed var(--restringido-linea); }
.franja-restringida.abajo  { border-top:    2px dashed var(--restringido-linea); }
/* Las columnas van por encima del sombreado. */
.dia-col { position: relative; z-index: 1; }


.aviso-acceso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 11px 2px 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.muestra-franja {
  flex: 0 0 auto;
  width: 28px;
  height: 15px;
  margin-top: 3px;
  background: var(--restringido-velo);
  border-top: 2px dashed var(--restringido-linea);
  border-bottom: 2px dashed var(--restringido-linea);
}

.vacio {
  text-align: center;
  color: var(--tinta-suave);
  padding: 30px 16px;
  font-size: .95rem;
}

/* -------------------------- Catálogo -------------------------- */

.rejilla { display: grid; gap: 12px; grid-template-columns: 1fr; }

.ficha {
  display: flex;
  flex-direction: column;
  background: var(--papel-velo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ficha img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #F2F3F7;
  display: block;
}
.ficha .cuerpo { padding: 13px 14px 15px; }
.ficha h3 { font-size: 1.06rem; margin-bottom: 6px; }
.ficha .badges { margin-bottom: 8px; }
.ficha .docente { font-size: .82rem; color: var(--tinta-suave); margin-bottom: 8px; }
.ficha .descripcion { font-size: .9rem; margin-bottom: 10px; }

.horas-lista { list-style: none; margin: 0 0 10px; padding: 0; font-size: .85rem; }
.horas-lista li { display: flex; gap: 8px; padding: 3px 0; border-top: 1px solid var(--linea); }
.horas-lista li:first-child { border-top: 0; }
.horas-lista .dia { font-weight: 700; min-width: 82px; }

.requisitos {
  font-size: .82rem;
  background: #F7F8FB;
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  color: var(--tinta-suave);
}
.requisitos strong { color: var(--tinta); }

/* ------------------------- Reglamento ------------------------- */

.reglas { list-style: none; counter-reset: regla; margin: 0; padding: 0; }
.reglas li {
  counter-increment: regla;
  position: relative;
  padding: 12px 0 12px 42px;
  border-top: 1px solid var(--linea);
}
.reglas li:first-child { border-top: 0; }
.reglas li::before {
  content: counter(regla);
  position: absolute;
  left: 0; top: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.reglas h3 { font-size: .98rem; margin-bottom: 2px; }
.reglas p { font-size: .9rem; color: var(--tinta-suave); margin: 0; }

.proposito {
  text-align: center;
  font-weight: 600;
  color: var(--tinta-suave);
  background: #F7F8FB;
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* --------------------------- Información ---------------------- */

.horario-centro { border-collapse: collapse; font-size: .95rem; margin-bottom: 4px; }
.horario-centro th, .horario-centro td { text-align: left; padding: 9px 4px; border-top: 1px solid var(--linea); }
.horario-centro tr:first-child th, .horario-centro tr:first-child td { border-top: 0; }

/* La tabla se encoge a su contenido y se centra en la tarjeta. Dentro,
   el día y la hora quedan pegados y alineados entre sí; si cada columna
   se fuera a un extremo costaría emparejarlas de un vistazo. */
.horario-centro { width: auto; margin-inline: auto; }
.horario-centro th { white-space: nowrap; padding-right: 26px; }
.horario-centro td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.horario-centro .cerrado { color: var(--tinta-tenue); }
.nota-horario { font-size: .82rem; color: var(--tinta-suave); margin: 9px 0 0; line-height: 1.45; }

.bloque-info + .bloque-info { margin-top: 12px; }
.bloque-info h3 { font-size: 1rem; }

/* Estas tarjetas llevan poco texto. Se quedan con el tamaño que tienen
   en el teléfono y ahí se detienen: en pantalla grande sobra sitio a los
   lados, pero el bloque se lee igual de bien que en la mano. */
#s-informacion .tarjeta {
  width: 90%;
  max-width: 420px;
  margin-inline: auto;
}

.tarjeta-horario h3 { text-align: center; }

.boton {
  display: inline-block;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--linea); }
.boton.peligro { background: #B91C1C; }
.boton:disabled { opacity: .55; cursor: default; }

/* ---------------------------- Diálogo ------------------------- */

dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: 86vh;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  box-shadow: 0 18px 50px rgba(27, 32, 51, .28);
}
dialog::backdrop { background: rgba(27, 32, 51, .42); }
.dialogo-cuerpo { padding: 18px; overflow-y: auto; max-height: 86vh; }
.dialogo-cerrar {
  position: sticky; top: 0;
  float: right;
  border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1;
  color: var(--tinta-tenue);
  cursor: pointer;
}

.pie {
  text-align: center;
  font-size: .78rem;
  color: var(--tinta-tenue);
  padding: 20px 14px 30px;
}
.pie a { color: var(--tinta-tenue); }

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================
   Pantalla grande: la semana completa y el catálogo en columnas.
   ============================================================= */

@media (min-width: 760px) {
  .envoltura { padding: 0 20px 70px; }

  .dias-tabs { display: none; }

  .horario {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto 1fr;
    padding: 0 10px 10px 0;
  }

  .horario-dias {
    display: grid;
    grid-row: 1;
    grid-column: 2;
    grid-template-columns: repeat(var(--dias), 1fr);
    background: var(--papel-velo);
    border-bottom: 1px solid var(--linea);
  }
  /* La cabecera acompaña al scroll: con la semana entera delante, sin
     ella se pierde de vista en qué día cae cada columna. Va por encima
     de las fichas y de la línea de acceso restringido (z-index 3). */
  .horario-dias {
    position: sticky;
    top: var(--alto-nav);   /* justo debajo de la navegación */
    z-index: 5;
    background: var(--papel);
  }
  .horario-dias div {
    padding: 9px 4px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--tinta-suave);
  }
  .horario-dias .es-hoy { color: var(--tinta); }
  .horario-dias .hoy {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    color: var(--tinta-tenue);
  }

  .columna-horas { grid-row: 2; grid-column: 1; }
  .pistas { grid-row: 2; grid-column: 2; grid-template-columns: repeat(var(--dias), 1fr); }

  .horario { --alto-fila: 17px; }
  .bloque .nombre { font-size: .78rem; }

  /* Sólo el horario se sale del ancho de lectura: seis columnas que se
     comparan entre sí necesitan sitio. El resto sigue en 1080. */
  body[data-ruta="horario"] .envoltura { max-width: 1400px; }

  .rejilla { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

  .titulo-seccion { margin-bottom: 6px; }
  .encabezado { padding-top: 30px; }
  .marca img { width: 240px; }
}