/* ─────────────────────────────────────────────────────────────
   vidrio.css — el calendario de vidrio con relieve (D-173).

   Una variante de layout: `tema.layout.calendario = "vidrio"` pone la
   clase `l-calendario-vidrio` en el <body> y esta hoja sólo la descarga
   quien la eligió. Sin la clave, el calendario queda como siempre.

   La regla de D-010 sigue en pie: ningún color escrito a mano. El tinte
   del vidrio, el relieve de los días y el resplandor salen de las
   variables del tema. Lo único fijo es la luz: los reflejos son blancos y
   las sombras negras, como en un vidrio de verdad, y así funciona igual
   con un tema claro que con uno oscuro.
   ───────────────────────────────────────────────────────────── */

.l-calendario-vidrio {
  --v-curva: cubic-bezier(.2, .8, .2, 1);
  --v-acento: var(--c-acento, #5aaeff);
  /* Un acento más hondo, para el fondo de las piezas en relieve. */
  --v-acento-hondo: color-mix(in srgb, var(--c-acento, #5aaeff) 62%, #000);
  --v-acento-claro: color-mix(in srgb, var(--c-acento, #5aaeff) 55%, #fff);
  --v-vidrio: color-mix(in srgb, var(--c-superficie, #fff) 14%, transparent);
  --v-linea: color-mix(in srgb, var(--c-texto, #111) 14%, transparent);
  --v-desenfoque: 26px;
}

/* --- La sala: el calendario es el protagonista ------------------- */
/* overflow-x: clip y no hidden: recorta los resplandores que se salen por
   el costado (en el celular ensanchaban la página) sin crear una barra de
   desplazamiento ni cortar la sombra de abajo. */
.l-calendario-vidrio .reserva { position: relative; isolation: isolate; overflow-x: clip; }
.l-calendario-vidrio .reserva .contenedor--angosto { width: min(100% - 2rem, 40rem); }
/* Dos resplandores del acento detrás del vidrio: sin algo que desenfocar,
   el vidrio se ve como un rectángulo gris. */
.l-calendario-vidrio .reserva::before,
.l-calendario-vidrio .reserva::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(70px);
}
.l-calendario-vidrio .reserva::before {
  width: min(46rem, 90vw); height: 30rem; left: 50%; top: 14rem; transform: translateX(-62%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v-acento) 30%, transparent), transparent);
}
.l-calendario-vidrio .reserva::after {
  width: min(34rem, 80vw); height: 26rem; left: 50%; top: 26rem; transform: translateX(-10%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v-acento-hondo) 40%, transparent), transparent);
}

/* --- La mesa: perspectiva, inclinación y sombra curva ------------- */
.l-calendario-vidrio .mesa { position: relative; perspective: 1500px; margin: 0 0 3.5rem; }
.l-calendario-vidrio .pivote {
  display: grid; perspective: 1300px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--v-curva);
}
.l-calendario-vidrio .mesa__sombra {
  position: absolute; left: 8%; right: 8%; bottom: -2.6rem; height: 4.2rem; z-index: -1;
  border-radius: 50%; filter: blur(10px);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .32) 45%, transparent 72%);
}
.l-calendario-vidrio .mesa__sombra::after {
  content: ""; position: absolute; inset: -40% 18%; border-radius: 50%; filter: blur(18px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--v-acento) 24%, transparent), transparent 70%);
}

/* --- El panel de vidrio ------------------------------------------- */
.l-calendario-vidrio .cara {
  grid-area: 1 / 1; position: relative; overflow: hidden; margin: 0;
  border-radius: 28px; padding: clamp(1rem, 3.6vw, 2rem);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .06)),
    var(--v-vidrio);
  -webkit-backdrop-filter: blur(var(--v-desenfoque)) saturate(150%);
  backdrop-filter: blur(var(--v-desenfoque)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    inset 0 -24px 48px -24px rgba(0, 0, 0, .45),
    0 1px 1px rgba(0, 0, 0, .35),
    0 18px 40px -12px rgba(0, 0, 0, .6),
    0 50px 90px -30px color-mix(in srgb, var(--v-acento-hondo) 40%, transparent);
  transform-origin: 50% 50%;
}
/* El canto de un vidrio grueso: un reflejo curvo arriba. */
.l-calendario-vidrio .cara::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -62%; height: 100%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .09), transparent 60%);
}
.l-calendario-vidrio .cara__brillo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
}

/* --- El mes -------------------------------------------------------- */
.l-calendario-vidrio .calendario__barra { position: relative; margin-bottom: 1.3rem; }
.l-calendario-vidrio .calendario__barra strong {
  font-family: var(--t-titulos, inherit); font-size: clamp(1.15rem, 3vw, 1.45rem); letter-spacing: -.02em;
}
.l-calendario-vidrio .calendario__flecha {
  width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--c-texto, #111);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 0, 0, .6);
  transition: transform .2s var(--v-curva), background .2s;
}
.l-calendario-vidrio a.calendario__flecha:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); }
.l-calendario-vidrio .calendario__dia-nombre { font-family: var(--t-mono, inherit); font-size: .68rem; letter-spacing: .12em; }

/* --- Los días: teclas en relieve, los cerrados hundidos ----------- */
.l-calendario-vidrio .calendario__grilla { gap: clamp(.3rem, 1.2vw, .6rem); }
.l-calendario-vidrio .calendario__dia {
  position: relative; border-radius: clamp(10px, 2vw, 16px);
  font-size: clamp(.92rem, 2.6vw, 1.12rem); font-variant-numeric: tabular-nums; color: var(--c-texto, #111);
  border: 1px solid color-mix(in srgb, var(--v-acento) 35%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--v-acento) 26%, transparent),
    color-mix(in srgb, var(--v-acento) 8%, transparent) 60%,
    color-mix(in srgb, var(--v-acento-hondo) 14%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -3px 6px -2px rgba(0, 0, 0, .35),
    0 2px 0 rgba(0, 0, 0, .25),
    0 10px 18px -8px rgba(0, 0, 0, .6);
  transition: transform .22s var(--v-curva), box-shadow .22s var(--v-curva), background .22s;
}
.l-calendario-vidrio a.calendario__dia:hover {
  transform: translateY(-3px); color: var(--c-texto, #111);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--v-acento) 50%, transparent),
    color-mix(in srgb, var(--v-acento) 20%, transparent) 60%,
    color-mix(in srgb, var(--v-acento-hondo) 30%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 6px -2px rgba(0, 0, 0, .3),
    0 4px 0 rgba(0, 0, 0, .22),
    0 18px 26px -10px color-mix(in srgb, var(--v-acento) 55%, transparent);
}
.l-calendario-vidrio a.calendario__dia:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(0, 0, 0, .25);
}
/* Cerrado: se ve, pero hundido en el vidrio y sin competir. */
.l-calendario-vidrio .calendario__dia--cerrado,
.l-calendario-vidrio .calendario__dia--cerrado:hover {
  opacity: 1; color: color-mix(in srgb, var(--c-texto, #111) 32%, transparent); font-weight: 400;
  border-color: transparent; transform: none;
  background: rgba(0, 0, 0, .1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}
/* El elegido: una pieza de acento con brillo propio. */
.l-calendario-vidrio .calendario__dia--elegido,
.l-calendario-vidrio .calendario__dia--elegido:hover,
.l-calendario-vidrio .medallon__num,
.l-calendario-vidrio .vidrio-ficha {
  color: var(--c-acento-texto, #fff);
  background: radial-gradient(120% 90% at 30% 15%, var(--v-acento-claro) 0%, var(--v-acento) 38%, var(--v-acento-hondo) 100%);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -6px 12px -4px rgba(0, 0, 0, .35),
    0 0 0 6px color-mix(in srgb, var(--v-acento) 12%, transparent),
    0 22px 40px -12px color-mix(in srgb, var(--v-acento) 70%, transparent);
}

/* --- La cara de horarios ----------------------------------------- */
.l-calendario-vidrio .volver {
  display: inline-block; margin-bottom: 1rem; padding: .2rem 0;
  font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--c-texto-suave, #666);
}
.l-calendario-vidrio .volver:hover { color: var(--c-texto, #111); }
.l-calendario-vidrio .medallon { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.4rem); margin-bottom: 1.6rem; }
.l-calendario-vidrio .medallon__num {
  flex: none; display: grid; place-items: center;
  width: clamp(4.6rem, 15vw, 6rem); height: clamp(4.6rem, 15vw, 6rem); border-radius: 22px;
  font-family: var(--t-titulos, inherit); font-size: clamp(2rem, 7vw, 2.7rem); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.l-calendario-vidrio .medallon__texto { min-width: 0; display: grid; gap: .4rem; }
.l-calendario-vidrio .medallon__texto > * { display: block; line-height: 1.25; }
.l-calendario-vidrio .medallon__dia {
  font-family: var(--t-mono, inherit); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--v-acento);
}
.l-calendario-vidrio .medallon__fecha {
  font-family: var(--t-titulos, inherit); font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
}
.l-calendario-vidrio .medallon__serv { color: var(--c-texto-suave, #666); font-size: .9rem; }
.l-calendario-vidrio .cara .zona { margin-bottom: 1.2rem; }

/* Los horarios, piezas de vidrio que caen en cascada al llegar. */
.l-calendario-vidrio .horarios { perspective: 700px; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); }
.l-calendario-vidrio .horario {
  transform-origin: 50% 0; border-radius: 14px; padding: .85rem .4rem;
  font-family: var(--t-mono, inherit); font-variant-numeric: tabular-nums; color: var(--c-texto, #111);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 rgba(0, 0, 0, .25), 0 10px 18px -10px rgba(0, 0, 0, .6);
  transition: transform .2s var(--v-curva), background .2s, border-color .2s, box-shadow .2s;
}
.l-calendario-vidrio .horario:hover {
  transform: translateY(-2px); color: var(--c-texto, #111);
  border-color: color-mix(in srgb, var(--v-acento) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-acento) 30%, transparent), color-mix(in srgb, var(--v-acento) 8%, transparent));
}
.l-calendario-vidrio .horario:active { transform: translateY(1px); }

/* Lo que vuela entre una pantalla y otra (lo arma vidrio.js). */
.vidrio-ficha {
  position: fixed; z-index: 50; pointer-events: none; margin: 0;
  display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.vidrio-onda { position: fixed; z-index: 49; pointer-events: none; border-radius: 50%; border: 2px solid var(--c-acento, #5aaeff); }

.l-calendario-vidrio .calendario__dia:focus-visible,
.l-calendario-vidrio .horario:focus-visible,
.l-calendario-vidrio .volver:focus-visible { outline: 2px solid var(--v-acento); outline-offset: 3px; }

/* En el celular el desenfoque cuesta: se baja, y las esquinas se achican. */
@media (max-width: 560px) {
  .l-calendario-vidrio { --v-desenfoque: 14px; }
  .l-calendario-vidrio .cara { border-radius: 22px; }
  .l-calendario-vidrio .horarios { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .l-calendario-vidrio .pivote,
  .l-calendario-vidrio .calendario__dia,
  .l-calendario-vidrio .horario,
  .l-calendario-vidrio .calendario__flecha { transition: none; }
}
/* Sin backdrop-filter (navegadores viejos), un vidrio más opaco: si no, el
   texto queda sobre los resplandores y se lee mal. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .l-calendario-vidrio .cara { background: color-mix(in srgb, var(--c-superficie, #fff) 88%, transparent); }
}