/* Rimac Town: pantallas públicas. Sale del diseño de interfaz móvil (mesa 1080x1920) y se adapta a la altura real del teléfono. */
@font-face{font-family:"Rimac Display";src:url(/fonts/rimac-display.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"BR Sonoma";src:url(/fonts/br-sonoma-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BR Sonoma";src:url(/fonts/br-sonoma-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --navy:#2D3250; --panel:rgba(45,50,80,.94); --morado:#944793; --naranja:#EA602A;
  --amarillo:#F7AA3D; --rojo:#E42C3D; --rojo-osc:#C41F30; --blanco:#fff; --borde:#FCF9F8;
  --verde:#4FD08F; --txt-campo:#2D3250;
  --fuente:"Rimac Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;     /* lo importante: títulos, nombres, botones, números */
  --texto:"BR Sonoma",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;          /* lo secundario: textos de apoyo (manual RIMAC) */
  --lw:min(70vw,300px,38dvh);             /* ancho del logo: manda la altura en teléfonos bajos */
  --solape:calc(var(--lw) * .31);          /* cuánto del logo cae sobre el panel (como en el diseño) */
  --gap:clamp(8px,1.8dvh,18px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body.town{margin:0;min-height:100dvh;overflow:hidden;font:400 16px/1.35 var(--fuente);color:var(--blanco);background:#4c9fd0 url(/img/rimac-town-fondo.webp) center top/cover no-repeat fixed;touch-action:manipulation}
a{color:var(--amarillo)}
img{max-width:100%}

.pantalla{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.logo{display:block;width:var(--lw);height:auto;margin:0 auto;position:relative;z-index:2;flex:none;filter:drop-shadow(0 6px 10px rgba(20,24,50,.35))}
.panel{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--gap);margin-top:calc(var(--solape) * -1);padding:calc(var(--solape) + var(--gap)) clamp(14px,4.4vw,22px) clamp(14px,2.4dvh,22px);background:var(--panel);border:3px solid var(--borde);border-radius:clamp(22px,6vw,30px);box-shadow:0 14px 34px rgba(20,24,50,.45);animation:entra .4s cubic-bezier(.2,.8,.2,1) both}
.panel>*{flex:none}
.panel .crece{flex:1 1 auto;min-height:0}

h1,h2{margin:0;font-weight:400;line-height:1.1;text-align:center;color:var(--amarillo)}
h1{font-size:clamp(1.55rem,4.4dvh,2.1rem)}
h2{font-size:1.2rem}
.sub{margin:0;text-align:center;color:var(--amarillo);font-size:clamp(.95rem,2.5dvh,1.15rem);line-height:1.3}
.sub.claro{color:var(--blanco);font-size:clamp(.82rem,2dvh,.95rem)}

/* caja morada con el campo del DNI */
.caja{background:var(--morado);border-radius:16px;padding:clamp(12px,2dvh,18px);display:flex;flex-direction:column;gap:clamp(8px,1.6dvh,14px)}
label.campo{font-size:1.05rem;line-height:1}
input.dni{width:100%;min-height:clamp(48px,7dvh,58px);padding:6px 14px;border:0;border-radius:14px;background:var(--naranja);color:var(--txt-campo);font:400 clamp(1.4rem,3.6dvh,1.8rem)/1 var(--fuente);letter-spacing:.14em;text-align:center;font-variant-numeric:tabular-nums;outline:none}
input.dni::placeholder{color:rgba(45,50,80,.55);letter-spacing:.14em}
input.dni:focus-visible{box-shadow:0 0 0 3px var(--blanco)}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:clamp(.76rem,1.9dvh,.86rem);line-height:1.3;cursor:pointer}
.acepto a{color:var(--blanco);text-decoration:underline;text-underline-offset:2px}
.ayuda{margin:0;min-height:1.1em;text-align:center;font-size:.8rem;color:var(--amarillo)}

/* casillas: cuadradas, blancas, con visto que aparece */
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:7px;background:var(--blanco);display:grid;place-content:center;cursor:pointer;transition:background-color .15s,transform .12s}
input[type=checkbox]:checked{background:var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat}
input[type=checkbox]:disabled{cursor:default}
input[type=checkbox]:disabled:checked{background-color:var(--verde)}
input[type=checkbox]:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* botones: rojo centrado como en el diseño, con zona táctil de 48px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:min(60%,200px);min-height:clamp(46px,6.4dvh,54px);padding:8px 26px;margin:0 auto;border:0;border-radius:14px;background:var(--rojo);color:var(--blanco);font:400 clamp(1.05rem,2.7dvh,1.25rem)/1 var(--fuente);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .15s,opacity .15s}
.btn:hover{background:var(--rojo-osc)}
.btn:active:not([disabled]){transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.sec{background:transparent;border:2px solid var(--blanco);padding-block:6px}   /* el diseño usa borde rojo; blanco cumple el contraste (3:1) sobre el azul */
.btn.sec:hover{background:rgba(255,255,255,.1)}
.btn.cargando{pointer-events:none;opacity:.85}
.btn.cargando::before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:giro .7s linear infinite}
.fila-botones{display:flex;gap:10px;justify-content:center}
.fila-botones>*{flex:1 1 0}
.fila-botones .btn{min-width:0;padding-inline:10px;font-size:clamp(.95rem,2.4dvh,1.1rem)}
.fila-botones form,.fila-botones form .btn{display:flex;width:100%}
.btn.ancho{min-width:0;width:100%}

/* avisos */
.aviso{border-radius:14px;padding:10px 14px;font-size:.92rem;line-height:1.3;background:rgba(247,170,61,.16);border:2px solid var(--amarillo);color:var(--blanco);animation:entra .3s ease both}
.aviso.mal{background:rgba(228,44,61,.22);border-color:var(--rojo)}
.aviso strong{display:block;font-weight:400;color:var(--amarillo)}

/* lista de la familia: filas moradas */
.lista{display:grid;gap:clamp(6px,1.2dvh,10px);align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.fila{display:flex;align-items:center;gap:12px;min-height:clamp(54px,7.6dvh,66px);padding:8px 14px;background:var(--morado);border-radius:14px;cursor:pointer;transition:transform .12s,box-shadow .15s;animation:entra .3s ease both}
.fila:active:not(.ya){transform:scale(.985)}
.fila:has(input:checked:not(:disabled)){box-shadow:0 0 0 3px var(--amarillo)}
.fila.ya{opacity:.8;cursor:default}
.fila .nom{font-size:clamp(.95rem,2.3dvh,1.05rem);line-height:1.15;overflow-wrap:anywhere}
.fila .rol{font-size:.8rem;opacity:.92}
.fila .ok{margin-left:auto;font-size:.74rem;color:var(--amarillo);white-space:nowrap;text-align:right}
.grupo-t{margin:4px 0 0;font-size:1rem;color:var(--amarillo);text-align:left}

/* pase */
.pase{display:flex;flex-direction:column;gap:clamp(6px,1.4dvh,12px);min-height:0;flex:1 1 auto}
.pase .quien{margin:0;text-align:center;font-size:clamp(1.15rem,3dvh,1.5rem);line-height:1.15;overflow-wrap:anywhere}
.pase .dnix{margin:0;text-align:center;color:var(--amarillo);font-size:.95rem}
.pase .cuantos{background:var(--morado);border-radius:16px;padding:clamp(6px,1.4dvh,12px) 12px;text-align:center;animation:pop .5s .15s cubic-bezier(.2,1.4,.4,1) both}
.pase .cuantos b{display:block;font-weight:400;font-size:clamp(2.4rem,7dvh,3.6rem);line-height:1;color:var(--amarillo);font-variant-numeric:tabular-nums}
.pase .cuantos span{font-size:.95rem}
.pase .frase{font-size:.78rem;opacity:.9}
.pase .quienes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;overflow-y:auto;min-height:0;flex:1 1 auto}
.pase .quienes li{display:flex;gap:8px;align-items:center;justify-content:space-between;min-height:clamp(28px,4.2dvh,38px);padding:4px 12px;border-radius:10px;background:rgba(148,71,147,.55);font-size:.86rem}
.pase .quienes .n{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pase .quienes .r{flex:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;opacity:.9}
.pase .hora{text-align:center;font-size:clamp(1.1rem,2.8dvh,1.35rem);font-variant-numeric:tabular-nums;color:var(--amarillo)}
.mensaje{margin:0;padding:10px 12px;border-radius:12px;background:rgba(247,170,61,.16);border:2px solid var(--amarillo);text-align:center;font-size:.9rem;line-height:1.3}

/* declaración y textos largos */
.texto-legal{overflow-y:auto;min-height:0;font-size:.95rem;line-height:1.5}
.texto-legal p{margin:0 0 1em}

/* tipografía: Rimac Display arriba (importante), BR Sonoma abajo (texto de apoyo) */
.acepto,.texto-legal,.sub.claro{font-family:var(--texto);font-weight:400}
.fila .rol,.fila .ok,.aviso,.mensaje,.ayuda,.pase .frase,.pase .cuantos span,.pase .quienes .r{font-family:var(--texto);font-weight:600}
.acepto{font-size:clamp(.8rem,2dvh,.9rem);line-height:1.35}
.sub.claro{font-weight:600}
.aviso strong{font-family:var(--fuente)}

@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes giro{to{transform:rotate(360deg)}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* pase y familias grandes: el logo se achica para dejar sitio a la lista */
body.compacto{--lw:min(46vw,190px,23dvh)}
/* teléfonos muy bajos: la lista del pase pasa a dos columnas para que quepan 5 personas */
@media (max-height:650px){.pase .quienes.denso{grid-template-columns:repeat(2,minmax(0,1fr))}.pase .quienes.denso .r{display:none}.pase .frase{display:none}.mensaje{padding:6px 10px;font-size:.82rem}}
@media (max-height:600px){:root{--lw:min(60vw,240px,32dvh)}.sub.claro{display:none}}
@media (min-width:700px){body.town{overflow:auto}.pantalla{height:auto;min-height:100dvh;justify-content:center;padding-top:24px}.panel{flex:none}.lista,.pase .quienes{overflow:visible}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* el DNI ingresado: marcado y fijo */
.fila.fija{cursor:default}
.fila.fija input{pointer-events:none}

/* textos legales: se leen completos, así que aquí scrollea la página entera en vez de una caja interna */
body.lectura{overflow:auto}
body.lectura .pantalla{height:auto;min-height:100dvh}
body.lectura .panel{flex:none}
body.lectura .texto-legal{overflow:visible}