/* ============================================================
   SHOW CBA · PEDIDOS — estilos
   Blanco + naranja + negro, motivo "visor de cámara" del logo
   ============================================================ */
:root{
  --naranja:#F0782A; --naranja-2:#FF9A4D; --naranja-osc:#C55A14; --naranja-suave:#FFF2E8;
  --negro:#141414; --gris:#6E6E6E; --gris-2:#A3A3A3; --linea:#ECECEC;
  --fondo:#FFFFFF; --fondo-2:#F8F8F8;
  --verde:#17985A; --verde-osc:#0F6B3E; --rojo:#E0442E; --azul:#2F6FEB;
  --radio:20px; --sombra:0 14px 34px -16px rgba(20,20,20,.28);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--fondo);color:var(--negro);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100vh}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

/* ---------- marca ---------- */
.marca{font-family:'Yellowtail',cursive;color:var(--naranja);font-size:1.9rem;line-height:1;letter-spacing:.3px}
.marca.grande{font-size:3rem}
.logo{width:46px;height:auto;display:block;animation:logo3d 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes logo3d{from{transform:perspective(400px) rotateY(-140deg) scale(.5);opacity:0}to{transform:none;opacity:1}}
.logo-3d{perspective:600px;display:grid;place-items:center}
.logo-3d img{width:120px;animation:girar 7s ease-in-out infinite;filter:drop-shadow(0 18px 18px rgba(240,120,42,.25))}
@keyframes girar{0%,100%{transform:rotateY(-22deg) rotateX(8deg)}50%{transform:rotateY(22deg) rotateX(-6deg)}}

/* ---------- barra superior ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px;
  padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.top .sub{font-size:.8rem;color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:1.5px}
.top .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.chip-mesa{background:var(--negro);color:#fff;border-radius:999px;padding:7px 14px;font-weight:700;font-size:.95rem;white-space:nowrap}
.chip-mesa b{color:var(--naranja-2)}

/* ---------- motivo visor (esquinas del logo) ---------- */
.visor{position:relative}
.visor::before,.visor::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.visor::before{top:9px;left:9px;border-top:3px solid var(--naranja);border-left:3px solid var(--naranja);border-top-left-radius:7px}
.visor::after{bottom:9px;right:9px;border-bottom:3px solid var(--negro);border-right:3px solid var(--negro);border-bottom-right-radius:7px}
.visor:hover::before{transform:translate(-4px,-4px)}
.visor:hover::after{transform:translate(4px,4px)}

/* ---------- botones (con profundidad 3D) ---------- */
.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:700;background:var(--negro);color:#fff;
  box-shadow:0 4px 0 #000;transform:translateY(0);transition:transform .08s,box-shadow .08s,filter .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.btn.n{background:var(--naranja);box-shadow:0 4px 0 var(--naranja-osc)}
.btn.n:active{box-shadow:0 1px 0 var(--naranja-osc)}
.btn.v{background:var(--verde);box-shadow:0 4px 0 var(--verde-osc)}
.btn.v:active{box-shadow:0 1px 0 var(--verde-osc)}
.btn.g{background:#fff;color:var(--negro);border:1.5px solid var(--negro);box-shadow:0 4px 0 var(--negro)}
.btn.g:active{box-shadow:0 1px 0 var(--negro)}
.btn.sm{padding:7px 11px;border-radius:11px;font-size:.9rem}
.btn.ancho{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}
.link{background:none;border:0;color:var(--gris);font-weight:600;padding:6px 8px;border-radius:8px}
.link:hover{color:var(--negro);background:var(--fondo-2)}

/* ---------- chips / pestañas ---------- */
.chips{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1.5px solid var(--negro);background:#fff;border-radius:999px;padding:9px 18px;font-weight:700;white-space:nowrap;
  transition:background .2s,color .2s,transform .2s}
.chip.on{background:var(--negro);color:#fff;transform:translateY(-2px)}
.chip .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:99px;
  background:var(--naranja);color:#fff;font-size:.78rem}

/* ---------- carta (comensal) ---------- */
.hero{padding:22px 16px 6px}
.hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--naranja)}
.hero p{color:var(--gris);margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px;perspective:1100px;padding-bottom:120px}
.prod{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s,opacity .3s}
.prod:hover{box-shadow:0 22px 40px -18px rgba(240,120,42,.45)}
.animar .prod{animation:entra .65s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes entra{from{opacity:0;transform:translateY(30px) rotateX(-40deg) scale(.96)}to{opacity:1;transform:none}}
.prod-emoji{flex:none;font-size:2.3rem;width:66px;height:66px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,var(--naranja-suave) 55%,#FFE0C7 100%);
  box-shadow:inset 0 -6px 12px rgba(240,120,42,.18);transform:translateZ(34px)}
.prod-info{flex:1;min-width:0;transform:translateZ(18px)}
.prod-info h3{font-size:1.05rem;font-weight:700}
.prod-info p{font-size:.85rem;color:var(--gris);margin:2px 0 6px;line-height:1.3}
.prod-info strong{font-size:1.05rem}
.qty{display:flex;align-items:center;gap:8px;transform:translateZ(26px)}
.qty button{width:36px;height:36px;border-radius:50%;border:0;background:var(--negro);color:#fff;font-size:1.25rem;font-weight:700;
  display:grid;place-items:center;transition:transform .12s}
.qty button:active{transform:scale(.88)}
.qty button.add,.qty button[data-mas]{background:var(--naranja)}
.qty span{min-width:18px;text-align:center;font-weight:800}
.prod.agotado{opacity:.45;filter:grayscale(1)}
.tag{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:5px 9px;border-radius:8px;background:var(--fondo-2);color:var(--gris)}
.pop{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{40%{transform:scale(1.25)}}

/* ---------- barra carrito ---------- */
.barra{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;z-index:40;
  background:var(--naranja);color:#fff;border:0;border-radius:20px;padding:15px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 18px 36px -12px rgba(240,120,42,.65),0 5px 0 var(--naranja-osc);font-weight:700;font-size:1.05rem;
  transform:translateY(160%) rotateX(50deg);transition:transform .5s cubic-bezier(.2,.9,.25,1.2)}
.barra.ver{transform:none}
.barra .n{background:#fff;color:var(--naranja);border-radius:10px;min-width:30px;height:30px;display:grid;place-items:center}
.barra .tot{margin-left:auto}

/* ---------- hoja inferior / modal ---------- */
.fondo-modal{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .3s}
.fondo-modal.ver{opacity:1;pointer-events:auto}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:620px;margin:0 auto;background:#fff;border-radius:26px 26px 0 0;
  padding:10px 20px max(20px,env(safe-area-inset-bottom));max-height:88vh;overflow:auto;
  transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.85,.25,1)}
.hoja.ver{transform:none}
.hoja .tirador{width:44px;height:5px;border-radius:9px;background:var(--linea);margin:4px auto 14px}
.hoja h2{font-size:1.4rem;font-weight:800;margin-bottom:12px}
.linea-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--linea)}
.linea-item .e{font-size:1.5rem}
.linea-item .nm{flex:1;font-weight:600}
.linea-item .pr{font-weight:700;min-width:80px;text-align:right}
.total-linea{display:flex;justify-content:space-between;font-size:1.25rem;font-weight:800;padding:14px 0}
.campo{display:block;margin:10px 0}
.campo span{display:block;font-size:.8rem;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.campo input,.campo textarea,.campo select{width:100%;border:1.5px solid var(--linea);border-radius:14px;padding:12px 14px;background:var(--fondo-2);
  outline:none;transition:border-color .2s,background .2s}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--naranja);background:#fff}
.campo textarea{resize:vertical;min-height:60px}

/* ---------- lente (cuenta regresiva) ---------- */
.lente{--s:76px;position:relative;width:var(--s);height:var(--s);flex:none}
.lente svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.lente .pista{stroke:var(--linea)}
.lente .arc{stroke:var(--naranja);transition:stroke-dashoffset 1s linear,stroke .3s;filter:drop-shadow(0 0 4px rgba(240,120,42,.45))}
.lente .vidrio{fill:url(#vidrio)}
.lente .t{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:calc(var(--s) * .2);
  text-shadow:0 1px 2px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.lente .brillo{fill:#fff;opacity:.75}
.lente.tarde .arc{stroke:var(--rojo);filter:drop-shadow(0 0 5px rgba(224,68,46,.6))}
.lente.tarde{animation:latido 1.1s ease-in-out infinite}
.lente.pronto .arc{stroke:var(--verde)}
@keyframes latido{50%{transform:scale(1.07)}}
.lente-listo{--s:76px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--s)*.45);
  background:radial-gradient(circle at 35% 30%,#5BE39A,var(--verde) 70%);box-shadow:0 10px 20px -8px rgba(23,152,90,.6);
  animation:salta 1.4s ease-in-out infinite}
@keyframes salta{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-5px) rotateY(180deg)}}

/* ---------- seguimiento (comensal) ---------- */
.seg{padding:16px;display:grid;gap:14px;max-width:720px;margin:0 auto;padding-bottom:120px;perspective:1100px}
.pedido{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);
  animation:voltea .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes voltea{from{opacity:0;transform:rotateY(-75deg) translateX(-30px)}to{opacity:1;transform:none}}
.pedido.mio{border-color:var(--naranja);box-shadow:0 18px 36px -18px rgba(240,120,42,.5)}
.pedido-top{display:flex;align-items:center;gap:14px}
.pedido-top .quien{flex:1;min-width:0}
.pedido-top .quien b{font-size:1.15rem}
.pedido-top .quien small{display:block;color:var(--gris);font-weight:600;margin-top:2px}
.yo{display:inline-block;background:var(--naranja);color:#fff;font-size:.7rem;font-weight:800;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.items{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:5px}
.items li{display:flex;gap:8px;align-items:baseline}
.items li .c{font-weight:800;color:var(--naranja);min-width:28px}
.pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:16px}
.paso{height:7px;border-radius:9px;background:var(--linea);position:relative;overflow:hidden}
.paso.ok{background:var(--naranja)}
.paso.ahora::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:brilla 1.4s linear infinite}
@keyframes brilla{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.pasos-lbl{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:6px;font-size:.68rem;font-weight:700;color:var(--gris-2);text-transform:uppercase;letter-spacing:.4px}
.pasos-lbl .ok{color:var(--negro)}
.aviso{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--naranja-suave);font-weight:600;font-size:.92rem}
.aviso.rojo{background:#FDECE9;color:var(--rojo)}
.vacio{text-align:center;color:var(--gris);padding:60px 20px}
.vacio .logo-3d img{width:90px}
.vacio h2{color:var(--negro);margin:16px 0 6px}

/* ---------- personal: caja / cocina ---------- */
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--fondo-2);border:1px solid var(--linea);border-radius:14px;padding:6px 12px;font-weight:700;font-size:.9rem;white-space:nowrap}
.stat b{color:var(--naranja);font-size:1.05rem}
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;padding:16px;align-items:start;perspective:1400px}
.col>h2{display:flex;align-items:center;gap:8px;font-size:1rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;margin:4px 4px 12px}
.col>h2 .pt{width:10px;height:10px;border-radius:50%;background:var(--naranja)}
.col>h2 .pt.neg{background:var(--negro)}
.col>h2 .pt.ver{background:var(--verde)}
.col .lista{display:grid;gap:14px}
.grupo{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 16px;box-shadow:var(--sombra);
  animation:voltea .6s cubic-bezier(.2,.8,.2,1) backwards;transition:border-color .3s,box-shadow .3s}
.grupo.alerta{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(224,68,46,.15),var(--sombra)}
.grupo header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.grupo header .m{font-size:1.35rem;font-weight:800}
.grupo header .m small{font-size:.8rem;color:var(--gris);font-weight:600;margin-left:6px}
.grupo header .der{margin-left:auto}
.fila{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px dashed var(--linea)}
.fila:first-of-type{border-top:0}
.fila .izq{flex:1;min-width:0}
.fila .izq b{font-size:1.02rem}
.fila .acc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fila .monto{font-weight:800;margin-right:4px}
.nota{margin-top:6px;font-size:.88rem;background:#FFF8D6;border-radius:8px;padding:5px 8px}
.estado{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;padding:4px 8px;border-radius:7px;background:var(--fondo-2)}
.estado.pendiente{background:#FFF1D6;color:#9A5B00}
.estado.confirmado{background:#E8EEFF;color:var(--azul)}
.estado.preparando{background:var(--naranja-suave);color:var(--naranja-osc)}
.estado.listo{background:#E3F6EC;color:var(--verde-osc)}
.estado.entregado{background:var(--fondo-2);color:var(--gris)}
.estado.rechazado{background:#FDECE9;color:var(--rojo)}
.grupo footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hace{font-size:.85rem;color:var(--gris);font-weight:600}
.vacio-col{border:2px dashed var(--linea);border-radius:var(--radio);padding:34px 16px;text-align:center;color:var(--gris-2);font-weight:600}

/* mesas */
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:16px;perspective:1000px}
.mesa{position:relative;background:#fff;border:1.5px solid var(--linea);border-radius:22px;padding:16px;min-height:170px;
  display:flex;flex-direction:column;gap:6px;transform:rotateX(14deg);transform-origin:bottom;box-shadow:0 18px 0 -10px var(--linea),var(--sombra);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mesa:hover{transform:rotateX(0) translateY(-4px)}
.mesa .num{font-size:2.2rem;font-weight:800;line-height:1}
.mesa .est{font-weight:700;font-size:.85rem}
.mesa .tot{margin-top:auto;font-weight:800;font-size:1.1rem}
.mesa.libre{opacity:.6}
.mesa.esperando{border-color:#F2B23C}
.mesa.cocina{border-color:var(--naranja)}
.mesa.lista{border-color:var(--verde)}
.mesa.comiendo{border-color:var(--negro)}
.mesa .pto{position:absolute;top:16px;right:16px;width:12px;height:12px;border-radius:50%;background:var(--linea)}
.mesa.esperando .pto{background:#F2B23C;animation:latido 1s infinite}
.mesa.cocina .pto{background:var(--naranja)}
.mesa.lista .pto{background:var(--verde);animation:latido 1s infinite}
.mesa.comiendo .pto{background:var(--negro)}

/* carta admin */
.panel{max-width:980px;margin:0 auto;padding:16px;display:grid;gap:16px}
.caja-form{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.caja-form .filas{display:grid;grid-template-columns:110px 80px 1fr 130px;gap:10px}
.caja-form .acciones{display:flex;gap:8px;margin-top:6px}
.tabla{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.tabla h3{padding:14px 18px;background:var(--fondo-2);font-size:.85rem;text-transform:uppercase;letter-spacing:1.5px}
.prod-fila{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--linea)}
.prod-fila .e{font-size:1.6rem;width:36px;text-align:center}
.prod-fila .nm{flex:1;min-width:0}
.prod-fila .nm small{display:block;color:var(--gris)}
.prod-fila .pr{font-weight:800;min-width:90px;text-align:right}
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:#DDD;transition:background .25s;cursor:pointer}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.8,.2,1.3)}
.switch input:checked+span{background:var(--verde)}
.switch input:checked+span::after{transform:translateX(22px)}

/* QR */
.qrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:16px}
.qr-card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px 18px 18px;text-align:center;box-shadow:var(--sombra);break-inside:avoid}
.qr-card .marca{font-size:1.6rem}
.qr-card .qr{display:grid;place-items:center;margin:12px auto;padding:10px;background:#fff}
.qr-card .qr img,.qr-card .qr canvas{width:170px!important;height:170px!important}
.qr-card .mn{font-size:1.6rem;font-weight:800}
.qr-card .mn b{color:var(--naranja)}
.qr-card p{color:var(--gris);font-size:.85rem;margin-top:4px}
.qr-card a{font-size:.75rem;color:var(--gris-2);word-break:break-all}
.barra-acc{display:flex;gap:10px;align-items:center;padding:16px 16px 0;flex-wrap:wrap}
.barra-acc p{color:var(--gris)}

/* cocina */
.p-cocina .grupo{font-size:1.06rem}
.p-cocina .items li{font-size:1.1rem}
.p-cocina .items li .c{font-size:1.15rem}
.resumen{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px 0}
.resumen .r{background:var(--negro);color:#fff;border-radius:12px;padding:8px 12px;font-weight:700;animation:entra .5s backwards}
.resumen .r b{color:var(--naranja-2);margin-right:4px}
.tiempos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tiempos .btn{min-width:54px}
.tiempos input{width:70px;border:1.5px solid var(--linea);border-radius:11px;padding:7px 8px;text-align:center;font-weight:700}
.quien-c{font-weight:800;margin-top:10px;font-size:.92rem;color:var(--gris);text-transform:uppercase;letter-spacing:.8px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 20% 15%,var(--naranja-suave),transparent 45%),radial-gradient(circle at 85% 90%,#F3F3F3,transparent 40%)}
.login-card{background:#fff;width:100%;max-width:360px;border-radius:28px;padding:34px 28px;text-align:center;
  box-shadow:0 30px 60px -25px rgba(20,20,20,.35);border:1px solid var(--linea)}
.login-card h1{font-size:1.1rem;text-transform:uppercase;letter-spacing:3px;color:var(--gris);margin:8px 0 20px}
.login-card input{width:100%;text-align:center;font-size:1.6rem;letter-spacing:8px;font-weight:800;border:1.5px solid var(--linea);
  border-radius:16px;padding:14px;margin-bottom:14px;outline:none;background:var(--fondo-2)}
.login-card input:focus{border-color:var(--naranja);background:#fff}
.error{color:var(--rojo);font-weight:600;min-height:1.3em;margin-top:10px}
.sacude{animation:sacude .4s}
@keyframes sacude{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* inicio */
.inicio{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
.inicio .accesos{display:grid;gap:12px;margin-top:28px;width:min(340px,90vw)}
.inicio .accesos .btn{padding:16px;font-size:1.05rem}
.inicio p{color:var(--gris);margin-top:8px}

/* toast */
.toast{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));z-index:100;background:var(--negro);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:14px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  transform:translate(-50%,-160%) rotateX(60deg);transition:transform .45s cubic-bezier(.2,.9,.25,1.2);max-width:92vw}
.toast.ver{transform:translate(-50%,0)}
.toast.ok{background:var(--verde)}
.toast.mal{background:var(--rojo)}

@media (max-width:640px){
  .caja-form .filas{grid-template-columns:1fr 1fr}
  .top .stats{display:none}
  .hero h1{font-size:1.55rem}
  .grid{grid-template-columns:1fr}
}
@media print{
  .top,.barra-acc,.chips,nav{display:none!important}
  .qrs{grid-template-columns:repeat(3,1fr)}
  .qr-card{box-shadow:none;border:1px solid #ccc}
  [data-vista]:not([data-vista="qr"]){display:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
a.btn{text-decoration:none}
.grupo.visor{padding-bottom:24px}
.grupo.visor footer{margin-right:14px}