/* ════════════════════════════════════════════════════════
   NOVA · sistema de diseño
   Un solo archivo para todas las pantallas.
   Cambias algo aquí y cambia en todas partes.
   Sin frameworks, sin compilar. HTML, CSS y nada más.
   ════════════════════════════════════════════════════════ */

:root{
  --ink:#0C1116;--slate:#5B6673;--mist:#8B95A1;--ghost:#B4BCC6;
  --edge:#EDF0F3;--veil:#F6F7F9;--canvas:#F4F6F8;--sheet:#FFF;--rail:#EAEFF4;
  --cy:#0093DA;--cy-2:#00B4F0;--cy-deep:#0069A0;--cy-mist:#E8F5FD;
  --am:#B06E00;--am-mist:#FDF3E2;--rd:#D14332;--rd-mist:#FDEDEB;
  --gn:#12805A;--gn-mist:#E4F4EE;--vi:#6B55C8;--vi-mist:#EFECFC;
  /* marca ZETAMS */
  --zt-rojo:#BF1818;--zt-negro:#1A1A1A;--zt-cian:#009FE1;
  --aviso-fondo:#0C1116;--aviso-texto:#FFF;
  --lift-1:0 1px 2px rgba(12,17,22,.04),0 1px 1px rgba(12,17,22,.03);
  --lift-2:0 4px 14px rgba(12,17,22,.06),0 1px 3px rgba(12,17,22,.04);
  --lift-3:0 12px 32px rgba(12,17,22,.10),0 2px 8px rgba(12,17,22,.05);
  --lift-4:0 20px 56px rgba(12,17,22,.14),0 4px 12px rgba(12,17,22,.06);
  --glow:0 6px 20px rgba(0,147,218,.30);
  --r-s:9px;--r-m:14px;--r-l:20px;--r-xl:26px;
  --ui:'Instrument Sans',system-ui,sans-serif;--mo:'JetBrains Mono',monospace;
}

/* ════════════════════════════════════════════════════════
   TEMA OSCURO
   Se trabaja horas seguidas frente a esta pantalla y el
   blanco cansa la vista. Aquí se redefinen las MISMAS
   variables del tema claro, así todas las pantallas cambian
   a la vez y volver atrás es borrar este bloque.

   Los tonos de color suben en luminosidad respecto al tema
   claro: un cian que se lee bien sobre blanco desaparece
   sobre negro.
   ════════════════════════════════════════════════════════ */
:root{
  --ink:#EDF0F4;      /* el texto principal, ahora claro */
  --slate:#B7C1CE;
  --mist:#8E9AAB;
  --ghost:#66717F;
  --edge:rgba(255,255,255,.07);    /* las líneas finas */
  --veil:rgba(255,255,255,.045);   /* el fondo tenue */
  --canvas:#0B0E13;                /* el aire de la app */
  --sheet:#141922;                 /* la superficie */
  --rail:rgba(255,255,255,.09);

  --cy:#22C3F5;--cy-2:#4FD3FF;--cy-deep:#7FDFFF;--cy-mist:rgba(34,195,245,.13);
  --am:#FFB020;--am-mist:rgba(255,176,32,.13);
  --rd:#FF6B5C;--rd-mist:rgba(255,107,92,.13);
  --gn:#2DD4A0;--gn-mist:rgba(45,212,160,.13);
  --vi:#A78BFA;--vi-mist:rgba(167,139,250,.13);

  --zt-rojo:#FF4D3D;--zt-negro:#0B0E13;--zt-cian:#22C3F5;
  /* El aviso flotante no puede usar --ink de fondo: en
     oscuro ese color ya es casi blanco. */
  --aviso-fondo:#1D242E;--aviso-texto:#EDF0F4;

  /* Sobre oscuro la sombra no se ve: la elevación se da con
     un borde tenue y una sombra más profunda. */
  --lift-1:0 1px 2px rgba(0,0,0,.4);
  --lift-2:0 4px 14px rgba(0,0,0,.45);
  --lift-3:0 12px 32px rgba(0,0,0,.5);
  --lift-4:0 20px 56px rgba(0,0,0,.6);
  --glow:0 6px 22px rgba(34,195,245,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;overflow:hidden}
.mo{font-family:var(--mo);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.cap{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost)}
button,input,select{font:inherit;color:inherit}

/* ═══ el campo, una sola vez ═══
   Antes esto estaba repetido en ocho sitios (.fld, .campos, .mrow,
   .aj-fila, .tl, .cl-fila, .nueva-cuenta y las guías), cada uno con
   su propio relleno entre 11 y 14px sin ninguna razón. Se escribe
   acá una vez y cada pantalla solo declara lo que de verdad la
   diferencia.
   El selector va a secas, sin :not() ni nada que lo engorde: es la
   base, y cualquier regla con una clase tiene que poder pisarla.
   Con :not([type=...]) pesaría más que .pos-top o .campo-cobro y
   les rompería el diseño. Los tipos que no son cajas de texto se
   devuelven a su sitio justo abajo. */
input,select,textarea{
  width:100%;height:38px;border-radius:11px;background:var(--veil);border:0;
  padding:0 13px;font-size:14px;font-family:inherit;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .14s,background .14s}
textarea{height:auto;min-height:96px;padding:10px 13px;line-height:1.55;resize:vertical}

input:focus,select:focus,textarea:focus{
  outline:none;background:var(--sheet);
  box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}

/* Los campos que viven dentro de una caja (el buscador de arriba,
   el del POS, las líneas de una venta) no llevan caja propia: la
   pone el contenedor, y el campo va desnudo. Van todos juntos acá
   y no cada uno escondido en su pantalla.
   El :focus va aparte porque la base pinta el fondo al enfocar y
   acá el que se ilumina es el contenedor entero. */
.buscador input,.busca input,.cajon-busca input,.pos-campo input,
.pos-reng .cant input,.campo-cobro input,.precio-caja input,
.lin-campo input,.cta-buscar input,
.buscador input:focus,.busca input:focus,.cajon-busca input:focus,
.pos-campo input:focus,.campo-cobro input:focus,.precio-caja input:focus,
.lin-campo input:focus,.cta-buscar input:focus{
  width:auto;border-radius:0;background:none;padding:0;box-shadow:none}

/* ── el campo que falta ──
   Rojo en el borde y fondo apenas teñido. Una sola regla para
   todas las pantallas: sirve puesta en el campo o en la caja que
   lo envuelve, y aguanta el foco encima para que no se le quite
   el rojo al vendedor justo cuando va a corregirlo.
   Se pinta un solo sitio, el que lleva la clase: si además se
   teñía lo de adentro, salía un recuadro dentro del recuadro. */
.cmp-falla,.cmp-falla:focus,.cmp-falla:focus-within{
  box-shadow:inset 0 0 0 1.6px var(--zt-rojo);background:var(--rd-mist)}

/* Cuando lo que falta es una zona y no un campo (el carrito sin
   nada, la fila de pastillas): no trae esquinas ni fondo propios,
   así que va solo el borde y se le ponen las esquinas acá. */
.cmp-falla.cmp-zona{border-radius:12px;background:none}

/* Lo que le falta a ESE campo, pegado a él. Una sola regla para
   todas las pantallas. */
.cmp-dice{display:block;margin-top:6px;font-size:12px;font-weight:600;
  color:var(--zt-rojo);line-height:1.4}

/* Una casilla o un selector de color no son cajas de texto. */
input[type=checkbox],input[type=radio],input[type=file],
input[type=range],input[type=color],input[type=submit],input[type=button]{
  width:auto;height:auto;border-radius:0;background:none;padding:0;box-shadow:none;
  /* revert y no 0: el borde de una casilla lo dibuja el navegador
     y la base se lo había quitado. */
  border:revert}
button{cursor:pointer;border:0;background:none}
/* El atributo hidden lo pisa cualquier display propio, y media
   app tiene display en sus clases. Con esto vuelve a valer, que
   es de donde cuelga lo que el vendedor no debe ver. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--rail);border:2px solid transparent;background-clip:content-box;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;
  border-radius:999px;font-size:13.5px;font-weight:500;white-space:nowrap;background:var(--sheet);
  color:var(--slate);box-shadow:var(--lift-1);transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s,color .14s}
.b:hover:not(:disabled){color:var(--ink);box-shadow:var(--lift-2);transform:translateY(-1px)}
.b:disabled{opacity:.45;cursor:not-allowed}
.b-key{background:linear-gradient(180deg,var(--cy-2),var(--cy));color:#fff;box-shadow:var(--glow)}
.b-key:hover:not(:disabled){color:#fff;box-shadow:0 8px 26px rgba(0,147,218,.38)}
.b-quiet{background:var(--veil);box-shadow:none}
.b-quiet:hover:not(:disabled){background:var(--edge);box-shadow:none;transform:none}
.b-s{height:30px;padding:0 12px;font-size:12.5px}
.b-o{width:36px;padding:0}.b-o.b-s{width:30px}
.b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 16px}

.tag{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.g-rd{background:var(--rd-mist);color:var(--rd)}
.g-am{background:var(--am-mist);color:var(--am)}
.g-gn{background:var(--gn-mist);color:var(--gn)}
.g-cy{background:var(--cy-mist);color:var(--cy-deep)}
.g-gy{background:var(--veil);color:var(--slate)}

/* ── encabezado de marca ── */
.marca{height:52px;flex:0 0 52px;background:var(--zt-negro);display:flex;align-items:center;
  gap:12px;padding:0 16px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.marca .sello{width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:var(--zt-rojo);
  display:grid;place-items:center;box-shadow:0 3px 12px rgba(191,24,24,.42)}
.marca .sello svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linejoin:round}
.marca .nombre{display:flex;align-items:baseline;gap:8px;min-width:0}
.marca .nombre b{font-size:15px;font-weight:600;letter-spacing:-.035em;color:#fff}
.marca .nombre em{font-size:12.5px;font-style:normal;color:rgba(255,255,255,.38);letter-spacing:-.01em}
.marca .ruta{display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.72);
  letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.marca .ruta svg{width:13px;height:13px;flex:0 0 13px;stroke:rgba(255,255,255,.38);fill:none;stroke-width:2}
/* ─── lo que se hace todo el día, a un clic ───
   Van entre la miga de pan y el lado derecho. Pocas: la cabecera
   no es otro menú. */
.marca .hd-acc{display:flex;align-items:center;gap:6px}
.marca .hd-b{display:flex;align-items:center;gap:7px;height:28px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.86);
  letter-spacing:-.01em;white-space:nowrap;transition:background .14s}
.marca .hd-b:hover{background:rgba(255,255,255,.14)}
.marca .hd-b svg{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
/* Ya estamos ahí: se queda a la vista pero deja de invitar. */
.marca .hd-b.on{background:none;color:rgba(255,255,255,.3);pointer-events:none}
/* El logo de la tienda reemplaza al cuadro rojo de NOVA, no se
   mete dentro: un logo con fondo propio sobre otro color se lee
   como un error de carga. */
/* El cuadro de 28 es la medida del rayo de NOVA, que es un icono
   cuadrado. Un logo de tienda casi siempre es apaisado, y metido
   en ese cuadro quedaba de 28 de ancho por diez y pico de alto:
   ilegible. Acá el alto manda —36, que es lo que entra cómodo en
   la barra de 52— y el ancho se acomoda solo hasta un tope, para
   que un logo muy largo no empuje al resto de la cabecera. */
.marca .sello.hd-suyo{background:none;box-shadow:none;border-radius:6px;
  width:auto;height:36px;flex:0 0 auto;max-width:170px}
.marca .sello.hd-suyo img{width:auto;height:36px;max-width:170px;
  object-fit:contain;display:block}
.marca .lado{margin-left:auto;display:flex;align-items:center;gap:8px}
.marca .estado{display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.72)}
.marca .pulso{width:6px;height:6px;border-radius:50%;background:#3DDC8A;
  box-shadow:0 0 8px rgba(61,220,138,.7)}
.marca .yo{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 4px;border-radius:999px;
  transition:background .14s}
.marca .yo:hover{background:rgba(255,255,255,.07)}
.marca .yo .ini{width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:linear-gradient(145deg,var(--cy-2),var(--cy-deep));color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:-.02em}
.marca .yo span{font-size:13px;color:rgba(255,255,255,.86);letter-spacing:-.01em}
.marca .yo.abierto{background:rgba(255,255,255,.12)}

/* ─── lo que se abre al tocar tu nombre ───
   Va fijo y colocado por JS: la cabecera es oscura y estrecha, y
   colgar de ella un panel claro con position:absolute lo dejaba
   recortado. */
.yo-menu{position:fixed;z-index:90;min-width:216px;padding:6px;
  background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-3);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .13s,transform .13s}
.yo-menu.on{opacity:1;transform:none;pointer-events:auto}
.yo-menu .quien{display:flex;align-items:center;gap:10px;padding:8px 10px 11px;
  border-bottom:1px solid var(--edge);margin-bottom:5px}
.yo-menu .quien .ini{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(145deg,var(--cy-2),var(--cy-deep));color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600}
.yo-menu .quien b{display:block;font-size:13px;letter-spacing:-.01em}
.yo-menu .quien em{font-style:normal;font-size:11.5px;color:var(--ghost)}
.yo-menu a,.yo-menu button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:0;background:none;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--slate);text-align:left}
.yo-menu a:hover,.yo-menu button:hover{background:var(--veil)}
.yo-menu svg{width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:1.9}
.yo-menu .salir{color:var(--rd)}
.yo-menu .salir:hover{background:var(--rd-mist)}
/* tus datos, dentro del mismo panel */

@media (max-width:820px){ .marca .ruta,.marca .estado{display:none} }
@media (max-width:600px){
  .marca{height:48px;flex:0 0 48px;padding:0 12px}
  .marca .yo span{display:none}
  .marca .yo{padding:0;width:36px;justify-content:center}
}

.app{display:flex;height:calc(100vh - 52px);height:calc(100dvh - 52px);padding:10px;gap:10px;overflow:hidden}
@media (max-width:600px){ .app{height:calc(100dvh - 48px)} }
.side{width:218px;flex:0 0 218px;display:flex;flex-direction:column;padding:12px 9px 10px;
  background:var(--rail);border-radius:var(--r-l);
  transition:width .18s cubic-bezier(.2,.8,.3,1),flex-basis .18s cubic-bezier(.2,.8,.3,1)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 20px}
.brand .glyph{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--cy-2),var(--cy-deep));box-shadow:var(--glow)}
.brand .glyph svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linejoin:round}
.brand b{display:block;font-size:18px;font-weight:700;letter-spacing:-.045em;line-height:1}
.brand span{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--ghost);text-transform:uppercase}
.sect{padding:16px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;height:35px;padding:0 10px;border-radius:11px;
  color:var(--slate);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .13s,color .13s,box-shadow .13s}
.nav a:hover{background:var(--veil);color:var(--ink)}
.nav a.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}
.nav a svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.nav a.on svg{stroke:var(--cy)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.crown{display:flex;align-items:center;gap:12px;padding:4px 6px 0;flex:0 0 auto;flex-wrap:wrap}
.crown h1{font-size:20px;font-weight:600;letter-spacing:-.035em}
.crown .sub{font-size:13px;color:var(--mist)}
.crown .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── el cuerpo se parte en tabla + ficha lateral ── */
.body{flex:1;min-height:0;display:flex;gap:10px}
.left{flex:1;min-width:0;overflow:auto;overflow-x:visible;padding-bottom:4px}
.wrap{max-width:100%}

.panel{background:var(--sheet);border-radius:var(--r-l);box-shadow:var(--lift-2);overflow:hidden;margin-bottom:10px}
/* Los paneles recortan lo que se sale, y eso corta los
   desplegables de buscar: el de productos en Inventario y los
   de producto y distrito al armar una guía. */
#p-prod > .panel,
#gu-form .panel{overflow:visible}
#p-prod > .panel > .scrollx{border-radius:0 0 var(--r-l) var(--r-l)}
.panel-h{padding:15px 20px 13px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.panel-h h2{font-size:15px;font-weight:600;letter-spacing:-.025em}
/* Un corte dentro del cuerpo de un panel, para cuando una
   sección tiene dos partes que no dan para dos paneles. */
.panel-sub{font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--edge)}
.panel-h .note{font-size:12.5px;color:var(--mist)}
.panel-b{padding:0 20px 18px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:10px}
.tile{background:var(--sheet);border-radius:var(--r-m);padding:15px 17px;box-shadow:var(--lift-2)}
.tile .k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ghost)}
.tile .v{font-family:var(--mo);font-size:25px;font-weight:600;letter-spacing:-.06em;margin-top:6px;line-height:1.05}
.tile .d{font-size:12px;color:var(--mist);margin-top:4px}

table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost);
  text-align:left;padding:0 20px 9px;white-space:nowrap}
td{padding:12px 20px;font-size:13.5px;vertical-align:middle;border-top:1px solid var(--edge)}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--veil)}
tbody tr.sel{background:var(--cy-mist)}
.num{text-align:right;font-family:var(--mo);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
th.num{text-align:right}
.prod-n{font-weight:600;letter-spacing:-.015em}
.sku{display:block;font-family:var(--mo);font-size:10.5px;color:var(--ghost);letter-spacing:-.04em;margin-top:2px;font-weight:400}
.acts{width:1%;white-space:nowrap;text-align:right;padding-left:0}
.icon{width:32px;height:32px;border-radius:10px;display:inline-grid;place-items:center;color:var(--ghost);
  transition:background .13s,color .13s}
.icon:hover{background:var(--sheet);color:var(--cy);box-shadow:var(--lift-2)}
.icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── ficha lateral ── */
.detail{width:376px;flex:0 0 376px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-3);display:none;flex-direction:column;overflow:hidden}
.detail.on{display:flex}
.d-head{padding:16px 18px 13px;display:flex;align-items:flex-start;gap:10px}
.d-head h3{font-size:16px;font-weight:600;letter-spacing:-.03em;line-height:1.25}
.d-head .sku{margin-top:3px}
.d-body{flex:1;min-height:0;overflow:auto;padding:0 18px}
.d-foot{padding:14px 18px 16px;display:flex;gap:8px}
.d-foot .b{flex:1}

.readout{background:var(--veil);border-radius:var(--r-m);padding:14px 16px;margin-bottom:14px}
.readout .big{font-family:var(--mo);font-size:27px;font-weight:600;letter-spacing:-.07em;line-height:1}
.readout .lbl{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ghost);margin-bottom:5px}
.readout .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.bar{height:7px;background:var(--edge);border-radius:999px;overflow:hidden;margin-top:12px;position:relative}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cy-2),var(--cy))}
.bar .mk{position:absolute;top:-3px;width:2px;height:13px;background:var(--rd);border-radius:2px}
.scale-lbl{display:flex;justify-content:space-between;font-family:var(--mo);font-size:10.5px;
  color:var(--mist);letter-spacing:-.04em;margin-top:6px}

.fld{margin-bottom:12px}
.fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ghost);margin-bottom:5px}
.fld input:disabled{opacity:.55;cursor:not-allowed}
.fld .hint{display:block;font-size:11.5px;color:var(--ghost);margin-top:4px}
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.hist-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-top:1px solid var(--edge);font-size:12.5px}
.hist-row:first-of-type{border-top:0}
.hist-row .who{color:var(--slate)}
.hist-row .when{display:block;font-size:11px;color:var(--ghost);margin-top:1px}

.alert{border-radius:var(--r-m);padding:12px 15px;font-size:13px;line-height:1.55;margin-bottom:12px;display:flex;gap:9px}
.alert svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.9;margin-top:1px}
.a-am{background:var(--am-mist);color:var(--am)}
.a-rd{background:var(--rd-mist);color:var(--zt-rojo)}
.a-gn{background:var(--gn-mist);color:var(--gn)}
.a-cy{background:var(--cy-mist);color:var(--cy-deep)}

.delta{font-family:var(--mo);font-size:12px;letter-spacing:-.04em}
.combo{display:flex;gap:7px;align-items:stretch}
.combo select{flex:1;min-width:0}
.combo .add{width:38px;flex:0 0 38px;border-radius:11px;background:var(--veil);display:grid;
  place-items:center;color:var(--mist);transition:background .13s,color .13s}
.combo .add:hover{background:var(--cy-mist);color:var(--cy-deep)}
.combo .add svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.chip-list{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 6px 0 12px;
  border-radius:999px;background:var(--veil);font-size:13px}
.chip .n{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.chip .x{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--ghost)}
.chip .x:hover{background:var(--rd-mist);color:var(--rd)}
.chip .x svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4}
.soles{display:block;font-family:var(--mo);font-size:11px;color:var(--mist);
  letter-spacing:-.045em;margin-top:3px;font-weight:500}
.readout .sub-big{font-family:var(--mo);font-size:14px;font-weight:500;color:var(--slate);
  letter-spacing:-.04em;margin-top:4px}
.marg-pair{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.up{color:var(--rd)}.down{color:var(--gn)}.flat{color:var(--ghost)}
.arrow{color:var(--ghost);margin:0 5px}

/* ── modal ancho para la compra ── */
.veil{position:fixed;inset:0;background:rgba(12,17,22,.42);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
.veil.on{display:flex}
.modal{background:var(--sheet);border-radius:var(--r-l);box-shadow:var(--lift-4);
  width:100%;max-width:1080px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal.sm{max-width:560px}
.modal-h{padding:20px 26px 15px;display:flex;align-items:center;gap:12px}
.modal-h h3{font-size:19px;font-weight:600;letter-spacing:-.035em}
.modal-b{flex:1;min-height:0;overflow:auto;padding:0 26px}
.modal-f{padding:18px 26px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px}
.wide{grid-column:1/-1}

.pick{display:flex;gap:8px;margin-bottom:18px;max-width:400px}
.pick button{flex:1;height:40px;border-radius:12px;background:var(--veil);font-size:13.5px;
  font-weight:500;color:var(--slate);transition:background .14s,color .14s,box-shadow .14s}
.pick button.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}

.drop{border-radius:var(--r-m);background:var(--veil);padding:32px 20px;text-align:center;
  cursor:pointer;transition:background .15s,box-shadow .15s}
.drop:hover,.drop.hot{background:var(--cy-mist);box-shadow:inset 0 0 0 1.5px var(--cy)}
.drop svg{width:32px;height:32px;stroke:var(--cy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-size:15px;font-weight:600;margin-top:10px}
.drop span{display:block;font-size:12.5px;color:var(--mist);margin-top:3px}
.drop.ready{background:var(--gn-mist);box-shadow:inset 0 0 0 1.5px var(--gn)}
.drop.ready svg{stroke:var(--gn)}

.mrow{display:grid;grid-template-columns:1fr 110px 130px 40px;gap:10px;margin-bottom:9px;align-items:center}
.mhead{display:grid;grid-template-columns:1fr 110px 130px 40px;gap:10px;margin-bottom:7px}
.mhead span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost)}
.del{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ghost);background:var(--veil)}
.del:hover{color:var(--rd);background:var(--rd-mist)}
.del svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:34px 20px;text-align:center;color:var(--mist);font-size:13.5px}

/* ── formulario largo por secciones ── */
.fgroup{margin-bottom:22px}
.fgroup:last-child{margin-bottom:6px}
.fgroup-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fgroup-h b{font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.fgroup-h .num-badge{width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:var(--cy-mist);
  color:var(--cy-deep);display:grid;place-items:center;font-family:var(--mo);font-size:11px;font-weight:600}
.fgroup-h .note{font-size:12px;color:var(--ghost);margin-left:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.span2{grid-column:span 2}
.esc-row{display:grid;grid-template-columns:110px 1fr 120px 40px;gap:10px;align-items:center;margin-bottom:8px}
.esc-row .lead{font-size:13px;color:var(--mist)}
.esc-row input{font-size:13.5px}
.esc-row input:focus{outline:none;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy)}
.esc-row .marg{font-family:var(--mo);font-size:12.5px;letter-spacing:-.04em;text-align:right;white-space:nowrap}
.esc-head{display:grid;grid-template-columns:110px 1fr 120px 40px;gap:10px;margin-bottom:7px}
.esc-head span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost)}
@media (max-width:820px){
  .grid3,.grid2{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .esc-row,.esc-head{grid-template-columns:84px 1fr 96px 38px;gap:7px}
}

@media (max-width:1280px){ .detail{width:340px;flex:0 0 340px} }
@media (max-width:1080px){
  .detail{position:fixed;right:10px;top:10px;bottom:10px;width:360px;z-index:40;box-shadow:var(--lift-4)}
}
@media (max-width:740px){
  .app{padding:6px;gap:6px}
  .crown h1{font-size:18px}.crown .sub{display:none}
  .detail{left:6px;right:6px;top:6px;bottom:6px;width:auto}
  .scrollx table{min-width:760px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:8px}
  .tile .v{font-size:22px}
  .veil{padding:8px}
  .modal-h,.modal-b,.modal-f{padding-left:16px;padding-right:16px}
  .mrow,.mhead{grid-template-columns:1fr 80px 100px 38px;gap:7px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── pestañas de sección ── */
.tabs{display:flex;gap:4px;padding:2px 4px;overflow-x:auto;flex:0 0 auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{height:34px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:500;
  color:var(--slate);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
  transition:background .13s,color .13s,box-shadow .13s}
.tab:hover{background:var(--veil);color:var(--ink)}
.tab.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}
.tab .n{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.tab.on .n{color:var(--cy)}
.pane{display:none;height:100%}
.pane.on{display:block}

/* ── alta en línea, sin ventanas del navegador ── */
.inline-new{display:none;gap:9px;align-items:center;margin-top:12px}
.inline-new.on{display:flex}
.inline-new input{flex:1;min-width:0;height:38px;border-radius:11px;background:var(--veil);
  border:0;padding:0 14px;font-size:14px}
.inline-new input:focus{outline:none;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}

.combo-new{display:none;margin-top:8px;gap:8px}
.combo-new.on{display:flex}
.combo-new input{flex:1;min-width:0;height:36px;border-radius:11px;background:var(--veil);
  border:0;padding:0 12px;font-size:13.5px}
.combo-new input:focus{outline:none;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy)}

.list-card{background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-2);
  padding:13px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.list-card .nm{font-weight:600;letter-spacing:-.015em;flex:1;min-width:0}
.list-card .meta{font-size:12px;color:var(--mist)}
.list-card .cnt{font-family:var(--mo);font-size:12px;color:var(--ghost);letter-spacing:-.04em}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--aviso-fondo);color:var(--aviso-texto);border:1px solid var(--edge);
  border-radius:999px;padding:11px 20px;font-size:13.5px;
  font-weight:500;box-shadow:var(--lift-4);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:80}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--rd);color:#0B0E13;border-color:transparent}

/* ════════════════════════════════════════════════════════
   CATÁLOGO · productos, compras, listas
   ════════════════════════════════════════════════════════ */
/* ── barra de filtros del catálogo ── */
.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 20px 16px}
.buscador{flex:1;min-width:230px;height:46px;border-radius:999px;background:var(--veil);
  display:flex;align-items:center;gap:12px;padding:0 20px;
  transition:background .15s,box-shadow .15s}
.buscador:focus-within{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}
.buscador svg{width:18px;height:18px;stroke:var(--ghost);fill:none;stroke-width:2;flex:0 0 18px}
.buscador:focus-within svg{stroke:var(--cy)}
.buscador input{flex:1;min-width:0;border:0;background:none;font-size:15px;height:100%;letter-spacing:-.01em}
.buscador input:focus{outline:none}
.buscador .borrar{width:24px;height:24px;border-radius:50%;display:none;place-items:center;
  color:var(--ghost);flex:0 0 24px}
.buscador .borrar svg{width:13px;height:13px;stroke-width:2.4}
.buscador .borrar:hover{background:var(--edge);color:var(--ink)}
.buscador.lleno .borrar{display:grid}

/* filtro como pastilla con icono */
.fpop{position:relative}
.fbtn{height:46px;width:46px;border-radius:999px;background:var(--veil);display:grid;place-items:center;
  color:var(--mist);transition:background .14s,color .14s,box-shadow .14s,width .18s}
.fbtn:hover{background:var(--edge);color:var(--ink)}
.fbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fbtn.activo{width:auto;padding:0 18px;gap:9px;grid-auto-flow:column;align-items:center;
  background:var(--cy-mist);color:var(--cy-deep);font-size:14px;font-weight:600}
.fbtn .txt{display:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbtn.activo .txt{display:block}
.fmenu{position:absolute;top:52px;right:0;left:auto;z-index:60;background:var(--sheet);
  border-radius:var(--r-m);box-shadow:var(--lift-4);padding:7px;min-width:210px;max-width:min(260px,80vw);
  max-height:min(300px,50vh);overflow:auto;display:none;border:1px solid var(--edge)}
.fmenu.on{display:block}
.fmenu .op{display:flex;align-items:center;gap:10px;height:38px;padding:0 13px;border-radius:10px;
  font-size:14px;color:var(--slate);cursor:pointer;width:100%;text-align:left}
.fmenu .op:hover{background:var(--veil);color:var(--ink)}
.fmenu .op.on{background:var(--cy-mist);color:var(--cy-deep);font-weight:600}
.fmenu .op .tick{margin-left:auto;opacity:0}
.fmenu .op.on .tick{opacity:1}
.fmenu .op .tick svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.fmenu .sep{height:1px;background:var(--edge);margin:6px 9px}
.limpiar{height:46px;padding:0 16px;border-radius:999px;font-size:13.5px;color:var(--cy);
  font-weight:500;display:inline-flex;align-items:center;gap:7px}
.limpiar:hover{background:var(--cy-mist)}
.limpiar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

@media (max-width:640px){
  .buscador{min-width:100%;order:-1}
  .fbtn.activo{max-width:180px}
}

/* ── celdas de marca y categoría ── */
.pager{display:flex;align-items:center;gap:10px;padding:14px 20px 4px;flex-wrap:wrap}
.pager .info{font-size:12.5px;color:var(--mist)}
.pager .nums{margin-left:auto;display:flex;align-items:center;gap:6px}
.pager .pg{min-width:32px;height:32px;padding:0 9px;border-radius:10px;font-size:13px;
  font-weight:500;color:var(--slate);background:var(--veil);display:inline-grid;place-items:center;
  transition:background .13s,color .13s,box-shadow .13s}
.pager .pg:hover:not(:disabled){background:var(--edge);color:var(--ink)}
.pager .pg.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}
.pager .pg:disabled{opacity:.35;cursor:not-allowed}
.pager .pg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pager .gap{color:var(--ghost);font-size:13px;padding:0 2px}
.mini{width:38px;height:38px;flex:0 0 38px;border-radius:10px;object-fit:cover;
  background:var(--veil);display:block}
.mini-vacia{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--veil);
  display:grid;place-items:center;color:var(--ghost)}
.mini-vacia svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.celda-prod{display:flex;align-items:center;gap:12px}

/* foto en la ficha lateral */
.foto-zona{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.foto-grande{width:76px;height:76px;flex:0 0 76px;border-radius:var(--r-m);object-fit:cover;
  background:var(--veil);box-shadow:var(--lift-1)}
.foto-vacia{width:76px;height:76px;flex:0 0 76px;border-radius:var(--r-m);background:var(--veil);
  display:grid;place-items:center;color:var(--ghost);cursor:pointer;transition:background .14s,color .14s}
.foto-vacia:hover{background:var(--cy-mist);color:var(--cy-deep)}
.foto-vacia svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5}
.foto-acts{display:flex;flex-direction:column;gap:6px;min-width:0}
.foto-acts .b{justify-content:flex-start}
.foto-nota{font-size:11.5px;color:var(--ghost);line-height:1.45}

/* foto en el popup de nuevo producto */
.foto-nueva{display:flex;gap:14px;align-items:center}
.pastilla{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;
  background:var(--veil);font-size:12px;font-weight:500;color:var(--slate);white-space:nowrap;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}
.pastilla.marca{background:var(--vi-mist);color:var(--vi)}
.pastilla.unid{background:var(--cy-mist);color:var(--cy-deep);font-weight:600}
.pastilla.vacia{background:transparent;color:var(--ghost);padding-left:0}

/* ── ajustes: sub-secciones apiladas ── */
.sub-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.sub-tab{height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--slate);
  background:var(--veil);display:inline-flex;align-items:center;gap:7px;transition:background .13s,color .13s,box-shadow .13s}
.sub-tab:hover{background:var(--edge)}
.sub-tab.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}
.sub-tab .n{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.sub-pane{display:none}
.sub-pane.on{display:block}

/* ════════════════════════════════════════════════════════
   BANDEJA · conversaciones
   ════════════════════════════════════════════════════════ */
/* ═══════════ BANDEJA ═══════════ */
.inbox{display:flex;gap:10px;height:100%;min-height:0}

/* filtros */
.criba{width:186px;flex:0 0 186px;overflow:auto;padding:2px 2px 2px 0}
.criba .sect{padding:15px 10px 5px}
.criba .sect:first-child{padding-top:2px}
.cr{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:10px;
  font-size:13px;color:var(--slate);cursor:pointer;transition:background .13s,box-shadow .13s}
.cr:hover{background:var(--veil)}
.cr.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-1)}
.cr .pip{width:7px;height:7px;flex:0 0 7px;border-radius:50%}
.cr .n{margin-left:auto;font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.05em}
.cr.on .n{color:var(--slate)}
.cr .ch{width:15px;height:15px;flex:0 0 15px;border-radius:4px}

/* lista */
.hilos{width:320px;flex:0 0 320px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-2);display:flex;flex-direction:column;overflow:hidden}
.hilos-h{flex:0 0 auto;padding:12px 12px 10px;display:flex;gap:8px;align-items:center}
.busca{flex:1;height:38px;border-radius:999px;background:var(--veil);display:flex;align-items:center;
  gap:10px;padding:0 16px;transition:background .15s,box-shadow .15s}
.busca:focus-within{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}
.busca svg{width:16px;height:16px;stroke:var(--ghost);fill:none;stroke-width:2;flex:0 0 16px}
.busca input{flex:1;min-width:0;border:0;background:none;font-size:14px;height:100%}
.busca input:focus{outline:none}
.hilos-s{flex:1;min-height:0;overflow:auto;padding:0 8px 10px}

.hilo{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:0 11px;
  padding:11px 12px;border-radius:var(--r-m);cursor:pointer;margin-bottom:2px;
  transition:background .14s,box-shadow .14s}
.hilo:hover{background:var(--veil)}
.hilo.on{background:var(--sheet);box-shadow:var(--lift-3)}
.hilo.on::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--cy-2),var(--cy))}
.hilo .cara{width:38px;height:38px;flex:0 0 38px;grid-row:1/4;align-self:start;
  border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;
  letter-spacing:-.02em;position:relative}
.hilo .cara .marca-canal{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;
  border-radius:5px;box-shadow:0 0 0 2.5px var(--sheet)}
.hilo:hover .cara .marca-canal{box-shadow:0 0 0 2.5px var(--veil)}
.hilo .l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.hilo .l1 b{font-size:13.5px;font-weight:600;letter-spacing:-.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hilo .l2{font-size:12.5px;color:var(--mist);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin:2px 0 7px;display:flex;gap:5px;align-items:center}
.hilo.nuevo .l2{color:var(--slate);font-weight:500}
.hilo .l2 .yo{color:var(--ghost);flex:0 0 auto}
.hilo .l3{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hilo .cuando{grid-column:3;grid-row:1;font-family:var(--mo);font-size:10.5px;color:var(--ghost);
  letter-spacing:-.05em;white-space:nowrap}
.hilo .aro{grid-column:3;grid-row:2/4;align-self:end}
.hilo .plata{font-family:var(--mo);font-size:11.5px;font-weight:600;color:var(--slate);letter-spacing:-.05em}
.punto-nuevo{width:8px;height:8px;border-radius:50%;background:var(--cy);flex:0 0 8px}

/* anillo de ventana */
.aro{position:relative;width:32px;height:32px;flex:0 0 32px}
.aro svg{width:100%;height:100%;transform:rotate(-90deg)}
.aro circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.aro .via{stroke:var(--edge)}
.aro .arco{transition:stroke-dashoffset .8s linear}
.aro.ok .arco{stroke:var(--gn)} .aro.medio .arco{stroke:var(--am)} .aro.fin .arco{stroke:var(--rd)}
.aro .centro{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mo);
  font-size:9px;font-weight:600;letter-spacing:-.06em}
.aro.ok .centro{color:var(--gn)} .aro.medio .centro{color:var(--am)} .aro.fin .centro{color:var(--rd)}
.aro-g{width:40px;height:40px;flex:0 0 40px}
.aro-g .centro{font-size:10px}

/* hilo abierto */
.charla{flex:1;min-width:0;background:var(--sheet);border-radius:var(--r-l);box-shadow:var(--lift-2);
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.charla-h{flex:0 0 auto;padding:13px 20px;display:flex;align-items:center;gap:12px;
  background:var(--sheet);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);z-index:3}
.charla-h .cara{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:600}
.charla-h .quien b{font-size:15.5px;font-weight:600;letter-spacing:-.03em;display:block;line-height:1.25}
.charla-h .quien span{font-size:12.5px;color:var(--mist);display:flex;align-items:center;gap:7px}
.charla-h .accs{margin-left:auto;display:flex;align-items:center;gap:9px}

.rio{flex:1;min-height:0;overflow:auto;padding:8px 20px 104px}
.rio-in{max-width:700px;margin:0 auto}
.dia{display:flex;justify-content:center;margin:14px 0 18px}
.dia span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mist);
  background:var(--veil);border-radius:999px;padding:4px 14px}
.vuelta{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.vuelta.junta{margin-top:3px}
.vuelta .cara{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:600}
.vuelta.junta .cara{visibility:hidden}
.globo{max-width:min(500px,76%);padding:10px 15px;font-size:14.5px;line-height:1.5;
  border-radius:20px;letter-spacing:-.01em;white-space:pre-wrap;word-break:break-word}
.vuelta.entra .globo{background:var(--veil);border-bottom-left-radius:7px}
.vuelta.junta.entra .globo{border-top-left-radius:7px}
.vuelta.sale{flex-direction:row-reverse}
.vuelta.sale .globo{background:linear-gradient(160deg,var(--cy-2),var(--cy));color:#fff;
  border-bottom-right-radius:7px;box-shadow:var(--glow)}
.vuelta.junta.sale .globo{border-top-right-radius:7px}
.sello-h{font-family:var(--mo);font-size:10px;color:var(--ghost);letter-spacing:-.05em;
  padding-bottom:5px;display:flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap}
.sello-h svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}

/* compositor */
.pluma{position:absolute;left:0;right:0;bottom:0;padding:12px 20px 16px;pointer-events:none}
.pluma-in{max-width:700px;margin:0 auto;pointer-events:auto;display:flex;align-items:flex-end;gap:9px;
  background:var(--sheet);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-radius:var(--r-xl);padding:7px 7px 7px 18px;box-shadow:var(--lift-4)}
.pluma textarea{flex:1;min-width:0;border:0;background:none;resize:none;font-family:inherit;
  font-size:14.5px;line-height:1.5;letter-spacing:-.01em;max-height:120px;padding:9px 0}
.pluma textarea:focus{outline:none}
.pluma .cerrada{flex:1;font-size:13.5px;color:var(--am);padding:9px 0;line-height:1.4}

/* ficha del cliente */
.ficha{width:290px;flex:0 0 290px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-2);overflow:auto;padding:18px}
.ficha .sect{padding:19px 0 9px}
.ficha .sect:first-child{padding-top:0}
.par{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px}
.par dt{color:var(--mist)}
.par dd{font-weight:600;text-align:right;letter-spacing:-.015em}
.notita{background:var(--veil);border-radius:var(--r-m);padding:11px 13px;font-size:12.5px;
  line-height:1.55;color:var(--slate);margin-bottom:6px;display:flex;gap:9px;align-items:flex-start}
.notita .x{margin-left:auto;color:var(--ghost);flex:0 0 auto;opacity:0;transition:opacity .13s}
.notita:hover .x{opacity:1}
.notita .x:hover{color:var(--rd)}
.notita .x svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.notita.alerta{background:var(--am-mist);color:var(--am)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.pila{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.pila .b{width:100%}

/* coach */
.coach{margin:20px auto 6px;max-width:700px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-4);overflow:hidden}
.coach-h{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(135deg,var(--cy-mist),var(--cy-mist))}
.coach-h .chispa{width:27px;height:27px;flex:0 0 27px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--cy-2),var(--cy-deep));box-shadow:var(--glow)}
.coach-h .chispa svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linejoin:round}
.coach-h b{font-size:13.5px;font-weight:600;color:var(--cy-deep);letter-spacing:-.02em}
.coach-b{padding:15px 18px 4px}
.coach-b p{font-size:14px;line-height:1.6;color:var(--slate);letter-spacing:-.01em}
.coach-b p b{color:var(--ink);font-weight:600}
.coach-f{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 16px}
.piso{margin:16px 0 4px}
.piso .esc{position:relative;height:30px}
.piso .via{position:absolute;left:0;right:0;top:13px;height:6px;background:var(--veil);border-radius:999px}
.piso .lleno{position:absolute;left:0;top:13px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--cy-2),var(--cy))}
.piso .tope{position:absolute;top:5px;width:2px;height:22px;background:var(--rd);border-radius:2px}
.piso .tope::after{content:attr(data-l);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-family:var(--mo);font-size:10px;font-weight:600;color:var(--rd);white-space:nowrap;letter-spacing:-.04em}
.piso .pies{display:flex;justify-content:space-between;font-family:var(--mo);font-size:11px;
  color:var(--mist);letter-spacing:-.04em}

.nada{padding:40px 20px;text-align:center;color:var(--mist);font-size:13.5px}
.nada svg{width:34px;height:34px;stroke:var(--ghost);fill:none;stroke-width:1.4;margin-bottom:10px}
.vacio-charla{flex:1;display:grid;place-items:center;text-align:center;padding:30px}
.vacio-charla svg{width:44px;height:44px;stroke:var(--ghost);fill:none;stroke-width:1.3;margin-bottom:12px}
.vacio-charla p{font-size:14px;color:var(--mist)}

.solo-movil{display:none}

@media (max-width:1400px){ .ficha{display:none} .ficha.abierta{display:block} }
@media (max-width:1180px){ .criba{display:none} }
@media (max-width:960px){
  .hilos{width:290px;flex:0 0 290px}
}
@media (max-width:740px){
  .solo-movil{display:inline-flex}
  .app{padding:6px;gap:6px}
  .crown h1{font-size:18px} .crown .sub{display:none}
  .inbox{position:relative}
  .hilos{width:100%;flex:1 1 auto}
  .charla{display:none;position:absolute;inset:0;z-index:9}
  body[data-vista="charla"] .hilos{display:none}
  body[data-vista="charla"] .charla{display:flex}
  .rio{padding:8px 14px 96px}
  .globo{max-width:84%}
  .pluma{padding:10px 14px 14px}
  .ficha{position:fixed;left:6px;right:6px;top:6px;bottom:6px;width:auto;z-index:40}
}

/* ════════════════════════════════════════════════════════
   CATÁLOGO DENTRO DEL CHAT
   El vendedor consulta sin salir de la conversación.
   El stock exacto y el costo son suyos, nunca del cliente.
   ════════════════════════════════════════════════════════ */
.cajon{position:absolute;left:0;right:0;bottom:0;top:auto;max-height:74%;z-index:20;
  background:var(--sheet);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--lift-4);
  display:none;flex-direction:column;overflow:hidden;border:1px solid var(--edge)}
.cajon.on{display:flex}
.cajon-h{flex:0 0 auto;padding:14px 18px 10px;display:flex;align-items:center;gap:11px}
.cajon-h b{font-size:15px;font-weight:600;letter-spacing:-.03em}
.cajon-b{flex:1;min-height:0;overflow:auto;padding:0 12px 14px}
.cajon-busca{margin:0 18px 12px;height:42px;border-radius:999px;background:var(--veil);
  display:flex;align-items:center;gap:11px;padding:0 17px;transition:background .15s,box-shadow .15s}
.cajon-busca:focus-within{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}
.cajon-busca svg{width:17px;height:17px;stroke:var(--ghost);fill:none;stroke-width:2;flex:0 0 17px}
.cajon-busca input{flex:1;min-width:0;border:0;background:none;font-size:14.5px;height:100%}
.cajon-busca input:focus{outline:none}

.pz{display:flex;gap:12px;padding:11px 12px;border-radius:var(--r-m);cursor:pointer;
  align-items:center;transition:background .13s}
.pz:hover{background:var(--veil)}
.pz .mini{width:44px;height:44px;flex:0 0 44px;border-radius:11px;object-fit:cover;background:var(--veil)}
.pz .sinfoto{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:var(--veil);
  display:grid;place-items:center;color:var(--ghost)}
.pz .sinfoto svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.pz .cual{flex:1;min-width:0}
.pz .cual b{font-size:14px;font-weight:600;letter-spacing:-.015em;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz .cual .fino{font-size:11.5px;color:var(--mist);font-family:var(--mo);letter-spacing:-.04em;
  display:flex;gap:7px;align-items:center;margin-top:2px;flex-wrap:wrap}
.pz .cuanto{text-align:right;flex:0 0 auto}
.pz .cuanto .pv{font-family:var(--mo);font-size:16px;font-weight:600;letter-spacing:-.05em}
.pz .cuanto .um{font-size:11px;color:var(--ghost)}

/* semáforo de existencias: al vendedor le basta el color */
.sem{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.sem i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.sem.hay{color:var(--gn)}      .sem.hay i{background:var(--gn)}
.sem.poco{color:var(--am)}     .sem.poco i{background:var(--am)}
.sem.nada{color:var(--rd)}     .sem.nada i{background:var(--rd)}

/* ficha rápida del producto dentro del chat */
.pz-abierto{background:var(--veil);border-radius:var(--r-m);padding:14px 15px;margin:2px 0 8px}
.pz-abierto .linea{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
.pz-abierto .linea dt{color:var(--mist)}
.pz-abierto .linea dd{font-weight:600;font-family:var(--mo);letter-spacing:-.04em}
.pz-abierto .privado{background:var(--sheet);border-radius:10px;padding:10px 12px;margin-top:10px}
.pz-abierto .privado .cab{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.pz-abierto .privado .cab svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.pz-abierto .escalones{margin-top:10px}
.pz-abierto .esc-l{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;
  font-family:var(--mo);letter-spacing:-.04em}
.pz-abierto .acc{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

.pz-vacio{padding:30px 20px;text-align:center;color:var(--mist);font-size:13.5px}

/* ════════════════════════════════════════════════════════
   NOVA · lo que propone la IA
   ════════════════════════════════════════════════════════ */
.propuesta{margin:16px auto 6px;max-width:700px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-4);overflow:hidden}
.propuesta-h{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(135deg,var(--cy-mist),var(--cy-mist))}
.propuesta-h .chispa{width:27px;height:27px;flex:0 0 27px;border-radius:9px;display:grid;
  place-items:center;background:linear-gradient(145deg,var(--cy-2),var(--cy-deep));box-shadow:var(--glow)}
.propuesta-h .chispa svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linejoin:round}
.propuesta-h b{font-size:13.5px;font-weight:600;color:var(--cy-deep);letter-spacing:-.02em}
.propuesta-h .cuesta{margin-left:auto;font-family:var(--mo);font-size:11px;color:var(--cy-deep);
  opacity:.65;letter-spacing:-.04em}
.propuesta-b{padding:15px 18px 4px}
.propuesta-b .txt{font-size:14.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;
  letter-spacing:-.01em}
.propuesta-f{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 16px;align-items:center}

.lectura{margin:16px auto 6px;max-width:700px;background:var(--veil);border-radius:var(--r-l);padding:15px 18px}
.lectura .fila{display:flex;gap:12px;padding:6px 0;font-size:13.5px;align-items:flex-start}
.lectura .fila dt{color:var(--mist);flex:0 0 112px}
.lectura .fila dd{flex:1;min-width:0;line-height:1.5}
.termo{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
.termo i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.termo.caliente{color:var(--gn)} .termo.caliente i{background:var(--gn)}
.termo.tibio{color:var(--am)}    .termo.tibio i{background:var(--am)}
.termo.frio{color:var(--mist)}   .termo.frio i{background:var(--mist)}

.pensando{display:flex;align-items:center;gap:10px;justify-content:center;padding:18px;
  font-size:13.5px;color:var(--mist)}
.pensando .bolas{display:flex;gap:5px}
.pensando .bolas i{width:7px;height:7px;border-radius:50%;background:var(--cy);
  animation:latir 1.2s infinite ease-in-out}
.pensando .bolas i:nth-child(2){animation-delay:.15s}
.pensando .bolas i:nth-child(3){animation-delay:.3s}
@keyframes latir{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ════════════════════════════════════════════════════════
   AJUSTES
   ════════════════════════════════════════════════════════ */
.aj-fila{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--edge)}
.aj-fila:first-child{border-top:0}
.aj-fila .que{flex:1;min-width:0}
.aj-fila .que b{font-size:14px;font-weight:600;letter-spacing:-.015em;display:block}
.aj-fila .que span{font-size:12.5px;color:var(--mist);line-height:1.5;display:block;margin-top:2px}
.aj-fila .cual{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.aj-fila select,.aj-fila input{width:auto;min-width:150px}
.aj-fila input[type=number]{width:110px;min-width:0;text-align:right;font-family:var(--mo);letter-spacing:-.04em}

/* interruptor */
.switch{width:46px;height:27px;border-radius:999px;background:var(--edge);position:relative;
  cursor:pointer;transition:background .18s;flex:0 0 46px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:var(--lift-2);transition:transform .18s}
.switch.on{background:var(--cy)}
.switch.on::after{transform:translateX(19px)}

/* estado de la conexión */
.conexion{display:flex;align-items:center;gap:13px;background:var(--veil);border-radius:var(--r-m);
  padding:15px 17px;margin-bottom:14px}
.conexion .luz{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center}
.conexion .luz svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.conexion.si .luz{background:var(--gn-mist);color:var(--gn)}
.conexion.no .luz{background:var(--am-mist);color:var(--am)}
.conexion .dice{flex:1;min-width:0}
.conexion .dice b{font-size:14px;font-weight:600;display:block;letter-spacing:-.015em}
.conexion .dice span{font-size:12.5px;color:var(--mist);display:block;margin-top:2px;line-height:1.5}
.conexion .dice code{font-family:var(--mo);font-size:12px;background:var(--sheet);
  padding:2px 7px;border-radius:6px;letter-spacing:-.03em}

/* barra de gasto */
.gasto-caja{background:var(--veil);border-radius:var(--r-m);padding:15px 17px}
.gasto-cifras{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.gasto-cifras .g{font-family:var(--mo);font-size:26px;font-weight:600;letter-spacing:-.06em}
.gasto-cifras .de{font-size:13px;color:var(--mist)}
.gasto-barra{height:8px;background:var(--edge);border-radius:999px;overflow:hidden}
.gasto-barra i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--cy-2),var(--cy));transition:width .5s}
.gasto-barra.alto i{background:linear-gradient(90deg,#E8A33D,var(--am))}
.gasto-barra.tope i{background:linear-gradient(90deg,#E2705F,var(--rd))}
.gasto-pie{display:flex;justify-content:space-between;font-size:12px;color:var(--mist);margin-top:8px}

.dias{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:14px}
.dias .d{flex:1;background:var(--cy-mist);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.dias .d:hover{background:var(--cy)}
.dias .d .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;
  border:1px solid var(--edge);
  background:var(--aviso-fondo);color:var(--aviso-texto);font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .13s;font-family:var(--mo);letter-spacing:-.03em}
.dias .d:hover .tip{opacity:1}

/* ════════════════════════════════════════════════════════
   EL TRATO
   El vendedor pone el precio, NOVA vigila el margen.
   ════════════════════════════════════════════════════════ */
.trato{position:absolute;left:0;right:0;bottom:0;max-height:84%;z-index:22;
  background:var(--sheet);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--lift-4);
  display:none;flex-direction:column;overflow:hidden;border:1px solid var(--edge)}
.trato.on{display:flex}
.trato-h{flex:0 0 auto;padding:14px 18px 10px;display:flex;align-items:center;gap:11px}
.trato-h b{font-size:15px;font-weight:600;letter-spacing:-.03em}
.trato-b{flex:1;min-height:0;overflow:auto;padding:0 18px 8px}
.trato-f{flex:0 0 auto;padding:12px 18px 16px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.tl-head{display:grid;grid-template-columns:1fr 78px 104px 96px 34px;gap:9px;margin-bottom:7px}
.tl-head span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost)}
.tl{display:grid;grid-template-columns:1fr 78px 104px 96px 34px;gap:9px;align-items:center;margin-bottom:8px}
.tl input{text-align:right;font-family:var(--mo);letter-spacing:-.04em}
.tl input.rompe{background:var(--am-mist);box-shadow:inset 0 0 0 1.5px var(--am)}
.tl input.pierde{background:var(--rd-mist);box-shadow:inset 0 0 0 1.5px var(--rd)}
.tl .suma{font-family:var(--mo);font-size:13.5px;font-weight:600;text-align:right;letter-spacing:-.045em}
.tl .suma small{display:block;font-size:10.5px;font-weight:400;color:var(--ghost)}
.tl .quita{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ghost);background:var(--veil)}
.tl .quita:hover{color:var(--rd);background:var(--rd-mist)}
.tl .quita svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* lo que dice NOVA del margen */
.vigila{border-radius:var(--r-m);padding:13px 15px;margin:12px 0 0;display:flex;gap:11px;
  align-items:flex-start;font-size:13.5px;line-height:1.55}
.vigila svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.9;margin-top:1px}
.vigila.bien{background:var(--gn-mist);color:var(--gn)}
.vigila.ojo{background:var(--am-mist);color:var(--am)}
.vigila.grave{background:var(--rd-mist);color:var(--zt-rojo)}
.vigila b{font-weight:600}

.cuentas{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;margin-top:13px}
.cuenta{background:var(--veil);border-radius:var(--r-m);padding:11px 13px}
.cuenta .k{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost)}
.cuenta .v{font-family:var(--mo);font-size:17px;font-weight:600;letter-spacing:-.05em;margin-top:3px}
.cuenta.privada{background:var(--sheet);box-shadow:inset 0 0 0 1px var(--edge)}
.cuenta.privada .k{display:flex;align-items:center;gap:5px}
.cuenta.privada .k svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}

.motivo-caja{margin-top:13px}
.motivo-caja label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ghost);margin-bottom:6px}
.motivo-caja input{width:100%;height:40px;border-radius:11px;background:var(--veil);border:0;
  padding:0 14px;font-size:14px}
.motivo-caja input:focus{outline:none;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--cy)}
.motivo-rapido{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.motivo-rapido button{height:28px;padding:0 11px;border-radius:999px;background:var(--veil);
  font-size:12.5px;color:var(--slate)}
.motivo-rapido button:hover{background:var(--edge);color:var(--ink)}

/* trato ya guardado, en el hilo */
.trato-tarjeta{margin:16px auto 6px;max-width:700px;background:var(--sheet);border-radius:var(--r-l);
  box-shadow:var(--lift-3);overflow:hidden}
.trato-tarjeta .cab{display:flex;align-items:center;gap:10px;padding:12px 17px;background:var(--veil)}
.trato-tarjeta .cab b{font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.trato-tarjeta .cab .num{margin-left:auto;font-family:var(--mo);font-size:11.5px;color:var(--ghost)}
.trato-tarjeta .cue{padding:13px 17px}
.trato-tarjeta .ren{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0}
.trato-tarjeta .ren .n{color:var(--slate);flex:1;min-width:0}
.trato-tarjeta .ren .p{font-family:var(--mo);letter-spacing:-.04em;flex:0 0 auto}
.trato-tarjeta .total{display:flex;justify-content:space-between;padding:10px 0 2px;margin-top:8px;
  border-top:1px solid var(--edge);font-size:15px;font-weight:600}
.trato-tarjeta .total .p{font-family:var(--mo);letter-spacing:-.05em}
.trato-tarjeta .pie{display:flex;gap:8px;flex-wrap:wrap;padding:12px 17px 15px;align-items:center}

/* ════════════════════════════════════════════════════════
   COTIZACIONES
   ════════════════════════════════════════════════════════ */
.cot-fila{display:grid;grid-template-columns:auto 1fr auto;gap:0 13px;align-items:center;
  background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);
  padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:box-shadow .14s,transform .14s}
.cot-fila:hover{box-shadow:var(--lift-3);transform:translateY(-1px)}
.cot-num{font-family:var(--mo);font-size:12.5px;font-weight:600;letter-spacing:-.04em;
  color:var(--cy-deep);grid-row:1/3;background:var(--cy-mist);border-radius:9px;
  padding:9px 11px;text-align:center;line-height:1.3}
.cot-num small{display:block;font-size:9.5px;color:var(--cy-deep);opacity:.65;font-weight:500}
.cot-fila .quien{font-size:14px;font-weight:600;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cot-fila .meta{font-size:12px;color:var(--mist);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.cot-fila .plata{grid-row:1/3;text-align:right}
.cot-fila .plata .v{font-family:var(--mo);font-size:16px;font-weight:600;letter-spacing:-.05em}
.cot-fila .plata .e{margin-top:4px}

/* armador */
.arm-cab{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px;margin-bottom:18px}
.cl-fila{display:grid;grid-template-columns:1fr 76px 104px 96px 34px;gap:9px;align-items:center;margin-bottom:8px}
.cl-head{display:grid;grid-template-columns:1fr 76px 104px 96px 34px;gap:9px;margin-bottom:7px}
.cl-head span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost)}
.cl-fila input.num{text-align:right;font-family:var(--mo);letter-spacing:-.04em}
.cl-fila .suma{font-family:var(--mo);font-size:13.5px;font-weight:600;text-align:right;letter-spacing:-.045em}
.cl-fila .quita{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ghost);background:var(--veil)}
.cl-fila .quita:hover{color:var(--rd);background:var(--rd-mist)}
.cl-fila .quita svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

.cl-tot{display:flex;justify-content:flex-end;margin-top:16px}
.cl-tot .caja{min-width:250px;background:var(--veil);border-radius:var(--r-m);padding:14px 16px}
.cl-tot .r{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--slate)}
.cl-tot .r b{font-family:var(--mo);letter-spacing:-.04em;color:var(--ink)}
.cl-tot .g{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;
  margin-top:8px;border-top:1px solid var(--edge)}
.cl-tot .g span{font-size:14px;font-weight:600}
.cl-tot .g b{font-family:var(--mo);font-size:20px;font-weight:600;letter-spacing:-.055em}

/* ficha de una cotización */
.cot-vista{background:var(--sheet);border-radius:var(--r-l);box-shadow:var(--lift-2);overflow:hidden}
.cot-vista .cab{padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cot-vista .cab h3{font-size:17px;font-weight:600;letter-spacing:-.03em}
.cot-vista .cuerpo{padding:0 20px 18px}
.cot-linea{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--edge);font-size:13.5px}
.cot-linea:first-child{border-top:0}
.cot-linea .n{flex:1;min-width:0}
.cot-linea .n small{display:block;font-family:var(--mo);font-size:10.5px;color:var(--ghost);
  letter-spacing:-.04em;margin-top:1px}
.cot-linea .p{font-family:var(--mo);letter-spacing:-.04em;flex:0 0 auto;text-align:right}

.visor{width:100%;height:min(74vh,760px);border:0;border-radius:var(--r-m);background:var(--veil)}

/* ════════════════════════════════════════════════════════
   DATOS DE LA EMPRESA
   ════════════════════════════════════════════════════════ */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.campos .ancho{grid-column:1/-1}
/* La detracción va de lado a lado: el buscador con el % al costado
   no entra en una columna. Clase propia y no «ancho», que esa solo
   vale dentro de .campos y la fila también se usa en .arm-cab. */
.det-ancha{grid-column:1/-1}
/* Rótulo, campo y pista ocupan cada uno una fila del grid de
   arriba, no del suyo: así el campo arranca a la misma altura en
   toda la fila aunque un rótulo se parta en dos líneas y el de al
   lado quepa en una. Sin esto los recuadros salen escalonados.
   Se queda fuera «ancho», que ocupa la fila entera él solo y a
   veces mete una tira de botones donde va el campo.
   El row-gap vuelve a 0 porque el hueco de 14px es para separar
   campos entre sí, no el rótulo de su casilla: eso ya lo dan los
   márgenes de label y hint. */
.campos .fld:not(.ancho){display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.campos .fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ghost);margin-bottom:6px}
.campos .fld input,.campos .fld select,.campos .fld textarea{
  min-height:40px;padding:10px 14px}
.campos .fld textarea{min-height:96px;font-size:13.5px}
.campos .fld .hint{display:block;font-size:11.5px;color:var(--ghost);margin-top:5px;line-height:1.45}
/* La misma pista de arriba, pero guardada detrás de una «i». El
   rótulo se queda limpio y el texto sale cuando se pregunta por
   él: en una pantalla con muchas casillas, toda la ayuda a la
   vista a la vez satura y ya no la lee nadie.
   El globo sale hacia arriba porque el panel recorta por abajo.
   Hereda la letra del rótulo, así que hay que apagarle las
   mayúsculas y el espaciado o el globo sale gritando. */
.ayuda{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:6px;padding:0;border:0;border-radius:50%;
  background:var(--edge);color:var(--mist);cursor:help;vertical-align:-2px;
  font-size:10px;font-weight:700;font-style:italic;line-height:1;letter-spacing:0}
.ayuda:hover,.ayuda:focus-visible{background:var(--ink);color:var(--sheet);outline:0}
.ayuda::after{content:attr(data-dice);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);width:max-content;max-width:220px;padding:8px 11px;
  border-radius:var(--r-s);background:var(--ink);color:var(--sheet);
  font-size:11.5px;font-weight:400;font-style:normal;line-height:1.45;letter-spacing:0;
  text-transform:none;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transition:opacity .14s;z-index:6;pointer-events:none}
.ayuda:hover::after,.ayuda:focus-visible::after{opacity:1;visibility:visible}
.guardado{font-size:12.5px;color:var(--gn);display:flex;align-items:center;gap:6px;opacity:0;
  transition:opacity .2s}
.guardado.on{opacity:1}
.guardado svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}

/* logo */
.logo-zona{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-marco{width:170px;height:74px;flex:0 0 170px;border-radius:var(--r-m);background:var(--veil);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:background .14s,box-shadow .14s}
.logo-marco:hover{background:var(--cy-mist);box-shadow:inset 0 0 0 1.5px var(--cy)}
.logo-marco img{max-width:150px;max-height:60px;object-fit:contain}
.logo-marco .vacio{text-align:center;color:var(--ghost)}
.logo-marco .vacio svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5}
.logo-marco .vacio span{display:block;font-size:11.5px;margin-top:5px}
.logo-acc{display:flex;flex-direction:column;gap:7px}

/* cuentas de pago */
.cuenta-f{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);
  padding:13px 16px;margin-bottom:8px}
.cuenta-f.off{opacity:.5}
.cuenta-f .sigla{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;background:var(--cy-mist);color:var(--cy-deep)}
.cuenta-f .datos b{font-size:14px;font-weight:600;letter-spacing:-.015em;display:block}
.cuenta-f .datos .n{font-family:var(--mo);font-size:12.5px;color:var(--slate);
  letter-spacing:-.04em;margin-top:2px}
.cuenta-f .datos .c{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.cuenta-f .acc{display:flex;gap:6px;align-items:center}

.nueva-cuenta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  background:var(--veil);border-radius:var(--r-m);padding:14px 16px;margin-top:10px}
.nueva-cuenta.oculta{display:none}
.nueva-cuenta input,.nueva-cuenta select{background:var(--sheet);box-shadow:inset 0 0 0 1px var(--edge)}
.nueva-cuenta input:focus,.nueva-cuenta select:focus{background:var(--sheet);
  box-shadow:inset 0 0 0 1.5px var(--cy)}
.nueva-cuenta .pie{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}

/* ════════════════════════════════════════════════════════
   MENÚ LATERAL
   Las áreas se despliegan; abierto muestra nombres y
   plegado deja solo iconos con su etiqueta al pasar.
   Se guarda como lo dejaste. Nada se mueve solo.

   Todo el menú vive en este bloque. Antes estaba en dos
   secciones que se pisaban: una ponía las áreas en 35px
   y la otra, doscientas líneas más abajo, en 38px.
   ════════════════════════════════════════════════════════ */

/* secciones que se turnan dentro de una pantalla (Mi empresa) */
.bloque.oculto{display:none}

/* ── la marca de arriba ── */
.side .brand{padding:2px 6px 18px}

/* ── las áreas ── */
.nav .area{display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;
  border-radius:11px;color:var(--slate);font-size:14px;font-weight:500;cursor:pointer;
  width:100%;text-align:left;
  transition:background .13s,color .13s,box-shadow .13s}
.nav .area:hover{background:var(--veil);color:var(--ink)}
.nav .area.abierta{color:var(--ink);font-weight:600}
.nav .area.sola.on{background:var(--sheet);color:var(--ink);font-weight:600;
  box-shadow:var(--lift-2)}
.nav .area.sola.on > svg:first-child{stroke:var(--cy)}
.nav .area > svg:first-child{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;
  fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.nav .area .flecha{margin-left:auto;width:13px;height:13px;flex:0 0 13px;
  stroke:var(--ghost);fill:none;stroke-width:2;transition:transform .18s}
.nav .area.abierta .flecha{transform:rotate(90deg)}
.nav .area .n{margin-left:auto;font-family:var(--mo);font-size:10.5px;font-weight:600;
  color:#fff;background:var(--rd);border-radius:999px;padding:1px 7px;letter-spacing:-.04em}
.nav .area.abierta .n{margin-left:auto;margin-right:6px}

/* ── los submenús ── */
.nav .sub{display:none;padding:2px 0 6px 0;position:relative}
.nav .sub.on{display:block}
.nav .sub::before{content:"";position:absolute;left:21px;top:2px;bottom:8px;width:1px;
  background:var(--edge)}
.nav .sub a{display:flex;align-items:center;height:33px;padding:0 10px 0 34px;
  border-radius:10px;color:var(--mist);font-size:13.5px;font-weight:500;cursor:pointer;
  text-decoration:none;position:relative;
  transition:background .13s,color .13s,box-shadow .13s}
.nav .sub a:hover{background:var(--veil);color:var(--ink)}
.nav .sub a.on{background:var(--sheet);color:var(--ink);font-weight:600;
  box-shadow:var(--lift-1)}
.nav .sub a.on::before{content:"";position:absolute;left:20px;top:10px;width:3px;
  height:13px;border-radius:2px;background:var(--cy)}
.nav .sub a .n{margin-left:auto;font-family:var(--mo);font-size:10.5px;
  color:var(--ghost);letter-spacing:-.04em}
.nav .sub a.on .n{color:var(--cy)}

.me:hover{background:var(--veil)}

/* ── el botón de plegar ── */
.plegar{margin-top:auto;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;
  border-radius:11px;color:var(--ghost);font-size:12.5px;font-weight:500;cursor:pointer;
  width:100%;transition:background .13s,color .13s}
.plegar:hover{background:var(--veil);color:var(--slate)}
.plegar svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}

/* ── plegado ── */
body.plegado .side{width:70px;flex:0 0 70px;padding:12px 10px 10px;
  align-items:center;overflow:hidden}
body.plegado .nav{width:100%}
body.plegado .nav .sub{display:none!important}

body.plegado .brand{padding:2px 0 18px;justify-content:center}
body.plegado .brand .txt{display:none}
body.plegado .brand .glyph{width:38px;height:38px;border-radius:13px}
body.plegado .brand .glyph svg{width:20px;height:20px}

body.plegado .nav .area{position:relative;justify-content:center;padding:0;
  width:50px;height:50px;border-radius:14px;margin:0 auto 3px}
body.plegado .nav .area > svg:first-child{width:22px;height:22px;flex:0 0 22px;
  stroke-width:1.55}
body.plegado .nav .area span,
body.plegado .nav .area .flecha{display:none}
body.plegado .nav .area .n{position:absolute;top:5px;right:7px;margin:0;padding:0 5px;
  font-size:9.5px;line-height:14px}

/* el área abierta se queda resaltada aunque no se lea su nombre */
body.plegado .nav .area.abierta{background:var(--sheet);box-shadow:var(--lift-2)}

body.plegado .plegar{width:50px;height:44px;border-radius:13px;justify-content:center;
  padding:0;margin-left:auto;margin-right:auto}
body.plegado .plegar span{display:none}
body.plegado .plegar svg{width:18px;height:18px;transform:rotate(180deg)}

body.plegado .me .face{width:34px;height:34px;flex:0 0 34px;font-size:12px}

/* ── la etiqueta con el nombre, solo plegado ── */
body.plegado .nav .area::after{
  content:attr(data-tip);position:absolute;left:60px;top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--aviso-fondo);color:var(--aviso-texto);font-size:12.5px;font-weight:500;white-space:nowrap;
  padding:6px 11px;border-radius:8px;box-shadow:var(--lift-3);opacity:0;pointer-events:none;
  transition:opacity .13s,transform .13s;z-index:60}
body.plegado .nav .area:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
/* si el área ya está abierta, el nombre sobra */
body.plegado .nav .area.abierta::after{display:none}

/* ── en pantallas chicas arranca plegado, con el botón a mano ── */
@media (max-width:820px){
  .side{width:70px;flex:0 0 70px;padding:12px 10px 10px;align-items:center;overflow:hidden}
  .nav .sub{display:none!important}
  .brand{padding:2px 0 18px;justify-content:center}
  .brand .txt{display:none}
  .brand .glyph{width:38px;height:38px;border-radius:13px}
  .brand .glyph svg{width:20px;height:20px}
  .sect{display:none}
  .nav .area{position:relative;justify-content:center;padding:0;
    width:50px;height:50px;border-radius:14px;margin:0 auto 3px}
  .nav .area > svg:first-child{width:22px;height:22px;flex:0 0 22px}
  .nav .area span,
  .nav .area .flecha,
  .nav .area .n{display:none}

  body.abierto .side{width:218px;flex:0 0 218px;padding:12px 9px 10px;
    align-items:stretch;overflow:visible}
  body.abierto .nav .sub{display:none!important}
  body.abierto .nav .sub.on{display:block!important}
  body.abierto .brand{padding:2px 6px 18px;justify-content:flex-start}
  body.abierto .brand .txt{display:block}
  body.abierto .nav .area{justify-content:flex-start;padding:0 10px;width:100%;
    height:38px;border-radius:11px}
  body.abierto .nav .area > svg:first-child{width:17px;height:17px;flex:0 0 17px}
  body.abierto .nav .area span,body.abierto .nav .area .flecha{display:block}
  body.abierto .nav .area::after{display:none}
}

/* ── mientras trae la pantalla nueva ── */
.cargando .main{opacity:.55;transition:opacity .12s}
.cargando{cursor:progress}
html:not(.cargando) .main{animation:entrar .22s cubic-bezier(.2,.8,.3,1)}
@keyframes entrar{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* barra fina de progreso arriba */
.cargando::before{
  content:"";position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--cy-2),var(--cy));
  transform-origin:0 50%;animation:avanzar 1.1s ease-out infinite}
@keyframes avanzar{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(.85)}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html:not(.cargando) .main{animation:none}
  .cargando::before{animation:none;transform:scaleX(.4)}
}


/* ════════════════════════════════════════════════════════
   PERSONAS Y EMPRESAS
   ════════════════════════════════════════════════════════ */
.clases{display:flex;gap:7px;flex-wrap:wrap;padding:0 20px 14px}
.clase{height:34px;padding:0 14px;border-radius:999px;background:var(--veil);font-size:13px;
  font-weight:500;color:var(--slate);display:inline-flex;align-items:center;gap:8px;
  transition:background .13s,color .13s,box-shadow .13s}
.clase:hover{background:var(--edge);color:var(--ink)}
.clase.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-2)}
.clase i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.clase .n{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.clase.on .n{color:var(--cy)}

/* colores de cada clase, siempre los mismos */
.c-nuevo{background:#9AA5AF}          .t-nuevo{background:var(--veil);color:var(--slate)}
.c-una_vez{background:#6B55C8}        .t-una_vez{background:var(--vi-mist);color:var(--vi)}
.c-seguido{background:#12805A}        .t-seguido{background:var(--gn-mist);color:var(--gn)}
.c-enfriando{background:#B4761A}      .t-enfriando{background:var(--am-mist);color:var(--am)}
.c-dormido{background:#8892A0}        .t-dormido{background:var(--veil);color:#7E8D99}
.c-pregunta_no_compra{background:#0093DA} .t-pregunta_no_compra{background:var(--cy-mist);color:var(--cy-deep)}

.persona-f{display:flex;align-items:center;gap:14px;
  background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);
  padding:13px 16px;margin-bottom:8px;cursor:pointer;
  transition:box-shadow .14s,transform .14s}
.persona-f:hover{box-shadow:var(--lift-3);transform:translateY(-1px)}
.persona-f .cara{width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:-.02em}
.persona-f .med{flex:1 1 auto;min-width:0}
.persona-f .nom{font-size:14.5px;font-weight:600;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona-f .bajo{font-size:12.5px;color:var(--mist);margin-top:3px;display:flex;gap:10px;
  flex-wrap:wrap;align-items:center;min-width:0}
.persona-f .bajo .emp{color:var(--slate);font-weight:500}
.persona-f .bajo .mo{font-family:var(--mo);font-size:11.5px;letter-spacing:-.04em}
.persona-f .der{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;text-align:right}
.persona-f .plata{font-family:var(--mo);font-size:14px;font-weight:600;letter-spacing:-.05em}
.persona-f .aviso{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;color:var(--am);white-space:nowrap}
.persona-f .aviso.tarde{color:var(--rd)}
.persona-f .aviso svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}

@media (max-width:640px){
  .persona-f{flex-wrap:wrap}
  .persona-f .der{flex:1 1 100%;flex-direction:row;align-items:center;
    justify-content:flex-start;padding-left:56px;margin-top:2px}
}

.roles{display:flex;gap:5px}
.rol{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--veil);color:var(--mist)}
.rol.cli{background:var(--cy-mist);color:var(--cy-deep)}
.rol.prov{background:var(--vi-mist);color:var(--vi)}

/* ficha de la persona */
.ficha-p{display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:start}
@media (max-width:1100px){ .ficha-p{grid-template-columns:1fr} }

.linea-t{position:relative;padding-left:26px}
.linea-t::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1.5px;background:var(--edge)}
.hito{position:relative;padding:0 0 20px}
.hito::before{content:"";position:absolute;left:-23px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--sheet);box-shadow:0 0 0 2px var(--edge)}
.hito.cotizacion::before{box-shadow:0 0 0 2px var(--cy)}
.hito.conversacion::before{box-shadow:0 0 0 2px var(--vi)}
.hito.compra::before{box-shadow:0 0 0 2px var(--gn)}
.hito.nota::before{box-shadow:0 0 0 2px var(--ghost)}
.hito .cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hito .cab b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.hito .cab .cuando{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.hito .det{font-size:12.5px;color:var(--mist);margin-top:2px;line-height:1.5}
.hito .plata{font-family:var(--mo);font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:-.04em}

.tarea-f{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-top:1px solid var(--edge)}
.tarea-f:first-child{border-top:0}
.tarea-f.hecha{opacity:.5}
.tarea-f .caja{width:19px;height:19px;flex:0 0 19px;border-radius:6px;margin-top:1px;
  background:var(--veil);box-shadow:inset 0 0 0 1.5px var(--edge);display:grid;place-items:center;
  cursor:pointer;transition:background .13s,box-shadow .13s}
.tarea-f .caja:hover{box-shadow:inset 0 0 0 1.5px var(--cy)}
.tarea-f.hecha .caja{background:var(--gn);box-shadow:none}
.tarea-f .caja svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;opacity:0}
.tarea-f.hecha .caja svg{opacity:1}
.tarea-f .qué{flex:1;min-width:0}
.tarea-f .qué b{font-size:13.5px;font-weight:500;letter-spacing:-.01em;display:block}
.tarea-f.hecha .qué b{text-decoration:line-through}
.tarea-f .cuando{font-size:11.5px;color:var(--mist);margin-top:2px}
.tarea-f .cuando.tarde{color:var(--rd);font-weight:600}
.tarea-f .quitar{color:var(--ghost);opacity:0;transition:opacity .13s}
.tarea-f:hover .quitar{opacity:1}
.tarea-f .quitar:hover{color:var(--rd)}
.tarea-f .quitar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}





/* ════════════════════════════════════════════════════════
   POS · pantalla de mostrador
   ════════════════════════════════════════════════════════ */
body.pos-modo{overflow:hidden}
.pos-todo{position:fixed;inset:0;z-index:40;background:var(--canvas);display:flex;flex-direction:column}
/* la ventana de cobro va siempre encima del POS */
body.pos-modo .veil{z-index:120}
body.pos-modo .toast{z-index:130}

/* ── barra superior ── */
.pos-top{flex:0 0 auto;height:56px;background:var(--zt-negro);display:flex;align-items:center;
  gap:12px;padding:0 16px}
.pos-top .volver{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);flex:0 0 36px;
  transition:background .13s,color .13s}
.pos-top .volver:hover{background:rgba(255,255,255,.16);color:#fff}
.pos-top .volver svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.pos-top .marca-p{display:flex;align-items:baseline;gap:9px}
.pos-top .marca-p b{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.03em}
.pos-top .marca-p em{font-style:normal;font-size:10px;color:var(--cy);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.pos-top .lado{margin-left:auto;display:flex;align-items:center;gap:9px}
/* Esta barra es oscura en los dos temas (--zt-negro), asi que su texto
   tiene que ser claro siempre. --sheet no sirve: es la superficie, y en
   oscuro la superficie es oscura. --aviso-texto es el claro de ambos temas. */
.pos-top .chip{height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.09);
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--aviso-texto)}
.pos-top .chip b{font-family:var(--mo);letter-spacing:-.04em;color:#fff}
.pos-top .chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.pos-top .chip.aviso{background:rgba(191,24,24,.26);color:#FFC2C2}
.pos-top select{width:auto;height:34px;border-radius:999px;background:rgba(255,255,255,.09);border:0;
  color:var(--aviso-texto);font-size:12.5px;padding:0 32px 0 14px;font-family:inherit;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.pos-top select:focus{outline:none;box-shadow:0 0 0 1.5px var(--cy)}
.pos-top select option{color:var(--ink);background:var(--sheet)}

.pos-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:1fr 560px;gap:12px;padding:12px}
@media (max-width:1440px){ .pos-cuerpo{grid-template-columns:1fr 500px} }
@media (max-width:1200px){ .pos-cuerpo{grid-template-columns:1fr 440px} }
@media (max-width:1000px){ .pos-cuerpo{grid-template-columns:1fr} }

/* ── izquierda ── */
.pos-izq{display:flex;flex-direction:column;min-height:0;gap:12px}
.pos-campo{height:54px;border-radius:var(--r-l);background:var(--sheet);box-shadow:var(--lift-2);
  display:flex;align-items:center;gap:14px;padding:0 22px;flex:0 0 auto;transition:box-shadow .15s}
.pos-campo:focus-within{box-shadow:inset 0 0 0 1.6px var(--cy),var(--lift-3)}
.pos-campo > svg{width:19px;height:19px;stroke:var(--ghost);fill:none;stroke-width:2;flex:0 0 19px}
.pos-campo:focus-within > svg{stroke:var(--cy)}
.pos-campo input{flex:1;min-width:0;border:0;background:none;font-size:16px;height:100%;letter-spacing:-.01em}
.pos-campo input:focus{outline:none}
.pos-campo .pista{font-size:11.5px;color:var(--ghost);font-family:var(--mo);
  letter-spacing:-.03em;white-space:nowrap}

.pos-cats{display:flex;gap:8px;overflow-x:auto;flex:0 0 auto;padding:1px;scrollbar-width:none}
.pos-cats::-webkit-scrollbar{display:none}
.pos-cat{height:38px;padding:0 17px;border-radius:11px;background:var(--sheet);box-shadow:var(--lift-1);
  font-size:13.5px;font-weight:500;color:var(--slate);white-space:nowrap;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;transition:background .13s,color .13s,box-shadow .13s}
.pos-cat:hover{color:var(--ink);box-shadow:var(--lift-2)}
.pos-cat .n{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.pos-cat.on{background:var(--cy);color:#fff;box-shadow:var(--glow)}
.pos-cat.on .n{color:rgba(255,255,255,.72)}

/* ── tarjetas de producto ── */
.pos-rejilla{flex:1;min-height:0;overflow:auto;padding:2px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:12px;align-content:start}
.tarjeta{background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:box-shadow .14s,transform .14s}
.tarjeta:hover{box-shadow:var(--lift-3);transform:translateY(-2px)}
.tarjeta.marcada{box-shadow:0 0 0 2px var(--cy),var(--lift-3)}

.tarjeta .foto{position:relative;width:100%;aspect-ratio:4/3;background:var(--veil);
  flex:0 0 auto;overflow:hidden}
.tarjeta .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:8px;display:block}
.tarjeta .foto .nada{position:absolute;inset:0;display:grid;place-items:center;color:var(--edge)}
.tarjeta .foto .nada svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.2}
.tarjeta .st{position:absolute;top:8px;right:8px;height:22px;min-width:28px;padding:0 8px;
  border-radius:7px;background:var(--sheet);color:var(--slate);
  font-family:var(--mo);font-size:11px;font-weight:600;letter-spacing:-.04em;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--lift-1);z-index:2}
.tarjeta .st.poco{background:var(--am);color:#fff}
.tarjeta .st.nada2{background:var(--zt-rojo);color:#fff}
.tarjeta .top{position:absolute;top:8px;left:8px;height:22px;padding:0 9px;border-radius:7px;
  background:var(--cy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;
  display:inline-flex;align-items:center;text-transform:uppercase;z-index:2}

.tarjeta .txt{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1;min-height:0}
.tarjeta .txt b{font-size:13px;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em}
.tarjeta .txt .cod{font-family:var(--mo);font-size:10.5px;color:var(--ghost);
  letter-spacing:-.04em;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta .txt .pv{font-family:var(--mo);font-size:17px;font-weight:600;letter-spacing:-.05em;
  color:var(--cy-deep);margin-top:9px}
.tarjeta .txt .pv small{font-family:var(--ui);font-size:10.5px;color:var(--ghost);
  font-weight:400;letter-spacing:0}

/* ── derecha: la cuenta ── */
.pos-der{background:var(--sheet);border-radius:var(--r-l);box-shadow:var(--lift-2);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pos-cab{padding:19px 20px 16px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pos-cab b{font-size:15px;font-weight:600;letter-spacing:-.03em;min-width:0}
.pos-cab .n{margin-left:auto;font-family:var(--mo);font-size:11.5px;color:var(--ghost);
  letter-spacing:-.04em}

/* encabezado de columnas, como una tabla de verdad. Lleva aire
   arriba porque antes que él va la franja del comprobante y el
   cliente: sin ese espacio los títulos quedan pegados a ella. */
.pos-cols{display:grid;grid-template-columns:1fr 108px 92px 28px;gap:14px;
  padding:21px 20px 11px;flex:0 0 auto;border-bottom:1px solid var(--edge)}
.pos-cols span{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost);min-width:0}
.pos-cols span:nth-child(2){text-align:center}
.pos-cols span:nth-child(3){text-align:right}

.pos-lista{flex:1;min-height:0;overflow:auto;padding:10px 10px}
.pos-reng{display:grid;grid-template-columns:1fr 108px 92px 28px;gap:14px;align-items:center;
  padding:15px 10px;border-radius:11px}
.pos-reng:hover{background:var(--veil)}
.pos-reng .qué{min-width:0}
.pos-reng .qué b{font-size:13.5px;font-weight:500;letter-spacing:-.012em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.pos-reng .cant{display:flex;align-items:center;justify-content:center;gap:2px}
.pos-reng .cant button{width:26px;height:26px;border-radius:8px;background:var(--veil);
  display:grid;place-items:center;color:var(--slate);font-size:15px;font-weight:600;flex:0 0 26px}
.pos-reng .cant button:hover{background:var(--cy-mist);color:var(--cy-deep)}
.pos-reng .cant input{width:40px;height:26px;border:0;background:none;text-align:center;
  font-family:var(--mo);font-size:13.5px;font-weight:600;letter-spacing:-.04em}
.pos-reng .cant input:focus{outline:none;background:var(--sheet);border-radius:7px;
  box-shadow:inset 0 0 0 1.5px var(--cy)}
.pos-reng .imp{font-family:var(--mo);font-size:14px;font-weight:600;letter-spacing:-.05em;text-align:right}
.pos-reng .x{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--ghost);background:var(--veil);transition:color .12s,background .12s}
.pos-reng .x:hover{color:#fff;background:var(--zt-rojo)}
.pos-reng .x svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.pos-reng.alerta{background:var(--am-mist);box-shadow:inset 0 0 0 1.5px var(--am)}

/* ── pie: totales alineados y el botón ancho abajo ── */
.pos-pie{display:block;flex:0 0 auto;padding:19px 20px 21px;
  border-top:1px solid var(--edge);background:var(--sheet)}
.pos-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:13.5px;color:var(--mist);padding:7px 0;flex-wrap:wrap;min-width:0}
.pos-tot b{font-family:var(--mo);font-size:13.5px;font-weight:500;letter-spacing:-.04em;
  color:var(--slate);white-space:nowrap}
.pos-tot.desc b{color:var(--cy-deep)}
.pos-total{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:13px;margin-top:9px;border-top:1.5px solid var(--edge)}
.pos-total span{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em;min-width:0}
.pos-total b{font-family:var(--mo);font-size:clamp(21px,2.1vw,28px);font-weight:600;letter-spacing:-.06em;
  color:var(--ink);white-space:nowrap;line-height:1}

.pos-botones{display:grid;grid-template-columns:1fr 1fr;gap:15px 8px;margin-top:18px}
.pos-botones .b{height:42px;justify-content:center;font-size:14px}
.pos-botones .b-key{grid-column:1/-1;height:54px;font-size:16.5px;font-weight:600;
  border-radius:var(--r-m)}

/* ════════════════════════════════════════════════════════
   COBRO
   Se elige un medio y cada uno pide lo suyo: el efectivo
   cuánto te dieron, Yape y Plin el número de operación,
   la tarjeta su referencia. Nada más.
   ════════════════════════════════════════════════════════ */
.pos-medios{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:13px}
.pos-medio{border-radius:var(--r-m);background:var(--veil);padding:21px 15px;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  cursor:pointer;transition:background .13s,box-shadow .13s}
.pos-medio:hover{background:var(--edge)}
.pos-medio .ico{width:42px;height:42px;flex:0 0 42px;stroke:var(--slate);fill:none;stroke-width:1.45}
.pos-medio .nom{font-size:14px;font-weight:600;color:var(--slate);line-height:1.25}
.pos-medio.on{background:var(--cy-mist);box-shadow:inset 0 0 0 1.7px var(--cy)}
.pos-medio.on .ico{stroke:var(--cy-deep)}
.pos-medio.on .nom{color:var(--cy-deep)}
.pos-medio .monto{display:none}
body.repartiendo .pos-medio .monto{display:block;width:100%;height:32px;border-radius:9px;
  background:var(--sheet);border:0;padding:0 10px;font-family:var(--mo);font-size:14px;
  font-weight:600;color:var(--slate);letter-spacing:-.04em;text-align:right;
  box-shadow:inset 0 0 0 1px var(--edge)}
body.repartiendo .pos-medio .monto:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--cy);
  color:var(--cy-deep)}
.pos-medio .monto::-webkit-outer-spin-button,
.pos-medio .monto::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-medio .monto{-moz-appearance:textfield}

.repartir{display:flex;align-items:center;gap:9px;margin-top:13px}
.repartir button{height:34px;padding:0 14px;border-radius:10px;background:transparent;
  box-shadow:inset 0 0 0 1.3px var(--edge);color:var(--slate);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;transition:background .12s,box-shadow .12s,color .12s}
.repartir button:hover{background:var(--veil);color:var(--ink);box-shadow:inset 0 0 0 1.3px var(--mist)}
.repartir button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
body.repartiendo .repartir button{background:var(--cy-mist);color:var(--cy-deep);
  box-shadow:inset 0 0 0 1.3px var(--cy)}

/* ── lo que pide cada medio ── */
.pide{margin-top:18px}
.pide .fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pide .fila.sola{grid-template-columns:1fr}

.campo-cobro{background:var(--veil);border-radius:var(--r-m);padding:14px 16px;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .14s,background .14s}
.campo-cobro:focus-within{background:var(--sheet);box-shadow:inset 0 0 0 1.6px var(--cy),var(--lift-2)}
.campo-cobro .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);display:flex;align-items:center;gap:7px}
.campo-cobro .k svg{width:13px;height:13px;flex:0 0 13px;stroke:var(--mist);fill:none;stroke-width:1.9}
.campo-cobro:focus-within .k svg{stroke:var(--cy)}
.campo-cobro .k .opcional{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  text-transform:none;color:var(--ghost);background:var(--sheet);
  border-radius:5px;padding:2px 8px;box-shadow:inset 0 0 0 1px var(--edge)}
.campo-cobro .dentro{display:flex;align-items:baseline;gap:8px;margin-top:7px}
.campo-cobro .signo{font-family:var(--mo);font-size:15px;color:var(--ghost);flex:0 0 auto}
.campo-cobro input{flex:1;min-width:0;height:auto;border:0;background:none;font-family:var(--mo);
  font-size:23px;font-weight:600;letter-spacing:-.055em;color:var(--ink);padding:0;line-height:1.15;
  -moz-appearance:textfield}
.campo-cobro input:focus{outline:none}
.campo-cobro input::placeholder{color:var(--edge);font-weight:500}
.campo-cobro input::-webkit-outer-spin-button,
.campo-cobro input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* el campo de referencia: mismo peso que el del monto */
.campo-cobro.texto{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--edge)}
.campo-cobro.texto:focus-within{box-shadow:inset 0 0 0 1.6px var(--cy),var(--lift-2)}
.campo-cobro.texto input{font-family:var(--mo);font-size:20px;font-weight:600;
  letter-spacing:-.03em;color:var(--ink)}
.campo-cobro.texto input::placeholder{font-family:var(--ui);font-size:14.5px;
  font-weight:400;color:var(--mist);letter-spacing:-.01em}

.caja-lee{background:var(--veil);border-radius:var(--r-m);padding:13px 16px}
.caja-lee .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost)}
.caja-lee .v{font-family:var(--mo);font-size:23px;font-weight:600;letter-spacing:-.055em;
  margin-top:5px;line-height:1.1}
.caja-lee.vuelto{background:var(--gn-mist)}
.caja-lee.vuelto .k,.caja-lee.vuelto .v{color:var(--gn)}
.caja-lee.falta{background:var(--rd-mist)}
.caja-lee.falta .k,.caja-lee.falta .v{color:var(--zt-rojo)}

.rapidos{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.rapidos button{height:38px;padding:0 16px;border-radius:10px;background:var(--veil);
  font-family:var(--mo);font-size:13.5px;font-weight:600;color:var(--slate);letter-spacing:-.04em;
  transition:background .12s,color .12s}
.rapidos button:hover{background:var(--cy-mist);color:var(--cy-deep)}

.modal.cobro{max-width:780px}
@media (max-width:560px){ .pide .fila{grid-template-columns:1fr} }

/* ── caja y espera ── */
.caja-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pos-kt{background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);padding:15px 17px}
.pos-kt .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost)}
.pos-kt .v{font-family:var(--mo);font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.06em;margin-top:5px}
.pos-kt .d{font-size:12px;color:var(--mist);margin-top:3px}

.pos-espera{display:flex;align-items:center;gap:12px;background:var(--sheet);border-radius:var(--r-m);
  box-shadow:var(--lift-1);padding:13px 15px;margin-bottom:8px;cursor:pointer;transition:box-shadow .13s}
.pos-espera:hover{box-shadow:var(--lift-3)}
.pos-espera .qué{flex:1;min-width:0}
.pos-espera .qué b{font-size:14px;font-weight:600;letter-spacing:-.015em}
.pos-espera .qué .d{font-size:12px;color:var(--mist);margin-top:2px}
.pos-espera .plata{font-family:var(--mo);font-size:15px;font-weight:600;letter-spacing:-.05em}

.ticket{background:var(--sheet);border-radius:var(--r-m);padding:22px;max-width:330px;margin:0 auto;
  font-family:var(--mo);font-size:12px;line-height:1.65;box-shadow:var(--lift-2)}
.ticket .cab{text-align:center;font-family:var(--ui);margin-bottom:15px}
.ticket .cab b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.ticket .cab span{font-size:11px;color:var(--mist)}
.ticket .l{display:flex;justify-content:space-between;gap:10px}
.ticket .sep{border-top:1px dashed var(--edge);margin:11px 0}
.ticket .tt{display:flex;justify-content:space-between;font-size:15px;font-weight:700}

@media print{
  body *{visibility:hidden}
  .ticket,.ticket *{visibility:visible}
  .ticket{position:fixed;left:0;top:0;box-shadow:none;max-width:100%}
  /* la guía se imprime sola: sin menú, sin botones y sin la
     pantalla de atrás, que va con el chofer en la mano */
  #gu-papel,#gu-papel *{visibility:visible}
  #gu-papel{position:fixed;left:0;top:0;width:100%;max-height:none;
    overflow:visible;box-shadow:none;padding:0}
}


/* ── descuento sobre el subtotal ── */
/* ── el jefe autoriza en el sitio ──
   Va en el pie de la cuenta, encima de los totales: el vendedor
   tiene que seguir viendo lo que cobra mientras el jefe teclea.
   Ámbar y no rojo: no es un error, es un permiso que falta. */
.pos-permiso{border:1.4px solid var(--am);border-radius:12px;padding:11px 13px;margin-bottom:12px;
  background:var(--am-mist)}
.pos-permiso .dice{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:9px}
.pos-permiso .campos{display:flex;gap:8px;flex-wrap:wrap}
.pos-permiso input{height:34px;flex:1 1 130px;min-width:110px;font-size:13px}
.pos-permiso .b{flex:0 0 auto}
/* Mientras dure el vale, a la vista de quién es el permiso. */
.pos-vale{font-size:11.5px;color:var(--am);font-weight:600;margin-left:auto}
.pos-desc{display:flex;align-items:center;gap:9px;padding:6px 0 2px}
.pos-desc .b-s{height:30px;padding:0 12px;font-size:12.5px}
.pos-desc .puesto{font-family:var(--mo);font-size:12.5px;font-weight:600;
  color:var(--cy-deep);letter-spacing:-.04em;margin-left:auto}

.desc-modo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.desc-modo button{height:44px;border-radius:var(--r-m);background:var(--veil);
  font-size:14px;font-weight:600;color:var(--slate);
  transition:background .13s,color .13s,box-shadow .13s}
.desc-modo button:hover{background:var(--edge);color:var(--ink)}
.desc-modo button.on{background:var(--cy-mist);color:var(--cy-deep);
  box-shadow:inset 0 0 0 1.6px var(--cy)}

/* el sku en el renglón */
.pos-reng .qué .sku-l{font-family:var(--mo);font-size:10.5px;color:var(--ghost);
  letter-spacing:-.04em;display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── que nada se corte, en ninguna pantalla ── */
.pos-todo *{min-width:0}

@media (max-width:1000px){
  .pos-cuerpo{grid-template-rows:1fr auto;overflow:auto}
  .pos-der{max-height:56vh}
  .pos-rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:700px){
  .pos-top{height:52px;padding:0 10px;gap:8px}
  .pos-top .marca-p em{display:none}
  .pos-top .chip{padding:0 11px;font-size:12px}
  .pos-cuerpo{padding:8px;gap:8px}
  .pos-campo{height:50px;padding:0 16px}
  .pos-campo .pista{display:none}
  .pos-rejilla{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .pos-cols,.pos-reng{grid-template-columns:1fr 92px 76px 26px;gap:9px}
  .pos-pie{padding:14px 15px 16px}
  .pos-botones .b-key{height:50px;font-size:15.5px}
  .medios,.pos-medios{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
}
@media (max-width:460px){
  .pos-top .lado select{max-width:110px}
  .pos-cols{display:none}
  .pos-reng{grid-template-columns:1fr auto;gap:8px 10px}
  .pos-reng .cant{grid-column:1;justify-content:flex-start;margin-top:6px}
  .pos-reng .imp{grid-column:2;grid-row:2;align-self:center}
  .pos-reng .x{grid-column:2;grid-row:1;justify-self:end}
  .desc-modo{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════════════
   REBAJAR EL PRECIO DE UNA LÍNEA
   El precio se toca y se abre esta ventana.
   La barra muestra en rojo la zona donde ya no conviene
   vender, para que se vea sin leer nada.
   ════════════════════════════════════════════════════════ */

/* ── el precio en la cuenta: pastilla con lápiz, se ve que se toca ── */
.pos-reng .precio{display:inline-flex;align-items:center;gap:7px;margin-top:5px;
  padding:4px 10px;border-radius:9px;cursor:pointer;background:var(--veil);
  transition:background .13s,box-shadow .13s}
.pos-reng .precio:hover{background:var(--cy-mist);box-shadow:inset 0 0 0 1.2px var(--cy)}
.pos-reng .precio .v{font-family:var(--mo);font-size:12.5px;color:var(--slate);letter-spacing:-.04em}
.pos-reng .precio:hover .v{color:var(--cy-deep)}
.pos-reng .precio .lapiz{width:13px;height:13px;flex:0 0 13px;stroke:var(--ghost);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .13s}
.pos-reng .precio:hover .lapiz{stroke:var(--cy-deep)}
.pos-reng .precio .antes{font-family:var(--mo);font-size:11px;color:var(--ghost);
  text-decoration:line-through;letter-spacing:-.04em}
.pos-reng .precio .baja{font-size:10px;font-weight:700;color:var(--cy-deep);
  background:var(--sheet);border-radius:5px;padding:2px 6px;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px var(--cy-mist)}

/* ── ficha del producto ── */
.rebaja-cab{display:flex;align-items:center;gap:14px;background:var(--veil);
  border-radius:var(--r-m);padding:15px 17px;margin-bottom:20px}
.rebaja-cab .mini{width:44px;height:44px;flex:0 0 44px;border-radius:11px;object-fit:contain;
  background:var(--sheet);padding:4px}
.rebaja-cab .sinfoto{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:var(--sheet);
  display:grid;place-items:center;color:var(--edge)}
.rebaja-cab .sinfoto svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.rebaja-cab .qué{flex:1;min-width:0}
.rebaja-cab .qué b{font-size:14px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.35}
.rebaja-cab .qué .d{font-family:var(--mo);font-size:11px;color:var(--ghost);
  letter-spacing:-.04em;margin-top:2px}
.rebaja-cab .lista{text-align:right;flex:0 0 auto}
.rebaja-cab .lista .k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost)}
.rebaja-cab .lista .v{font-family:var(--mo);font-size:15px;font-weight:600;letter-spacing:-.05em;
  margin-top:2px}

/* ── el campo del precio ── */
.precio-caja{display:flex;align-items:center;gap:12px;background:var(--veil);
  border-radius:var(--r-m);padding:18px 20px;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .15s}
.precio-caja:focus-within{background:var(--sheet);box-shadow:inset 0 0 0 1.6px var(--cy),var(--lift-2)}
.precio-caja .signo{font-family:var(--mo);font-size:19px;font-weight:500;color:var(--ghost);
  flex:0 0 auto;line-height:1}
.precio-caja input{flex:1;min-width:0;height:auto;border:0;background:none;font-family:var(--mo);
  font-size:32px;font-weight:600;letter-spacing:-.055em;color:var(--ink);line-height:1;padding:0;
  -moz-appearance:textfield}
.precio-caja input:focus{outline:none}
.precio-caja input::-webkit-outer-spin-button,
.precio-caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.precio-caja .baja-viva{flex:0 0 auto;height:30px;padding:0 13px;border-radius:9px;
  background:var(--sheet);color:var(--cy-deep);font-family:var(--mo);
  font-size:13px;font-weight:600;letter-spacing:-.035em;
  box-shadow:inset 0 0 0 1.4px var(--cy-mist);
  display:none;align-items:center}
.precio-caja.rebajado .baja-viva{display:inline-flex}
.precio-caja.ojo{box-shadow:inset 0 0 0 1.6px var(--am)}
.precio-caja.ojo .baja-viva{color:var(--am);box-shadow:inset 0 0 0 1.4px var(--am-mist)}
.precio-caja.mal{box-shadow:inset 0 0 0 1.6px var(--zt-rojo);background:var(--rd-mist)}
.precio-caja.mal .baja-viva{color:var(--zt-rojo);box-shadow:inset 0 0 0 1.4px rgba(191,24,24,.22)}

/* ── atajos ── */
.atajos{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.atajos .grupo{display:flex;gap:2px;background:var(--veil);border-radius:10px;padding:3px}
.atajos .grupo button{height:32px;padding:0 13px;border-radius:8px;background:none;
  font-family:var(--mo);font-size:13px;font-weight:600;color:var(--slate);letter-spacing:-.04em;
  transition:background .12s,color .12s,box-shadow .12s}
.atajos .grupo button:hover{background:var(--sheet);color:var(--cy-deep);box-shadow:var(--lift-1)}
.atajos .sin-margen{font-size:12.5px;color:var(--mist);line-height:1.45;flex:1;min-width:0}
.atajos .piso-btn{height:38px;padding:0 15px;border-radius:10px;background:transparent;
  box-shadow:inset 0 0 0 1.4px var(--rd-mist);color:var(--zt-rojo);
  font-size:13px;font-weight:600;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;transition:background .12s,box-shadow .12s}
.atajos .piso-btn:hover{background:var(--rd-mist);box-shadow:inset 0 0 0 1.4px var(--zt-rojo)}
.atajos .piso-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ── la barra: el mínimo se ve siempre, estés donde estés ── */
.barra{margin:26px 0 0}
.barra .riel{position:relative;height:8px;background:var(--veil);border-radius:999px;overflow:hidden}
.barra .lleno{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cy-2),var(--cy));transition:width .2s cubic-bezier(.2,.8,.3,1)}
.barra .lleno.ojo{background:linear-gradient(90deg,#E8A33D,var(--am))}
.barra .lleno.mal{background:linear-gradient(90deg,#E2705F,var(--zt-rojo))}

.barra .senal{position:relative;height:30px;margin-top:7px}
.barra .senal .punta{position:absolute;top:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:left .2s cubic-bezier(.2,.8,.3,1)}
.barra .senal .punta svg{width:10px;height:6px;fill:var(--cy);display:block}
.barra .senal .punta em{font-style:normal;font-size:11px;font-weight:500;color:var(--slate);
  white-space:nowrap;line-height:1.2;letter-spacing:-.005em}
.barra .senal .punta em b{font-family:var(--mo);font-weight:600;color:var(--cy-deep);
  letter-spacing:-.04em;margin-left:3px}
.barra .senal .punta.der{transform:translateX(-100%);align-items:flex-end}
.barra .senal .punta.izq{transform:translateX(0);align-items:flex-start}

.barra .pies{display:flex;justify-content:space-between;gap:16px;margin-top:6px}
.barra .pies span{font-size:11px;color:var(--ghost);display:flex;flex-direction:column;gap:3px;
  line-height:1.2}
.barra .pies span b{font-family:var(--mo);font-size:12.5px;font-weight:600;
  color:var(--slate);letter-spacing:-.045em}
.barra .pies .fin{align-items:flex-end;text-align:right}

/* ── el resultado ── */
.resultado{display:grid;grid-template-columns:1fr 1.25fr;gap:11px;margin-top:22px}
.resultado .caja{border-radius:var(--r-m);padding:15px 17px;background:var(--veil)}
.resultado .caja .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost);display:flex;align-items:center;gap:5px}
.resultado .caja .k svg{width:11px;height:11px;flex:0 0 11px;stroke:currentColor;fill:none;stroke-width:2.2}
.resultado .caja .v{font-family:var(--mo);font-size:20px;font-weight:600;letter-spacing:-.055em;
  margin-top:5px;line-height:1}
.resultado .caja .d{font-size:11.5px;color:var(--mist);margin-top:4px}
.resultado .tuyo{background:var(--gn-mist)}
.resultado .tuyo .k,.resultado .tuyo .v{color:var(--gn)}
.resultado .tuyo .d{color:var(--gn);opacity:.72}
.resultado .tuyo.ojo{background:var(--am-mist)}
.resultado .tuyo.ojo .k,.resultado .tuyo.ojo .v,.resultado .tuyo.ojo .d{color:var(--am)}
.resultado .tuyo.mal{background:var(--rd-mist)}
.resultado .tuyo.mal .k,.resultado .tuyo.mal .v,.resultado .tuyo.mal .d{color:var(--zt-rojo)}

@media (max-width:520px){
  .resultado{grid-template-columns:1fr}
  .atajos .piso-btn{margin-left:0;width:100%;justify-content:center}
  .precio-caja input{font-size:27px}
}


/* ════════════════════════════════════════════════════════
   VENTAS · el historial
   Todas las ventas, vengan de donde vengan.
   ════════════════════════════════════════════════════════ */
.vt-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;
  padding:0 20px 16px}
.vt-t{background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-1);padding:15px 17px}
.vt-t .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost)}
.vt-t .v{font-family:var(--mo);font-size:23px;font-weight:600;letter-spacing:-.06em;margin-top:5px}
.vt-t .d{font-size:12px;color:var(--mist);margin-top:3px}
.vt-t.gana .v{color:var(--gn)}

.vt-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 20px 14px}
.vt-cuando{display:flex;gap:2px;background:var(--veil);border-radius:11px;padding:3px}
.vt-cuando button{height:32px;padding:0 14px;border-radius:9px;background:none;
  font-size:13px;font-weight:500;color:var(--slate);transition:background .12s,color .12s,box-shadow .12s}
.vt-cuando button:hover{color:var(--ink)}
.vt-cuando button.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--lift-1)}
.vt-sel{height:38px;border-radius:11px;background:var(--sheet);box-shadow:var(--lift-1);
  border:0;padding:0 32px 0 14px;font-size:13px;color:var(--slate);font-family:inherit;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2AC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.vt-sel:focus{outline:none;box-shadow:var(--lift-2),inset 0 0 0 1.4px var(--cy)}
.vt-sel.on{color:var(--ink);font-weight:600;box-shadow:var(--lift-2),inset 0 0 0 1.4px var(--cy)}

/* el canal de cada venta */
.canal-p{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;
  border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.canal-p svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.canal-p.mostrador{background:var(--cy-mist);color:var(--cy-deep)}
.canal-p.whatsapp{background:var(--gn-mist);color:var(--gn)}
.canal-p.web{background:var(--vi-mist);color:var(--vi)}
.canal-p.telefono{background:var(--veil);color:var(--slate)}

.comp-p{display:inline-flex;align-items:center;gap:5px;font-family:var(--mo);
  font-size:11px;color:var(--ghost);letter-spacing:-.04em}
.comp-p.emitido{color:var(--gn)}
.comp-p.pendiente{color:var(--am)}

/* la ficha de una venta */
.vt-cab{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  background:var(--veil);border-radius:var(--r-m);padding:16px 18px;margin-bottom:18px}
.vt-cab .num{font-family:var(--mo);font-size:19px;font-weight:600;letter-spacing:-.05em}
.vt-cab .sub{font-size:12.5px;color:var(--mist);margin-top:4px;display:flex;gap:10px;
  flex-wrap:wrap;align-items:center}
.vt-cab .der{text-align:right}
.vt-cab .der .k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost)}
.vt-cab .der .v{font-family:var(--mo);font-size:24px;font-weight:600;letter-spacing:-.06em;margin-top:3px}

.vt-lineas{margin-bottom:18px}
.vt-l{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--edge)}
.vt-l:last-child{border-bottom:0}
.vt-l .qué b{font-size:13.5px;font-weight:500;letter-spacing:-.01em;display:block}
.vt-l .qué .d{font-family:var(--mo);font-size:11px;color:var(--ghost);letter-spacing:-.04em;margin-top:2px}
.vt-l .cant{font-family:var(--mo);font-size:12.5px;color:var(--slate);letter-spacing:-.04em;
  white-space:nowrap}
.vt-l .imp{font-family:var(--mo);font-size:14px;font-weight:600;letter-spacing:-.05em;
  min-width:70px;text-align:right}

.vt-pago{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--veil);
  border-radius:var(--r-m);margin-bottom:8px}
.vt-pago svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--slate);fill:none;stroke-width:1.8}
.vt-pago .qué{flex:1;min-width:0}
.vt-pago .qué b{font-size:13.5px;font-weight:600;letter-spacing:-.015em;display:block}
.vt-pago .qué .ref{font-family:var(--mo);font-size:11.5px;color:var(--mist);
  letter-spacing:-.04em;margin-top:2px}
.vt-pago .monto{font-family:var(--mo);font-size:14.5px;font-weight:600;letter-spacing:-.05em}

.vt-envio{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.vt-envio .b{height:46px;justify-content:center}
@media (max-width:560px){ .vt-envio{grid-template-columns:1fr} }



/* ── la venta se ve como pantalla, no como ventana ── */
.vt-volver{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;
  border-radius:10px;background:var(--veil);color:var(--slate);font-size:13px;font-weight:500;
  margin-bottom:16px;transition:background .13s,color .13s}
.vt-volver:hover{background:var(--edge);color:var(--ink)}
.vt-volver svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.vt-doble{display:grid;grid-template-columns:1fr 340px;gap:12px;align-items:start}
@media (max-width:1080px){ .vt-doble{grid-template-columns:1fr} }




/* ════════════════════════════════════════════════════════
   ARMAR UNA VENTA
   Cada línea es una fila de ocho columnas. La nota de aviso
   vive dentro de la primera celda, bajo el producto, así que
   nunca descuadra la fila.
   ════════════════════════════════════════════════════════ */
:root{
  /* Diez columnas fijas: producto · aviso · marca · categoría ·
     stock · cantidad · precio · dscto · subtotal · quitar.
     El aviso mide lo que necesita el mensaje más largo
     ("Pierdes S/ 1,350.00 y no hay stock"): 320px.
     Los números miden todos igual y la separación es la misma. */
  --col-aviso: 320px;
  --col-num: 100px;          /* cantidad, precio, subtotal */
  --col-neto: 92px;          /* precio sin IGV */
  --col-dato: 104px;         /* marca, categoría */
  --col-stock: 92px;
  --col-dscto: 72px;
  --col-quitar: 36px;
  --hueco-col: 11px;

  --cols-venta:
    minmax(190px,1fr) var(--col-aviso)
    var(--col-dato) var(--col-dato) var(--col-stock)
    var(--col-num) var(--col-num) var(--col-neto) var(--col-dscto) var(--col-num)
    var(--col-quitar);
}

.lin-cab,
.lin{display:grid;grid-template-columns:var(--cols-venta);gap:var(--hueco-col);
  align-items:center}

/* Cada fila decide sola: sin aviso, el producto se lleva también
   esa columna. Con aviso, cada uno en la suya. */
.lin:not(.con-aviso) .lin-celda{grid-column:1 / 3}
.lin:not(.con-aviso) .lin-aviso{display:none}

/* el producto y su aviso comparten alto */
.lin .lin-celda,.lin .lin-aviso{align-self:stretch;display:flex;align-items:center}
.lin .lin-celda{flex-direction:column;align-items:stretch;justify-content:center}

.lin-cab{padding:0 0 9px;border-bottom:1.5px solid var(--edge);margin-bottom:2px}
.lin-cab span{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* los rótulos de columnas con texto van a la izquierda, como su
   contenido; los de números a la derecha, igual que las cifras */
.lin-cab span:nth-child(1),
.lin-cab span:nth-child(3),
.lin-cab span:nth-child(4){text-align:left;padding-left:13px}
.lin-cab span:nth-child(5),
.lin-cab span:nth-child(6),
.lin-cab span:nth-child(7),
.lin-cab span:nth-child(8),
.lin-cab span:nth-child(9),
.lin-cab span:nth-child(10){text-align:right;padding-right:13px}
.lin-cab span:nth-child(10){padding-right:0}

.lin{padding:11px 0;border-bottom:1px solid var(--edge)}
.lin:last-of-type{border-bottom:0}

/* ── 1ª celda: el producto, con su nota debajo ── */
.lin-celda{min-width:0}

.lin-buscar{position:relative;min-width:0}
.lin-campo{height:40px;border-radius:11px;background:var(--veil);display:flex;align-items:center;
  gap:9px;padding:0 12px;transition:background .14s,box-shadow .14s}
.lin-campo:focus-within{background:var(--sheet);
  box-shadow:inset 0 0 0 1.3px var(--cy-mist),var(--lift-1)}
.lin-campo > svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--ghost);fill:none;
  stroke-width:2;transition:stroke .14s}
.lin-campo:focus-within > svg{stroke:var(--mist)}
.lin-campo input{flex:1;min-width:0;border:0;background:none;font-size:14px;height:100%;
  padding:0;margin:0;box-shadow:none;border-radius:0}
.lin-campo input:focus{outline:none;background:none;box-shadow:none}

/* ── guías: lo que se lleva, una cosa por fila ──
   Mismo aire que las líneas de una venta, pero con sus columnas:
   acá no hay precio ni descuento, solo qué, cuánto y en qué. */
.gu-cab,
.gu-lin{display:grid;grid-template-columns:1fr 110px 140px 40px;
  gap:var(--hueco-col)}
.gu-cab{align-items:center;padding:0 0 9px;border-bottom:1.5px solid var(--edge);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ghost)}
/* Arriba y no al centro: el aviso del stock cuelga debajo de la
   cantidad y hace su celda más alta. Centrando, ese cuadro se
   subía y quedaba desalineado del producto y de la unidad. */
.gu-lin{align-items:start;padding:11px 0;border-bottom:1px solid var(--edge)}
.gu-lin .gu-celda{min-width:0}
/* Cuánto y en qué. Van sueltos en la rejilla, no dentro de un
   .fld, así que sin esto salían como cuadros blancos del
   navegador. Hijo directo a propósito: el campo del buscador
   cuelga más adentro y se queda con el suyo. */
.gu-lin > div > input,
.gu-lin > div > select{height:40px}
.gu-lin > div > input.num{text-align:right;font-family:var(--mo);letter-spacing:-.04em}

/* ── la flecha de los desplegables ──
   El padding no sirve acá: el navegador dibuja su flecha contra el
   borde del elemento, no del contenido, así que queda pegada al
   filo por más relleno que se le ponga. Se apaga la del navegador
   y se pinta una propia.

   Va a todos los select de una vez y no familia por familia, para
   que cualquier campo nuevo salga bien sin acordarse de esto. Los
   dos :not() no filtran nada: están para pesar lo mismo que las
   reglas de cada familia y, al ir después, ganarles. El :focus va
   aparte porque cada familia repinta ahí el fondo con el atajo
   «background», y eso borraría la imagen.

   El gris es fijo: un data URI no puede leer las variables. */
select:not([data-plano]):not([multiple]),
select:not([data-plano]):not([multiple]):focus{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9AAB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  background-size:15px;padding-right:36px}

/* La barra del POS es oscura y ya tenía la suya, más clara. */
.pos-top select:not([data-plano]),
.pos-top select:not([data-plano]):focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 12px center;padding-right:32px}
.gu-lin > div > input:focus,
.gu-lin > div > select:focus{outline:none;background:var(--sheet);
  box-shadow:inset 0 0 0 1.3px var(--cy-mist),var(--lift-1)}
.gu-lin > div > input:disabled,
.gu-lin > div > select:disabled{opacity:.45;cursor:not-allowed}
.gu-lin .gu-est{display:block;font-size:11px;color:var(--ghost);margin-top:4px}
.gu-lin .gu-est.cmp-ojo{color:var(--am)}
.gu-lin .quita{width:34px;height:40px;border-radius:10px;display:grid;place-items:center;
  border:0;background:none;color:var(--ghost);cursor:pointer}
.gu-lin .quita:hover{color:var(--rd);background:var(--rd-mist)}
.gu-lin .quita svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* En la guía casi todo es dirección o nombre largo: dos columnas
   anchas se leen mejor que las cuatro estrechas de .campos. */
.gu-campos{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}

/* En el teléfono el producto se lleva la fila entera y debajo
   van cuánto, en qué y el basurero. Los rótulos sobran ahí. */
@media (max-width:700px){
  .gu-cab{display:none}
  .gu-lin{grid-template-columns:1fr 1fr 40px}
  .gu-lin .gu-celda{grid-column:1 / -1}
}

/* el producto ya elegido */
.lin-puesto{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;
  border-radius:11px;background:var(--veil)}
.lin-puesto .foto-p{width:34px;height:34px;flex:0 0 34px;border-radius:9px;object-fit:contain;
  background:var(--sheet);padding:3px}
.lin-puesto .sinfoto-p{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--sheet);
  display:grid;place-items:center;color:var(--edge)}
.lin-puesto .sinfoto-p svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.lin-puesto .texto-p{flex:1;min-width:0}
.lin-puesto .nombre-p{font-size:13.5px;font-weight:500;letter-spacing:-.012em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.lin-puesto .datos-p{display:flex;align-items:center;gap:10px;margin-top:3px;flex-wrap:wrap}
.lin-puesto .datos-p .cod-p{font-family:var(--mo);font-size:10.5px;color:var(--ghost);
  letter-spacing:-.04em;white-space:nowrap}
.lin-puesto .datos-p .marca-p,
.lin-puesto .datos-p .stock-p{display:none}
.lin-puesto .cambiar{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;
  place-items:center;color:var(--ghost);transition:color .12s,background .12s}
.lin-puesto .cambiar:hover{color:var(--cy-deep);background:var(--cy-mist)}
.lin-puesto .cambiar svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.lin-puesto.mano{background:var(--vi-mist)}
.lin-puesto.mano .nombre-p{color:var(--vi)}
.lin-puesto.mano .sinfoto-p{background:var(--sheet);color:var(--vi)}

/* los resultados del buscador */
.lin-res{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
  background:var(--sheet);border-radius:var(--r-m);box-shadow:var(--lift-4);
  max-height:300px;overflow:auto;padding:6px;display:none;min-width:320px;border:1px solid var(--edge)}
.lin-res.on{display:block}
.lin-op{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer}
.lin-op:hover,.lin-op.marcado{background:var(--cy-mist)}
.lin-op .mini{width:34px;height:34px;flex:0 0 34px;border-radius:9px;object-fit:contain;
  background:var(--veil);padding:3px}
.lin-op .sinfoto{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--veil);
  display:grid;place-items:center;color:var(--edge)}
.lin-op .sinfoto svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.lin-op .qué{flex:1;min-width:0}
.lin-op .qué b{font-size:13.5px;font-weight:600;letter-spacing:-.015em;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin-op .qué .d{font-family:var(--mo);font-size:10.5px;color:var(--ghost);letter-spacing:-.04em;
  display:flex;gap:8px;margin-top:1px}
.lin-op .qué .d .poco{color:var(--am)}
.lin-op .qué .d .nada{color:var(--zt-rojo)}
.lin-op .pv{font-family:var(--mo);font-size:13.5px;font-weight:600;letter-spacing:-.05em;
  color:var(--cy-deep);flex:0 0 auto}
.lin-op.ya{opacity:.5}
.lin-op.ya .qué .d::after{content:"ya está en la venta";color:var(--am);font-family:var(--ui)}
.lin-mano{border-top:1px solid var(--edge);margin-top:5px;padding-top:5px}
.lin-mano .lin-op b{color:var(--vi)}
.lin-mano .lin-op .ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:var(--vi-mist);display:grid;place-items:center}
.lin-mano .lin-op .ico svg{width:16px;height:16px;stroke:var(--vi);fill:none;stroke-width:2}

/* ── la nota: su propia celda, al costado del producto.
   Cuando no hay nada que avisar, la celda queda vacía y la
   fila no se mueve. ── */
/* ── el aviso: una sola frase, clara.
   Si hay más que decir, un número al costado abre el detalle. ── */
.lin-aviso{min-width:0;display:flex;align-self:stretch}
.lin-nota{position:relative;display:flex;align-items:center;gap:9px;
  width:100%;align-self:stretch;min-height:44px;
  padding:8px 13px;border-radius:11px;background:var(--veil);
  font-size:12.5px;color:var(--slate);min-width:0;box-sizing:border-box;cursor:default;
  animation:notaEntra .16s cubic-bezier(.2,.8,.3,1)}
@keyframes notaEntra{from{opacity:0}to{opacity:1}}

.lin-nota .frase{display:flex;align-items:center;gap:7px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin-nota .frase svg{width:13px;height:13px;flex:0 0 13px;stroke:currentColor;
  fill:none;stroke-width:2.2}
.lin-nota .frase b{font-family:var(--mo);font-weight:600;letter-spacing:-.04em}

/* la campanita, con el número de datos que hay detrás */
.lin-nota .mas{margin-left:auto;position:relative;width:26px;height:26px;flex:0 0 26px;
  border-radius:8px;background:var(--sheet);display:grid;place-items:center}
.lin-nota .mas svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.lin-nota .mas i{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;
  padding:0 4px;border-radius:999px;background:currentColor;
  display:grid;place-items:center;font-style:normal;font-family:var(--mo);
  font-size:9.5px;font-weight:700;letter-spacing:-.04em}
.lin-nota .mas i::after{content:attr(data-n);color:var(--sheet)}

/* el detalle, al acercarse o al tocar */
.lin-nota .detalle{position:absolute;left:0;top:calc(100% + 6px);z-index:40;
  min-width:100%;width:max-content;max-width:300px;
  background:var(--aviso-fondo);color:var(--aviso-texto);
  border:1px solid var(--edge);border-radius:11px;padding:11px 13px;
  box-shadow:var(--lift-4);display:none;flex-direction:column;gap:5px;
  font-size:11.5px;font-weight:400}
.lin-nota:hover .detalle,.lin-nota.abierto .detalle{display:flex}
/* el detalle: primero las advertencias, cada una con su color,
   y debajo los datos de apoyo */
.lin-nota .detalle .alerta{display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.08);
  font-weight:600;font-size:11.5px;white-space:nowrap}
.lin-nota .detalle .alerta svg{width:12px;height:12px;flex:0 0 12px;
  stroke:currentColor;fill:none;stroke-width:2.2}
.lin-nota .detalle .alerta.mal{color:#FF9B9B;background:rgba(255,155,155,.13)}
.lin-nota .detalle .alerta.ojo{color:#F0C173;background:rgba(240,193,115,.13)}
.lin-nota .detalle .alerta.cy{color:#7CCDF2;background:rgba(124,205,242,.13)}
.lin-nota .detalle .raya{height:1px;background:rgba(255,255,255,.14);margin:3px 0}

.lin-nota .detalle .par{display:flex;justify-content:space-between;gap:16px;
  color:rgba(255,255,255,.6);white-space:nowrap;font-size:11.5px}
.lin-nota .detalle .par b{font-family:var(--mo);font-weight:600;letter-spacing:-.04em;color:#fff}
.lin-nota .detalle .par.mal b{color:#FF9B9B}
.lin-nota .detalle .par.bien b{color:#7EE0B4}

/* el color según lo que pase */
.lin-nota.ojo{background:var(--am-mist);color:var(--am)}
.lin-nota.ojo .mas{color:var(--am)}
.lin-nota.mal{background:var(--rd-mist);color:var(--zt-rojo)}
.lin-nota.mal .mas{color:var(--zt-rojo)}
.lin-nota.bien{background:var(--gn-mist);color:var(--gn)}
.lin-nota.bien .mas{color:var(--gn)}
.lin-nota.cy{background:var(--cy-mist);color:var(--cy-deep)}
.lin-nota.cy .mas{color:var(--cy-deep)}

/* ── celdas 2 a 8 ── */
.lin .celda{font-size:12.5px;color:var(--slate);min-width:0;padding-left:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin .celda.vacia{color:var(--edge)}
.lin .stock-c{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding-right:13px;
  font-family:var(--mo);font-size:12.5px;font-weight:600;letter-spacing:-.04em;
  color:var(--slate);white-space:nowrap}
.lin .stock-c svg{width:12px;height:12px;flex:0 0 12px;stroke:currentColor;fill:none;stroke-width:2}
.lin .stock-c em{font-style:normal;font-family:var(--ui);font-size:10.5px;
  font-weight:400;color:var(--ghost);letter-spacing:0}
.lin .stock-c.poco-c,.lin .stock-c.poco-c em{color:var(--am)}
.lin .stock-c.nada-c,.lin .stock-c.nada-c em{color:var(--zt-rojo)}

.lin > input{height:40px;
  font-size:14px;width:100%;transition:background .13s,box-shadow .13s}
.lin > input.num{text-align:right;font-family:var(--mo);letter-spacing:-.04em}
.lin > input:focus{outline:none;background:var(--sheet);
  box-shadow:inset 0 0 0 1.3px var(--cy-mist),var(--lift-1)}

.lin .q-desc-caja{position:relative}
.lin .q-desc-caja input{height:40px;width:100%;border-radius:11px;background:var(--veil);
  border:0;padding:0 26px 0 12px;font-family:var(--mo);font-size:14px;text-align:right;
  letter-spacing:-.04em;transition:background .13s,box-shadow .13s}
.lin .q-desc-caja input:focus{outline:none;background:var(--sheet);
  box-shadow:inset 0 0 0 1.3px var(--cy-mist),var(--lift-1)}
.lin .q-desc-caja input::-webkit-outer-spin-button,
.lin .q-desc-caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lin .q-desc-caja input{-moz-appearance:textfield}
.lin .pct{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-family:var(--mo);font-size:12px;color:var(--ghost);pointer-events:none}

.lin .neto{display:flex;align-items:center;justify-content:flex-end;padding-right:13px;
  font-family:var(--mo);font-size:12.5px;color:var(--mist);letter-spacing:-.045em;
  white-space:nowrap}
.lin .suma{display:flex;align-items:center;justify-content:flex-end;padding-right:13px;
  font-family:var(--mo);font-size:14px;font-weight:600;letter-spacing:-.045em}
.lin .quita{width:34px;height:40px;border-radius:11px;display:grid;place-items:center;
  color:var(--ghost);transition:color .12s,background .12s}
.lin .quita:hover{color:#fff;background:var(--zt-rojo)}
.lin .quita svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ── se adapta cambiando solo el reparto de columnas ── */
/* Al estrecharse se cierran columnas de una en una, empezando
   por las que menos falta hacen. */
@media (max-width:1560px){
  :root{--col-num: 94px; --col-neto: 86px; --col-dato: 96px; --col-stock: 84px;
    --col-dscto: 66px; --hueco-col: 10px}
}
@media (max-width:1420px){
  /* sin categoría */
  :root{
    --cols-venta:
      minmax(180px,1fr) var(--col-aviso)
      var(--col-dato) 0px var(--col-stock)
      var(--col-num) var(--col-num) var(--col-neto) var(--col-dscto) var(--col-num)
      var(--col-quitar);
  }
  .lin-cab span:nth-child(4),.lin .celda.cat-col{display:none}
}
@media (max-width:1280px){
  /* sin precio sin IGV: ese dato se puede calcular */
  :root{
    --cols-venta:
      minmax(180px,1fr) var(--col-aviso)
      var(--col-dato) 0px var(--col-stock)
      var(--col-num) var(--col-num) 0px var(--col-dscto) var(--col-num)
      var(--col-quitar);
  }
  .lin-cab span:nth-child(8),.lin .neto{display:none}
}
@media (max-width:1120px){
  /* el aviso baja bajo la fila */
  :root{
    --col-num: 88px; --col-dato: 90px; --col-stock: 80px; --col-dscto: 64px;
    --cols-venta:
      minmax(180px,1fr) 0px
      var(--col-dato) 0px var(--col-stock)
      var(--col-num) var(--col-num) 0px var(--col-dscto) var(--col-num)
      var(--col-quitar);
  }
  .lin-cab span:nth-child(2){display:none}
  .lin:not(.con-aviso) .lin-celda{grid-column:1 / 2}
  .lin.con-aviso .lin-celda{grid-column:1 / 2}
  .lin .lin-aviso{grid-column:1 / -1;order:9;margin-top:6px;display:flex}
  .lin:not(.con-aviso) .lin-aviso{display:none}
  .lin .celda,.lin .stock-c{font-size:11.5px}
  .lin > input,.lin .q-desc-caja input{font-size:13px;padding-left:9px}
}
@media (max-width:940px){
  /* sin marca: ese dato vuelve bajo el nombre */
  :root{
    --cols-venta:
      minmax(170px,1fr) 0px 0px 0px var(--col-stock)
      var(--col-num) var(--col-num) 0px var(--col-dscto) var(--col-num)
      var(--col-quitar);
  }
  .lin-cab span:nth-child(3),.lin .celda.marca-col{display:none}
  .lin-puesto .datos-p .marca-p{display:inline-flex}
}
@media (max-width:840px){
  .lin-cab{display:none}
  :root{--cols-venta: repeat(4,1fr); --hueco-col: 10px}
  .lin{padding:13px 0}
  .lin .lin-celda,.lin:not(.con-aviso) .lin-celda{grid-column:1 / -1}
  .lin .stock-c,.lin .neto{display:none}
  .lin-puesto .datos-p .stock-p{display:inline-flex}
  .lin .suma{justify-content:flex-end}
  .lin .quita{justify-self:end}
  .lin-nota .detalle{left:auto;right:0}
}
@media (max-width:560px){
  :root{--cols-venta: repeat(2,1fr)}
  .lin .suma{grid-column:1/-1;justify-content:flex-start;font-size:16px}
}

/* aviso de borrador recuperado */
.borrador{display:flex;align-items:center;gap:11px;background:var(--cy-mist);
  border-radius:var(--r-m);padding:12px 15px;margin-bottom:16px}
.borrador svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--cy-deep);fill:none;stroke-width:2}
.borrador .qué{flex:1;min-width:0;font-size:13px;color:var(--cy-deep)}
.borrador button{height:30px;padding:0 12px;border-radius:8px;background:var(--sheet);
  font-size:12.5px;font-weight:600;color:var(--cy-deep)}
.borrador button:hover{box-shadow:var(--lift-1)}

/* ── opciones que se eligen, una de varias ── */
.opciones{display:flex;flex-direction:column;gap:9px;max-width:600px}
.opcion{display:flex;align-items:flex-start;gap:13px;padding:15px 17px;border-radius:var(--r-m);
  background:var(--veil);text-align:left;transition:background .13s,box-shadow .13s}
.opcion:hover{background:var(--edge)}
.opcion .marca{width:19px;height:19px;flex:0 0 19px;border-radius:50%;margin-top:1px;
  background:var(--sheet);box-shadow:inset 0 0 0 1.6px var(--edge);position:relative;
  transition:box-shadow .13s}
.opcion .marca::after{content:"";position:absolute;inset:4.5px;border-radius:50%;
  background:var(--cy);opacity:0;transition:opacity .13s}
.opcion .qué{flex:1;min-width:0}
.opcion .qué b{font-size:14px;font-weight:600;letter-spacing:-.015em;display:block}
.opcion .qué .d{font-size:12.5px;color:var(--mist);margin-top:3px;display:block;line-height:1.5}
.opcion.on{background:var(--cy-mist);box-shadow:inset 0 0 0 1.6px var(--cy)}
.opcion.on .marca{box-shadow:inset 0 0 0 1.6px var(--cy)}
.opcion.on .marca::after{opacity:1}
.opcion.on .qué b{color:var(--cy-deep)}

@media (max-width:1180px){
  .lin,.lin-cab{grid-template-columns:minmax(200px,1fr) 90px 82px 70px 90px 60px 88px 32px;gap:8px}
  .lin .celda,.lin .stock-c{font-size:11.5px}
  .lin > input,.lin .q-desc-caja input{font-size:13px;padding-left:9px}
}
@media (max-width:1040px){
  .lin,.lin-cab{grid-template-columns:minmax(180px,1fr) 76px 62px 82px 54px 80px 30px;gap:7px}
  .lin-cab span:nth-child(2){display:none}
  .lin .celda.marca-col{display:none}
}
/* pantalla angosta: los números se reparten en dos filas */
@media (max-width:900px){
  .lin-cab{display:none}
  .lin{grid-template-columns:repeat(4,1fr);gap:8px 10px;padding:13px 0}
  .lin-buscar,.lin-puesto{grid-column:1/-1}
  .lin .celda.marca-col,.lin .stock-c{display:none}

  .lin > input.q-cant{order:3}
  .lin > input.q-precio{order:4}
  .lin .q-desc-caja{order:5}
  .lin .suma{order:6;justify-content:flex-end;align-self:center}
  .lin .quita{order:7;justify-self:end}
  .lin-puesto .datos-p .marca-p,.lin-puesto .datos-p .stock-p{display:inline-flex}
}
@media (max-width:560px){
  .lin{grid-template-columns:repeat(2,1fr)}
  .lin .suma{grid-column:1/-1;justify-content:flex-start;
    font-size:16px;padding-top:2px}
}


/* ── el pie de la venta: el botón de cobrar manda ── */
.v-pie{display:flex;align-items:center;gap:14px;margin-top:22px}
.v-pie .aviso-pie{font-size:12.5px;color:var(--mist)}
.b.b-grande{margin-left:auto;height:52px;padding:0 34px;font-size:16px;font-weight:600;
  border-radius:var(--r-m);gap:10px}
.b.b-grande svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
@media (max-width:640px){
  .v-pie{flex-wrap:wrap}
  .b.b-grande{width:100%;margin-left:0;justify-content:center}
}

/* ════════════════════════════════════════════════════════
   TABLERO · sirena de ventas
   Pantalla de lectura, no de trabajo: por eso va oscura.
   Los ejes en HTML, fuera del SVG, para que el estirado
   horizontal no deforme el texto.
   Todo con prefijo tb-.
   ════════════════════════════════════════════════════════ */
.tb-lienzo{
  /* Los nombres tb-* apuntan al tema global: si mañana el
     tema cambia, el tablero cambia con él. */
  --tb-fondo:var(--canvas);  --tb-caja:var(--sheet);  --tb-alta:#1A202B;
  --tb-linea:var(--edge);    --tb-borde:rgba(255,255,255,.10);
  --tb-tinta:var(--ink);     --tb-media:var(--mist);  --tb-tenue:var(--ghost);
  --tb-lila:#8B84E8;         --tb-cian:var(--cy);     --tb-verde:var(--gn);
  --tb-rojo:var(--rd);       --tb-ambar:var(--am);
  padding:0;margin:0}
.tb-cargando{padding:48px 4px;color:var(--tb-tenue);font-size:14px}

.tb-rot{display:block;font-size:9.5px;font-weight:600;color:var(--tb-tenue);
  letter-spacing:.13em;text-transform:uppercase;line-height:1.4}

/* ── la corona ── */
.tb-corona{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  margin-bottom:20px}
.tb-corona-t h1{font-size:29px;font-weight:700;color:var(--tb-tinta);margin:0;
  letter-spacing:-.02em;text-transform:uppercase}
.tb-corona-t > span{display:block;font-size:11px;font-weight:500;color:var(--tb-tenue);
  letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.tb-corona-m{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-pastilla{display:flex;align-items:center;gap:9px;height:38px;padding:0 15px;
  border-radius:11px;background:var(--tb-caja);border:1px solid var(--tb-linea);
  font-size:12.5px;font-weight:500;color:var(--tb-tinta);white-space:nowrap}
.tb-pastilla svg{width:15px;height:15px;stroke:var(--tb-media);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-pastilla span{font-variant-numeric:tabular-nums}

.tb-sel{display:flex;gap:2px;padding:3px;background:var(--tb-caja);
  border:1px solid var(--tb-linea);border-radius:11px}
.tb-sel button{height:30px;padding:0 13px;border-radius:8px;font-size:12px;
  font-weight:500;color:var(--tb-media);cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s}
.tb-sel button:hover{color:var(--tb-tinta)}
.tb-sel button.on{background:rgba(255,255,255,.10);color:var(--tb-tinta);font-weight:600}

/* ── marco ── */
.tb-marco{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,318px);
  gap:14px;align-items:start}
.tb-centro{min-width:0}
.tb-flanco{display:flex;flex-direction:column;gap:14px;min-width:0}
.tb-fila{display:grid;gap:14px;margin-bottom:14px;align-items:stretch}
.tb-fila.f-23{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.tb-fila.f-2 {grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── indicadores ── */
.tb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:14px;margin-bottom:14px}
.tb-kpi{display:flex;align-items:flex-start;gap:14px;background:var(--tb-caja);
  border:1px solid var(--tb-linea);border-radius:var(--r-l);padding:18px 20px;
  min-width:0;transition:border-color .16s}
.tb-kpi:hover{border-color:var(--tb-borde)}
.tb-kpi-i{display:inline-flex;align-items:center;justify-content:center;width:44px;
  height:44px;border-radius:999px;flex:0 0 44px;background:rgba(139,132,232,.13);
  border:1px solid rgba(139,132,232,.2)}
.tb-kpi-i svg{width:19px;height:19px;stroke:var(--tb-lila);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tb-kpi-t{flex:1;min-width:0}
.tb-kpi-v{display:block;font-family:var(--mo);font-size:25px;font-weight:500;
  color:var(--tb-tinta);letter-spacing:-.05em;line-height:1.15;margin-top:4px;
  font-variant-numeric:tabular-nums}
.tb-kpi-p{display:block;font-family:var(--mo);font-size:10.5px;color:var(--tb-tenue);
  margin-top:6px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tb-riel{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-top:9px}
.tb-riel i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--tb-lila),#A79FF2);
  transition:width .4s cubic-bezier(.2,.8,.3,1)}

.tb-delta{display:inline-block;font-family:var(--mo);font-size:11px;font-weight:600;
  margin-top:7px;letter-spacing:-.02em}
.tb-delta em{font-family:var(--ui);font-style:normal;font-weight:500;font-size:10.5px;
  color:var(--tb-tenue);letter-spacing:0}
.tb-delta.sube{color:var(--tb-verde)}
.tb-delta.baja{color:var(--tb-rojo)}
.tb-delta.sin {color:var(--tb-tenue);font-family:var(--ui);font-weight:500}

/* ── panel ── */
.tb-panel{display:flex;flex-direction:column;background:var(--tb-caja);
  border:1px solid var(--tb-linea);border-radius:var(--r-l);overflow:hidden;
  min-width:0;transition:border-color .16s}
.tb-panel:hover{border-color:var(--tb-borde)}
.tb-panel-h{display:flex;align-items:center;gap:12px;padding:17px 20px 0;flex:0 0 auto}
.tb-panel-h h2{font-size:12.5px;font-weight:600;color:var(--tb-tinta);margin:0;
  letter-spacing:.06em;text-transform:uppercase}
.tb-panel-h .tb-sel{margin-left:auto}
.tb-panel-h .tb-sel button{height:26px;padding:0 11px;font-size:11.5px}
.tb-panel-x{margin-left:auto;font-size:11px;color:var(--tb-tenue);font-weight:500;
  white-space:nowrap}
.tb-panel-a{margin-left:auto;font-size:11.5px;color:var(--tb-lila);font-weight:500;
  text-decoration:none;white-space:nowrap;transition:color .14s}
.tb-panel-a:hover{color:#A79FF2}
.tb-cuenta{margin-left:auto;font-family:var(--mo);font-size:11px;font-weight:600;
  color:var(--tb-ambar);background:rgba(255,176,32,.14);border-radius:999px;
  padding:2px 9px}
.tb-panel-b{flex:1;display:flex;flex-direction:column;padding:16px 20px 20px}

/* ── el plano del gráfico ── */
.tb-plano{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:1fr 18px;min-height:224px}
.tb-ejeY{position:relative}
.tb-ejeY span{position:absolute;right:10px;transform:translateY(-50%);
  font-family:var(--mo);font-size:9.5px;color:var(--tb-tenue);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-lienzo-g{position:relative;min-width:0}
.tb-lienzo-g > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tb-linea-h{position:absolute;left:0;right:0;height:1px;background:var(--tb-linea)}
.tb-ejeX{grid-column:2;position:relative}
.tb-ejeX span{position:absolute;top:4px;transform:translateX(-50%);
  font-family:var(--mo);font-size:9.5px;color:var(--tb-tenue);white-space:nowrap}
/* La primera y la última no se salen del lienzo. */
.tb-ejeX span:first-child{transform:translateX(-25%)}
.tb-ejeX span:last-child{transform:translateX(-75%)}

.tb-punto{position:absolute;width:7px;height:7px;border-radius:999px;
  background:var(--tb-lila);border:2px solid var(--tb-caja);
  transform:translate(-50%,-50%);pointer-events:none}
.tb-columna{position:absolute;top:0;bottom:0;width:30px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(139,132,232,.13),transparent);
  pointer-events:none;border-radius:5px}
.tb-guiaV{position:absolute;top:0;bottom:0;width:1px;opacity:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.26) 0 3px,transparent 3px 6px);
  transition:opacity .14s}
.tb-foco{position:absolute;width:9px;height:9px;border-radius:999px;opacity:0;
  background:var(--tb-lila);border:2px solid var(--tb-caja);
  transform:translate(-50%,-50%);pointer-events:none;transition:opacity .14s}
.tb-capa{position:absolute;inset:0;cursor:crosshair}
.tb-globo{position:absolute;top:2px;pointer-events:none;opacity:0;z-index:5;
  display:flex;align-items:baseline;gap:8px;
  background:rgba(11,14,19,.94);border:1px solid var(--tb-borde);border-radius:8px;
  padding:4px 9px;white-space:nowrap;transition:opacity .12s}
.tb-globo-d{font-size:10px;font-weight:500;color:var(--tb-tenue)}
.tb-globo b{font-family:var(--mo);font-size:12px;font-weight:600;color:var(--tb-tinta);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tb-globo-x{font-size:10px;color:var(--tb-tenue)}

/* ── dona ── */
.tb-dona-caja{flex:1;display:flex;align-items:center;justify-content:flex-start;
  gap:20px;flex-wrap:wrap}
.tb-dona{position:relative;flex:0 0 auto}
.tb-dona svg{width:100%;height:100%;display:block}
.tb-dona-c{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.tb-dona-c span{font-size:9px;font-weight:600;color:var(--tb-tenue);
  letter-spacing:.14em;text-transform:uppercase}
.tb-dona-c b{font-family:var(--mo);font-size:15px;font-weight:600;color:var(--tb-tinta);
  letter-spacing:-.045em;margin-top:3px;font-variant-numeric:tabular-nums;
  max-width:82px;text-align:center;line-height:1.15;white-space:nowrap}
/* Un total de siete cifras no cabe al mismo cuerpo que uno
   de tres: el tamaño baja con la longitud. */
.tb-dona-c b.chico{font-size:12.5px}
.tb-dona-c b.diminuto{font-size:10.5px;letter-spacing:-.03em}
.tb-dona-ley{flex:1;min-width:260px;list-style:none;margin:0;padding:0}
.tb-dona-ley li{display:grid;grid-template-columns:8px minmax(84px,auto) minmax(60px,1fr) auto auto;
  align-items:center;gap:3px 11px;padding:7px 0}
.tb-dona-ley i{width:8px;height:8px;border-radius:999px}
.tb-dl-n{font-size:12.5px;font-weight:500;color:var(--tb-tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-dl-p{font-family:var(--mo);font-size:12.5px;font-weight:600;color:var(--tb-tinta);
  font-variant-numeric:tabular-nums}
.tb-dl-v{font-family:var(--mo);font-size:12px;color:var(--tb-media);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
/* La barra ocupa el hueco que antes quedaba muerto. */
.tb-dl-r{height:6px;border-radius:999px;background:rgba(255,255,255,.06);
  overflow:hidden;min-width:40px}
.tb-dl-r i{display:block;height:100%;border-radius:999px;
  transition:width .34s cubic-bezier(.2,.8,.3,1)}
.tb-dl-x{font-size:10.5px;color:var(--tb-tenue);text-align:right;white-space:nowrap;
  min-width:56px}

/* ── cumplimiento de metas ── */
.tb-metas{flex:1;display:grid;grid-template-columns:40px minmax(0,1fr);min-height:190px}
.tb-metas-y{position:relative;display:flex;flex-direction:column;
  justify-content:space-between;padding-bottom:20px}
.tb-metas-y span{font-family:var(--mo);font-size:10px;color:var(--tb-tenue);
  text-align:right;padding-right:10px;transform:translateY(-50%)}
.tb-metas-y span:first-child{transform:translateY(-2px)}
.tb-metas-y span:last-child{transform:translateY(-100%)}
.tb-metas-g{position:relative;padding-bottom:20px}
.tb-metas-c{position:absolute;inset:0 0 20px;display:flex;align-items:flex-end;gap:14px}
.tb-meta{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;position:relative}
.tb-meta em{font-family:var(--mo);font-style:normal;font-size:11px;font-weight:600;
  color:var(--tb-tinta);margin-bottom:6px}
.tb-meta i{width:100%;max-width:46px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,#A79FF2,var(--tb-lila));transition:filter .14s}
.tb-meta:hover i{filter:brightness(1.15)}
.tb-meta span{position:absolute;bottom:-20px;font-size:10.5px;color:var(--tb-tenue)}
.tb-meta.nada i{background:none;border:1px dashed rgba(255,255,255,.16)}
.tb-meta.nada em{color:var(--tb-tenue)}

/* ── podio ── */
.tb-podio{list-style:none;margin:0;padding:0;flex:1}
.tb-podio li{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-bottom:1px solid var(--tb-linea)}
.tb-podio li:last-child{border-bottom:0}
.tb-puesto{display:inline-flex;align-items:center;justify-content:center;width:22px;
  height:22px;border-radius:999px;flex:0 0 22px;font-family:var(--mo);font-size:11px;
  font-weight:600;color:var(--tb-tenue);background:rgba(255,255,255,.05)}
/* El premio de cada puesto: diamante, oro, plata y bronce. Del
   quinto para abajo se queda el gris de siempre. */
.tb-puesto.p1{background:rgba(103,232,249,.18);color:#67E8F9}
.tb-puesto.p2{background:rgba(255,176,32,.18);color:#FFB020}
.tb-puesto.p3{background:rgba(190,200,212,.16);color:#BEC8D4}
.tb-puesto.p4{background:rgba(205,127,50,.18);color:#D08B4A}
.tb-cara{display:inline-flex;align-items:center;justify-content:center;width:34px;
  height:34px;border-radius:999px;flex:0 0 34px;background:rgba(139,132,232,.14);
  color:var(--tb-lila);font-size:11.5px;font-weight:600;letter-spacing:-.02em}
.tb-podio-n{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--tb-tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-podio-v{font-family:var(--mo);font-size:12.5px;font-weight:500;color:var(--tb-tinta);
  letter-spacing:-.035em;text-align:right;flex:0 0 auto;display:flex;
  flex-direction:column;font-variant-numeric:tabular-nums}
.tb-podio-v em{font-style:normal;font-size:10.5px;color:var(--tb-tenue);font-weight:600}

/* ── ventas recientes ── */
.tb-recientes{list-style:none;margin:0;padding:0;flex:1}
.tb-recientes li{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-bottom:1px solid var(--tb-linea)}
.tb-recientes li:last-child{border-bottom:0}
.tb-rec-i{display:inline-flex;align-items:center;justify-content:center;width:32px;
  height:32px;border-radius:10px;flex:0 0 32px;background:rgba(255,255,255,.05)}
.tb-rec-i svg{width:15px;height:15px;stroke:var(--tb-media);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tb-rec-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tb-rec-t b{font-size:12.5px;font-weight:500;color:var(--tb-tinta)}
.tb-rec-t > span{font-size:10.5px;color:var(--tb-tenue)}
.tb-rec-v{font-family:var(--mo);font-size:12.5px;font-weight:500;color:var(--tb-tinta);
  letter-spacing:-.035em;text-align:right;flex:0 0 auto;display:flex;
  flex-direction:column;font-variant-numeric:tabular-nums}
.tb-rec-v em{font-style:normal;font-size:10.5px;color:var(--tb-tenue);font-weight:500}

/* ── alertas ── */
.tb-alerta{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--tb-linea);text-decoration:none}
.tb-alerta:last-child{border-bottom:0}
.tb-punto-a{width:7px;height:7px;border-radius:999px;flex:0 0 7px;margin-top:5px;
  background:var(--tb-ambar);box-shadow:0 0 8px var(--tb-ambar)}
.tb-alerta.grave .tb-punto-a{background:var(--tb-rojo);box-shadow:0 0 8px var(--tb-rojo)}
.tb-alerta-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tb-alerta-t b{font-size:12.5px;font-weight:500;color:var(--tb-tinta)}
.tb-alerta-t span{font-size:10.5px;color:var(--tb-tenue);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── barras ── */
.tb-bars{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;
  justify-content:center;gap:14px}
.tb-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  column-gap:12px;row-gap:6px}
.tb-bar-n{font-size:12.5px;font-weight:500;color:var(--tb-tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-bar-v{font-family:var(--mo);font-size:12.5px;font-weight:500;color:var(--tb-tinta);
  letter-spacing:-.035em;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tb-bar-v.malo{color:var(--tb-rojo)}
.tb-bar-r{grid-column:1/-1;height:6px;border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden}
.tb-bar-r i{display:block;height:100%;border-radius:999px;
  transition:width .34s cubic-bezier(.2,.8,.3,1)}
.tb-bar-p{grid-column:1/-1;font-size:10.5px;color:var(--tb-tenue);font-weight:500;
  margin-top:-3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── filas rótulo/valor ── */
.tb-filas{display:flex;flex-direction:column;flex:0 0 auto}
.tb-fila-d{display:flex;align-items:baseline;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--tb-linea)}
.tb-fila-d:last-child{border-bottom:0}
.tb-fila-d > span:first-child{flex:1;min-width:0;font-size:12.5px;color:var(--tb-media);
  font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-fila-d b{font-family:var(--mo);font-size:13px;font-weight:500;color:var(--tb-tinta);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tb-fila-d.fuerte b{font-size:17px;color:var(--tb-lila)}
.tb-marca{font-family:var(--mo);font-size:10.5px;font-weight:600;padding:3px 8px;
  border-radius:7px;letter-spacing:-.03em;min-width:58px;text-align:center;flex:0 0 auto}
.tb-marca.ok   {background:rgba(45,212,160,.14);color:var(--tb-verde)}
.tb-marca.falta{background:rgba(255,77,61,.14);color:var(--tb-rojo)}
.tb-marca.sobra{background:rgba(255,176,32,.14);color:var(--tb-ambar)}

/* ── la barra de abajo ── */
.tb-pie{display:flex;flex-wrap:wrap;gap:40px;margin-top:14px;padding:18px 24px;
  background:var(--tb-caja);border:1px solid var(--tb-linea);border-radius:var(--r-l)}
.tb-pie-b{display:flex;align-items:center;gap:14px}
.tb-pie-i{display:inline-flex;align-items:center;justify-content:center;width:42px;
  height:42px;border-radius:999px;flex:0 0 42px;background:rgba(139,132,232,.13);
  border:1px solid rgba(139,132,232,.2)}
.tb-pie-i svg{width:18px;height:18px;stroke:var(--tb-lila);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tb-pie-i.llama{background:rgba(255,77,61,.12);border-color:rgba(255,77,61,.2)}
.tb-pie-i.llama svg{stroke:var(--tb-rojo)}
.tb-pie-t{display:flex;flex-direction:column;gap:1px}
.tb-pie-t b{font-family:var(--mo);font-size:18px;font-weight:500;color:var(--tb-tinta);
  letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.tb-pie-t b.animo{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:-.01em}
.tb-pie-t > span{font-size:11px;color:var(--tb-tenue)}

.tb-ok{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:18px 0;text-align:center}
.tb-ok svg{width:32px;height:32px;stroke:var(--tb-verde);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;
  background:rgba(45,212,160,.13);border-radius:999px;padding:7px}
.tb-ok b{font-size:13px;font-weight:600;color:var(--tb-tinta)}
.tb-ok span{font-size:11.5px;color:var(--tb-media)}
.tb-vacio{flex:1;display:flex;align-items:center;justify-content:center;font-size:12.5px;
  color:var(--tb-tenue);margin:0;padding:24px 0;text-align:center}
.tb-pista{margin:12px 0 0;padding:8px 11px;border-radius:9px;
  background:rgba(255,176,32,.12);color:var(--tb-ambar);font-size:11.5px;
  font-weight:500;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  .tb-bar-r i,.tb-riel i,.tb-globo,.tb-guiaV,.tb-foco,.tb-panel,.tb-kpi{transition:none}
}
@media (max-width:1400px){
  .tb-marco{grid-template-columns:1fr}
  .tb-flanco{flex-direction:row}
  .tb-flanco > *{flex:1;min-width:0}
}
@media (max-width:1000px){
  .tb-fila.f-23,.tb-fila.f-2{grid-template-columns:1fr}
  .tb-flanco{flex-direction:column}
}
@media (max-width:640px){
  .tb-lienzo{padding:13px;border-radius:var(--r-m)}
  .tb-corona-t h1{font-size:23px}
  .tb-corona-m{width:100%}
  .tb-pie{gap:22px;padding:15px 16px}
  .tb-panel-b{padding:14px 15px 16px}
  .tb-panel-h{padding:15px 15px 0}
}

/* ── el número se achica cuando crece ──
   Una ferretería que hoy factura miles puede facturar
   millones. Sin esto, el número se sale de su hueco. */
.tb-kpi-v.t2{font-size:21px}
.tb-kpi-v.t3{font-size:18px}
.tb-kpi-v.t4{font-size:15.5px}
.tb-dona-c b.t2{font-size:12.5px}
.tb-dona-c b.t3{font-size:11px}
.tb-dona-c b.t4{font-size:9.5px;letter-spacing:-.02em}
/* Lo que no cabe en la lista se anuncia, no se corta a secas. */
.tb-mas-f{display:block!important;font-size:11px;color:var(--tb-tenue);
  padding-top:4px;text-align:center}

/* ── el pulso: cuánto hace de la última venta ── */
.tb-pulso{display:flex;align-items:center;gap:9px;height:38px;padding:0 15px;
  border-radius:11px;background:var(--tb-caja);border:1px solid var(--tb-linea);
  font-size:12.5px;font-weight:500;color:var(--tb-media);white-space:nowrap}
.tb-late{width:7px;height:7px;border-radius:999px;background:var(--tb-verde);
  box-shadow:0 0 8px var(--tb-verde);animation:tbLatir 2.4s ease-in-out infinite}
@keyframes tbLatir{0%,100%{opacity:1}50%{opacity:.35}}
/* Dos horas sin vender en horario de tienda ya merece mirada. */
.tb-pulso.tibio{color:var(--tb-ambar);border-color:rgba(255,176,32,.28)}
.tb-pulso.tibio .tb-late{background:var(--tb-ambar);box-shadow:0 0 8px var(--tb-ambar)}
@media (prefers-reduced-motion:reduce){ .tb-late{animation:none} }


/* ── el selector de rango: un botón, y el menú al desplegar ── */
.tb-rango{position:relative}
.tb-rango-b{display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;
  border-radius:11px;background:var(--tb-caja);border:1px solid var(--tb-linea);
  font-size:12.5px;font-weight:500;color:var(--tb-tinta);white-space:nowrap;
  cursor:pointer;transition:border-color .14s}
.tb-rango-b:hover{border-color:var(--tb-borde)}
.tb-rango-b > svg{width:15px;height:15px;stroke:var(--tb-media);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-chevron{width:13px!important;height:13px!important;margin-left:2px;
  transition:transform .16s}
.tb-rango.abierto .tb-chevron{transform:rotate(180deg)}

.tb-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:214px;
  background:var(--tb-caja);border:1px solid var(--tb-borde);border-radius:13px;
  padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s}
.tb-rango.abierto .tb-menu{opacity:1;visibility:visible;transform:none}
.tb-menu > button{display:block;width:100%;text-align:left;height:32px;padding:0 11px;
  border-radius:8px;font-size:12.5px;font-weight:500;color:var(--tb-media);
  cursor:pointer;transition:background .12s,color .12s}
.tb-menu > button:hover{background:rgba(255,255,255,.06);color:var(--tb-tinta)}
.tb-menu > button.on{background:rgba(139,132,232,.16);color:var(--tb-tinta);font-weight:600}
.tb-menu-sep{height:1px;background:var(--tb-linea);margin:6px 4px}

.tb-fechas{display:flex;flex-direction:column;gap:8px;padding:4px}
.tb-fechas label{display:flex;flex-direction:column;gap:4px;font-size:10px;
  font-weight:600;color:var(--tb-tenue);letter-spacing:.1em;text-transform:uppercase}
.tb-fechas input{height:33px;padding:0 10px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--tb-linea);
  color:var(--tb-tinta);font-family:var(--mo);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.tb-fechas input::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}
.tb-aplicar{height:33px;border-radius:8px;background:var(--tb-lila);color:#fff;
  font-size:12.5px;font-weight:600;cursor:pointer;margin-top:2px;
  transition:filter .14s}
.tb-aplicar:hover{filter:brightness(1.1)}

@media (max-width:640px){
  .tb-menu{right:auto;left:0;min-width:0;width:calc(100vw - 40px);max-width:280px}
}

/* el desplegable de clientes: el mismo buscador, pero pegado al
   campo y con menos peso, que acá son tres líneas, no un catálogo */
.cli-res{top:calc(100% + 2px);min-width:0;padding:4px;
  border-radius:12px;box-shadow:var(--lift-2)}
.cli-res .lin-op{padding:6px 8px;border-radius:8px;gap:8px}
.cli-res .lin-op .qué b{font-size:12.5px}
.cli-res .lin-op .qué .d{font-size:10px}
.cli-res .lin-mano{margin-top:3px;padding-top:3px}
.cli-res .lin-mano .lin-op .ico{width:26px;height:26px;flex:0 0 26px;border-radius:8px}
.cli-res .lin-mano .lin-op .ico svg{width:13px;height:13px}

/* los comprobantes, uno al lado de otro y en el orden en que se usan */
.cmp-fila{display:flex;gap:6px;flex-wrap:wrap}
.cmp-b{flex:1;min-width:74px;height:36px;border-radius:10px;background:var(--veil);
  font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:-.01em;
  display:grid;place-items:center;cursor:pointer;transition:background .12s,color .12s}
.cmp-b:hover{background:var(--edge)}
.cmp-b.on{background:var(--cy);color:#fff;box-shadow:var(--glow)}
/* la boleta con RUC se puede, pero casi siempre es un error de dedo.
   El segundo selector es para los hint: .fld .hint pinta gris con
   más peso y se comía el ámbar. Mismo peso y más abajo, así gana. */
.cmp-ojo,
.fld .cmp-ojo{color:var(--am)}
/* Lo que impide cobrar no es lo mismo que lo que da que pensar:
   el error va en rojo, la advertencia en ámbar. */
.cta-aviso.cta-mal,
.fld .cmp-mal{color:var(--zt-rojo);font-weight:600}
/* el mensaje no va pegado a los botones de comprobante */
.fld .cmp-nota{margin-top:9px}
/* El campo que impide cobrar se marca solo. Gana al :focus a
   propósito: sigue rojo mientras se escribe, hasta que se arregla. */

/* ─── chat web: la muestra de cómo se verá en la tienda ───
   No se pinta con el tema de Nova a propósito: tiene que salir
   igual que en la web del cliente, con el color que él elija.
   Todo cuelga de --cw-tono y --cw-radio, que los mueve la pantalla. */
.cw-fila{display:grid;grid-template-columns:minmax(0,1fr) clamp(348px,31vw,420px);
  gap:24px;align-items:start}
@media(max-width:1240px){.cw-fila{display:block}}

.cw-lienzo{--cw-tono:#0093DA;--cw-radio:20px;--cw-abajo:16px;--cw-costado:16px;--cw-globo:52px;
  border-radius:var(--r-l);overflow:hidden;position:sticky;top:16px;
  background:#E9EDF2;box-shadow:var(--lift-3)}
@media(max-width:1240px){.cw-lienzo{position:static;margin-top:18px}}
.cw-barra{height:34px;background:#DFE4EA;display:flex;align-items:center;gap:6px;padding:0 12px}
.cw-punto{width:9px;height:9px;border-radius:50%;background:#C2CAD3}
.cw-url{margin-left:8px;font-family:var(--mo);font-size:10.5px;color:#78838F;
  background:#F4F6F8;border-radius:999px;padding:3px 10px}
.cw-pagina{height:436px;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%,#FDFEFF,#EFF3F7)}

/* la ventana del chat */
.cw-caja[hidden],.cw-burbuja[hidden]{display:none}
.cw-caja{position:absolute;bottom:calc(var(--cw-abajo) + var(--cw-globo) + 12px);
  width:min(300px,calc(100% - 32px));
  border-radius:var(--cw-radio);overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(12,17,22,.22),0 2px 8px rgba(12,17,22,.08);
  display:flex;flex-direction:column;font-family:var(--ui);
  max-height:calc(100% - var(--cw-abajo) - var(--cw-globo) - 28px);
  transform-origin:bottom right;animation:cw-abre .22s cubic-bezier(.2,.9,.3,1.1)}
.cw-caja.izq{transform-origin:bottom left}
@keyframes cw-abre{from{opacity:0;transform:translateY(10px) scale(.94)}}
.cw-caja.der{right:var(--cw-costado)}
.cw-caja.izq{left:var(--cw-costado)}

.cw-cab{flex:0 0 auto;background:var(--cw-tono);
  background:linear-gradient(135deg,var(--cw-tono),color-mix(in srgb,var(--cw-tono) 72%,#000));
  color:#fff;padding:13px 14px;display:flex;align-items:center;gap:10px}
.cw-foto{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
  font-size:13px;font-weight:700;letter-spacing:-.02em}
.cw-foto svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}
.cw-quien{flex:1;min-width:0}
.cw-quien b{font-size:13.5px;font-weight:650;letter-spacing:-.015em;display:block;line-height:1.25}
.cw-quien span{font-size:10.5px;opacity:.9;display:flex;align-items:center;gap:5px;margin-top:1px}
.cw-vivo{width:6px;height:6px;border-radius:50%;background:#6EE7A0;
  box-shadow:0 0 0 3px rgba(110,231,160,.25)}
.cw-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16)}
.cw-x svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6}

.cw-hilo{padding:13px 12px;display:flex;flex-direction:column;gap:9px;
  background:#F6F8FA;flex:1 1 auto;min-height:96px;max-height:190px;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#CBD3DC transparent}
.cw-hilo::-webkit-scrollbar{width:6px}
.cw-hilo::-webkit-scrollbar-thumb{background:#CBD3DC;border-radius:999px}
.cw-caja.oscuro .cw-hilo{scrollbar-color:#2A323D transparent}
.cw-caja.oscuro .cw-hilo::-webkit-scrollbar-thumb{background:#2A323D}
.cw-dia{align-self:center;font-size:9.5px;color:#9AA5B1;background:#EBEFF4;
  padding:2px 9px;border-radius:999px;letter-spacing:.03em}
.cw-msj{max-width:82%;font-size:12.3px;line-height:1.5;padding:9px 12px;
  border-radius:15px;position:relative}
.cw-msj.ellos{background:#fff;color:#222C38;border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(12,17,22,.07)}
.cw-msj.tuyo{color:#fff;align-self:flex-end;border-bottom-right-radius:6px;
  background:var(--cw-tono);
  background:linear-gradient(180deg,var(--cw-tono),color-mix(in srgb,var(--cw-tono) 84%,#000))}
.cw-hora{display:block;font-size:9px;margin-top:4px;opacity:.55;letter-spacing:.02em}

/* la tarjeta que manda la IA o el vendedor */
.cw-tar{background:#fff;border-radius:14px;overflow:hidden;max-width:86%;
  box-shadow:0 2px 10px rgba(12,17,22,.09)}
.cw-tar-c{display:flex;gap:10px;padding:9px}
.cw-mini{width:44px;height:44px;flex:0 0 44px;border-radius:10px;
  background:linear-gradient(140deg,#EDF1F5,#DDE4EC)}
.cw-tar b{font-size:11.5px;color:#222C38;display:block;line-height:1.35;font-weight:650}
.cw-precio{font-family:var(--mo);font-size:12px;color:#222C38;margin-top:3px;display:block}
.cw-tar-b{display:block;text-align:center;font-size:11px;font-weight:650;color:#fff;
  padding:8px;background:var(--cw-tono);letter-spacing:.01em}

.cw-tecleo{display:flex;gap:3px;align-items:center;background:#fff;width:fit-content;
  padding:11px 13px;border-radius:15px;border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(12,17,22,.07)}
.cw-tecleo i{width:5px;height:5px;border-radius:50%;background:#B8C1CB;
  animation:cw-late 1.2s infinite}
.cw-tecleo i:nth-child(2){animation-delay:.15s}
.cw-tecleo i:nth-child(3){animation-delay:.3s}
@keyframes cw-late{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

.cw-fondo{flex:0 0 auto;border-top:1px solid #EDF1F5;padding:9px 10px;display:flex;align-items:center;gap:8px;
  background:#fff}
.cw-txt{flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--ui);font-size:11.5px;color:#222C38}
.cw-txt::placeholder{color:#9AA5B1}
.cw-caja.oscuro .cw-txt{color:#E6EBF1}
.cw-enviar{cursor:pointer}
.cw-tecleo[hidden]{display:none}
.cw-enviar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  background:var(--cw-tono)}
.cw-enviar svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4}
/* el aviso que asoma sobre el globo antes de que abran */
.cw-teaser{position:absolute;bottom:calc(var(--cw-abajo) + var(--cw-globo) + 12px);
  max-width:216px;background:#fff;border-radius:15px;padding:11px 13px;font-size:12px;
  line-height:1.45;color:#222C38;box-shadow:0 12px 32px rgba(12,17,22,.18);
  animation:cw-abre .25s cubic-bezier(.2,.9,.3,1.1)}
.cw-teaser.der{right:var(--cw-costado);border-bottom-right-radius:6px}
.cw-teaser.izq{left:var(--cw-costado);border-bottom-left-radius:6px}

/* atajos y pedido de datos, como en Intercom o Tidio */
.cw-rapidas{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.cw-chip{font-size:11px;font-weight:600;padding:6px 11px;border-radius:999px;background:#fff;
  color:var(--cw-tono);box-shadow:inset 0 0 0 1.3px color-mix(in srgb,var(--cw-tono) 34%,#fff)}
.cw-lienzo.oscuro .cw-teaser{background:#1C222C;color:#E6EBF1;
  box-shadow:0 12px 32px rgba(0,0,0,.45)}
.cw-caja.oscuro .cw-chip{background:#1C222C}
.cw-firma{padding:6px 12px 8px;text-align:center;font-size:9.5px;color:#AEB7C1;
  background:#fff;border-top:1px solid #F4F7FA;letter-spacing:.03em}

/* el mismo chat, de noche */
.cw-caja.oscuro{background:#141922}
.cw-caja.oscuro .cw-hilo{background:#10151C}
.cw-caja.oscuro .cw-dia{background:#1C232D;color:#7B8794}
.cw-caja.oscuro .cw-msj.ellos{background:#1C222C;color:#E6EBF1;box-shadow:none}
.cw-caja.oscuro .cw-tar{background:#1C222C;box-shadow:none}
.cw-caja.oscuro .cw-tar b,.cw-caja.oscuro .cw-precio{color:#E6EBF1}
.cw-caja.oscuro .cw-mini{background:linear-gradient(140deg,#242C37,#1A212A)}
.cw-caja.oscuro .cw-tecleo{background:#1C222C;box-shadow:none}
.cw-caja.oscuro .cw-fondo{background:#141922;border-top-color:rgba(255,255,255,.07)}
.cw-caja.oscuro .cw-firma{background:#141922;border-top-color:rgba(255,255,255,.05);color:#6B7683}

.cw-burbuja{position:absolute;bottom:var(--cw-abajo);height:var(--cw-globo);
  min-width:var(--cw-globo);border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;padding:0;
  background:var(--cw-tono);color:#fff;
  background:linear-gradient(140deg,var(--cw-tono),color-mix(in srgb,var(--cw-tono) 78%,#000));
  box-shadow:0 10px 26px color-mix(in srgb,var(--cw-tono) 45%,transparent);
  transition:transform .15s}
.cw-burbuja:hover{transform:translateY(-2px)}
.cw-burbuja.abierto{padding:0;min-width:var(--cw-globo)}
.cw-burbuja.abierto svg{transform:rotate(0)}
.cw-burbuja.der{right:var(--cw-costado)}
.cw-burbuja.izq{left:var(--cw-costado)}
.cw-burbuja svg{width:calc(var(--cw-globo) * .44);height:calc(var(--cw-globo) * .44);
  stroke:#fff;fill:none;stroke-width:2}
.cw-burbuja.con-txt{padding:0 20px 0 17px}
.cw-burbuja b{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cw-burbuja .avisito{position:absolute;top:-3px;right:-3px;width:17px;height:17px;
  border-radius:50%;background:#E9483A;color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2.5px #F4F7FA}
.cw-pie{padding:9px 12px;text-align:center;font-size:10px;color:var(--mist);
  font-family:var(--mo);background:var(--veil)}

/* los controles de color */
.cw-tonos{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cw-tono{width:26px;height:26px;border-radius:8px;cursor:pointer;box-shadow:var(--lift-1)}
.cw-tono.on{outline:2px solid var(--ink);outline-offset:2px}
.cw-hex{display:flex;gap:8px;align-items:center;margin-top:9px}
.cw-hex input[type=color]{width:38px;height:38px;padding:0;border:0;border-radius:11px;
  background:none;cursor:pointer}
.cw-hex input[type=text]{flex:1;font-family:var(--mo);text-transform:uppercase}
.cw-regla{display:flex;align-items:center;gap:10px;margin-top:6px}
.cw-regla input[type=range]{flex:1;accent-color:var(--cy);height:22px}
.cw-regla b{font-family:var(--mo);font-size:11.5px;color:var(--slate);
  min-width:44px;text-align:right;font-weight:500}
.cw-codigo{font-family:var(--mo);font-size:11.5px;line-height:1.65;background:var(--veil);
  border:1px solid var(--edge);border-radius:var(--r-m);padding:14px;color:var(--slate);
  white-space:pre;overflow-x:auto}

/* ══════════ vista previa antes de emitir ══════════
   El documento como va a quedar, al lado de lo que se está
   armando: se revisa ahí mismo y recién después se emite.
   Sirve igual para el cobro del POS y para la cotización.
   Lo que cambia en pantalla chica son las medidas, así que
   viajan en variables y cada selector se escribe una sola vez. */
.modal.con-previa{max-width:980px}
.prev-doble{--prev-cols:minmax(0,1fr) 316px;--prev-alto:min(58vh,600px);--prev-pega:sticky;
  display:grid;grid-template-columns:var(--prev-cols);gap:24px;align-items:start}
@media (max-width:820px){
  .prev-doble{--prev-cols:1fr;--prev-alto:min(48vh,420px);--prev-pega:static}
}
.prev-lado{position:var(--prev-pega);top:0}
.prev-lado .cap{margin-bottom:9px}
.prev-doc{width:100%;height:var(--prev-alto);border:0;border-radius:var(--r-m);
  background:var(--veil);display:block}
.prev-espera{height:var(--prev-alto);display:flex;align-items:center;justify-content:center;
  gap:9px;border-radius:var(--r-m);background:var(--veil);font-size:13px;color:var(--mist)}
/* La cotización se revisa sola: el PDF llena la ventana y los
   únicos botones son seguir o volver. Nada al costado que
   distraiga de lo único que importa, que es cómo va a llegar.
   La altura viaja en la misma variable que la previa de al lado. */
.modal.prev-sola{max-width:900px;height:90vh}
.modal.prev-sola .modal-b{--prev-alto:100%;display:flex;flex-direction:column;gap:12px}
.prev-llena{flex:1;min-height:0}

/* Si se toca algo con la previa abierta, lo que se ve ya no es
   lo que se va a emitir: se apaga hasta volver a pedirla. */
.prev-vieja{position:relative}
.prev-vieja .prev-doc{opacity:.32;filter:grayscale(1)}
.prev-vieja::after{content:'Cambió algo · vuelve a verla';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);background:var(--am-mist);color:var(--am);font-size:12.5px;
  font-weight:600;padding:9px 14px;border-radius:var(--r-s);white-space:nowrap}

/* ════════════════════════════════════════════════════════
   MEDIOS DE PAGO · Configuración
   Una fila por medio: el dibujo, cómo se llama, y a la derecha
   subir, bajar, cambiar, borrar y el interruptor que decide si
   sale al cobrar. El apagado se ve pálido pero se sigue leyendo.
   La fila envuelve sola: si no entra, los botones bajan a su
   propio renglón, sin necesitar una regla aparte para el celular.
   ════════════════════════════════════════════════════════ */
.mp-fila{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:12px 14px;
  background:var(--veil);border-radius:var(--r-m);margin-bottom:8px}
.mp-fila.apagado .mp-ico,.mp-fila.apagado .mp-que{opacity:.45}
.mp-ico{width:50px;height:50px;flex:0 0 50px;border-radius:14px;background:var(--sheet);
  display:grid;place-items:center}
.mp-ico .ico{width:29px;height:29px;stroke:var(--slate);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.mp-que{flex:1;min-width:150px}
.mp-que b{font-size:13.5px;font-weight:600;letter-spacing:-.015em;display:block}
.mp-d{display:block;font-size:12px;color:var(--mist);margin-top:2px}
.mp-acts{display:flex;align-items:center;gap:4px;margin-left:auto}
.mp-acts .icon[disabled]{opacity:.25;pointer-events:none}
.mp-acts .switch{margin-left:7px}

/* El dibujo se elige de una lista: los mismos que usa el cobro. */
.mp-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:9px}
.mp-pick{border-radius:var(--r-m);background:var(--veil);padding:12px 8px;display:flex;
  flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  transition:background .13s,box-shadow .13s}
.mp-pick:hover{background:var(--edge)}
.mp-pick .ico{width:20px;height:20px;stroke:var(--slate);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mp-pick .nom{font-size:11.5px;font-weight:600;color:var(--mist)}
.mp-pick.on{background:var(--cy-mist);box-shadow:inset 0 0 0 1.7px var(--cy)}
.mp-pick.on .ico{stroke:var(--cy-deep)}
.mp-pick.on .nom{color:var(--cy-deep)}

.mp-opt{display:flex;align-items:center;gap:13px;padding:11px 14px;background:var(--veil);
  border-radius:var(--r-m);margin-bottom:8px;cursor:pointer}
.mp-opt:hover{background:var(--edge)}

/* Si el medio tiene su logo subido, va la imagen en lugar del
   dibujo: hereda el tamaño de .ico y solo hay que decirle que no
   se deforme. */
img.ico{object-fit:contain}
.vt-pago img.ico{width:17px;height:17px;flex:0 0 17px}
.mp-logo-zona{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.mp-logo{width:94px;height:94px;flex:0 0 94px;border-radius:var(--r-m);background:var(--veil);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;
  transition:background .13s,box-shadow .13s}
.mp-logo:hover{background:var(--cy-mist);box-shadow:inset 0 0 0 1.5px var(--cy)}
.mp-logo img{max-width:76px;max-height:76px;object-fit:contain}
.mp-logo .vacio{font-size:11.5px;color:var(--ghost)}

/* Los formatos son para consultar, no una orden: chico y gris,
   que no le compita al logo ni a los botones de al lado. */
.mp-nota{font-size:11.5px;line-height:1.6;color:var(--ghost);max-width:340px;margin-top:11px}
.mp-nota b{font-weight:600;color:var(--mist)}

/* ── comprobante y cliente en la cuenta ──
   Van arriba, pegados al encabezado y antes de la lista: es lo
   primero que se define y así se ve de una, sin bajar la vista.
   Sin rótulos y sin caja propia: es una franja del mismo panel,
   no un formulario metido adentro. Las notas se esconden solas
   cuando no dicen nada, para que no dejen huecos. */
.pos-datos{flex:0 0 auto;display:grid;gap:12px;padding:3px 20px 2px}

.cta-cli{position:relative}
.cta-buscar{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;
  border-radius:12px;background:var(--veil);transition:background .15s,box-shadow .15s}
.cta-buscar:focus-within{background:var(--sheet);
  box-shadow:inset 0 0 0 1.5px var(--cy),var(--lift-2)}
.cta-buscar svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--ghost);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta-buscar.pide svg{stroke:var(--am)}
.cta-buscar:focus-within svg{stroke:var(--cy)}
/* el cajón del cliente cuando es lo que impide cobrar. Va después
   del :focus-within a propósito: mismo peso, y así no se despinta
   al meter el cursor. */
.cta-buscar input{flex:1;min-width:0;height:100%;border:0;background:none;
  font-size:13.5px;letter-spacing:-.01em}
.cta-buscar input:focus{outline:none}

/* Elegido de Personas: deja de ser un campo y pasa a ser su ficha. */
.cta-chip{display:none;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 7px;
  border-radius:12px;background:var(--cy-mist)}
.cta-cli.elegido .cta-buscar{display:none}
.cta-cli.elegido .cta-chip{display:flex}
.cta-chip .ini{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--cy);
  color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:600}
.cta-chip .qué{flex:1;min-width:0}
.cta-chip b{display:block;font-size:13.5px;font-weight:600;color:var(--cy-deep);
  letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta-chip .qué span{display:block;font-family:var(--mo);font-size:11px;letter-spacing:-.03em;
  color:var(--cy-deep);opacity:.7;margin-top:1px}
.cta-chip .qué span:empty{display:none}
.cta-chip .x{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;
  place-items:center;color:var(--cy-deep);transition:background .12s,color .12s}
.cta-chip .x:hover{background:var(--cy);color:#fff}
.cta-chip .x svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round}

/* Un solo renglón de estado, al pie. Ahí aparecer y desaparecer no
   empuja la lista de productos, y es donde se mira al cobrar. */
.cta-aviso{font-size:11.5px;line-height:1.45;color:var(--mist);margin-top:12px}
.cta-aviso:empty{display:none}
.cta-aviso.cta-ojo{color:var(--am);font-weight:600}

/* ── vender con pérdida ──
   Mientras se confirma, el pie no muestra nada más: el botón que
   aplicaba sin preguntar no puede quedar a la mano. */
.modal-f.confirmando > :not(.pp-caja){display:none}
.pp-caja{flex:1 1 100%;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--am-mist);border-radius:var(--r-m);padding:13px 15px}
.pp-caja .qué{flex:1 1 210px;min-width:0}
.pp-caja .qué b{display:block;font-size:13.5px;font-weight:600;color:var(--am);
  letter-spacing:-.015em}
.pp-caja .qué span{display:block;font-size:11.5px;color:var(--slate);margin-top:2px}
.pp-caja .qué em{font-family:var(--mo);font-style:normal;font-weight:600;color:var(--am);
  letter-spacing:-.03em}
.pp-campo{width:118px;flex:0 0 118px;height:40px;border-radius:11px;border:0;
  background:var(--sheet);text-align:center;font-family:var(--mo);font-size:14px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--am-mist)}
.pp-campo:focus{outline:none;box-shadow:inset 0 0 0 1.7px var(--am)}
.pp-caja.listo .pp-campo{box-shadow:inset 0 0 0 1.7px var(--gn);color:var(--gn)}

/* ════════════════════════════════════════════════════════
   ENTRAR
   La única pantalla que se ve sin haber entrado. No lleva
   menú ni cabecera: no hay a dónde ir todavía.
   Los campos son los mismos «.campos .fld» de todas partes;
   acá solo se resuelve el centrado y la tarjeta.
   ════════════════════════════════════════════════════════ */
.entrar-pag{min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--canvas)}
.entrar-caja{width:100%;max-width:372px;background:var(--sheet);border-radius:var(--r-xl);
  padding:34px 30px 30px;box-shadow:var(--lift-3);border:1px solid var(--edge)}
.entrar-sello{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--cy-2),var(--cy-deep));box-shadow:var(--glow);margin-bottom:18px}
.entrar-sello svg{width:24px;height:24px;fill:#fff;stroke:none}
.entrar-caja h1{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.entrar-caja .entrar-sub{font-size:13.5px;color:var(--mist);margin:5px 0 22px}
.entrar-caja .campos{gap:13px}
.entrar-b{width:100%;height:42px;margin-top:20px}
/* Mientras el servidor contesta el botón se apaga: en el
   mostrador se toca dos veces cuando algo tarda. */
.entrar-b[disabled]{opacity:.6;pointer-events:none}
.entrar-pie{margin-top:18px;font-size:12px;color:var(--ghost);text-align:center;line-height:1.5}

/* ════════════════════════════════════════════════════════
   CAMPO DE CLAVE
   El ojo para ver lo que uno está escribiendo. En el
   mostrador se teclea rápido y a ciegas, y equivocarse dos
   veces seguidas sin poder mirar molesta.
   No lleva prefijo de pantalla a propósito: sirve en el
   ingreso y servirá igual el día que haya una pantalla para
   cambiar la clave o para dar de alta a la gente.
   ════════════════════════════════════════════════════════ */
.clave-caja{position:relative}
/* El texto se corta antes del botón: si no, las últimas letras
   quedan debajo del ojo y no se leen. */
.clave-caja input{padding-right:42px}
.clave-ojo{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;border-radius:8px;color:var(--mist)}
.clave-ojo:hover{color:var(--slate);background:var(--edge)}
.clave-ojo:focus-visible{outline:2px solid var(--cy);outline-offset:1px}
.clave-ojo svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Se ve el ojo tachado solo mientras la clave está a la vista:
   el dibujo dice en qué estado está, no lo que va a pasar. */
.clave-ojo .tapado{display:none}
.clave-ojo.viendo .abierto{display:none}
.clave-ojo.viendo .tapado{display:block}

/* ════════════════════════════════════════════════════════
   USUARIOS Y ACCESOS
   La lista de quién entra. Se apoya en la tabla y en los
   campos de siempre; acá está solo lo suyo.
   ════════════════════════════════════════════════════════ */
/* La tabla no se achica: con seis columnas en un celular, o
   rueda de lado o se lee todo apretado. */
.us-tabla{overflow-x:auto}
.us-tabla table{min-width:660px}
.us-quien b{display:block;font-weight:600;font-size:13.5px}
.us-quien span{font-size:11.5px;color:var(--mist);font-family:var(--mo);letter-spacing:-.03em}
/* El rol se lee, no se toca: se reparte desde la ficha. */
.us-rol-txt{font-size:13px;color:var(--slate)}
.us-rol-txt em{display:block;font-style:normal;font-size:11px;color:var(--cy-deep)}

/* ── la ficha de una persona ──
   Se abre dentro de la tabla, debajo de su fila. Los campos son
   los de siempre; acá va solo el marco y los switches con su
   explicación al lado. */
.us-ficha-fila td{background:var(--veil);border-top:0}
.us-ficha{padding:16px 4px 4px}
.us-sws{display:flex;flex-wrap:wrap;gap:10px 28px;margin:2px 0 16px}
.us-sw{display:flex;align-items:center;gap:10px;cursor:pointer}
.us-sw span{font-size:13px;color:var(--ink)}
.us-sw em{display:block;font-style:normal;font-size:11.5px;color:var(--mist)}
.us-sw .switch[data-fijo]{opacity:.45;cursor:default}
/* La ficha de un rol son solo switches, en dos columnas si cabe:
   son doce y en una sola fila larga no se leen. */
.us-rol-ficha .us-sws{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px 28px;margin:2px 0 16px}

/* Al apagado se le baja el tono en vez de sacarlo de la lista:
   sigue estando, y quien mira tiene que ver que está apagado. */
.us-fila.us-off{opacity:.5}
.us-acc{text-align:right;white-space:nowrap}
.us-acc .b{margin-left:6px}
/* La marca de "este eres tú": evita apagarse por distraído. */
.us-tuyo{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cy);margin-left:7px}
/* El alta y la clave nueva se abren dentro del panel y no en una
   ventana encima: son tres campos. */
.us-alta{border-top:1px solid var(--edge);padding:18px 20px;background:var(--veil)}
.us-alta .campos{margin-bottom:16px}
.us-pie{display:flex;justify-content:flex-end;gap:8px}
.us-nunca{color:var(--ghost)}
/* La bitácora se lee por la izquierda: el cuándo primero, en
   tono bajo, que lo que importa es lo que sigue. */
.us-cuando{font-size:12px;color:var(--mist);white-space:nowrap}

/* Las pestañas de la bitácora, contra el borde derecho de la
   cabecera. El aspecto lo ponen .tabs y .tab, que son las mismas
   de todas las pantallas; acá solo se dice dónde se paran. */
.us-bit-tabs{margin-left:auto}

/* ════════════════════════════════════════════════════════
   WHATSAPP Y REDES
   Un bloque por canal, con sus llaves. Se apoya en los campos
   de siempre; acá está solo lo suyo.
   ════════════════════════════════════════════════════════ */
.mn-canal{border:1px solid var(--edge);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.mn-cab{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mn-cab b{font-size:14.5px;font-weight:600}
.mn-cab .switch{margin-left:auto}
.mn-nota{font-size:12px;color:var(--mist);margin-bottom:14px;max-width:62ch}
/* Lo que falta se dice en ámbar: no es un error, es que todavía
   no está terminado de llenar. */
.mn-falta{margin-top:12px;font-size:12px;color:var(--am)}
/* Y lo que Meta contestó mal, en rojo: eso sí está roto. */
.mn-mal{margin-bottom:12px;font-size:12px;color:var(--rd);font-family:var(--mo);
  letter-spacing:-.02em;word-break:break-word}
.mn-aviso{border:1.4px solid var(--am);background:var(--am-mist);border-radius:12px;
  padding:12px 14px;margin-bottom:16px;font-size:12.5px;color:var(--ink);line-height:1.5}
.mn-canal input[readonly]{font-family:var(--mo);font-size:12px;letter-spacing:-.03em;color:var(--slate)}