/* =====================================================================
   08 · CALENDARIO DE DESCUENTOS: Halloween / Adviento (id="adviento")
   Izquierda: texto + "ventanita" con el descuento y el código del día.
   Derecha: calendario de 24 días (botones que crea js/calendario.js).
   ===================================================================== */

.adviento__grilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.adviento__texto { display: flex; flex-direction: column; gap: 24px; }
.adviento__descripcion { font-size: 18px; line-height: 1.6; color: var(--texto-2); max-width: 480px; }


/* ---------- Ventanita con el descuento ---------- */
.adviento__ventana {
  margin-top: 8px;
  padding: 32px;
  background: var(--cobre);
  color: var(--negro);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.adviento__ventana-etiqueta { font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.adviento__ventana-fila { display: flex; align-items: center; gap: 24px; }
.adviento__ventana-dia { font-size: 96px; line-height: .85; font-weight: 200; letter-spacing: -0.04em; }
.adviento__ventana-descuento { font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }

/* Caja del código */
.adviento__codigo {
  padding: 14px 18px;
  background: var(--negro);
  color: var(--texto);
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
}
.adviento__codigo strong { color: var(--cobre); font-size: 18px; letter-spacing: 3px; }

.adviento__ventana-nota { font-size: 14px; }

/* Días que ya pasaron: la ventanita se ve apagada */
.adviento__ventana--pasado { background: var(--tarjeta); color: var(--texto-suave); border: 1px solid var(--borde); }
.adviento__ventana--pasado .adviento__codigo strong { text-decoration: line-through; color: var(--texto-apagado); }

/* Animación al cambiar de día */
@keyframes abrir-ventana { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.adviento__ventana--abrir { animation: abrir-ventana .45s ease both; }


/* ---------- Calendario de 24 días ---------- */
.adviento__dias {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 6), minmax(0, 1fr));   /* --columnas lo pone js/calendario.js */
  gap: 2px;
  background: #3E3A37;
  border: 2px solid #3E3A37;
}

.dia {
  height: 118px;
  padding: 14px;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--fuente);
  background: var(--negro);
  color: #7C736C;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion);
}
.dia__numero { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.dia__estado { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.dia svg { align-self: flex-end; }

.dia--pasado { background: var(--tarjeta); color: var(--texto); }
.dia--pasado .dia__estado { color: var(--cobre-instagram); }   /* PRUEBA: "ABIERTO", antes var(--cobre) */
.dia--hoy    { background: var(--cobre); color: var(--negro); }
.dia--bloqueado { cursor: not-allowed; }
/* Días que ya pasaron: sin código, texto "PASÓ" apagado */
.dia--vencido { background: var(--tarjeta); color: #5E5751; cursor: default; }
.dia--vencido .dia__numero { text-decoration: line-through; text-decoration-thickness: 1px; }
.dia--vencido .dia__estado { color: #5E5751; }

.dia:not(:disabled):hover { transform: translateY(-3px); }
.dia--elegido { outline: 2px solid var(--texto); outline-offset: -2px; }



/* ---------- Tema HALLOWEEN (clase .adviento--halloween, la pone js/calendario.js) ----------
   Ventanita y día de hoy en naranja; calabazas y calaveras en los días cerrados. */
.adviento--halloween .adviento__ventana:not(.adviento__ventana--pasado) { background: var(--cobre-instagram); }
.adviento--halloween .adviento__codigo strong { color: var(--cobre-instagram); }
.adviento--halloween .dia--hoy { background: var(--cobre-instagram); }
.adviento--halloween .dia--bloqueado svg { color: var(--cobre-instagram); opacity: .8; }
.adviento--halloween .dia--bloqueado:nth-child(even) svg { color: #CFC6BD; opacity: .65; }   /* calaveras color hueso */
.adviento--halloween .dia svg { width: 38px; height: 38px; }   /* calabazas y calaveras más grandes */

/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .adviento__grilla { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  .adviento__ventana { padding: 24px; }
  .adviento__ventana-dia { font-size: 72px; }
  .adviento__ventana-descuento { font-size: 22px; }
  .adviento__dias { grid-template-columns: repeat(var(--columnas-celular, 4), minmax(0, 1fr)); }
  .dia { height: 88px; padding: 10px; }
  .dia__numero { font-size: 26px; }
  .dia__estado { font-size: 9px; }
  .dia svg,
  .adviento--halloween .dia svg { width: 22px; height: 22px; }
}