/* ------------------------------------------------------------------
   VIDRIO · la capa «Liquid Glass» de Amigoted (28-oct-2026)
   Copia la muestra aprobada por Luis: herramientas/muestras/botones-glass.html
   Se carga DESPUÉS de estilos.css y de los mod-*.css: solo cambia cómo se ve.
   No cambia ids, data-* ni textos. Las clases viejas que pintan los scripts
   se ven como las de la muestra:
     .btn.linea  → vidrio        .btn.primario → primario con brillo
     .sello.verde → aldia        .sello.ambar  → atraso
     .sello.gris  → sinplan      .sello.azul   → porconf
   Vidrio con desenfoque solo en lo que flota (cabecera, barra de abajo,
   botón flotante, menú, hojas). Sobre fondos lisos el botón de vidrio lleva
   el mismo color, brillo y sombra, sin backdrop-filter: se ve igual y no le
   cuesta al Android de gama baja.
------------------------------------------------------------------- */
:root{
  --vidrio: rgba(255,255,255,.58);
  --vidrio-borde: rgba(255,255,255,.75);
  --vidrio-sombra: 0 8px 24px rgba(23,19,65,.12), 0 1.5px 4px rgba(23,19,65,.08);
  --vidrio-barra: rgba(255,255,255,.74);  /* muestra: .62; más opaco para que la lista de atrás no compita con las etiquetas */
  --fondo-app:#f7f6fc;
  --tarjeta-sombra: 0 1px 2px rgba(23,19,65,.06), 0 6px 18px rgba(23,19,65,.05);
  --tarjeta-borde: rgba(23,19,65,.06);
  --gris-sello:#5a5a66;
  --ui:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* altura de lo que flota abajo en el teléfono (barra + margen) */
  --abajo-barra: calc(82px + env(safe-area-inset-bottom));
}

/* Lo que un script esconde con «hidden» se esconde de verdad: el display de
   .btn, .chip y .navtab le ganaba al atributo (antes de hoy Andrea veía «Cobrar»). */
.btn[hidden],.chip[hidden],.navtab[hidden],.cab-sec[hidden]{display:none !important}

/* ================= botones (la familia de la muestra) ================= */
.btn{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:0 1.15rem;border-radius:999px;border:0;
  font:600 .95rem/1.1 var(--ui);letter-spacing:.005em;cursor:pointer;
  position:relative;isolation:isolate;text-align:center;
  transition:transform .09s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.btn:active:not([aria-disabled="true"]):not(:disabled){transform:scale(.97)}
.btn:focus-visible{outline:3px solid rgba(72,57,255,.45);outline-offset:2px;border-radius:999px}
.btn.mini{min-height:36px;padding:0 .9rem;font-size:.84rem;border-radius:999px}
@media (pointer:coarse){ .btn.mini{min-height:44px} }

/* Vidrio (lo que antes era .btn.linea) */
.btn.linea,.btn.vidrio{
  color:var(--tinta);border:0;
  background:var(--vidrio);
  box-shadow:var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-borde), inset 0 0 0 1px rgba(255,255,255,.35);
}
.btn.linea::before,.btn.vidrio::before{
  content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;z-index:-1;
}

/* Primario: el azul con brillo de vidrio. Uno solo por pantalla. */
.btn.primario{
  color:#fff;background:linear-gradient(180deg,#5b4dff 0%, var(--azul) 55%, #3b2bf0 100%);
  box-shadow:0 8px 20px rgba(72,57,255,.35), 0 1.5px 4px rgba(23,19,65,.2), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.primario::before{
  content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:999px 999px 40% 40%;
  background:linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));pointer-events:none;
}
.btn.primario.mini{box-shadow:0 4px 12px rgba(72,57,255,.30), 0 1px 3px rgba(23,19,65,.18), inset 0 1px 0 rgba(255,255,255,.45)}

/* Terciario: solo texto */
.btn.fantasma{background:transparent;color:var(--azul-osc);padding:0 .8rem;box-shadow:none}
.btn.fantasma.mini{padding:0 .6rem}
/* Lo que no tiene vuelta atrás: vidrio con tinta roja (si un script lo marca) */
.btn.cuidado{color:var(--rojo)}
.btn.redondo{width:44px;padding:0}
.btn.grande{min-height:52px;font-size:1.05rem;padding:0 1.5rem}

@media (hover:hover) and (pointer:fine){
  .btn.linea:hover,.btn.vidrio:hover{background:rgba(255,255,255,.75);border-color:transparent;color:var(--tinta)}
  .btn.primario:hover{background:linear-gradient(180deg,#4f41ff 0%, var(--azul-osc) 100%)}
  .btn.fantasma:hover{background:rgba(72,57,255,.08)}
}

/* Deshabilitado que dice por qué (aria-disabled + data-porque) */
.btn:disabled,.btn[aria-disabled="true"]{
  background:#eceaf2 !important;color:#5f5977 !important;box-shadow:none !important;cursor:not-allowed;opacity:1
}
.btn.primario:disabled,.btn.primario[aria-disabled="true"]{background:#e4e1fb !important;color:#4b4590 !important}
.btn:disabled::before,.btn[aria-disabled="true"]::before{display:none}
.btn.fantasma:disabled,.btn.fantasma[aria-disabled="true"]{background:transparent !important}
.btn[aria-disabled="true"][data-porque]::after{
  content:attr(data-porque);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);white-space:nowrap;max-width:min(80vw,22rem);overflow:hidden;text-overflow:ellipsis;
  font:500 .8rem/1.3 var(--ui);color:#fff;background:rgba(23,19,65,.92);
  padding:.45rem .65rem;border-radius:10px;opacity:0;pointer-events:none;z-index:5;
  transition:opacity .15s ease-out, transform .15s ease-out;
}
.btn[aria-disabled="true"][data-porque]:hover::after,.btn[aria-disabled="true"][data-porque]:focus-visible::after,
.btn[aria-disabled="true"][data-porque]:active::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* Cargando dentro del mismo botón (el giro lo ponen los módulos en ::after) */
.btn[data-cargando]{color:transparent !important;pointer-events:none}
.btn[data-cargando]::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:vidrio-gira .7s linear infinite
}
.btn.linea[data-cargando]::after,.btn.fantasma[data-cargando]::after,
#sec-ventas .btn.linea[data-cargando]::after,#hoja .btn.linea[data-cargando]::after,.inv-form .btn.linea[data-cargando]::after{
  border-color:rgba(72,57,255,.25);border-top-color:var(--azul)
}
@keyframes vidrio-gira{to{transform:rotate(360deg)}}

/* Botones sobre azul (portada, avisos oscuros): vidrio claro sobre color */
.puerta-empresa .btn{background:var(--vidrio);color:var(--azul-noche);box-shadow:var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-borde)}
#venta-aviso .btn.linea,.cobro-aviso-flota .btn{background:rgba(255,255,255,.92);color:var(--azul-noche);box-shadow:inset 0 1px 0 #fff}

/* ================= chips (selección) ================= */
.chip{
  -webkit-tap-highlight-color:transparent;
  min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  font:600 .84rem/1.1 var(--ui);padding:0 .95rem;border-radius:999px;border:0;color:var(--tinta-2);
  background:var(--vidrio);
  box-shadow:0 2px 8px rgba(23,19,65,.08), inset 0 1px 0 var(--vidrio-borde), inset 0 0 0 1px rgba(23,19,65,.08);
  transition:transform .09s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{
  background:rgba(72,57,255,.12);color:var(--azul-osc);
  box-shadow:inset 0 0 0 1.5px rgba(72,57,255,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
@media (hover:hover) and (pointer:fine){ .chip:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.85);color:var(--tinta)} }
@media (pointer:coarse){ .chip{min-height:44px} }

/* ================= sellos (no son botones) ================= */
/* El punto va pintado en el fondo: así la primera letra puede ir en mayúscula
   y el resto en minúscula aunque el script lo mande en MAYÚSCULAS. */
.sello{
  --sello-fondo:#ececf2;
  display:inline-block;white-space:nowrap;border:0;transform:none;
  font:600 .78rem/1 var(--ui);letter-spacing:0;font-variant-numeric:tabular-nums;
  padding:.4rem .65rem .4rem 1.3rem;border-radius:999px;
  text-transform:lowercase;
  color:var(--gris-sello);
  background:radial-gradient(circle at .7rem 50%, currentColor 0 3.5px, transparent 4px) no-repeat, var(--sello-fondo);
}
.sello::first-letter{text-transform:uppercase}
.sello.verde,.sello.aldia{color:var(--verde);--sello-fondo:#e3f4ea}
.sello.ambar,.sello.atraso{color:var(--ambar);--sello-fondo:#fbefd6}
.sello.gris,.sello.sinplan{color:var(--gris-sello);--sello-fondo:#ececf2;border-style:none}
.sello.azul,.sello.porconf{color:var(--azul-osc);--sello-fondo:#e9e7ff}
.sello.rojo{color:var(--rojo);--sello-fondo:#fbe9e7}
/* en tablas y filas densas, un punto más chico para que no se corte */
.tabla .sello,.fila-cuota .sello,.venta-fila .sello,.cobro-fila .sello{font-size:.74rem;padding:.34rem .55rem .34rem 1.15rem;
  background:radial-gradient(circle at .6rem 50%, currentColor 0 3px, transparent 3.5px) no-repeat, var(--sello-fondo)}
/* Donde el sello trae un nombre propio («· Yilbher», «de Yilbher») se deja tal cual */
#sello-caja .sello,.panel>header h3 .sello{text-transform:none}
.panel>header h3 .sello{vertical-align:.1em;margin-left:.35rem}
@media (prefers-reduced-motion:no-preference){
  .sello.estampado{animation:vidrio-sello .22s ease-out}
  @keyframes vidrio-sello{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
}

/* ================= etiquetas: sin mayúsculas con espaciado ================= */
.estado-cuenta header h3{font:700 1rem/1.2 var(--ui);letter-spacing:-.01em;text-transform:none;color:var(--tinta)}
.tabla th{font:600 .78rem/1.2 var(--ui);letter-spacing:0;text-transform:none;color:#6b6b77}
.tarjeta-cuota .fila-sello .titulo{font:600 .8rem/1.2 var(--ui);letter-spacing:0;text-transform:none;color:#6b6b77}
.titulo-grupo{font:700 .9rem/1.2 var(--ui);letter-spacing:-.005em;text-transform:none;color:var(--tinta)}
.inv-bloque h4{font:700 .92rem/1.2 var(--ui);letter-spacing:-.005em;text-transform:none;color:var(--tinta)}
.art .aviso{font:600 .74rem/1.25 var(--ui);letter-spacing:0;text-transform:none}
.etiqueta-cuenta{font-weight:600;font-size:.78rem;letter-spacing:0;text-transform:none}
.nivel-insignia .chip-nivel{font-size:.74rem;font-weight:700;letter-spacing:0;text-transform:none}
.cta-cifra .concepto{letter-spacing:0;text-transform:none}

/* ================= superficies ================= */
#vista-empresa{
  min-height:100vh;
  background:
    radial-gradient(40rem 28rem at 12% 0%, #e6e2ff 0%, transparent 60%),
    radial-gradient(34rem 26rem at 92% 6%, #ffe9f3 0%, transparent 60%),
    var(--fondo-app);
}
.panel,.estado-cuenta{background:#fff;border:1px solid var(--tarjeta-borde);border-radius:20px;box-shadow:var(--tarjeta-sombra)}
.estado-cuenta header{background:#fff;border-bottom:1px solid var(--linea)}
.panel>header{border-bottom-color:var(--linea)}
.filas-resumen>div{border-color:var(--linea)}
.aviso-franja{border:0;border-radius:20px;background:rgba(72,57,255,.08);box-shadow:inset 0 0 0 1px rgba(72,57,255,.18)}
/* Un solo primario por pantalla: el de la franja va en vidrio */
.aviso-franja .btn.primario{color:var(--tinta);background:var(--vidrio);box-shadow:var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-borde)}
.aviso-franja .btn.primario::before{background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0))}
.campo-buscar input,.form-inline input,.form-inline select,.simulador select{min-height:44px;border-radius:12px}
.campo-buscar input{background:#fff}
.enc-seccion h2{font-weight:700;letter-spacing:-.025em}

/* ================= cabecera de vidrio ================= */
/* El desenfoque va en ::before y no en .topbar: un backdrop-filter en .topbar
   volvería «relativo» al botón flotante de Cobrar, que vive adentro. */
.topbar{background:transparent;border-bottom:0;isolation:isolate;z-index:45}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(247,246,252,.74);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.dato-tasa{color:#6b6b77}
.dato-tasa strong{color:var(--tinta-2);font-weight:600}

/* La banda de secciones: vidrio arriba en escritorio */
.navtab .navtab-icono{display:none}
.navbanda{background:transparent;isolation:isolate;z-index:44}
.navbanda::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--vidrio-barra);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 8px 24px rgba(23,19,65,.06), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(23,19,65,.06);
  -webkit-mask-image:linear-gradient(#000 85%, rgba(0,0,0,.92));mask-image:linear-gradient(#000 85%, rgba(0,0,0,.92));
}
.navbanda .interior{gap:.25rem;padding:.45rem .9rem}
.navtab{
  -webkit-tap-highlight-color:transparent;
  color:#5d5d69;font:600 .9rem/1 var(--ui);padding:.6rem .9rem;border:0;border-radius:999px;
  transition:transform .09s ease-out, background-color .15s ease-out;
}
.navtab:active{transform:scale(.95)}
.navtab[aria-selected="true"]{color:var(--azul-osc);background:rgba(72,57,255,.10);border-bottom-color:transparent}
@media (hover:hover) and (pointer:fine){ .navtab:hover{color:var(--tinta)} .navtab[aria-selected="true"]:hover{color:var(--azul-osc)} }
.navtab .conteo{background:rgba(72,57,255,.12);color:var(--azul-osc);font-weight:700}
.navtab[aria-selected="true"] .conteo{background:var(--azul);color:#fff}

/* Las secciones que van en «Más» y los atajos del Inicio solo existen en el teléfono */
.cab-secciones,.acciones-inicio{display:none}

/* ================= tres cifras (teléfono) ================= */
.cta-avance{height:8px;border-radius:99px;background:#eeedf6;margin-top:10px;overflow:hidden}
.cta-avance i{display:block;height:100%;background:var(--azul);border-radius:inherit}
@media (max-width:700px){
  .cta-tres:not([hidden]){gap:12px;margin:0 0 6px}
  .cta-cifra{background:#fff;border:0;border-radius:22px;padding:16px 18px;box-shadow:var(--tarjeta-sombra);gap:0}
  .cta-cifra .concepto{font:600 .8rem/1 var(--ui);color:#6b6b77}
  .cta-cifra b{font:700 2rem/1.1 var(--ui);letter-spacing:-.03em;margin:8px 0 4px;font-variant-numeric:tabular-nums}
  .cta-cifra .ctx{font-size:.88rem;color:var(--tinta-2);line-height:1.4}
}

/* ================= expediente del cliente ================= */
.exp-cab .quien h2{font-weight:700;font-size:1.55rem;letter-spacing:-.02em}
.exp-cab .quien h2 .sello{vertical-align:.25em;margin-left:.3rem}
.exp-cab>div:last-child{gap:.6rem !important;align-items:center}
.cobro-exp{border:0;border-radius:20px;background:#fff;box-shadow:var(--tarjeta-sombra);padding:.9rem 1.1rem}
.cobro-exp .cobro-rotulo{font-weight:600;color:#6b6b77}
.cta-bloques{gap:.85rem}
.cta-equipo{border:1px solid var(--linea);border-radius:18px;padding:.95rem 1rem .85rem;gap:.55rem;box-shadow:0 1px 2px rgba(23,19,65,.04)}
.cta-equipo>header b{font-weight:650;font-size:.95rem;letter-spacing:-.005em}
.cta-equipo>header .sello{margin-top:-.1rem}
.cta-tres-datos dt{color:#6b6b77}
.cta-tres-datos dd{font-weight:650;font-variant-numeric:tabular-nums}
.cta-barra{height:6px;background:#eeedf6}
.cta-linea{border-radius:12px;padding:.55rem .7rem}
.cta-linea.porconfirmar{border:1px dashed var(--linea-fuerte)}
.ficha-credito .concepto,.filas-resumen .concepto{color:#6b6b77}
#clientes-exp .fila-cuota{border-bottom:1px solid var(--linea)}
#clientes-exp>.filas-resumen{background:#fff;border:1px solid var(--tarjeta-borde);border-radius:20px;box-shadow:var(--tarjeta-sombra);overflow:hidden}
/* «Más» solo existe en el teléfono (el display de .btn le ganaba a estilos.css) */
.btn.cab-menu-boton{display:none}
#clientes-exp .fila-cuota .desc b{font-weight:650}

/* ================= venta y borrador ================= */
.venta-form input,.venta-input-grande,.venta-dejo-pago select,.venta-parte-fila select{min-height:46px;border-radius:12px}
.venta-dejo-pago{border:0;border-radius:16px;background:rgba(72,57,255,.06);box-shadow:inset 0 0 0 1px rgba(72,57,255,.12)}
.venta-sug-op{border-radius:14px;border:1px solid var(--linea);min-height:48px}
.venta-guardar{min-height:52px;font-size:1.05rem}
.venta-origen{border-radius:14px}
.venta-parte,.venta-falta,.venta-anticipo{border-radius:14px}
.venta-fila{border-bottom:1px solid var(--linea)}
/* El vendedor: botones de vidrio que se eligen */
#venta-f-vendedor .chip,#vp-vendedor .chip{min-height:44px;padding:0 1.1rem;font-size:.92rem}

/* ================= hojas deslizantes: vidrio con velo ================= */
.fondo-hoja{background:rgba(23,19,65,.32)}
.hoja{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border-radius:28px 28px 0 0;
  box-shadow:0 -12px 40px rgba(23,19,65,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
.hoja .asa{background:rgba(23,19,65,.18);width:40px;height:5px}
.hoja .cab-hoja{border-bottom-color:rgba(23,19,65,.08)}
.hoja .cab-hoja h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.hoja .cerrar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:1.35rem;color:var(--tinta-2);
  background:rgba(23,19,65,.06);transition:transform .09s ease-out}
.hoja .cerrar:active{transform:scale(.95)}
@media (pointer:coarse){ .hoja .cerrar{width:44px;height:44px} }
.hoja input,.hoja select{min-height:44px;border-radius:12px;background:#fff}
.hoja .dato-pago{border-radius:14px;background:rgba(72,57,255,.06);border-color:rgba(72,57,255,.10)}
/* nunca vidrio sobre vidrio: dentro de la hoja, botones y chips llenos */
.hoja .btn.linea,.hoja .chip:not([aria-pressed="true"]),.cab-menu .btn.linea{background:#fff}
.hoja .res-cobro{border-radius:14px;border-width:1px}

/* ================= avisos: arriba, sin tapar botones ================= */
#toast{
  top:calc(10px + env(safe-area-inset-top));bottom:auto;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(23,19,65,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:16px;padding:.7rem 1.1rem;font-size:.9rem;line-height:1.4;
  box-shadow:0 10px 30px rgba(23,19,65,.25);
  transition:opacity .2s ease-out, transform .2s ease-out;
}
#toast{width:max-content;max-width:min(calc(100vw - 32px),520px)}
#toast.visible{transform:translateX(-50%) translateY(0)}
/* si ya está arriba el aviso con «Ver venta», el otro baja debajo de él */
body:has(#venta-aviso.visible) #toast{top:calc(4.4rem + env(safe-area-inset-top))}
#venta-aviso{border-radius:16px;background:rgba(23,19,65,.94)}
.cobro-aviso-flota{border-radius:16px;background:rgba(23,19,65,.94)}

/* ================= TELÉFONO (≤ 640 px) ================= */
@media (max-width:640px){
  #vista-empresa{background:var(--fondo-app)}
  main.lienzo{padding:1.1rem 18px calc(var(--abajo-barra) + 84px)}
  .enc-seccion{margin-bottom:1rem}
  .enc-seccion h2{font-size:1.7rem;line-height:1.1}
  .enc-seccion .fecha{font-size:.95rem}

  /* --- cabecera compacta: logo · tasa · Más --- */
  .topbar{position:sticky;top:0;flex-wrap:nowrap;padding:12px 16px;gap:10px}
  .topbar::before{-webkit-mask-image:linear-gradient(#000 85%, transparent);mask-image:linear-gradient(#000 85%, transparent)}
  .topbar .marca .oso{height:26px}
  .topbar .marca .word{height:13px}
  .topbar .lado{width:auto;flex:1;min-width:0;justify-content:flex-end;gap:10px;flex-wrap:nowrap}
  .topbar .lado>.dato-tasa{margin-right:0;margin-left:auto;text-align:right}
  #dato-tasa{display:flex;flex-direction:column-reverse;align-items:flex-end;font:500 .7rem/1.25 var(--ui);color:#6b6b77}
  #dato-tasa strong{font:600 .8rem/1.15 var(--ui);color:var(--tinta-2)}
  #dato-tasa .tasa-ref{order:-1;font-size:.66rem}   /* con column-reverse, -1 la deja abajo: tasa, «Tasa Binance de hoy», BCV */
  #dato-dia{display:none}
  #venta-btn-borrador,#btn-vender-ya{display:none}
  .btn.cab-menu-boton{display:inline-flex;width:44px;min-height:44px;padding:0;flex:none}
  .cab-menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cab-menu-boton svg{width:20px;height:20px}

  /* el menú «Más»: vidrio flotante */
  .cab-menu{
    right:12px;top:calc(100% - 4px);min-width:15rem;padding:.55rem;gap:.15rem;border:0;border-radius:20px;
    background:rgba(255,255,255,.80);
    -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:0 14px 40px rgba(23,19,65,.20), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5);
  }
  .cab-menu #quien-entro{order:-2;padding:.45rem .6rem .55rem;border-bottom:1px solid rgba(23,19,65,.08);margin-bottom:.2rem}
  .cab-secciones{display:flex;flex-direction:column;order:-1;padding-bottom:.3rem;margin-bottom:.25rem;border-bottom:1px solid rgba(23,19,65,.08)}
  .cab-menu .btn{justify-content:flex-start;width:100%;min-height:44px;border-radius:14px;padding:0 .7rem;font-size:.95rem}
  .cab-menu .btn.linea{box-shadow:none;background:transparent}
  .cab-menu .btn.linea::before{display:none}
  .cab-menu .btn.fantasma{color:var(--azul-osc)}
  .cab-sec{color:var(--tinta) !important}
  .cab-sec svg{width:20px;height:20px;color:#5d5d69}
  @media (hover:hover) and (pointer:fine){ .cab-menu .btn:hover{background:rgba(72,57,255,.08)} }
  /* cada sección de «Más» solo si su rol la ve (equipo.js esconde la pestaña) */
  #vista-empresa:has(.navtab[data-sec="conciliar"][hidden]) .cab-sec[data-sec-ir="conciliar"],
  #vista-empresa:has(.navtab[data-sec="riesgo"][hidden]) .cab-sec[data-sec-ir="riesgo"],
  #vista-empresa:has(.navtab[data-sec="admin"][hidden]) .cab-sec[data-sec-ir="admin"]{display:none}
  #vista-empresa:has(.navtab[data-sec="conciliar"][hidden]):has(.navtab[data-sec="riesgo"][hidden]):has(.navtab[data-sec="admin"][hidden]) .cab-secciones{display:none}

  /* --- la barra de abajo: vidrio flotante al alcance del pulgar --- */
  .navbanda{
    position:fixed;top:auto;left:14px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));
    height:64px;border-radius:32px;z-index:44;
    background:var(--vidrio-barra);
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 10px 30px rgba(23,19,65,.18), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.4);
  }
  .navbanda::before{display:none}
  .navbanda .interior{height:100%;display:flex;align-items:center;justify-content:space-around;gap:0;padding:0 6px;overflow:visible}
  .navtab{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    font:600 .68rem/1 var(--ui);color:#5d5d69;padding:8px 6px;border-radius:22px;min-width:58px;flex:1 1 0;max-width:76px
  }
  .navtab .navtab-icono{display:block;width:22px;height:22px}
  .navtab[aria-selected="true"]{color:var(--azul);background:rgba(72,57,255,.10)}
  .navtab .conteo{position:absolute;top:2px;left:calc(50% + 6px);margin:0;padding:.1rem .32rem;font-size:.6rem;line-height:1.1;
    background:var(--azul);color:#fff;border-radius:99px;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
  .navtab .conteo[hidden]{display:none}
  /* el orden de la muestra; las de menos uso van en «Más» */
  .navtab[data-sec="inicio"]{order:1}
  .navtab[data-sec="clientes"]{order:2}
  .navtab[data-sec="cobranza"]{order:3}
  .navtab[data-sec="ventas"]{order:4}
  .navtab[data-sec="inventario"]{order:5}
  .navtab[data-sec="conciliar"],.navtab[data-sec="riesgo"],.navtab[data-sec="admin"]{display:none}
  /* finanzas (Andrea) solo tiene Conciliación: sin barra */
  /* sin barra solo si el rol no tiene ninguna de sus pestañas (finanzas); el vendedor la tiene sin Inicio (29-oct) */
  .navbanda:has(.navtab[data-sec="inicio"][hidden]):has(.navtab[data-sec="ventas"][hidden]):has(.navtab[data-sec="caja"][hidden]){display:none}
  #vista-empresa:has(.navtab[data-sec="inicio"][hidden]):has(.navtab[data-sec="ventas"][hidden]):has(.navtab[data-sec="caja"][hidden]) main.lienzo{padding-bottom:3rem}

  /* --- el botón principal flota encima de la barra --- */
  #btn-cobrar-ya{
    position:fixed;right:22px;bottom:calc(var(--abajo-barra) + 14px);z-index:46;
    min-height:52px;font-size:1.05rem;padding:0 1.5rem;
  }
  #btn-cobrar-ya,.exp-cab [data-cobrar-cli]{box-shadow:0 8px 20px rgba(72,57,255,.35), 0 1.5px 4px rgba(23,19,65,.2), inset 0 1px 0 rgba(255,255,255,.45)}
  #btn-cobrar-ya svg,.exp-cab [data-cobrar-cli] svg{width:18px;height:18px}
  #btn-cobrar-ya .atajo{display:none}
  /* el vendedor no cobra: su botón principal es «Borrador» */
  .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador:not([hidden]){
    display:inline-flex;position:fixed;right:22px;bottom:calc(var(--abajo-barra) + 14px);z-index:46;
    min-height:52px;font-size:1.05rem;padding:0 1.5rem;
    color:#fff;background:linear-gradient(180deg,#5b4dff 0%, var(--azul) 55%, #3b2bf0 100%);
    box-shadow:0 8px 20px rgba(72,57,255,.35), 0 1.5px 4px rgba(23,19,65,.2), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador::before{inset:1px 1px 52% 1px;background:linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0))}
  .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador svg{width:18px;height:18px}
  .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador .atajo{display:none}
  /* en Ventas el principal es «Guardar»/«Formalizar»: no flota otro */
  #vista-empresa:has(#sec-ventas.activa) #btn-cobrar-ya,
  #vista-empresa:has(#sec-ventas.activa) .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador{display:none}
  /* con el aviso de «Deshacer» abajo, el botón flotante se aparta */
  body:has(.cobro-aviso-flota.visible) #btn-cobrar-ya{opacity:0;pointer-events:none}
  .cobro-aviso-flota{bottom:calc(var(--abajo-barra) + 10px)}

  /* --- Inicio: atajos de vidrio debajo de las cifras (como la muestra) --- */
  .acciones-inicio{display:flex;gap:10px;margin:18px 0 22px}
  .acciones-inicio .btn{flex:1}
  .acciones-inicio .btn svg{width:18px;height:18px}
  #vista-empresa:has(#btn-vender-ya[hidden]) .acciones-inicio{display:none}
  /* si «Borrador» ya flota (vendedor), aquí no se repite */
  #vista-empresa:has(#btn-cobrar-ya[hidden]) .acciones-inicio [data-reenvia="venta-btn-borrador"]{display:none}

  /* --- expediente: una columna, «Cobrar» flota donde siempre --- */
  .exp-cab{flex-direction:column;align-items:stretch;gap:.8rem}
  .exp-cab .quien h2{font-size:1.45rem}
  .exp-cab>div:last-child{display:grid !important;grid-template-columns:1fr 1fr}
  .exp-cab>div:last-child .btn{width:100%;min-height:44px;font-size:.9rem;padding:0 .7rem}
  .exp-cab [data-cobrar-cli]{
    position:fixed;right:22px;bottom:calc(var(--abajo-barra) + 14px);z-index:46;
    width:auto !important;min-height:52px !important;font-size:1.05rem !important;padding:0 1.5rem !important;
  }
  #vista-empresa:has(#sec-clientes.activa #clientes-exp:not([hidden]) .exp-cab [data-cobrar-cli]) #btn-cobrar-ya{display:none}
  body:has(.cobro-aviso-flota.visible) .exp-cab [data-cobrar-cli]{opacity:0;pointer-events:none}
  .cobro-exp{flex-direction:column;align-items:stretch;gap:.7rem}
  .cobro-exp-acc{margin-left:0}
  .cobro-exp-acc .btn{flex:1}
  .filas-resumen>div{padding:.9rem 1rem}

  /* --- venta: «Guardar borrador» fijo abajo, encima de la barra --- */
  /* overflow:hidden del .panel volvía al panel el contenedor del sticky: con clip se recorta igual y el botón sí se pega abajo */
  #venta-panel-form{overflow:clip}
  .venta-guardar-barra{
    bottom:calc(var(--venta-kb,0px) + var(--abajo-barra));
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border-top:0;box-shadow:0 -1px 0 rgba(23,19,65,.06);
  }
  /* mientras se escribe en el borrador, lo que flota se aparta */
  body:has(#venta-form :focus) .navbanda,
  body:has(#venta-form :focus) #btn-cobrar-ya,
  body:has(#venta-form :focus) #venta-btn-borrador{display:none !important}
  body:has(#venta-form :focus) .venta-guardar-barra{bottom:var(--venta-kb,0px)}
}

/* ================= app del cliente ================= */
#vista-cliente{background:var(--fondo-app)}
.cliente-marco{background:var(--fondo-app)}
.cliente-cab .saludo h2{font-weight:700;letter-spacing:-.025em}
.tarjeta-cuota{border:0;border-radius:22px;box-shadow:var(--tarjeta-sombra);padding:16px 18px}
.tarjeta-cuota .monto-grande{font-weight:700;letter-spacing:-.03em}
#vista-cliente .panel{border-radius:22px}
/* la cuota del corte primero, el botón de pagar al lado */
#pest-inicio #tarjeta-cuota{order:-3}
#pest-inicio .acciones-cliente{order:-2}
#pest-inicio #cli-falta-total{order:-1}
.acciones-cliente{gap:10px}
#btn-pagar-prox{min-height:52px;font-size:1.05rem}
#btn-wa-tienda{min-height:52px}
/* en el teléfono, pagar a todo lo ancho y «Escribir a la tienda» debajo, en vidrio */
@media (max-width:480px){ .acciones-cliente{grid-template-columns:1fr} #btn-wa-tienda{min-height:48px} }
/* en la app el atraso siempre en ámbar, nunca en rojo */
#vista-cliente .sello.rojo{color:var(--ambar);--sello-fondo:#fbefd6}
.crono li.mora .punto{border-color:var(--ambar);box-shadow:0 0 0 3.5px var(--ambar-tinte)}
.art{border:0;border-radius:18px;box-shadow:var(--tarjeta-sombra)}
.art .lamina{border-radius:14px}
.escalera li{border-radius:14px}
/* la barra de la app: la misma de la muestra */
.tabbar{
  position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));
  margin:14px 14px calc(14px + env(safe-area-inset-bottom));height:64px;border-radius:32px;border-top:0;
  display:flex;align-items:center;justify-content:space-around;padding:0 6px;
  background:var(--vidrio-barra);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 30px rgba(23,19,65,.18), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.4);
}
.tabbar button{
  -webkit-tap-highlight-color:transparent;
  flex:1 1 0;max-width:84px;gap:3px;padding:8px 6px;border-radius:22px;
  font:600 .68rem/1 var(--ui);color:#5d5d69;transition:transform .09s ease-out
}
.tabbar button:active{transform:scale(.95)}
.tabbar button svg{width:22px;height:22px}
.tabbar button[aria-selected="true"]{color:var(--azul);background:rgba(72,57,255,.10)}
.tabbar button .punto-aviso{top:5px;background:var(--ambar);box-shadow:0 0 0 2px #fff}

/* ================= accesibilidad ================= */
@media (prefers-reduced-transparency:reduce){
  .btn.linea,.btn.vidrio,.chip:not([aria-pressed="true"]){background:#fff}
  .topbar::before,.navbanda::before,.navbanda,.tabbar,.cab-menu,.hoja,.venta-guardar-barra,#toast{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important
  }
  .topbar::before,.navbanda::before,.cab-menu,.hoja,.venta-guardar-barra{background:#fff !important}
  .navbanda,.tabbar{background:#fff}
  #toast{background:var(--azul-noche)}
}
@media (prefers-contrast:more){
  .btn.linea,.btn.vidrio,.chip{box-shadow:inset 0 0 0 1.5px var(--tinta-2)}
  .navbanda,.tabbar,.cab-menu,.hoja{box-shadow:0 0 0 1.5px var(--tinta-2)}
}
@media (prefers-reduced-motion:reduce){
  .btn,.chip,.navtab,.tabbar button,.hoja .cerrar,#toast{transition:none}
  .btn:active,.chip:active,.navtab:active,.tabbar button:active,.hoja .cerrar:active{transform:none}
  .btn[data-cargando]::after{animation-duration:2s}
}