/* ==========================================================================
   master.css — Header y footer
   ==========================================================================
   Son las dos franjas que se pintan una vez y no se animan nunca. Todas las
   medidas vienen de PLANTILLA.header y PLANTILLA.footer a través de las
   variables que escribe js/plantilla.js sobre #stage.

   Los dos contenedores ocupan el lienzo entero para poder posicionar a sus
   hijos en coordenadas absolutas, pero no capturan clics: solo los controles.
   ========================================================================== */

#master-header,
#master-footer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#master-header > *,
#master-footer > * { pointer-events: auto; }

/* ========================================================== HEADER ======== */

/* Quien se posiciona es el enlace, no la imagen: así lo que se pulsa es
   exactamente el logo. Si posicionáramos el <img> y dejáramos el <a> estático,
   el enlace sería una caja de altura cero. Las medidas son las mismas de
   PLANTILLA.header.logo; la imagen solo rellena el hueco. */
#logo-enlace {
  position: absolute;
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-w);
  display: block;
}

#logo-enlace:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 4px;
}

#logo {
  width: 100%;
  height: auto;
}

#lema {
  position: absolute;
  left: var(--lema-x);
  top: var(--lema-y);
  width: var(--lema-w);

  font-family: var(--serif);
  font-size: var(--lema-size);
  font-weight: var(--lema-peso);
  line-height: var(--lema-lh);
  color: var(--color-azul);
  text-align: right;
}

/* La segunda línea del lema va en itálica (ver PLANTILLA.header.lema). */
#lema .lema-2 { font-style: italic; }

/* ========================================================== FOOTER ======== */

#riel {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#riel > * { pointer-events: auto; }

/* --- Línea que une las bolitas ------------------------------------------- */
/* No es una línea continua por detrás de las bolitas: son tramos sueltos que
   se cortan a `--pie-linea-hueco` del borde de cada una, como en el diseño.
   Hay dos clases de tramo:
     .riel-tramo                     los dos extremos, de flecha a bolita
     .riel-item + .riel-item::before el de entre dos años

   El trazo de linea.svg se repite en horizontal, así cada tramo mide lo que
   tenga que medir sin deformar el dibujo. */

.riel-tramo,
.riel-item + .riel-item::before {
  position: absolute;
  height: var(--pie-linea-grosor);
  transform: translateY(-50%);

  background-image: url("../assets/footer/linea.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}

#riel > .riel-tramo {
  top: var(--pie-y);
  pointer-events: none;
}

/* Las bolitas se centran solas en el lienzo, así que la primera y la última
   caen a (visibles - 1) / 2 pasos del centro. De ahí salen estos extremos. */
#riel-tramo-ini {
  left:  calc(50% - var(--pie-flecha-sep) + var(--pie-flecha) / 2 + var(--pie-linea-margen));
  right: calc(50% + (var(--pie-visibles) - 1) * var(--pie-paso) / 2
               + var(--pie-bola) / 2 + var(--pie-linea-hueco));
}

#riel-tramo-fin {
  left:  calc(50% + (var(--pie-visibles) - 1) * var(--pie-paso) / 2
               + var(--pie-bola) / 2 + var(--pie-linea-hueco));
  right: calc(50% - var(--pie-flecha-sep) + var(--pie-flecha) / 2 + var(--pie-linea-margen));
}

/* Tramo entre la bolita anterior y la de este año. */
.riel-item + .riel-item::before {
  content: "";
  top: 0;
  left: calc(var(--pie-paso) / -2 + var(--pie-bola) / 2 + var(--pie-linea-hueco));
  width: calc(var(--pie-paso) - var(--pie-bola) - 2 * var(--pie-linea-hueco));
}

/* En la última página puede haber huecos sin año: ahí no se dibuja tramo. */
.riel-item[aria-hidden] + .riel-item::before,
.riel-item + .riel-item[aria-hidden]::before { content: none; }

/* --- Carril de años ------------------------------------------------------ */
/* Se centra en el lienzo: con `visibles` huecos de `paso`, el primer año cae
   solo donde tiene que caer, sin escribir su x a mano. */

#riel-carril {
  position: absolute;
  top: var(--pie-y);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.riel-item {
  position: relative;
  flex: 0 0 var(--pie-paso);
  width: var(--pie-paso);
}

.riel-boton {
  position: absolute;
  left: 0;
  top: calc(var(--pie-bola) / -2);
  width: var(--pie-paso);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.riel-punto {
  width: var(--pie-bola);
  height: var(--pie-bola);
  background-image: url("../assets/footer/bolasinseleccion.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.riel-item.activa .riel-punto {
  background-image: url("../assets/footer/bolaseleccion.svg");
}

.riel-etiqueta {
  /* El margen lleva la etiqueta desde el borde inferior de la bolita hasta la
     `y` que pide el diseño, sin depender del alto real del SVG. */
  margin-top: calc(var(--pie-etiqueta-y) - var(--pie-y) - var(--pie-bola) / 2);

  font-family: var(--sans);
  font-size: var(--pie-etiqueta-size);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--color-texto);
  white-space: nowrap;
}

.riel-item.activa .riel-etiqueta {
  font-weight: 800;
  color: var(--color-azul);
}

.riel-boton:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 4px;
}

/* --- Flechas ------------------------------------------------------------- */

.flecha {
  position: absolute;
  top: var(--pie-y);
  width: var(--pie-flecha);
  height: var(--pie-flecha);
  transform: translateY(-50%);
  transition: opacity .25s ease;
}

#btn-prev { left: calc(50% - var(--pie-flecha-sep) - var(--pie-flecha) / 2); }
#btn-next { left: calc(50% + var(--pie-flecha-sep) - var(--pie-flecha) / 2); }

.flecha img {
  width: 100%;
  height: 100%;
}

/* En los extremos la flecha deja de responder, pero no se atenúa: el diseño la
   dibuja igual en la primera y en la última diapositiva. */
.flecha:disabled { cursor: default; }

.flecha:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 4px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .flecha { transition: none; }
}