/*
 * Verificador público. Mismos tokens y criterios que el sistema de la app (apps/app/src/estilos/ui.css): barra superior
 * de vidrio, cabecera en el azul de la marca, tarjeta que flota sobre ella y respuesta inmediata al presionar.
 * Se sirve sin JavaScript; la fuente es la del sistema (San Francisco en Apple, Segoe en Windows).
 */
:root{
  --navy:#00204F; --navy-0:#061A3A; --navy-2:#0A2A5E; --navy-3:#123A7A;
  --ink:#0B1B36; --ink-2:#46546F; --ink-3:#69768F;
  --line:#E2E7F0; --bg:#F3F6FB; --surface:#FFFFFF; --borde-campo:#D6DDE8;
  --primary:#1C4FA0; --primary-h:#163F82;
  --accent:#F7480A; --lime:#B9CF3A; --ok:#15803D; --bad:#C62828;
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(0,32,79,.05);
  --shadow:0 2px 6px rgba(0,32,79,.06),0 30px 70px -30px rgba(0,32,79,.42);
  --anillo:0 0 0 4px rgba(28,79,160,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"Inter Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
.ico{display:inline-block;vertical-align:middle;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faint{color:var(--ink-3)} .center{text-align:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:10px;border:1px solid transparent;font:600 13.5px/1.2 var(--font);cursor:pointer;white-space:nowrap;transition:background .18s ease,box-shadow .18s ease,transform .16s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97);transition-duration:80ms} .btn:focus-visible{outline:none;box-shadow:var(--anillo)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(0,32,79,.22),inset 0 1px 0 rgba(255,255,255,.12)} .btn-primary:hover{background:var(--primary-h)}
.btn-lg{min-height:50px;padding:12px 22px;font-size:15px;border-radius:12px}

.pub{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.pub-top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,32,79,.07)}
.pub-top div{max-width:880px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px} .pub-top img{height:40px;display:block} .pub-top .faint{font-size:13px;flex:1}
.pub-logo{display:block;border-radius:8px} .pub-logo:focus-visible{outline:none;box-shadow:var(--anillo)}
.pub-volver{display:inline-flex;align-items:center;gap:7px;min-height:38px;margin-left:auto;padding:8px 14px;border-radius:10px;border:1px solid var(--borde-campo);background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .18s ease,border-color .18s ease,transform .16s var(--ease);-webkit-tap-highlight-color:transparent}
.pub-volver:hover{background:#F8FAFD;border-color:#C3CCDB} .pub-volver:active{transform:scale(.97);transition-duration:80ms} .pub-volver:focus-visible{outline:none;box-shadow:var(--anillo)}
.pub-volver .ico{transition:transform .2s var(--ease)} .pub-volver:hover .ico{transform:translateX(-3px)}
.pub-hero{background:radial-gradient(60% 120% at 50% 130%,rgba(79,219,230,.24),transparent 70%),linear-gradient(130deg,var(--navy-0),var(--navy) 50%,var(--navy-2));color:#fff;padding:56px 24px 92px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.pub-hero::before{content:"";position:absolute;left:-70px;top:-70px;width:240px;height:240px;background:var(--accent);transform:rotate(38deg);border-radius:34px;z-index:-1}
.pub-hero::after{content:"";position:absolute;right:-50px;bottom:-110px;width:200px;height:340px;background:var(--lime);transform:rotate(38deg);border-radius:30px;opacity:.9;z-index:-1}
.pub-hero h1{font-size:34px;font-weight:650;letter-spacing:-.03em;line-height:1.12;max-width:640px;margin:0 auto} .pub-hero p{color:#C9D6EE;margin:12px auto 0;max-width:520px;font-size:15px}
.pub-main{position:relative;z-index:2;max-width:720px;width:100%;margin:-52px auto 40px;padding:0 20px;flex:1}
.vform{display:flex;flex-wrap:wrap;gap:10px;padding:14px}
.vform-l{flex-basis:100%;padding:2px 4px 0;font-size:13px;font-weight:600;color:var(--ink-2)}
.vform input{flex:1;min-width:0;min-height:50px;padding:13px 16px;border:1px solid var(--borde-campo);border-radius:12px;font:600 15px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.vform input:hover:not(:focus){border-color:#C3CCDB} .vform input:focus{border-color:var(--primary);box-shadow:var(--anillo)}
.vform input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.pista{font-size:12.5px;margin-top:12px}
.vres{margin-top:20px;overflow:hidden;animation:aparece .45s var(--ease) both}
.vres-h{display:flex;gap:14px;align-items:center;padding:22px 26px;color:#fff} .vres-h .ico{width:34px;height:34px} .vres-h b{font-size:19px;font-weight:650;letter-spacing:-.015em;display:block} .vres-h span{font-size:13.5px;opacity:.92}
.vres-h.ok{background:linear-gradient(120deg,#11713A,var(--ok))} .vres-h.wait{background:linear-gradient(120deg,#9A4708,#B45309)} .vres-h.off{background:linear-gradient(120deg,#565D69,#6B7280)} .vres-h.no{background:linear-gradient(120deg,#A61F1F,var(--bad))}
.vres-b{padding:24px 26px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px} .vres-b .f.wide{grid-column:1/-1}
.vres-b label{display:block;font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px} .vres-b span{font-size:15px;font-weight:600;color:var(--ink)}
.vres-b .nota{font-weight:400;font-size:14px;color:var(--ink-2)}
.pub-foot{text-align:center;font-size:12.5px;color:var(--ink-3);padding:20px}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}}

/*
 * Cada resultado tiene su propio gesto (solo CSS; con prefers-reduced-motion queda el estado final, sin movimiento):
 * - Válido: el ícono se dibuja y un brillo holográfico de cromo barre la tarjeta en diagonal. Pasar el cursor lo repite.
 * - No encontrado: la tarjeta "niega con la cabeza" (sacudida amortiguada, como una clave equivocada en macOS).
 * - En proceso / límite (reloj): la manecilla da la vuelta y la cabecera muestra franjas en movimiento.
 * - Vencido / error (alerta): el ícono da un par de toques para llamar la atención.
 * - Anulado: el ícono parpadea como una luz que se apaga.
 */
.vres{position:relative;isolation:isolate}
.vres:has(.vres-h.ok)::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:220%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(79,219,230,.22) 44.5%,rgba(255,255,255,.78) 48%,rgba(255,255,255,.9) 49%,rgba(185,207,58,.28) 53%,rgba(247,72,10,.12) 56%,transparent 60%);
  transform:translateX(-56%);
  animation:holo 3.4s cubic-bezier(.45,.05,.25,1) .55s 2 both;
}
.vres:has(.vres-h.ok):hover::after{animation:holo-otra-vez 1.5s cubic-bezier(.45,.05,.25,1) both}
@keyframes holo{0%{transform:translateX(-56%)}48%,100%{transform:translateX(56%)}}
@keyframes holo-otra-vez{from{transform:translateX(-56%)}to{transform:translateX(56%)}}
/* Reflejo tornasolado muy tenue que queda en la cabecera, como la lámina de un cromo */
.vres-h.ok{position:relative;overflow:hidden}
.vres-h.ok::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(79,219,230,.16),transparent 35%,rgba(185,207,58,.16) 65%,rgba(255,255,255,.08));pointer-events:none}
.vres-h.ok>*{position:relative}
.vres-h.ok .ico{animation:sello .7s cubic-bezier(.34,1.56,.64,1) .1s both}
.vres-h.ok .ico path{animation:trazo-arco .7s cubic-bezier(.65,0,.35,1) .2s both}
.vres-h.ok .ico polyline{animation:trazo-check .45s cubic-bezier(.65,0,.35,1) .75s both}
@keyframes sello{from{opacity:0;transform:scale(.5)}}
@keyframes trazo-arco{from{stroke-dasharray:64;stroke-dashoffset:64}to{stroke-dasharray:64;stroke-dashoffset:0}}
@keyframes trazo-check{from{stroke-dasharray:20;stroke-dashoffset:20}to{stroke-dasharray:20;stroke-dashoffset:0}}

.vres:has(.vres-h.no){animation:aparece .45s var(--ease) both,niega .55s ease-out .45s forwards}
@keyframes niega{0%{transform:translateX(0)}15%{transform:translateX(-11px)}30%{transform:translateX(9px)}45%{transform:translateX(-6px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.vres-h.no .ico line{animation:trazo-x .35s ease-out .3s both}
.vres-h.no .ico line+line{animation-delay:.42s}
@keyframes trazo-x{from{stroke-dasharray:9;stroke-dashoffset:9}to{stroke-dasharray:9;stroke-dashoffset:0}}

.vres-h.wait:has(.ico-clock){background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 12px,transparent 12px 24px),linear-gradient(120deg,#9A4708,#B45309);background-size:34px 34px,auto;animation:franjas 1.4s linear infinite}
.ico-clock polyline{transform-box:view-box;transform-origin:12px 12px;animation:manecilla 1.6s cubic-bezier(.65,0,.35,1) .4s 2 both}
@keyframes franjas{to{background-position:34px 0,0 0}}
@keyframes manecilla{to{transform:rotate(360deg)}}
.vres-h.wait .ico-alert{transform-origin:50% 90%;animation:toque 1s ease-in-out .5s 2 both}
@keyframes toque{0%,40%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-5deg)}}

.vres-h.off .ico{animation:se-apaga 1.1s steps(1,end) .4s both}
@keyframes se-apaga{0%{opacity:1}15%{opacity:.25}25%{opacity:.9}40%{opacity:.2}55%{opacity:.7}100%{opacity:.55}}

@media (max-width:900px){.vres-b{grid-template-columns:1fr}}
@media (max-width:560px){
  .pub-top .faint{display:none}
  .vform{flex-direction:column} .vform .btn{width:100%}
  .pub-hero{padding:40px 20px 80px} .pub-hero h1{font-size:26px}
  .pub-hero::before{width:90px;height:90px;left:-58px;top:-58px} .pub-hero::after{width:110px;height:200px;right:-78px;bottom:-130px}
  .vres-b{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:120ms!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .btn:active{transform:none} .vres:has(.vres-h.ok)::after{display:none}
}
@media (prefers-reduced-transparency:reduce){.pub-top{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast:more){:root{--line:#B9C3D4;--ink-2:#2B3852;--ink-3:#46526B;--borde-campo:#8D99AF}}