/* calendario.css - Calendario mensual de solo lectura. Lila de noche: superficie oscura, lila y verde.
   Movil primero: bajo 720 px la grilla va de borde a borde y el dia elegido se abre en una hoja inferior. */

.cal {
  --cal-linea: var(--borde);
  --cal-gris: var(--texto-3);   /* numero de un dia sin clases o pasado: 8.3:1 sobre --cal-gris-fondo (AA) */
  --cal-gris-fondo: var(--fondo);
  display: grid; gap: var(--s3);
  -webkit-tap-highlight-color: transparent;
}

/* ── Barra del mes ────────────────────────── */
.cal__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.cal__mes { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1; letter-spacing: -.025em; }
/* El anio va atenuado: el titular es el mes. */
.cal__anio { color: var(--texto-3); font-weight: 500; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.cal__nav { display: flex; align-items: center; gap: .5rem; }
.cal__nav .boton { touch-action: manipulation; }
.cal__flecha { min-width: 3rem; padding-inline: .5rem; font-size: 1.25rem; letter-spacing: 0; }

/* ── Grilla ───────────────────────────────── */
.cal__marco { background: var(--superficie); border: 1px solid var(--borde); transition: opacity .2s ease; }
.cal--cargando .cal__marco { opacity: .55; pointer-events: none; }
.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__semana { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.cal__dow {
  padding: .6rem 0; text-align: center;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.cal__dow--dom { color: var(--verde-texto); }
.cal__esqueleto { min-height: 18rem; border: 0; }
.cal__error { display: grid; gap: .75rem; justify-items: start; margin: 1rem; }

.cal__dias { gap: 1px; background: var(--cal-linea); }
.cal__celda, .cal__hueco { min-width: 0; background: var(--superficie); }
.cal__hueco { background: var(--fondo); }

.cal__dia {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .3rem;
  width: 100%; height: 100%; min-height: 3.5rem; padding: .35rem 0;
  border: 0; background: var(--superficie); color: var(--texto); text-align: center; cursor: pointer;
  touch-action: manipulation; transition: background-color .15s ease, box-shadow .15s ease;
}
.cal__num { font: 500 1.125rem/1 var(--display); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.cal__puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; min-height: .5rem; }
.cal__hoy, .cal__nota { display: none; }

/* Punto de ocupacion: la forma dice el estado, el color solo acompana. */
.pto { display: inline-block; flex: none; width: .5rem; height: .5rem; border: 1.5px solid currentColor; }
.pto--libre { color: var(--verde); background: transparent; }
.pto--medio { color: var(--texto); background: linear-gradient(to top, currentColor 50%, transparent 50%); }
.pto--llena { color: var(--texto); background: currentColor; }
.pto--cerrada { color: var(--cal-gris); background: currentColor; }
.pto--cancelada { color: var(--cal-gris); background: linear-gradient(to top right, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%); }

/* Domingo: celda levantada y numero en verde. */
.cal__dia--dom:not(:disabled) { background: var(--borde); }
.cal__dia--dom:not(:disabled) .cal__num { color: var(--verde-texto); }

/* Sin clases (o ya pasado): gris y sin accion. */
.cal__dia:disabled { background: var(--cal-gris-fondo); color: var(--cal-gris); cursor: default; }

/* Hoy, en lila. */
.cal__dia.cal__dia--hoy, .cal__dia.cal__dia--hoy:disabled { background: var(--lila); color: var(--fondo); }
.cal__dia--hoy .pto { color: var(--fondo); }
.cal__dia.cal__dia--hoy .cal__num { color: var(--fondo); }

@media (hover: hover) {
  .cal__dia:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--lila); }
}

/* Elegido: oscuro con anillo y base lila. */
.cal__dia.cal__dia--sel, .cal__dia.cal__dia--sel:hover { background: var(--fondo); color: var(--texto); box-shadow: inset 0 -4px 0 var(--lila); }
.cal__dia--sel .pto { color: var(--lila); }
.cal__dia.cal__dia--sel .cal__num { color: var(--texto); }
.cal__dia:focus-visible { z-index: 1; outline: 3px solid var(--lila); outline-offset: -3px; }
.cal__dia--hoy:focus-visible { outline-color: var(--fondo); }
/* Anillo lila dentro del dia elegido (se anima en el bloque de movimiento) */
.cal__dia--sel::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--lila); pointer-events: none; }

/* Leyenda */
.cal__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; }
.cal__ley { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .5rem; background: var(--superficie); border: 1px solid var(--borde); line-height: 1.2; }
.cal__leyenda .pto, .cal__muestra { display: inline-block; flex: none; width: 12px; height: 12px; }
.cal__muestra--gris { background: var(--cal-gris-fondo); border: 1px solid var(--cal-gris); }
.cal__muestra--hoy { background: var(--lila); border: 1px solid var(--borde); }

.cal__pista { color: var(--texto); font-size: .9375rem; }

/* ── Detalle del dia: una fila dentro de la grilla, bajo la semana del dia tocado ── */
.cal__abierto {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-rows: 1fr;
  margin-top: -1px; /* tapa la linea del gap: la celda elegida sigue en el borde del panel */
  background: var(--fondo); border-top: 3px solid var(--lila); scroll-margin-block: 5rem;
}
/* Pestana bajo la celda elegida: tapa el borde lila y une el dia con su detalle. --col (0 a 6) la pone en JS. */
.cal__abierto::before {
  content: ""; position: absolute; top: 0; left: calc(100% / 7 * var(--col, 0)); width: calc(100% / 7); height: .6rem; background: var(--fondo);
}
.cal__abierto-in { min-height: 0; overflow: hidden; }
.cal__abierto-cuerpo { display: grid; gap: 1.25rem; align-content: start; padding: 1.75rem 1.5rem 1.75rem; }
.cal-det__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cal-det__titulo { display: grid; gap: .35rem; }
.cal-det__fecha { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-variant-numeric: lining-nums; }
.cal-det__resumen { color: var(--texto-2); }
.cal-det__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.cal-clase { display: grid; gap: .6rem; align-content: start; padding: 1rem; background: var(--fondo); border: 1px solid var(--borde); }
.cal-clase__hora { font: 500 1.5rem/1.1 var(--display); font-variant-numeric: lining-nums; }
.cal-clase__titulo { font-size: .9375rem; color: var(--texto-2); }
.cal-clase__cupos { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-cupo { width: 1.125rem; height: 1.125rem; border: 2px solid var(--verde); }
.cal-cupo--ocupado { background: var(--verde); border-color: var(--verde); }
.cal-clase__quedan { font-size: .9375rem; font-weight: 500; }
.cal-clase__quedan small { font-size: .875rem; font-weight: 400; color: var(--texto-3); }
.cal-clase--llena, .cal-clase--cerrada, .cal-clase--cancelada { background: transparent; border-color: var(--texto-3); }
.cal-clase--cerrada .cal-clase__hora, .cal-clase--cancelada .cal-clase__hora { color: var(--texto-3); }
.cal-clase--cancelada .cal-clase__hora { text-decoration: line-through; }
.cal-clase--llena .cal-cupo, .cal-clase--cerrada .cal-cupo--libre { border-color: var(--texto-3); }
.cal-clase--cerrada .cal-cupo--ocupado { background: var(--texto-3); }
.cal-det__cta { justify-self: start; touch-action: manipulation; }

/* ── Hoja inferior (celular) ──────────────── */
html.cal-bloqueado { overflow: hidden; }
.cal-hoja {
  top: auto; right: 0; bottom: 0; left: 0; margin: 0;
  width: 100%; max-width: none; height: auto; max-height: 92vh; max-height: 92dvh;
  padding: 0; border: 0; border-top: 2px solid var(--lila); background: var(--fondo);
  overflow: hidden; transform: translateY(var(--cal-dy, 0px)); transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cal-hoja[open] { display: flex; flex-direction: column; }
.cal-hoja--arrastrando { transition: none; }
.cal-hoja::backdrop { background: rgba(0, 0, 0, .6); }
.cal-hoja__cab { flex: none; padding: .6rem var(--pad) .75rem; border-bottom: 1px solid var(--borde); touch-action: none; cursor: grab; }
.cal-hoja__asa { display: block; width: 2.75rem; height: 4px; margin: 0 auto .6rem; background: var(--texto); opacity: .35; }
.cal-hoja__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cal-hoja__titulo { font-size: 1.625rem; font-variant-numeric: lining-nums; }
.cal-hoja__cuerpo {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 1rem; align-content: start;
  padding: 1rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.cal-hoja .cal-clase, .cal__abierto .cal-clase { background: var(--superficie); }
.cal-hoja .cal-clase--llena, .cal-hoja .cal-clase--cerrada, .cal-hoja .cal-clase--cancelada,
.cal__abierto .cal-clase--llena, .cal__abierto .cal-clase--cerrada, .cal__abierto .cal-clase--cancelada { background: transparent; }
.cal-hoja .cal-det__cta { justify-self: stretch; }

/* ── Celular: la grilla de borde a borde y sin panel (el detalle va en la hoja) ── */
@media (max-width: 719px) {
  .cal__marco { margin-inline: calc(var(--pad) * -1); border-inline: 0; }
}

/* ── Escritorio: celdas grandes, con la nota de cupos y el rotulo de hoy ── */
@media (min-width: 720px) {
  .cal__dow { padding: .8rem 0; font-size: .75rem; }
  .cal__esqueleto { min-height: 30rem; }
  .cal__dia {
    grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; justify-items: start; align-content: stretch; gap: .35rem;
    min-height: 7rem; padding: .7rem .8rem; text-align: left;
  }
  .cal__num { font-size: 1.75rem; }
  .cal__dia.cal__dia--sel, .cal__dia.cal__dia--sel:hover { box-shadow: none; } /* aqui el dia elegido continua en la pestana del panel */
  .cal__hoy {
    display: block; justify-self: end; padding: .15rem .45rem; background: var(--fondo); color: var(--texto);
    font: 500 .6875rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  }
  .cal__dia--sel .cal__hoy { background: var(--lila); color: var(--fondo); }
  .cal__puntos { grid-column: 1 / -1; align-self: end; justify-content: flex-start; gap: 4px; }
  .cal__nota { display: block; grid-column: 1 / -1; font: 500 .75rem/1.2 var(--sans); letter-spacing: .02em; }
  .pto { width: .625rem; height: .625rem; }
  .cal-det__lista { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

/* ── Movimiento (solo si la persona no pidio reducirlo) ── */
@media (prefers-reduced-motion: no-preference) {
  .cal__abierto { animation: cal-abrir .35s cubic-bezier(.2, .7, .2, 1) both; }
  .cal-det__cab, .cal-clase { animation: cal-entrar .5s cubic-bezier(.2, .7, .2, 1) both; }
  .cal-clase:nth-child(2) { animation-delay: .08s; }
  .cal-clase:nth-child(3) { animation-delay: .16s; }
  .cal-clase:nth-child(n + 4) { animation-delay: .24s; }
  /* Cupos: micro-pop escalonado al aparecer; los libres siguen con un pulso suave */
  .cal-cupo { animation: cal-pop .42s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, .18s); }
  .cal-cupo:nth-child(2) { --d: .24s; }
  .cal-cupo:nth-child(3) { --d: .3s; }
  .cal-cupo:nth-child(4) { --d: .36s; }
  .cal-cupo:nth-child(n + 5) { --d: .42s; }
  .cal-clase--abierta .cal-cupo--libre {
    animation: cal-pop .42s cubic-bezier(.3, 1.6, .5, 1) both, cal-pulso 2.6s ease-out infinite;
    animation-delay: var(--d, .18s), calc(var(--d, .18s) + .6s);
  }
  /* Cambio de mes: la grilla entra con fade y un desliz corto desde el lado del mes */
  .cal__dias--sig { animation: cal-mes-sig .4s cubic-bezier(.2, .7, .2, 1) both; }
  .cal__dias--ant { animation: cal-mes-ant .4s cubic-bezier(.2, .7, .2, 1) both; }
  /* Dia elegido: el anillo crece desde adentro y luego respira */
  .cal__dia--sel::after { animation: cal-anillo .45s cubic-bezier(.2, .7, .2, 1) both, cal-respira 2.8s ease-in-out .45s infinite; }
  .cal-hoja[open] { animation: cal-subir .26s cubic-bezier(.2, .7, .2, 1); }
  .cal-hoja[open].cal-hoja--cerrando { animation: cal-bajar .2s ease-in forwards; }
  .cal-hoja::backdrop { animation: cal-velo .2s ease; }
}
@keyframes cal-abrir { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes cal-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cal-pop { from { transform: scale(0); } 70% { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes cal-mes-sig { from { opacity: 0; transform: translateX(28px); } }
@keyframes cal-mes-ant { from { opacity: 0; transform: translateX(-28px); } }
@keyframes cal-anillo { from { opacity: 0; transform: scale(.55); } }
@keyframes cal-respira { 50% { opacity: .45; } }
@keyframes cal-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes cal-subir { from { transform: translateY(100%); } }
@keyframes cal-bajar { from { transform: translateY(var(--cal-dy, 0px)); } to { transform: translateY(100%); } }
@keyframes cal-velo { from { opacity: 0; } }