/* VEE · Pantalla de votante. Pensada para tablets y laptops, sin dependencias externas. */
:root{
  --primario:#0b5cad;
  --tinta:#10203a;
  --suave:#5a6b85;
  --fondo:#e9eef4;
  --hoja:#ffffff;
  --linea:#c4cfdd;
  --ok:#11795a;
  --error:#b42318;
  --info:#1b4f8a;
  --radio:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta);background:var(--fondo);font-size:18px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
body.modal-abierto{overflow:hidden}
h1,h2,h3,p{margin:0}

/* Cabecera institucional */
.marca{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,40px);background:var(--hoja);border-bottom:4px solid var(--primario)}
.marca-logo{width:64px;height:64px;object-fit:contain;flex:none}
.marca-ie{font-size:.95rem;color:var(--suave)}
.marca-titulo{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:700;letter-spacing:-.01em}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(16px,3vw,36px)}
.pantalla{display:none;width:100%;max-width:1040px}
.pantalla.activa{display:block}

/* Hoja de papel: el tablero donde se escribe el DNI */
.hoja{background:var(--hoja);border:2px solid var(--tinta);border-radius:var(--radio);padding:clamp(20px,4vw,44px);max-width:640px;margin:0 auto;text-align:center;box-shadow:6px 6px 0 var(--linea)}
.hoja h2{font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:22px}
.campo-et{display:block;font-size:1rem;color:var(--suave);margin-bottom:8px}
.campo-dni{
  width:100%;font:inherit;font-size:clamp(2.2rem,8vw,3.4rem);font-weight:700;text-align:center;
  letter-spacing:.3em;padding:12px 8px 12px calc(8px + .3em);border:3px solid var(--tinta);border-radius:var(--radio);
  background:#f8fafc;color:var(--tinta);
}
.campo-dni:focus{outline:4px solid #9bbbe0;outline:4px solid color-mix(in srgb,var(--primario) 35%,transparent);border-color:var(--primario)}
.campo-dni:disabled{background:#eceff3;color:var(--suave)}
.campo-dni::placeholder{color:#b6c1d0}
.campo-dni[readonly]{background:#eef3f9}

.aviso{margin:18px 0 0;padding:14px 18px;border-radius:var(--radio);font-weight:600;text-align:left;border-left:6px solid}
.aviso-error{background:#fdecea;color:var(--error);border-color:var(--error)}
.aviso-info{background:#e8f0fb;color:var(--info);border-color:var(--info)}
.aviso-ok{background:#e4f5ee;color:var(--ok);border-color:var(--ok)}

/* Ficha del estudiante */
.ficha{margin-top:24px;padding:20px;border:3px solid var(--primario);border-radius:var(--radio);background:#eef4fb;background:color-mix(in srgb,var(--primario) 7%,#fff)}
.ficha-et{color:var(--suave);font-size:1rem}
.ficha-nombre{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;line-height:1.2;margin:4px 0 6px}
.ficha-grado{font-size:1.2rem;font-weight:600;color:var(--primario)}

.acciones{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.acciones .btn{flex:1 1 220px}
.btn{
  font:inherit;font-size:1.15rem;font-weight:700;min-height:60px;padding:12px 22px;border-radius:var(--radio);
  border:3px solid transparent;cursor:pointer;touch-action:manipulation;
}
.btn:focus-visible{outline:4px solid #7aa6d6;outline:4px solid color-mix(in srgb,var(--primario) 45%,transparent);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primario{background:var(--primario);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-borde{background:#fff;color:var(--tinta);border-color:var(--tinta)}
.btn:active:not(:disabled){transform:translateY(1px)}

/* Cédula */
.cedula-cab{text-align:center;margin-bottom:22px}
.cedula-cab h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.cedula-cab p{color:var(--suave)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tarjeta{display:flex;flex-direction:column;background:var(--hoja);border:2px solid var(--tinta);border-radius:var(--radio);overflow:hidden}
.tarjeta-img{height:clamp(150px,24vh,210px);display:flex;align-items:center;justify-content:center;background:#f3f6fa;border-bottom:2px solid var(--tinta)}
.tarjeta-img img{max-width:100%;max-height:100%;object-fit:contain}
.tarjeta-img.sin-foto{font-size:4.5rem;font-weight:800;color:var(--linea)}
.tarjeta-cuerpo{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px}
.tarjeta-num{align-self:flex-start;min-width:3.2rem;text-align:center;font-weight:800;font-size:1.5rem;border:3px solid var(--tinta);border-radius:6px;padding:0 10px;background:#fff}
.tarjeta-nombre{font-size:1.3rem;font-weight:800;line-height:1.2}
.tarjeta-desc{color:var(--suave);font-size:1rem}
.tarjeta .btn{margin:0 16px 16px;background:var(--primario);color:#fff;font-size:1.3rem;letter-spacing:.04em}
.tarjeta.blanco{border-style:dashed}
.tarjeta.blanco .btn{background:#fff;color:var(--tinta);border-color:var(--tinta)}

/* Modal de confirmación */
.modal{position:fixed;inset:0;background:rgba(16,32,58,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.modal-caja{background:#fff;border:3px solid var(--tinta);border-radius:14px;max-width:560px;width:100%;padding:clamp(18px,4vw,32px);max-height:94vh;overflow:auto}
.modal-caja h2{font-size:clamp(1.4rem,4vw,1.9rem);text-align:center;margin-bottom:18px}
.modal-eleccion{display:flex;align-items:center;gap:16px;padding:16px;border:3px solid var(--primario);border-radius:var(--radio);background:#eef4fb;background:color-mix(in srgb,var(--primario) 7%,#fff)}
.modal-eleccion img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:8px;flex:none}
.modal-num{font-weight:800;color:var(--primario)}
.modal-nombre{font-size:1.5rem;font-weight:800;line-height:1.2}

/* Agradecimiento */
.hoja-gracias .check{width:96px;height:96px;color:var(--ok);margin-bottom:8px}
.hoja-gracias h2{font-size:clamp(1.7rem,5vw,2.4rem);margin-bottom:10px;color:var(--ok)}
.cuenta{margin-top:22px;color:var(--suave)}
.cuenta strong{font-size:1.4rem;color:var(--tinta)}
.barra-tiempo{height:10px;background:var(--linea);border-radius:99px;overflow:hidden;margin-top:12px}
.barra-tiempo span{display:block;height:100%;width:100%;background:var(--ok);transform-origin:left center}
.barra-tiempo span.corre{animation:vaciar var(--t,4s) linear forwards}
@keyframes vaciar{to{transform:scaleX(0)}}

@media (max-width:560px){body{font-size:17px}.marca-logo{width:48px;height:48px}.campo-dni{letter-spacing:.18em}}
@media (prefers-reduced-motion:reduce){.barra-tiempo span.corre{animation-duration:.01s}}