/* =====================================================
   login.css — Cobra POS · Auth + Registro multi-paso
   Fuente: auth.jsx + planes.css (exactos)
   ===================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font-family:inherit}

/* ══════════════════════════════════════
   AUTH ROOT — split panel (login + datos + pago + confirm)
   ══════════════════════════════════════ */
.auth-root{width:100%;height:100vh;display:flex;background:#FAFAFB;color:#0F172A;overflow:hidden}

/* ── BRAND PANEL (left) ── */
.brand-panel{
  position:relative;width:46%;max-width:620px;min-width:380px;flex-shrink:0;
  /*  Oscuro (29-ago-2026). Los POS son todos blancos y azules; este fondo es
      lo primero que separa a Cobra de ellos, y además hace que las réplicas
      de las pantallas se lean como pantallas y no como dibujos.  */
  background:#0E1220;
  color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  padding:40px 48px;overflow:hidden}
.bp-blob1{position:absolute;top:-200px;left:-120px;width:620px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,107,255,.34),transparent 66%);z-index:1;pointer-events:none}
.bp-blob2{position:absolute;bottom:-180px;right:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.26),transparent 68%);z-index:1;pointer-events:none}
.bp-logo-row{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.bp-logo-box{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0}
/*  El logo, no una letra. Hasta el 29-ago-2026 estas dos cajas decían «L»:
    la inicial de Lumen POS, la marca vieja. Era lo primero que veía quien
    entraba a comprar Cobra.  */
.bp-logo-box img,.m-logo-box img{width:74%;height:74%;object-fit:contain;display:block}
.bp-logo-name{font-size:15px;font-weight:800;letter-spacing:-.01em}
.bp-logo-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:500}
.bp-mid{position:relative;z-index:2;max-width:420px}
.bp-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.72);margin-bottom:18px}
.bp-headline{font-size:38px;font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0}
.bp-sub{font-size:15px;color:rgba(255,255,255,.82);line-height:1.55;margin:16px 0 34px;max-width:380px}
.bp-feats{display:flex;flex-direction:column;gap:16px}
.bp-feat-row{display:flex;align-items:flex-start;gap:13px}
.bp-feat-ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bp-feat-title{font-size:13.5px;font-weight:700}
.bp-feat-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:1px}
.bp-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:rgba(255,255,255,.7);font-weight:500}
.bp-seal{display:inline-flex;align-items:center;gap:7px}

/* ── FORM PANEL (right) — siempre claro ── */
.form-panel{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto}
.form-card{width:100%;max-width:408px}

/* mobile logo */
.m-logo{display:none;justify-content:center;margin-bottom:18px}
.m-logo-box{width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#5B6BFF,#8B5CF6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}

/* stepper pequeño (datos, pago, confirmado) */
.reg-stepper{display:flex;align-items:center;gap:6px;margin-bottom:22px}
.rs-dot{width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:800;
  border:2px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.rs-dot.done{background:#5B6BFF;border-color:#5B6BFF;color:#fff}
.rs-dot.active{background:transparent;border-color:#5B6BFF;color:#5B6BFF}
.rs-dot.pending{background:transparent;border-color:#CBD5E1;color:#CBD5E1}
.rs-line{flex:1;height:2px;max-width:40px;background:#E2E6EC;border-radius:1px}
.rs-line.done{background:#5B6BFF}

/* form head */
.form-head{margin-bottom:22px}
.form-title{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#0F172A;margin:0}
.form-sub{font-size:13.5px;color:#64748B;margin:6px 0 0;line-height:1.5}

/* Google button */
.btn-google{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;background:#fff;border:1px solid #DCE0E8;border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:700;color:#1F2937;cursor:pointer;
  transition:background .14s,border-color .14s,box-shadow .14s}
.btn-google:hover:not(:disabled){background:#F8FAFC;border-color:#CBD5E1;box-shadow:0 2px 8px -4px rgba(15,23,42,.16)}
.btn-google:disabled{opacity:.6;cursor:default}

/* Los dos atajos, en fila. Heredan del boton de Google todo menos el ancho:
   asi no hay dos definiciones que mantener. */
.btn-social-row{display:flex;gap:10px}
.btn-social-row .btn-google{width:auto;flex:1;min-width:0;gap:8px}
.btn-social-row .btn-google svg{flex-shrink:0}
/* El nombre se recorta antes de que el boton se deforme. */
.btn-social-row .btn-google span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El anillo de foco es el de la marca, no el del navegador: se navega con
   teclado y el contorno gris por defecto no se ve sobre el borde claro. */
.btn-social-row .btn-google:focus-visible{outline:none;border-color:#5B6BFF;
  box-shadow:0 0 0 3px rgba(91,107,255,.14)}
/* En pantalla angosta vuelven a apilarse: dos nombres en 150px no caben. */
@media (max-width:380px){.btn-social-row{flex-direction:column}
  .btn-social-row .btn-google{width:100%}}

/* divider */
.or-divider{display:flex;align-items:center;color:#94A3B8;font-size:11.5px;font-weight:600;margin:18px 0}
.au-dv{flex:1;height:1px;background:#ECEEF2}
.or-text{padding:0 12px}

/* fields */
.field-group{display:flex;flex-direction:column;gap:13px}
.field-label{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:7px}
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.au-field{display:flex;align-items:center;gap:10px;padding:0 13px;
  background:#fff;border:1px solid #E2E6EC;border-radius:11px;transition:border-color .15s,box-shadow .15s}
.au-field:focus-within{border-color:#5B6BFF;box-shadow:0 0 0 4px rgba(91,107,255,.12)}
.au-field.error{border-color:#FCA5A5}
.au-field-ic{color:#94A3B8;display:flex;flex-shrink:0}
.au-field:focus-within .au-field-ic{color:#5B6BFF}
.au-field input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14px;font-weight:500;color:#0F172A;padding:12px 0}
.au-field input::placeholder{color:#A8B0BD;font-weight:400}
.au-eye{border:none;background:none;color:#94A3B8;cursor:pointer;display:flex;padding:4px;flex-shrink:0}
.au-eye:hover{color:#5B6BFF}
.field-hint{font-size:11px;color:#DC2626;margin-top:5px;font-weight:600}

/* checkbox */
.check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:2px}
.au-check{width:20px;height:20px;border-radius:6px;border:1.5px solid #CBD5E1;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  color:#fff;transition:all .12s;margin-top:1px}
.au-check.on{background:#5B6BFF;border-color:#5B6BFF}
.check-label{font-size:12.5px;color:#475569;line-height:1.4}
.au-link{color:#5B6BFF;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}
.au-link:hover{text-decoration:underline}

/* submit */
.au-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;margin-top:4px;background:#5B6BFF;color:#fff;border:none;border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(91,107,255,.6);transition:background .14s}
.au-submit:hover:not(:disabled){background:#4F5BE3}
.au-submit:disabled{opacity:.55;cursor:default;box-shadow:none}
.au-spin{width:18px;height:18px;border-radius:999px;border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:auSpin .7s linear infinite;display:inline-block}
@keyframes auSpin{to{transform:rotate(360deg)}}

.btn-forgot{background:none;border:none;color:#5B6BFF;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.btn-forgot:hover{text-decoration:underline}

.toggle-row{text-align:center;font-size:13px;color:#64748B;margin-top:22px;font-weight:500}
.au-toggle{background:none;border:none;color:#5B6BFF;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-left:6px}
.au-toggle:hover{text-decoration:underline}

.legal-line{font-size:11.5px;color:#94A3B8;margin-top:26px;text-align:center}

/* error banner */
.error-banner{display:none;align-items:center;gap:8px;padding:11px 14px;
  background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;
  font-size:13px;color:#B91C1C;font-weight:500;margin-bottom:16px}
.error-banner.show{display:flex}

/* pago step */
.bank-card{background:#F8FAFC;border:1px solid #E2E6EC;border-radius:14px;padding:18px;margin-top:4px}
.bank-row{display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid #F1F3F7}
.bank-row:last-child{border-bottom:none}
.bank-key{font-size:12px;color:#64748B;font-weight:600}
.bank-val{font-size:14px;font-weight:700;color:#0F172A}
.bank-copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:#5B6BFF;background:#EEF2FF;border:none;padding:4px 10px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .13s}
.bank-copy-btn:hover{background:#C7D2FE}
.bank-monto{font-size:18px;font-weight:800;color:#5B6BFF}

.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:26px 20px;border:2px dashed #C7D2FE;border-radius:14px;cursor:pointer;transition:all .2s;
  margin-top:12px;background:#F8FAFC}
.upload-zone:hover,.upload-zone.dragover{border-color:#5B6BFF;background:#EEF2FF}
.upload-zone.has-file{border-style:solid;border-color:#5B6BFF;background:#EEF2FF}
.upload-ic{width:44px;height:44px;border-radius:14px;background:#EEF2FF;color:#5B6BFF;
  display:flex;align-items:center;justify-content:center}
.upload-text{font-size:13.5px;font-weight:600;color:#475569}
.upload-sub{font-size:11.5px;color:#94A3B8}
.upload-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#5B6BFF}

/* confirmado */
.confirm-ic{width:56px;height:56px;border-radius:18px;
  background:#DCFCE7;border:1px solid #BBF7D0;color:#16A34A;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.confirm-card{background:#F8FAFC;border:1px solid #E2E6EC;border-radius:14px;padding:16px;margin-top:6px}
.confirm-row{display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid #F1F3F7;font-size:13px}
.confirm-row:last-child{border-bottom:none}
.confirm-key{color:#64748B}
.confirm-val{font-weight:700;color:#0F172A}

/* toast */
.auth-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;
  display:none;align-items:center;gap:10px;padding:12px 18px;background:#0F172A;color:#fff;
  border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 14px 34px -10px rgba(15,23,42,.55);white-space:nowrap}
.auth-toast.show{display:flex;animation:toastIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes toastIn{from{transform:translateX(-50%) translateY(12px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* responsive auth */
@media(max-width:880px){
  .brand-panel{display:none}
  .m-logo{display:flex}
  .auth-root{height:auto;min-height:100vh}
  .form-panel{padding:28px 20px;justify-content:flex-start;padding-top:40px}
}

/*  El bloque de PLANES se mudo a styles/planes.css el 30-ago-2026:
    lo usan la pantalla de registro Y la pagina de venta, y tienen que
    verse igual porque son la misma decision de compra.  */


/*  Elegir cómo pagar: número o QR (29-ago-2026).
    Las dos pestañas solo aparecen si hay un QR cargado en la consola; con un
    solo medio, una pestaña sola es un botón que no decide nada.  */
.pay-tabs{display:flex;gap:4px;background:#EEF1F5;border-radius:10px;padding:3px;margin-bottom:14px}
.pay-tab{flex:1;padding:7px 10px;border:none;background:transparent;border-radius:8px;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#64748B;cursor:pointer;
  transition:background .12s,color .12s}
.pay-tab.on{background:#fff;color:#0F172A;box-shadow:0 1px 2px rgba(15,23,42,.1)}
#pay-qr{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 14px}
#pay-qr-img{width:200px;max-width:70%;aspect-ratio:1;object-fit:contain;
  background:#fff;border:1px solid #E2E6EC;border-radius:12px;padding:8px}
.pay-qr-pie{font-size:11.5px;color:#64748B;font-weight:600}

/*  Nombre y apellido en una sola fila: partir el campo no puede costar dos
    renglones más. En pantalla angosta se apilan solos.  */
.field-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){ .field-fila{grid-template-columns:1fr} }

/*  ══ QUE EL QR NO OBLIGUE A BAJAR LA PANTALLA ═════════════════════

    Sergio, 29-ago-2026: al elegir QR *"la página se alarga mucho y se ocultan
    algunas cosas, haciendo obligatorio hacer scroll"*. Y tiene razón: lo que
    se ocultaba era el botón de enviar el comprobante — el paso siguiente.

    El QR se mide contra el ALTO de la ventana (`vh`), no en píxeles fijos: en
    un portátil bajito se encoge solo. Se le pone tope por arriba (240 px) para
    que en una pantalla grande no quede gigante, y por abajo (150 px) para que
    siga siendo escaneable — un QR demasiado pequeño no lo lee ningún teléfono.

    Y mientras se ve el QR, la caja aprieta sus propios márgenes: son los que
    sobran cuando el contenido crece.  */
#pay-qr{padding:4px 0 8px;gap:6px}
#pay-qr-img{
  width:min(200px, 26vh);
  max-width:70%;
  padding:6px;
}
.bank-card:has(#pay-qr:not([hidden])){padding:14px}
.bank-card:has(#pay-qr:not([hidden])) .pay-tabs{margin-bottom:10px}

/*  Respaldo para navegadores sin `:has()`: la clase la pone el JS.  */
.bank-card.con-qr{padding:14px}
.bank-card.con-qr .pay-tabs{margin-bottom:10px}

/*  ══ PORTADA — LAS CUATRO ESCENAS ══════════════════════════════

    Alto FIJO a propósito: si cada escena midiera lo suyo, el panel entero
    daria un salto en cada cambio y se vería como un error, no como una
    animación. Las escenas se apilan una encima de otra y solo cambia cuál se
    ve.

    Todo es HTML: ni una imagen. Esta pantalla la abre un cliente cada mañana
    y no puede costar una sola descarga más.                                */
.bp-escenario{position:relative;height:452px}
.bp-esc{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.bp-esc.on{opacity:1;transform:none;pointer-events:auto}
.bp-esc.saliendo{opacity:0;transform:translateY(-12px)}

.bp-headline em{font-style:normal;color:#A3ADFF}

.bp-puntos{display:flex;gap:7px;margin-top:22px;position:relative;z-index:2}
.bp-punto{width:22px;height:4px;border-radius:99px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:background .25s,width .25s}
.bp-punto:hover{background:rgba(255,255,255,.4)}
.bp-punto.on{background:#A3ADFF;width:34px}

/*  ── La réplica: el marco común de las cuatro ─────────────────────  */
.rp{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:15px;padding:15px;backdrop-filter:blur(2px)}
.rp-cab{display:flex;align-items:center;gap:8px;font-size:11px;color:#7E879B;font-weight:600;
  margin-bottom:11px}
.rp-punto{width:6px;height:6px;border-radius:50%;background:#22C55E;flex-shrink:0}
.rp-chip{background:rgba(91,107,255,.22);color:#A3ADFF;font-weight:700;
  padding:2px 8px;border-radius:99px;font-size:10.5px}

/*  1 · el chat  */
.rp-chat{display:flex;flex-direction:column;gap:8px}
.burb{max-width:82%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.45}
.burb.ellos{background:rgba(255,255,255,.09);border-bottom-left-radius:3px;align-self:flex-start;color:#E4E8F0}
/*  `asis` = el asistente del restaurante. NO se llama Paco: Paco es el
    nombre que Sergio le puso al suyo, y cada restaurante le pone el que
    quiera. Un nombre de clase tambien ensena.  */
.burb.asis{background:#5B6BFF;border-bottom-right-radius:3px;align-self:flex-end;color:#fff}

/*  2 · tomar el pedido  */
.rp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.rp-prod{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:6px;text-align:center}
.rp-prod.on{border-color:#5B6BFF;background:rgba(91,107,255,.16)}
/*  Con foto de verdad desde el 13-sep-2026 (Sergio: «aquí no hay fotos»). Las
    rayas quedan de fondo por si una foto no carga. 40 px y no 26: en una tira
    de 26 no se alcanzaba a ver que plato era.  */
.rp-foto{height:40px;border-radius:6px;margin-bottom:5px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 5px,rgba(255,255,255,.04) 5px 10px);
  background-size:cover;background-position:center}
.rp-prod span{font-size:10px;color:#B9C0CE;font-weight:600;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-linea{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#B9C0CE;
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rp-linea b{color:#fff;font-weight:700}
.rp-total{display:flex;justify-content:space-between;align-items:center;padding-top:9px;
  font-size:12.5px;color:#7E879B;font-weight:600}
.rp-total b{font-size:19px;font-weight:800;color:#A3ADFF;letter-spacing:-.02em}

/*  3 · el cierre de caja  */
.rp-fila{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#B9C0CE;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rp-fila b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.rp-suma{display:flex;justify-content:space-between;align-items:baseline;padding-top:11px}
.rp-suma span{font-size:12.5px;color:#7E879B;font-weight:600}
.rp-grande{font-size:23px;font-weight:800;color:#A3ADFF;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.rp-ok{display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  background:rgba(34,197,94,.14);color:#4ADE80;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:99px}
.rp-ok svg{width:11px;height:11px}

/*  4 · la carta que se arma sola  */
.rp-archivo{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rp-hoja{width:46px;height:58px;border-radius:7px;flex-shrink:0;position:relative;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 5px,rgba(255,255,255,.05) 5px 10px);
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.rp-hoja span{font-family:'DM Mono',ui-monospace,Menlo,monospace;font-size:8px;color:#9AA3B8;
  background:rgba(14,18,32,.75);padding:1px 4px;border-radius:3px}
.rp-flecha{width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:rgba(91,107,255,.2);color:#A3ADFF;display:flex;align-items:center;justify-content:center}
.rp-flecha svg{width:13px;height:13px}
.rp-leyendo{font-size:11.5px;color:#7E879B;font-weight:600}
.rp-salida{display:flex;flex-direction:column;gap:6px}
.rp-item{display:flex;justify-content:space-between;gap:10px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:7px 10px;font-size:11.5px;color:#D2D8E2}
.rp-item b{color:#A3ADFF;font-weight:700;font-size:11px;white-space:nowrap}
/*  Aparecen de a uno, como si los fuera sacando. La escena dura 7 s; el
    ultimo entra a los 0,85 s y queda 6 s a la vista.  */
.bp-esc.on .rp-item{animation:rpEntra .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--t)}
@keyframes rpEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/*  Quien pide menos movimiento no lo recibe: se queda la primera escena
    quieta. `login.js` tambien deja de rotar.  */
@media (prefers-reduced-motion: reduce){
  .bp-esc{transition:none}
  .bp-esc.on .rp-item{animation:none}
}

/*  ── 5 · la ruta del domiciliario ────────────────────────────
    Un mapa de verdad (13-sep-2026, Sergio: «más realista la animación del
    gps»). El dibujo esta en el SVG de login.html; el movimiento es SMIL y lo
    arranca login.js. Aqui solo el marco y la lista de entregas.  */
.mapa{position:relative;aspect-ratio:390/132;border-radius:10px;overflow:hidden;margin-bottom:10px;
  background:#F1F3F4;border:1px solid rgba(255,255,255,.1)}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
/*  Las letras del mapa, al estilo de Google Maps (13-sep-2026, segunda
    version: «debe parecerse más a google maps»).  */
.mapa text{font-family:Roboto,'DM Sans',Arial,sans-serif}
.gm-calle text{font-size:6.2px;font-weight:500;fill:#70757A}
.gm-calle .gm-av{fill:#6D5B1E;font-weight:600}
.gm-agua{font-size:6px;font-style:italic;fill:#3F7FC8;font-weight:500}
.gm-parque{font-size:6.3px;fill:#2E7D46;font-weight:600}
.gm-poi{font-size:6.2px;font-weight:700;fill:#B45309;paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linejoin:round}
.gm-pin-n{font-size:8px;font-weight:800;fill:#fff}
.gm-nav-c{font-size:9px;font-weight:800;fill:#fff}
.gm-nav-h{font-size:6.6px;font-weight:500;fill:#D7F5DF}
.gm-eta{font-size:8.4px;font-weight:800;fill:#1E8E3E}
.gm-km{font-size:7.6px;font-weight:500;fill:#5F6368}
.gps-fila{display:flex;align-items:center;gap:9px;font-size:12px;color:#B9C0CE;
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.gps-n{width:17px;height:17px;border-radius:50%;background:rgba(91,107,255,.22);color:#A3ADFF;
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gps-n.c3{background:rgba(139,92,246,.22);color:#C4B5FD}
.gps-dir{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*  Los dos estados ocupan el MISMO sitio (como en las transferencias): el
    tiempo se va y entra «Entregado» cuando la moto llega a esa parada. El
    estilo normal es el FINAL: entregado.  */
.gps-estado{position:relative;flex-shrink:0;min-width:84px;height:18px;display:flex;align-items:center;justify-content:flex-end}
.gps-eta{position:absolute;right:0;color:#fff;font-weight:700;opacity:0}
.gps-ok{display:inline-flex;align-items:center;gap:4px;background:rgba(34,197,94,.14);color:#4ADE80;
  font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;white-space:nowrap}
.gps-ok svg{width:10px;height:10px}
.bp-esc.on .gps-eta{animation:selloFuera .3s ease both;animation-delay:var(--t)}
.bp-esc.on .gps-ok{animation:selloDentro .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--t)}
@media (prefers-reduced-motion: reduce){
  .bp-esc.on .gps-eta,.bp-esc.on .gps-ok{animation:none}
}

/*  ── 6 · la cocina ───────────────────────────────────  */
.rp-cocina{display:flex;flex-direction:column;gap:7px}
.com{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid #5B6BFF;border-radius:9px;padding:7px 10px}
.com.lista{border-left-color:#22C55E;opacity:.72}
.com.tarde{border-left-color:#EF4444}
.com-t{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:3px}
.com-t b{font-size:12px;font-weight:700;color:#fff}
.com-reloj{font-size:11px;color:#7E879B;font-weight:700;font-variant-numeric:tabular-nums}
.com-reloj.rojo{color:#F87171}
.com-ok{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#4ADE80}
.com-ok svg{width:10px;height:10px}
.com-l{font-size:11px;color:#9AA3B8;line-height:1.45}
.bp-esc.on .com{animation:rpEntra .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--t)}

/*  ── 7 · los puntos ─────────────────────────────────  */
.pt-cab{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.pt-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5B6BFF,#8B5CF6);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;color:#fff}
.pt-nom{font-size:13px;font-weight:700;color:#fff}
.pt-tel{font-size:10.5px;color:#7E879B;margin-top:1px}
.pt-num{margin-left:auto;text-align:right;line-height:1}
.pt-num b{display:block;font-size:21px;font-weight:800;color:#A3ADFF;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pt-num span{font-size:10px;color:#7E879B;font-weight:600}
.pt-barra{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.pt-barra i{display:block;height:100%;width:82.6%;border-radius:99px;
  background:linear-gradient(90deg,#5B6BFF,#8B5CF6)}
.bp-esc.on .pt-barra i{animation:llenar 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes llenar{from{width:0}to{width:82.6%}}
.pt-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:9px;
  font-size:11px;color:#9AA3B8}
.pt-pie b{color:#fff;font-weight:700}
.pt-gano{background:rgba(34,197,94,.14);color:#4ADE80;font-weight:800;font-size:10px;
  padding:2px 8px;border-radius:99px}

@media (prefers-reduced-motion: reduce){
  .bp-esc.on .com,.bp-esc.on .pt-barra i{animation:none}
}

/*  ── 8 · las transferencias confirmandose ───────────────────────  */
.rp-pagos{display:flex;flex-direction:column;gap:7px}
.pago{display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:7px 10px}
.pago-banco{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#C7CEDB;
  background:rgba(255,255,255,.08);border-radius:5px;padding:3px 6px;flex-shrink:0;
  white-space:nowrap}
.pago-banco.nequi{background:rgba(219,0,133,.18);color:#F49BD0}
.pago-detalle{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pago-detalle b{font-size:12.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.pago-detalle span{font-size:10.5px;color:#7E879B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pago-sello{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;
  background:rgba(34,197,94,.14);color:#4ADE80;font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:99px;white-space:nowrap}
.pago-sello svg{width:10px;height:10px}

/*  Los dos sellos ocupan el MISMO sitio: si se turnaran en el flujo, la fila
    cambiaria de ancho al confirmarse y daria un tiron.  */
.pago-doble{position:relative;margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;min-width:92px;height:19px}
.pago-espera{position:absolute;right:0;background:rgba(255,255,255,.08);color:#9AA3B8;
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;opacity:0}
.pago-sello.tarde{position:absolute;right:0;margin-left:0}
.bp-esc.on .pago-espera{animation:selloFuera .5s ease both;animation-delay:1.5s}
.bp-esc.on .pago-sello.tarde{animation:selloDentro .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:1.9s}
@keyframes selloFuera{from{opacity:1}to{opacity:0}}
@keyframes selloDentro{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

.bp-esc.on .pago{animation:rpEntra .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--t)}

@media (prefers-reduced-motion: reduce){
  .bp-esc.on .pago,.bp-esc.on .pago-espera,.bp-esc.on .pago-sello.tarde{animation:none}
  .pago-espera{opacity:0}
}

/*  ══ EL INTERRUPTOR GENERAL DE ANIMACIONES ══════════════════════

    Lo pone `login.js` cuando comprueba que el navegador NO está dibujando
    cuadros (pestaña de fondo, vista incrustada, el .exe en cierto estado).

    Por qué hacía falta uno general: la primera red miraba la OPACIDAD, y así
    cazaba los platos y las comandas — pero no la ruta del mapa, que se anima
    con el trazo, ni la barra de puntos, que se anima con el ancho. La ruta se
    quedaba dibujada a medias, que parece un error de la página.

    Con las animaciones apagadas, cada pieza cae a su estilo normal, y todos
    los estilos normales están escritos en su estado FINAL: la ruta completa,
    la barra llena, el sello en «Confirmado». Se pierde el movimiento, nunca
    lo que se veía.                                                          */
.sin-animacion .bp-esc,
.sin-animacion .bp-esc *{animation:none !important}