:root{color-scheme:dark}
*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden}
body{margin:0;min-height:100vh;background:#04151f;color:#eafdff;
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,sans-serif;
  -webkit-text-size-adjust:100%;overflow-x:hidden}
/* Fondo: dos halos que respiran, uno cian y uno azul bandera. Sin imagen: pesa 0 KB y en
   el celular se ve mejor que un JPG de medio mega. */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(70px);
  pointer-events:none;z-index:0}
body::before{width:70vw;height:70vw;top:-25vw;left:-20vw;background:rgba(79,232,255,.20);
  animation:flota 14s ease-in-out infinite}
body::after{width:60vw;height:60vw;bottom:-20vw;right:-15vw;background:rgba(0,114,206,.30);  /* #0072CE */
  animation:flota 18s ease-in-out infinite reverse}
@keyframes flota{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,3vw,0) scale(1.12)}}
.wrap{position:relative;z-index:1;max-width:360px;margin:0 auto;padding:10vh 24px 40px;
  text-align:center}
.logo{width:176px;max-width:64%;height:auto;display:block;margin:0 auto 10px;
  filter:drop-shadow(0 0 18px rgba(79,232,255,.45));animation:entra .7s ease both}
.marca-txt{font-size:22px;font-weight:800;letter-spacing:.22em;margin:0 0 10px}
.sub{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 26px;
  font-size:11px;font-weight:800;letter-spacing:.2em;color:#4fe8ff;
  animation:entra .7s .08s ease both}
.bandera{width:23px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.28);
  flex:none}
.campo{position:relative;margin-bottom:13px;text-align:left;animation:entra .7s ease both}
.campo.uno{animation-delay:.16s}
.campo.dos{animation-delay:.24s}
/* La etiqueta flotante es del LOGIN (.campo). RAÍZ (Pocitos, 6-oct-2026): era `label{…}` a secas
   y este CSS lo heredan todas las pantallas de actas._cabeza: cada <label> de un conteo se iba
   al tope de la página (el «los conté AHORA» y los cuadros de computadoras/pistolas) y no se
   podía tildar ni escribir. Lo vigila tests/test_conteo_label_visible.py. */
.campo label{position:absolute;top:-7px;left:14px;padding:0 6px;background:#04151f;font-size:9.5px;
  font-weight:800;letter-spacing:.16em;color:#93cbd9}
select,input:not([type=checkbox]):not([type=radio]){width:100%;padding:16px 14px;border-radius:14px;font-size:17px;color:#eafdff;
  background:rgba(255,255,255,.06);border:1px solid rgba(79,232,255,.32);text-align:center;
  letter-spacing:.06em;appearance:none;transition:border-color .2s,box-shadow .2s}
/* La lista que ABRE el <select> la dibuja el sistema, no esta página. RAÍZ (Melo, 9-oct-2026):
   en Windows/Chrome salía en blanco con la letra clara del campo (#eafdff) y no se leía ningún
   nombre, sólo el resaltado. Colores explícitos en las opciones + color-scheme oscuro. */
select{color-scheme:dark}
select option{background-color:#04151f;color:#eafdff}
select:focus,input:focus{outline:0;border-color:#4fe8ff;box-shadow:0 0 0 3px rgba(79,232,255,.16)}
input::placeholder{color:rgba(147,203,217,.7);letter-spacing:.3em}
/* Botón con el gusanito de luz recorriendo el borde, como en la web. */
.btn{position:relative;width:100%;margin-top:6px;padding:17px;border:0;border-radius:14px;
  font:800 15px/1 -apple-system,sans-serif;letter-spacing:.14em;color:#04151f;cursor:pointer;
  background:linear-gradient(120deg,#4fe8ff,#7ef0ff 45%,#4fe8ff);overflow:hidden;
  animation:entra .7s .32s ease both;-webkit-tap-highlight-color:transparent}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:gusanito 2.8s ease-in-out infinite}
@keyframes gusanito{0%{left:-60%}55%,100%{left:115%}}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:default}
.hola{margin:0 0 14px;font-size:19px;font-weight:800;letter-spacing:.04em;color:#eafdff;
  animation:entra .6s ease both}
.hola b{color:#4fe8ff}
.cambiar{display:block;margin:5px auto 0;background:none;border:0;color:#93cbd9;
  font:600 11px/1 -apple-system,sans-serif;letter-spacing:.1em;text-decoration:underline;
  cursor:pointer}
.err{margin-top:14px;min-height:20px;font-size:12.5px;font-weight:700;color:#ff6b6b}
.pie{margin-top:32px;font-size:9.5px;letter-spacing:.14em;color:#93cbd9;opacity:.85;
  animation:entra .7s .4s ease both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.card{position:relative;z-index:1;margin:14px;padding:16px;border-radius:16px;
  border:1px solid rgba(79,232,255,.20);
  background:linear-gradient(160deg,rgba(28,104,140,.16),rgba(6,34,50,.42))}
h2{margin:0 0 10px;font-size:11.5px;letter-spacing:.18em;color:#4fe8ff;font-weight:800}
.aviso{padding:10px;border-radius:10px;background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.4);font-size:13px}