/* MTP · caja y panel del comercio */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
#app{padding-top:16px;padding-bottom:24px}
.esqueleto{height:60vh;border-radius:var(--r2);background:linear-gradient(90deg,var(--arena) 0,var(--arena2) 50%,var(--arena) 100%);background-size:200% 100%;animation:brillo 1.2s infinite}
@keyframes brillo{to{background-position:-200% 0}}
#sucursal{min-height:44px;border:1px solid var(--linea);border-radius:12px;background:var(--hoja);padding:0 10px;max-width:40vw}
.pestanas{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);background:var(--hoja);border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
.pestanas a{display:grid;place-items:center;gap:2px;min-height:64px;text-decoration:none;color:var(--tinta3);font-size:13px}
.pestanas a svg{display:block}
.pestanas a[aria-current="page"]{color:var(--pino)}
.pestanas a[aria-current="page"] b{text-decoration:underline;text-underline-offset:4px}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;background:var(--tinta);color:var(--papel);padding:12px 18px;border-radius:14px;z-index:60;transition:.2s;max-width:calc(100vw - 32px);pointer-events:none}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ── Caja ── */
.caja{display:grid;gap:16px}
.pantalla-monto{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r2);padding:18px 18px 14px;text-align:right}
.pantalla-monto .monto{font:800 clamp(46px,14vw,76px)/1 var(--disp);letter-spacing:-.02em;overflow-wrap:anywhere}
.pantalla-monto .equiv{color:var(--tinta2);margin-top:6px;min-height:24px}
.monedas{display:flex;gap:6px;justify-content:flex-start;margin-bottom:8px}
.monedas button{min-height:40px;min-width:64px;border-radius:10px;border:1px solid var(--linea);background:var(--papel);font-weight:700;cursor:pointer}
.monedas button[aria-pressed="true"]{background:var(--pino);color:var(--sobrePino);border-color:var(--pino)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.teclado button{min-height:clamp(60px,9vh,78px);border-radius:18px;border:1px solid var(--linea);background:var(--hoja);font:700 28px/1 var(--disp);cursor:pointer;touch-action:manipulation}
.teclado button:active{background:var(--arena)}
.concepto{display:flex;gap:8px}
.concepto input{flex:1;min-height:48px;border:1px solid var(--linea);border-radius:12px;background:var(--hoja);padding:0 14px}
.cobrar{min-height:68px;font-size:22px;border-radius:20px}
.recientes{display:none}
.recientes h3{margin:0 0 8px}
.cobro-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer;min-height:56px}
.cobro-item .izq{display:grid}
.cobro-item small{color:var(--tinta3)}
@media (min-width:900px) and (orientation:landscape){
  .caja{grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);align-items:start}
  .recientes{display:block}
}
.sin-red{background:var(--malFondo);color:var(--mal);border-radius:14px;padding:12px 14px;font-weight:700}

/* QR a pantalla completa */
.capa{position:fixed;inset:0;z-index:50;background:var(--papel);display:grid;place-items:center;padding:16px;overflow:auto}
.capa .hoja{width:min(520px,100%);text-align:center;display:grid;gap:12px}
.capa .qr{background:#fff;border-radius:24px;padding:14px;width:min(78vw,380px);margin:0 auto;box-shadow:var(--sombra)}
.capa .qr svg{display:block;width:100%;height:auto}
.capa .monto{font:800 clamp(40px,11vw,60px)/1 var(--disp)}
.capa .cuenta-atras{font:700 22px/1 var(--mono)}
.capa.pagado{background:var(--ok);color:#fff}
.capa.pagado .hoja{gap:18px}
.capa.pagado .check{width:120px;height:120px;border-radius:50%;background:#fff;color:var(--ok);display:grid;place-items:center;font:800 72px/1 var(--disp);margin:0 auto;animation:sello .5s cubic-bezier(.34,1.56,.64,1)}
.capa.pagado .btn-pri{background:#fff;color:#0F3D29}
@keyframes sello{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.capa.recibiendo .qr{opacity:.25}
.capa.vencido .qr{opacity:.15;filter:grayscale(1)}
:root[data-tema="oscuro"] .capa.pagado,.capa.pagado{--ok:#1A6E45}

/* Panel */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r);padding:14px}
.kpi small{color:var(--tinta3)}
.kpi b{display:block;font:800 24px/1.15 var(--disp);margin-top:4px;overflow-wrap:anywhere}
.filtros{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:12px 0}
@media (min-width:860px){.filtros{grid-template-columns:2fr 1fr 1fr 1fr}}
.filtros input,.filtros select{min-height:48px;border:1px solid var(--linea);border-radius:12px;background:var(--hoja);padding:0 12px;width:100%}
.tabla{width:100%;border-collapse:collapse}
.tabla th,.tabla td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea);font-size:15px}
.tabla th{color:var(--tinta3);font-weight:700;font-size:13px}
.linea{list-style:none;padding:0;margin:12px 0;border-left:3px solid var(--linea)}
.linea li{padding:6px 0 6px 14px;position:relative}
.linea li::before{content:"";position:absolute;left:-7px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--pino)}
.seccion{margin:22px 0}
.grid2{display:grid;gap:14px}
@media (min-width:860px){.grid2{grid-template-columns:1fr 1fr}}
dialog{border:0;border-radius:var(--r2);padding:20px;max-width:min(520px,calc(100vw - 32px));background:var(--hoja);color:var(--tinta);box-shadow:var(--sombra)}
dialog::backdrop{background:rgba(0,0,0,.4)}
.docs{display:grid;gap:10px}
.doc{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid var(--linea);border-radius:14px;background:var(--hoja)}
.doc label.btn{cursor:pointer}

/* Cartel del QR del mostrador (A6/A5) */
.cartel{background:#fff;color:#13221B;border-radius:18px;padding:24px;text-align:center;max-width:420px;margin:0 auto;border:1px solid var(--linea)}
.cartel h2{color:#13221B}
.cartel .qr svg{width:100%;height:auto}
@media print{
  body{padding:0}
  body *{visibility:hidden}
  .cartel,.cartel *{visibility:visible}
  .cartel{position:fixed;inset:0;margin:auto;border:0;max-width:none;width:100%;display:flex;flex-direction:column;justify-content:center;padding:10mm}
  .cartel .qr{width:70%;margin:0 auto}
  @page{size:A6;margin:0}
  body.a5 @page{size:A5}
}

#conexion{white-space:nowrap}
#nombre-comercio{display:block;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
#nombre-comercio small{display:block;margin-top:2px}
@media (max-width:640px){.barra #tema,.barra #idioma{display:none}.barra .marca .sello{display:none}#nombre-comercio{max-width:52vw}}