/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTO VIVO · C · EL CALENDARIO DE LA CASA  (lo monta Calendario.crea)

   Meses de lunes a domingo. Dias pasados = texto. Dias elegibles = boton de
   2.75rem (44 px). Elegido = eleccion unica de la casa (brillo→chicle, letra
   blanca, halo). Muy pedido = punto brillo. Festivo = aro diminuto en tinta
   suave. Vacaciones escolares = banda lila suave que une los dias. Hoy = aro
   chicle fino. Tokens de la casa; nada de numeros de movimiento sueltos.
   ═══════════════════════════════════════════════════════════════════════════ */
.cal{--cal-dia:2.75rem;--cal-fila:3rem;--cal-banda:color-mix(in oklab,var(--color-lila) 62%,transparent);--cal-marca:var(--color-tinta-suave);display:grid;gap:var(--spacing-caja);min-width:0;color:var(--color-tinta);font-family:var(--font-sans)}
.cal [hidden]{display:none!important}

/* Marco: flechas en las esquinas de la fila de titulos, meses debajo */
.cal__marco{position:relative;min-width:0;touch-action:pan-y}
.cal__vista{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--spacing-grupo);align-items:start}
.cal__vista[data-meses="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cal__flecha{position:absolute;top:0;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:var(--radio-entero);background-color:rgb(255 255 255 / .72);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 9%,transparent),0 6px 16px -12px rgb(28 28 30 / .22);color:var(--color-tinta);cursor:pointer;transition:transform var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.cal__flecha--atras{left:0}
.cal__flecha--adelante{right:0}
.cal__flecha svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.cal__flecha:hover{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 50%,transparent),0 10px 22px -12px rgb(28 28 30 / .24);transition-timing-function:var(--ease-curva)}}
.cal__flecha:active{transform:scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.cal__flecha:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}

/* Mes */
.cal__mes{display:grid;gap:var(--spacing-pieza);min-width:0}
.cal__titulo{display:flex;align-items:center;justify-content:center;gap:.3em;min-height:2.75rem;margin:0;padding-inline:3.25rem;font-family:var(--font-display);font-size:var(--text-rotulo);line-height:1;letter-spacing:-.02em;font-weight:700;white-space:nowrap}
.cal__anio{font-weight:300;color:var(--color-tinta-suave)}
.cal__rejilla{display:grid;gap:var(--spacing-hilo);min-width:0}
.cal__fila{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal__semanas{display:grid;align-content:start;grid-auto-rows:var(--cal-fila);min-height:calc(6 * var(--cal-fila))}
.cal__dsem{display:grid;place-items:center;padding-block:var(--spacing-hilo)}
.cal__dsem abbr{font-size:var(--text-nano);font-weight:600;letter-spacing:.06em;color:var(--color-tinta-suave);text-decoration:none;cursor:default}

/* Celda: centra el disco; la banda de vacaciones vive detras, a lo ancho */
.cal__celda{position:relative;display:grid;place-items:center;min-width:0}
.cal__celda--vac::before{content:"";position:absolute;inset-inline:0;top:50%;height:calc(var(--cal-dia) - .25rem);translate:0 -50%;background-color:var(--cal-banda);pointer-events:none}
.cal__celda--vac-ini::before{inset-inline-start:calc(50% - (var(--cal-dia) - .25rem) / 2);border-start-start-radius:var(--radio-entero);border-end-start-radius:var(--radio-entero)}
.cal__celda--vac-fin::before{inset-inline-end:calc(50% - (var(--cal-dia) - .25rem) / 2);border-start-end-radius:var(--radio-entero);border-end-end-radius:var(--radio-entero)}

/* El disco (boton o texto) */
.cal__dia,.cal__pasado{position:relative;display:grid;place-items:center;width:var(--cal-dia);height:var(--cal-dia);border-radius:var(--radio-entero);font-size:var(--text-corto);line-height:1;font-variant-numeric:tabular-nums}
.cal__num{position:relative}
.cal__dia{padding:0;border:0;background-color:transparent;color:var(--color-tinta);font-family:inherit;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.cal__pasado{color:color-mix(in oklab,var(--color-tinta) 32%,transparent);font-weight:400}
@media (hover:hover){.cal__dia:hover{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 50%,transparent),0 8px 18px -12px rgb(28 28 30 / .28);transition-timing-function:var(--ease-curva)}}
.cal__dia:active{transform:scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.cal__dia:focus-visible,.cal__dia.es-foco{outline:2px solid var(--color-chicle);outline-offset:2px}

/* Hoy: aro chicle fino (no es texto) */
.cal__dia--hoy{box-shadow:inset 0 0 0 1.5px var(--color-chicle)}

/* Marcas bajo el numero: festivo (aro) y muy pedido (punto), en fila */
.cal__marcas{position:absolute;left:0;right:0;bottom:.3rem;display:flex;justify-content:center;align-items:center;gap:.1875rem;pointer-events:none}
.cal__pedido{width:.3125rem;height:.3125rem;border-radius:var(--radio-entero);background-color:var(--color-brillo)}
.cal__festivo{width:.375rem;height:.375rem;border-radius:var(--radio-entero);box-shadow:inset 0 0 0 1.25px var(--cal-marca)}
.cal__pasado .cal__marcas{opacity:.45}

/* Elegido: la eleccion unica de la casa */
.cal__dia[aria-pressed="true"]{background-color:transparent;background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);box-shadow:var(--halo-elegido),inset 0 1px 0 rgb(255 255 255 / .45);animation:cal-elige var(--dur-pausado) var(--ease-muelle) both;z-index:1}
.cal__dia[aria-pressed="true"] .cal__pedido{background-color:#fff}
.cal__dia[aria-pressed="true"] .cal__festivo{--cal-marca:#fff}
@keyframes cal-elige{from{scale:var(--esc-brota)}}

/* Aviso ambar de la casa sobre la rejilla (Casa.aviso pone .con-aviso) */
.cal.con-aviso .cal__dia:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-ambar) 55%,transparent)}

/* Leyenda discreta, una linea */
.cal__leyenda{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--spacing-hilo) var(--spacing-bloque);margin:0;font-size:var(--text-nano);line-height:1.3;color:var(--color-tinta-suave)}
.cal__ley{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.cal__muestra{display:inline-block;flex:none;border-radius:var(--radio-entero)}
.cal__muestra--pedido{width:.3125rem;height:.3125rem;background-color:var(--color-brillo)}
.cal__muestra--festivo{width:.4375rem;height:.4375rem;box-shadow:inset 0 0 0 1.25px var(--cal-marca)}
.cal__muestra--vacaciones{width:1.25rem;height:.625rem;background-color:var(--cal-banda)}

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

/* Movil: un mes a todo lo ancho; la fila mide 44 px de dedo */
@media (width < 768px){
  .cal{--cal-fila:2.875rem}
  .cal__titulo{font-size:var(--text-lead)}
  .cal__leyenda{gap:var(--spacing-hilo) var(--spacing-caja)}
}
@media (width < 360px){.cal{--cal-dia:2.625rem}}

@media (prefers-reduced-motion:reduce){
  .cal__dia[aria-pressed="true"]{animation:none}
}