/* Identidad Rangel: índigo del logo, rojo de la figura para la acción principal,
   cian de la web para lo informativo. Montserrat en títulos, Atkinson para leer rápido. */
:root{
  --indigo:#362B70; --indigo-900:#221a4d; --indigo-50:#efedf7;
  --rojo:#E1251B; --rojo-50:#fdeceb;
  --azul:#17449E; --cian:#00B9EE; --cian-50:#e3f7fd;
  --verde:#1d7a4f; --verde-50:#e5f4ec; --ambar:#a35b00; --ambar-50:#fdf1df;
  --fondo:#f4f3f8; --papel:#fff; --tinta:#1d1838; --gris:#5f5a78; --linea:#dddae8;
  --t:"Montserrat",Arial,sans-serif; --b:"Atkinson Hyperlegible","Segoe UI",sans-serif; --m:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#e9e7f1;color:var(--tinta);font:16px/1.45 var(--b);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#app{max-width:480px;min-height:100%;margin:0 auto;background:var(--fondo);position:relative;box-shadow:0 0 40px -20px rgba(34,26,77,.4)}
.pantalla{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cian);outline-offset:2px}

.barra{background:var(--indigo);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2}
.barra .t{font:700 17px var(--t)} .barra small{display:block;font-size:13px;opacity:.85}
.crece{flex:1}
.atras{background:none;border:0;color:#fff;font:700 28px/1 var(--t);padding:0 6px 4px 0;cursor:pointer}
.icono-btn{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;padding:6px 10px;font:600 13px var(--t);cursor:pointer}
.cuerpo{padding:16px;flex:1}
.pila{display:flex;flex-direction:column;gap:12px}
.pila-chica{display:flex;flex-direction:column;gap:8px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.boton{border-radius:12px;padding:14px;font:700 15px var(--t);text-align:center;border:0;cursor:pointer;width:100%}
.boton:disabled{opacity:.55;cursor:wait}
.b1{background:var(--rojo);color:#fff} .b2{background:var(--indigo);color:#fff}
.b3{background:var(--papel);color:var(--indigo);border:1.5px solid var(--indigo)}
.grande{padding:22px 14px;font-size:17px}
.chico{width:auto;padding:10px 16px}
.enlace{background:none;border:0;color:var(--azul);font:600 14px var(--t);text-decoration:underline;cursor:pointer;align-self:flex-start;padding:0}

.campo{display:flex;flex-direction:column;gap:3px;background:var(--papel);border:1.5px solid var(--linea);border-radius:12px;padding:8px 12px}
.campo:focus-within{border-color:var(--indigo)}
.campo input,.campo select{border:0;background:transparent;font-size:17px;font-weight:700;padding:2px 0;outline:none;width:100%}
.lbl{font:600 11px var(--t);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.con-ojo{display:flex;align-items:center;gap:8px}
.ojo{background:var(--indigo-50);border:0;border-radius:8px;padding:6px 10px;font:600 12px var(--t);color:var(--indigo);cursor:pointer;flex:0 0 auto}
.enlace.centro{align-self:center}
.buscador{border:1.5px solid var(--linea);border-radius:12px;padding:12px 14px;background:var(--papel);font-size:16px;width:100%}
.buscador:focus{border-color:var(--indigo);outline:none}

.tarj{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:10px 12px}
.item{display:flex;gap:12px;align-items:center}
.item .nom{font:700 14px var(--t);display:block}
.item .der{margin-left:auto;font:800 18px var(--t);color:var(--indigo);font-variant-numeric:tabular-nums}
button.item{width:100%;text-align:left;cursor:pointer}
button.item:hover{border-color:var(--indigo)}
.cod{font:500 12px var(--m);color:var(--gris)}
.foto{width:52px;height:52px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font:800 15px var(--t);color:#fff;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.chip{font:600 11px var(--t);padding:3px 9px;border-radius:99px;white-space:nowrap}
.c-r{background:var(--rojo-50);color:var(--rojo)} .c-a{background:var(--ambar-50);color:var(--ambar)} .c-v{background:var(--verde-50);color:var(--verde)}
.alerta{background:var(--cian-50);border-color:var(--cian)}
.vacio{color:var(--gris);font-size:14px;margin:0}
.aviso{margin:0;font-size:14px;color:var(--verde);min-height:1em}
.aviso.error,.aviso.err{color:var(--rojo)}
.nota-pie{font-size:13px;color:var(--gris);margin:0;text-align:center}

.ingreso{background:var(--papel);justify-content:center;padding:32px 24px;gap:16px}
.logo-grande{width:220px;max-width:70%;margin:0 auto}
.titulo-app{font:700 18px var(--t);color:var(--indigo);text-align:center;margin:0 0 8px}

.oscura{background:#0e0c1f}
.visor{flex:1;position:relative;display:grid;place-items:center;min-height:55vh;overflow:hidden}
.visor video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visor-txt{position:absolute;top:calc(18px + env(safe-area-inset-top));left:56px;right:56px;text-align:center;color:#fff;font:600 14px var(--t);text-shadow:0 1px 4px #000}
.marco{width:72%;max-width:300px;aspect-ratio:5/3;position:relative;border:3px solid var(--cian);border-radius:14px;box-shadow:0 0 0 2000px rgba(14,12,31,.45)}
.laser{position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--rojo);box-shadow:0 0 10px var(--rojo);animation:l 1.6s ease-in-out infinite alternate}
@keyframes l{from{top:20%}to{top:80%}}
@media (prefers-reduced-motion:reduce){.laser{animation:none}}
.cerrar{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer}
.hoja{background:var(--papel);border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.tipos{display:flex;gap:6px;flex-wrap:wrap}
.tipos span{font:500 11px var(--m);background:var(--indigo-50);color:var(--indigo);padding:2px 7px;border-radius:5px}
.fila-form{display:flex;gap:8px}
.fila-form input{flex:1;min-width:0;border:1.5px solid var(--linea);border-radius:12px;padding:10px 12px;font:500 16px var(--m)}

.cant{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cant button{width:48px;height:48px;border-radius:50%;border:2px solid var(--indigo);background:var(--papel);color:var(--indigo);font:700 24px var(--t);cursor:pointer;flex:0 0 auto}
.cant input{text-align:center;font:800 30px var(--t)!important;color:var(--indigo);-moz-appearance:textfield}
.cant input::-webkit-inner-spin-button{-webkit-appearance:none}

.sello{border:2px dashed var(--verde);border-radius:12px;padding:12px;background:var(--verde-50)}
.sello .t{font:800 18px var(--t);color:var(--verde)}
.reg{display:grid;grid-template-columns:78px 1fr;gap:8px 10px;margin:0;font-size:14px}
.reg dt{font:600 11px var(--t);text-transform:uppercase;letter-spacing:.05em;color:var(--gris);padding-top:2px}
.reg dd{margin:0;font-weight:700}

.sedes{border:1.5px solid var(--linea);border-radius:12px;padding:8px 12px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:14px}
.sedes legend{padding:0 4px}
.sedes label,.interruptor{display:flex;align-items:center;gap:8px;cursor:pointer}
.sedes input,.interruptor input{width:18px;height:18px;accent-color:var(--indigo)}
.interruptor{font-weight:700;font-size:14px}

.cargando{position:fixed;inset:auto 0 24px;margin:0 auto;width:max-content;background:var(--indigo-900);color:#fff;padding:8px 16px;border-radius:99px;font:600 13px var(--t);z-index:9}