/* =====================================================================
   v2: antifraude, administrador, instalación y animaciones
   ===================================================================== */
.tabs.t3{grid-template-columns:repeat(3,1fr)}
.tabs.t5{grid-template-columns:repeat(5,1fr)}
.tabs.t5 button{font-size:10.5px}
.app-admin .tabs button.on{color:#2B1813}
.app-top.admin{background:linear-gradient(120deg,#2B1813,#4A2A20)}
.app-top.admin div{display:flex;flex-direction:column;line-height:1.15}
.app-top.admin small{opacity:.75;font-size:12px}
.top-esc{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.admin-login .escudo{width:72px;height:72px;margin:6px auto 0;border-radius:22px;background:linear-gradient(140deg,#4A2A20,#2B1813);color:#fff;display:grid;place-items:center;box-shadow:0 16px 30px -16px rgba(43,24,19,.9);animation:flota 3.5s ease-in-out infinite}
.admin-login .escudo .ico{width:36px;height:36px}
@keyframes flota{50%{transform:translateY(-6px)}}
.login>img{animation:flota 3.5s ease-in-out infinite}

/* transiciones entre pantallas */
.app-body.entra>*{animation:entra .42s cubic-bezier(.2,.8,.3,1) both}
.app-body.entra>*:nth-child(2){animation-delay:.04s}.app-body.entra>*:nth-child(3){animation-delay:.08s}.app-body.entra>*:nth-child(4){animation-delay:.12s}.app-body.entra>*:nth-child(5){animation-delay:.16s}.app-body.entra>*:nth-child(n+6){animation-delay:.2s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* tarjeta: brillo, inclinación y golpe del sello */
.cartilla{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease;will-change:transform}
.cartilla::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 62%);background-size:250% 100%;animation:brillo 6s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes brillo{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}
.cartilla.golpe{animation:sacudon .5s .32s ease both}
@keyframes sacudon{20%{transform:translate(-2px,3px) rotate(-.6deg)}45%{transform:translate(2px,-1px) rotate(.4deg)}70%{transform:translate(-1px,1px)}100%{transform:none}}
.sello.nuevo{animation:golpe .62s cubic-bezier(.3,1.5,.5,1) both;z-index:2}
@keyframes golpe{0%{transform:scale(2.6) rotate(-22deg);opacity:0;filter:blur(2px)}45%{transform:scale(.86) rotate(4deg);opacity:1;filter:none}70%{transform:scale(1.08)}100%{transform:scale(1) rotate(0)}}
.sello.nuevo::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #FFD6C2;animation:tinta .7s .28s ease-out both;pointer-events:none}
@keyframes tinta{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}

/* portada: alpacas que se llenan solas */
.demo-cartilla .sello.anim{position:relative;overflow:hidden}
.demo-cartilla .sello.anim img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;background:#FFC9AE;opacity:0;transform:scale(.3);animation:llena 7s calc(var(--i) * .55s) infinite}
@keyframes llena{0%,4%{opacity:0;transform:scale(2) rotate(-15deg)}9%{opacity:1;transform:scale(.9)}12%,82%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}

/* QR vivo */
.qr-vivo{position:relative;width:196px;height:196px;margin:0 auto;display:grid;place-items:center}
.qr-anillo{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qr-anillo circle{fill:none;stroke:var(--suave);stroke-width:3.5}
.qr-anillo .prog{stroke:var(--pri);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.qr-vivo .qr-caja{position:relative}
.qr-renueva{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ok);font-weight:700;margin:8px 0 0;flex-wrap:wrap}
.qr-renueva .ico{width:15px;height:15px}
[data-qr]{display:inline-block}
[data-qr].renueva svg{animation:renueva .5s ease}
@keyframes renueva{0%{opacity:.2;transform:scale(.92) rotateY(80deg)}100%{opacity:1;transform:none}}

/* caja: escáner animado, éxito, alertas */
.scan-anim{grid-row:1/3;position:relative;width:44px;height:44px;display:grid;place-items:center}
.scan-anim .ico{width:44px;height:44px;stroke-width:1.6}
.scan-anim i{position:absolute;left:8px;right:8px;height:2px;background:#fff;border-radius:2px;box-shadow:0 0 8px #fff;animation:escanea 1.8s ease-in-out infinite}
@keyframes escanea{0%,100%{top:10px}50%{top:32px}}
.btn-escanear{position:relative;overflow:hidden}
.btn-escanear::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:barrido 3.2s ease-in-out infinite;pointer-events:none}
@keyframes barrido{60%,100%{transform:translateX(100%)}}
.exito{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.exito svg{width:120px;height:120px;fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 20px 40px -18px rgba(46,139,106,.8);animation:exito 1.1s ease both}
.exito circle{stroke-dasharray:150;stroke-dashoffset:150;animation:traza .5s .05s ease forwards}
.exito path{stroke-dasharray:40;stroke-dashoffset:40;animation:traza .35s .45s ease forwards}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes exito{0%{transform:scale(.5);opacity:0}20%{transform:scale(1.05);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}
.ficha{position:relative}
.alerta.roja{background:#FDECEC;border-color:#F2A3A3;color:#7A1C1C}
.chips.motivos{margin:8px 0 0}
.chips.motivos .chip-btn{font-size:12.5px;padding:7px 11px}
.chips.motivos .chip-btn.on{background:var(--alerta);border-color:var(--alerta)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.premios-caja li.listo{border-color:var(--ok);box-shadow:0 0 0 3px rgba(46,139,106,.12)}
.lector-msg{background:#FDECEC;color:#7A1C1C;font-weight:800;font-size:13.5px;border-radius:12px;padding:10px 12px;margin:10px 0 0}
.sacude{animation:temblor .4s}
.btn-instalar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px dashed var(--texto-2);background:#fff;border-radius:16px;padding:12px 14px;margin-top:16px}
.btn-instalar span{display:flex;flex-direction:column}
.btn-instalar small{color:var(--texto-2);font-size:12.5px}
.pasos-instalar{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:10px}
.pasos-instalar li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:12px;font-size:14px}
.pasos-instalar b{width:28px;height:28px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;flex:none}
a.fila-btn{color:inherit;text-decoration:none}
.lista-motivos{display:grid}
.turno-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.turno-top div{display:flex;flex-direction:column}
.turno-top small{color:var(--texto-2)}
.kpis.tres{grid-template-columns:repeat(3,1fr)}
.kpis.tres .kpi{text-align:center;padding:12px 6px}
.aviso-registro{display:flex;gap:10px;align-items:flex-start;background:#EEF4FF;color:#23395B;border-radius:14px;padding:11px 12px;margin-top:12px;font-size:13px}

/* pedir clave y verificación */
.pedir-pin,.verif{text-align:center}
.pp-ico{width:56px;height:56px;border-radius:18px;background:var(--texto);color:#fff;display:inline-grid;place-items:center;margin-bottom:6px;animation:flota 3s ease-in-out infinite}
.verif .pp-ico{background:#25D366;color:#073B1F}
.pedir-pin h3,.verif h3{margin:6px 0 4px!important}
.pin-dots i{transition:background .15s,transform .15s}
.pin-dots i.on{transform:scale(1.15)}
.pin-dots.ok i{background:var(--ok);border-color:var(--ok);animation:popdot .3s ease both}
@keyframes popdot{50%{transform:scale(1.4)}}
.input-cod{text-align:center;font-size:24px!important;letter-spacing:10px;font-weight:800}
.input-cod::placeholder{letter-spacing:normal;font-size:15px;font-weight:500}

/* registro (auditoría) */
.auditoria{list-style:none;margin:0;padding:0}
.auditoria li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea)}
.auditoria li>div{flex:1;min-width:0;display:flex;flex-direction:column}
.auditoria b{font-size:13.5px;font-weight:700}
.auditoria small{font-size:12px;color:var(--texto-2)}
.auditoria time{font-size:12px;font-weight:800;color:var(--texto-2);min-width:42px;font-family:"IBM Plex Mono",ui-monospace,monospace}
.auditoria li.r1{background:linear-gradient(90deg,#FFF5E8,transparent 70%)}
.auditoria li.r2{background:linear-gradient(90deg,#FDECEC,transparent 70%)}
.auditoria li.r1 time,.auditoria li.r2 time{padding-left:6px}
.auditoria li.anulado b{text-decoration:line-through;opacity:.6}
.auditoria li.dia{display:block;padding:14px 0 6px;font-weight:800;font-size:12.5px;color:var(--texto);border-bottom:0;position:sticky;top:-16px;background:var(--fondo);z-index:1}
.auditoria.compacta li{padding:8px 0}
.av.mini{width:30px;height:30px;font-size:11px}
.tag.rojo{background:#FDECEC;color:#9B1C1C}
.tag.naranja{background:#FFF1E2;color:#8A4B10}
.filtros{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filtros label{display:grid;gap:4px;font-size:12px;font-weight:800;color:var(--texto-2)}
.filtros label.ancho{grid-column:1/-1}
.filtros select,.filtros input{border:1.5px solid var(--linea);background:#fff;border-radius:10px;padding:9px;font-size:14px;width:100%}

/* alertas */
.banner-alerta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:18px;padding:14px;margin-bottom:14px;background:#FFF1E2;color:#6B3A0E;box-shadow:0 10px 26px -18px rgba(0,0,0,.4)}
.banner-alerta.alto{background:linear-gradient(110deg,#C62828,#9B1C1C);color:#fff;animation:latido 2s ease-in-out infinite}
.banner-alerta>span:nth-child(2){flex:1;display:flex;flex-direction:column;font-size:13px;min-width:0}
.banner-alerta b{font-size:15px}
.ba-ico{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.banner-alerta.alto .ba-ico .ico{animation:parpadeo 1.2s ease-in-out infinite}
@keyframes parpadeo{50%{opacity:.35}}
.ico.gira{transform:rotate(180deg)}
.banner-ok{display:flex;gap:10px;align-items:center;background:#E6F4EE;color:#1D5C46;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-weight:700;font-size:14px;list-style:none}
.alertas{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.al{background:#fff;border:1px solid var(--linea);border-left:5px solid #9CA3AF;border-radius:16px;padding:12px 14px;animation:entra .4s calc(var(--i) * .04s) both}
.al.alto{border-left-color:#C62828}
.al.medio{border-left-color:#E08A1E}
.al.revisada{opacity:.55}
.al-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--texto-2);flex-wrap:wrap}
.al-top small{margin-left:auto}
.nivel{font-style:normal;font-weight:800;font-size:11px;border-radius:99px;padding:3px 8px;background:#EFE7E3;color:var(--texto-2)}
.al.alto .nivel{background:#C62828;color:#fff}
.al.medio .nivel{background:#FFE2BF;color:#8A4B10}
.al>b{display:block;margin:6px 0 2px;font-size:15px}
.al>p{margin:0;font-size:13.5px;color:var(--texto-2)}
.al-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.al-acc .chip-btn{font-size:12.5px;padding:7px 10px;display:inline-flex;gap:5px;align-items:center}
.al-acc .chip-btn .ico{width:15px;height:15px}
.chip-btn.ok{border-color:var(--ok);color:var(--ok)}
.chip-btn.peligro{border-color:#E8A3A3;color:#9B1C1C}

/* resumen admin */
.grid-admin{display:grid;gap:0}
.equipo-hoy{list-style:none;margin:0;padding:0}
.equipo-hoy li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--linea);cursor:pointer;font-size:14px;flex-wrap:wrap}
.equipo-hoy li:last-child{border-bottom:0}
.equipo-hoy li>span:nth-child(2){flex:1}
.equipo-hoy small{color:var(--texto-2);font-size:12px}
.barras.crece span{transform-origin:bottom;animation:crece .7s calc(var(--i) * .02s) cubic-bezier(.2,.9,.3,1) both}
@keyframes crece{from{transform:scaleY(0)}}
.sede-barras.crece i{transform-origin:left;animation:creceX .8s calc(var(--i) * .07s) cubic-bezier(.2,.9,.3,1) both}
@keyframes creceX{from{transform:scaleX(0)}}

/* equipo */
.equipo{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.equipo li{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:12px}
.equipo li.inactivo{opacity:.6;background:#F6F1EE}
.eq-top{display:flex;align-items:center;gap:10px}
.eq-top div{flex:1;display:flex;flex-direction:column;min-width:0}
.eq-top small{color:var(--texto-2);font-size:12px}
.eq-top code{font-size:16px;font-weight:700;letter-spacing:3px;background:var(--fondo);padding:4px 8px;border-radius:8px}
.eq-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.eq-stats span{background:var(--fondo);border-radius:10px;padding:6px 4px;text-align:center;font-size:11px;color:var(--texto-2);display:flex;flex-direction:column}
.eq-stats b{font-size:16px;color:var(--texto)}
.eq-stats .naranja{background:#FFF1E2}
.eq-stats .naranja b{color:#8A4B10}
.menu-mas{display:grid;gap:10px}
.menu-mas>*{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--linea);background:#fff;border-radius:16px;padding:14px;text-decoration:none;color:inherit}
.menu-mas span{display:flex;flex-direction:column}
.menu-mas small{color:var(--texto-2);font-size:12.5px}
.volver{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--texto-2);font-weight:800;font-size:13px;padding:0;margin-bottom:6px}
.volver .ico{width:18px;height:18px}
.cantidad{display:flex;align-items:center;justify-content:center;gap:22px;margin:14px 0}
.cantidad button{width:52px;height:52px;border-radius:50%;border:0;background:var(--suave);color:var(--pri-osc);font-size:26px;font-weight:800}
.cantidad b{font-family:var(--disp);font-weight:400;font-size:44px;min-width:40px;text-align:center}
.ficha-admin .auditoria time{min-width:56px;line-height:1.2}

/* panel del administrador a lo ancho (computadora) */
.app-admin{container-type:inline-size}
@container (min-width:760px){
  .app-admin .app-body{padding:22px 28px 100px}
  .app-admin .kpis{grid-template-columns:repeat(4,1fr)}
  .app-admin .grid-admin{grid-template-columns:1fr 1fr;gap:0 14px}
  .app-admin .alertas{grid-template-columns:1fr 1fr}
  .app-admin .filtros{grid-template-columns:repeat(4,1fr)}
  .app-admin .filtros label.ancho{grid-column:auto}
  .app-admin .equipo{grid-template-columns:1fr 1fr}
  .app-admin .menu-mas{grid-template-columns:1fr 1fr}
  .app-admin .tabs{left:50%;right:auto;transform:translateX(-50%);width:min(620px,92%);bottom:12px;border-radius:20px;border:1px solid var(--linea);box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
  .app-admin .btn-wsp{max-width:420px}
  .app-admin .login{max-width:380px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}