/* Las ventanas de la versión 2 (2026-10-23, ui/ventanas.js): logros, regalos, premio diario, "mientras no estabas", modos y la
   pestaña "Del día" de la tienda. Mismo papel, tinta y colores que la tienda y las opciones (css/style.css). */
#card.ventana { width: min(40em, 94vw); }
#card.ventana.modos { width: min(30em, 94vw); }
/* 2.1: más ancha, así el título entra en su franja y la X no se sale ("todo roto", el usuario, 24/10). */
#card.ventana.afuera { width: min(38em, 94vw); }
.ventana .body { gap: .8em; }
.ventana .info, .ventana .manana { margin: 0; }
.ventana .manana { text-align: center; font-size: 1.1em; color: var(--texto); padding: .3em .8em .4em; border-radius: .8em; background: #fff; border: .18em solid var(--ink); }
.ventana .manana .ic { width: 1.4em; height: 1.4em; }

/* Logros: una fila por logro, con su dibujo, su nombre, la barra y la cuenta. Los hechos, dorados. */
.logros .filas { display: flex; flex-direction: column; gap: .45em; }
.logros .fila { display: grid; grid-template-columns: 2.6em 1fr 5.2em; align-items: center; gap: .6em; padding: .3em .7em .35em .4em; border-radius: .9em; background: #fff; border: .18em solid var(--ink); box-shadow: 0 .18em 0 var(--ink); color: var(--texto); }
.logros .fila > .ic { width: 2.4em; height: 2.4em; filter: grayscale(.85) opacity(.7); }
.logros .fila.hecho { background: linear-gradient(#fff3b0, #ffd85c); }
.logros .fila.hecho > .ic { filter: none; }
.logros .fila.evento { box-shadow: 0 .18em 0 var(--ink), 0 0 0 .2em #ff9a2b; }
.logros .que b { display: block; font-size: 1.08em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logros .que i { display: block; position: relative; height: .6em; margin-top: .25em; border-radius: .3em; background: #1b174022; overflow: hidden; }
.logros .que i u { position: absolute; inset: 0 auto 0 0; background: var(--barra); }
.logros .cuenta { text-align: right; font-size: 1em; color: var(--suave); white-space: nowrap; }
.logros .cuenta .ic { width: 1.8em; height: 1.8em; }

/* Regalos y premio diario: cajas en grilla. La lista para abrir late; las abiertas quedan apagadas. */
.regalos .grilla, .diario .dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; }
.regalos .caja, .diario .dia { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .45em .35em .5em; border-radius: 1em; background: #fff; border: .22em solid var(--ink); box-shadow: 0 .26em 0 var(--ink); color: var(--texto); text-align: center; }
.regalos .caja > .ic, .diario .dia > .ic { width: 3em; height: 3em; }
.regalos .caja small, .diario .dia small { font-size: .95em; letter-spacing: .05em; color: var(--suave); text-transform: uppercase; }
.regalos .caja .que, .diario .dia .que { font-size: .9em; line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; }
.regalos .caja .que .ic, .diario .dia .que .ic { width: 1.1em; height: 1.1em; }
.regalos .caja .btn, .diario .dia .btn { width: 100%; min-width: 0; font-size: .95em; padding: .15em .3em .25em; }
.regalos .caja.listo, .diario .dia.hoy { background: linear-gradient(#fff6c2, #ffe27a); cursor: pointer; animation: cajaLate 1s ease-in-out infinite; box-shadow: 0 .26em 0 var(--ink), 0 0 1.2em .2em #ffd23a; }
/* 2.1: la tarjeta del día late más despacio y sin girar ("esto se mueve demasiado, que se mueva un poco más lento", video del 23/10). */
.diario .dia.hoy { animation: diaLate 2.2s ease-in-out infinite; }
@keyframes diaLate { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }
/* El lugar de "Mañana: día N" está desde el principio: la ventana no salta al cobrar. */
.ventana .manana.reservado { visibility: hidden; }
@keyframes cajaLate { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg) scale(1.04); } 40% { transform: rotate(3deg) scale(1.04); } 60% { transform: none; } }
.regalos .caja.abierto, .diario .dia.hecho { opacity: .6; }
.regalos .caja.grande, .diario .dia.grande { grid-column: span 2; background: linear-gradient(#e8dcff, #c9b0ff); }
.regalos .caja.grande > .ic, .diario .dia.grande > .ic { width: 3.8em; height: 3.8em; }
.diario .dia.sombra > .ic { filter: brightness(0) opacity(.55); }
.diario .dia.sombra .que { font-size: 1.6em; color: var(--ink); }

/* Mientras no estabas: el número grande. */
.afuera .grande-num { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: 3.4em; color: #fff; }
.afuera .grande-num .ic { width: 1.1em; height: 1.1em; }
.afuera .que { text-align: center; font-size: 1.2em; color: var(--texto); }
.afuera .de { text-align: center; font-size: 1.05em; margin-top: -.5em; color: var(--suave); }
.afuera .ritmo { display: flex; align-items: center; justify-content: center; gap: .4em; font-size: 1.05em; color: var(--texto); padding: .35em .8em .4em; border-radius: .8em; background: #fff; border: .18em solid var(--ink); }
.afuera .ritmo .ic { width: 1.4em; height: 1.4em; flex: none; }

/* Modos nuevos: con candado y lo que piden; abiertos, con la cinta "PRONTO". */
.modos .modo { position: relative; display: flex; align-items: center; gap: .8em; padding: .6em .9em .7em .6em; border-radius: 1em; background: #fff; border: .22em solid var(--ink); box-shadow: 0 .26em 0 var(--ink); color: var(--texto); overflow: hidden; }
.modos .modo > .ic { width: 3.6em; height: 3.6em; flex: none; }
.modos .modo b { display: block; font-size: 1.4em; color: #fff; }
.modos .modo span { display: block; font-size: 1em; }
.modos .modo em { display: block; margin-top: .25em; font-style: normal; font-size: .92em; color: var(--suave); }
.modos .modo em .ic { width: 1.3em; height: 1.3em; }
.modos .modo.cerrado > .ic { filter: grayscale(1) opacity(.6); }
.modos .modo .cinta { position: absolute; right: -2.6em; top: .9em; width: 10em; text-align: center; transform: rotate(32deg); background: #ff3d6e; color: #fff; font-size: .95em; padding: .1em 0 .15em; border-top: .16em solid var(--ink); border-bottom: .16em solid var(--ink); }

/* La tienda del día: fichas más bajas, con lo que da escrito; los botones de video van debajo del de comprar. */
.item.dia { gap: .3em; }
.item.dia .sw { height: 6em; }
.item.dia .sw .ic.grande { width: 4.6em; height: 4.6em; filter: drop-shadow(0 .2em 0 #1b17404d); }
.item.dia .que { font-size: .88em; line-height: 1.2; text-align: center; color: var(--texto); min-height: 2.2em; }
.item.dia .que .ic { width: 1.1em; height: 1.1em; }
.item .btn.video { background: var(--violeta); font-size: .95em; }
.item .btn[disabled] { cursor: default; }
/* Los especiales: no se venden; en vez del precio dicen de dónde salen. */
.item.especial .chapa { background: var(--rosa); color: #fff; font-size: 1.15em; }
.item.especial .origen { font-size: .95em; white-space: normal; line-height: 1.15; }
.item.especial .nm { white-space: normal; font-size: .95em; }
/* La etapa de una mascota que crece: cría, joven o grande. */
.item .etapa { position: absolute; right: .4em; top: 6.6em; z-index: 1; padding: .02em .5em .08em; border-radius: .6em; background: var(--verde); border: .16em solid var(--ink); color: #fff; font-size: 1.1em; }

/* Renacer, cuando todavía no se puede: gris de verdad, no parece activo. */
#hud .boton.gris { filter: grayscale(.9) brightness(.82); }
#hud .boton.gris > u { display: none !important; }

/* En celular de pie, las grillas de regalos y del diario van de a tres. */
@media (max-aspect-ratio: 3/4) { .regalos .grilla, .diario .dias { grid-template-columns: repeat(3, 1fr); } #card.ventana { width: 94vw; } }

/* ---- 2.1: logros que esperan que los reclames ---- */
.logros .fila.cobrar { background: linear-gradient(#fff6c2, #ffe27a); box-shadow: 0 .2em 0 var(--ink), 0 0 .9em .1em #ffd23a; }
.logros .reclamar { flex: none; font-size: 1em; padding: .25em .8em .35em; animation: diaLate 1.4s ease-in-out infinite; }
.logros .premioLogro { display: block; font-size: .85em; line-height: 1.15; color: #8a5200; }
.logros .premioLogro .ic { width: 1.1em; height: 1.1em; }
.ventana .info .porCobrar { font-weight: inherit; color: #e8402a; }