/* COAMUN r10 p2 · Calendario: el taco de papel y el sello que recorre las fechas.
   Solo existe con JS y movimiento (app.js: iniciarCalendario, iniciarTaco). */

/* ==================================================================== */
/* Calendario · el taco de papel (K2)                                    */
/* ==================================================================== */

.cal-taco {
  --taco: 200px;
  --quedan: 3;
  position: absolute;
  z-index: 1;
  top: 68px;
  right: max(14px, calc((100% - 1072px) / 2));
  width: var(--taco);
  perspective: 700px;
  pointer-events: none;
}

/* El cordón de lacre del que cuelga: nace arriba, en la orilla de la escena del Calendario. */
.cal-taco-cordon {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 9px);
  width: 2px;
  height: 200px;
  margin-left: -1px;
  background: linear-gradient(90deg, #8e0f22, #e5243f 45%, #a10c22);
  border-radius: 1px;
  transform-origin: 50% 100%;
}

/* La cabeza del taco: cartón de lacre con el ojal y la marca. */
.cal-taco-cabeza {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: max(34px, calc(var(--taco) * .19));
  padding-bottom: calc(var(--taco) * .025);
  border-radius: 3px 3px 1px 1px;
  background: var(--papel-fibra), linear-gradient(180deg, #d4183a 0%, #b80f2b 55%, #8e0f22 100%);
  box-shadow: inset 0 1px 0 rgba(255, 190, 200, .45), inset 0 -2px 0 rgba(60, 0, 10, .35), 0 2px 3px rgba(40, 12, 16, .25);
}

.cal-taco-ojal {
  position: absolute;
  top: calc(var(--taco) * .025);
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #5a0614;
  box-shadow: 0 0 0 2px #e9c46a, 0 0 0 3px rgba(60, 20, 0, .4);
}

.cal-taco-marca {
  color: #fff4f4;
  font-family: var(--titulo);
  font-size: max(12px, calc(var(--taco) * .068));
  letter-spacing: .28em;
  line-height: 1;
}

/* El talón: lo que queda de las hojas ya arrancadas, rasgado por la perforación. */
.cal-taco-talon {
  position: relative;
  z-index: 19;
  display: block;
  height: 5px;
  margin: -1px 2px 0;
  background: #f3efe6;
  -webkit-mask: radial-gradient(circle at 3px 5px, transparent 1.6px, #000 1.8px) 0 0 / 6px 6px repeat-x;
  mask: radial-gradient(circle at 3px 5px, transparent 1.6px, #000 1.8px) 0 0 / 6px 6px repeat-x;
}

/* Las hojas: apiladas; abajo asoma el grueso del taco (menos cuantas menos quedan). */
.cal-taco-hojas {
  position: relative;
  height: calc(var(--taco) * 1.08);
  margin: -1px 2px 0;
  border-radius: 0 0 3px 3px;
  box-shadow:
    0 calc(min(var(--quedan), 1) * 2px) 0 -1px #e7e1d4,
    0 calc(min(var(--quedan), 2) * 2px) 0 -1px #dcd5c6,
    0 calc(var(--quedan) * 2px) 0 -1px #cfc7b6,
    0 calc(var(--quedan) * 2px + 6px) 12px -4px rgba(40, 32, 20, .35);
  transition: box-shadow 200ms cubic-bezier(.23, 1, .32, 1);
}

.cal-taco-hoja {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9px 10px 8px;
  border-radius: 0 0 3px 3px;
  background: var(--papel-fibra), linear-gradient(176deg, #fdfbf6 0%, #f5f0e5 100%);
  box-shadow: inset 0 -1px 0 rgba(120, 100, 70, .12);
  color: #18181b;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* La perforación arriba de cada hoja. */
/* La tinta de la hoja (iniciarTaco la apaga al arrancarla). */
.cal-taco-tinta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.cal-taco-hoja::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: radial-gradient(circle, rgba(90, 76, 52, .35) .8px, transparent 1.2px) 0 0 / 6px 2px repeat-x;
}

.cal-taco-semana {
  color: #5a5d63;
  font-size: max(12px, calc(var(--taco) * .062));
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* La fecha partida (C2): el día gigante a la izquierda, mes y año apilados a la derecha. */
.cal-taco-fecha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.cal-taco-dia {
  font-family: var(--titulo);
  font-size: calc(var(--taco) * .5);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: .9;
}

.cal-taco-mes {
  font-family: var(--titulo);
  font-size: calc(var(--taco) * .125);
  line-height: 1.15;
}

.cal-taco-pie {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #3c3f45;
  font-size: max(12px, calc(var(--taco) * .064));
  font-weight: 600;
  line-height: 1.25;
}

/* Los domingos en rojo, como en los tacos de verdad. */
.cal-taco-hoja--domingo .cal-taco-dia {
  color: var(--rojo);
}

/* COAMUN IV: los dos días en una columna más angosta y el lacre del sello abajo a la derecha. */
.cal-taco-dia {
  white-space: nowrap;
}

.cal-taco-hoja--iv .cal-taco-fecha {
  gap: 5px;
}

.cal-taco-hoja--iv .cal-taco-dia {
  color: var(--rojo);
  font-size: calc(var(--taco) * .3);
  letter-spacing: -.04em;
}

.cal-taco-hoja--iv .cal-taco-mes {
  font-size: calc(var(--taco) * .1);
}

.cal-taco-hoja--iv .cal-taco-pie {
  padding-right: calc(var(--taco) * .25 - 4px);
  color: #a10c22;
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}

.cal-taco-lacre {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: calc(var(--taco) * .25);
  height: calc(var(--taco) * .25);
  transform: rotate(-12deg);
  filter: drop-shadow(0 1px 1px rgba(60, 0, 10, .35));
}

/* Las hojas que caen pasan por detrás de las fechas (la letra queda encima del papel, nunca tapada). */
.calendario--orbita .cal-orbita {
  z-index: 2;
}

/* La fecha que el taco tiene arriba: su punto en la lista se vuelve anillo de lacre. */
.calendario--orbita .calendario-item::before {
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), box-shadow 220ms cubic-bezier(.23, 1, .32, 1);
}

/* r10b p2 · el sello recorre las fechas: la que tiene encima o junto corre su texto a la derecha (transform, sin mover
   la caja: CLS 0) y las que ya recorrió quedan tenues (≥ 4.5:1 sobre la luz de tarde, medido con tools/contraste.py: más claro que #4b4e55 baja de 4.5 donde la tarde oscurece). */
.calendario--orbita .calendario-fecha,
.calendario--orbita .calendario-titulo {
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), color 300ms cubic-bezier(.23, 1, .32, 1);
}

.calendario--orbita .calendario-item--sello > .calendario-fecha,
.calendario--orbita .calendario-item--sello > .calendario-titulo {
  transform: translateX(var(--corre, 34px));
}

.calendario--orbita .calendario-item--recorrido .calendario-titulo {
  color: #4b4e55;
  font-weight: 500;
}

.calendario--orbita .calendario-item--recorrido .calendario-fecha {
  color: #4b4e55;
  font-weight: 500;
}

.calendario--orbita .calendario-item--recorrido::before {
  background: #9a9ca3;
}

.calendario--orbita .calendario-item--taco::before {
  background: var(--rojo);
  box-shadow: 0 0 0 3px #f2f2f3, 0 0 0 4px var(--rojo);
}

/* Celular: el taco va a la derecha del título; la cuenta de días se parte en dos renglones a su izquierda. */
@media (max-width: 1180px) {
  .calendario--orbita .cal-hud {
    max-width: calc(100% - var(--taco, 200px) - 22px);
  }

  .calendario--orbita .cal-escena {
    --taco: 200px;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .cal-taco {
    --taco: 190px;
    top: 92px;
  }

  .calendario--orbita .cal-escena {
    --taco: 190px;
  }
}

/* v11 G1e.2: en celulares bajos (≤ 759 px de alto: 393×647 del iPhone con la barra de Safari, 375×667) el taco más chico
   deja lugar a las siete fechas bajo él (app.js, medir). */
@media (max-width: 767px) and (max-height: 759px) {
  .cal-taco,
  .calendario--orbita .cal-escena {
    --taco: 128px;
  }
}

/* v11 G1e.2 · 375×667 (iPhone SE y 8): ahí las fechas van en tres renglones; el taco un poco más chico aún. */
@media (max-width: 767px) and (max-height: 699px) {
  .cal-taco,
  .calendario--orbita .cal-escena {
    --taco: 108px;
  }
}

/* Compu: el taco es la pieza de la mitad derecha (la letra gigante de la sección es su fecha) y la cuenta de días
   queda abajo de él, en un renglón, del tamaño que tiene en el celular. */
@media (min-width: 1181px) {
  .cal-taco {
    --taco: 250px;
    top: calc(50% - 300px);
    right: max(24px, calc((100% - 1072px) / 2));
  }

  .cal-taco-hojas {
    height: calc(var(--taco) * .94);
  }

  .calendario--orbita .cal-hud {
    top: calc(50% + 36px);
    width: 250px;
    font-size: 15px;
    transform: none;
  }

  .calendario--orbita .cal-hud-cifra {
    font-size: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cal-taco-hojas,
  .calendario--orbita .calendario-item::before {
    transition: none;
  }
}

/* El taco necesita tiempo: la parada fija del Calendario dura una pantalla más (160 → 250 svh), para que cada hoja se
   vea caer y la de COAMUN IV se lea quieta antes de Dudas. */
/* v10 D6: 250 → 180 svh (el Calendario se sentía largo); el sello sigue llegando con cada hoja (r10-p2-sincronia.mjs). */
.calendario--orbita {
  height: 180vh;
  height: 180svh;
}

/* Contraste (J11 ≥ 4.5, tools/contraste.py): la fecha chica del Calendario quedaba en 4.49:1 bajo la luz de tarde a 1440. */
.calendario--orbita .calendario-fecha {
  color: #4f5258;
}