/* ============================================================
   NEBLINAS — estilos. Lenguaje visual de Apple con los colores
   de la empresa. La usa gente que viene del papel: todo grande,
   claro y con palabras de la empresa.
   ============================================================ */

/* La letra vive dentro del proyecto: si se cae el internet, la app se ve igual.
   En Mac/iPhone manda San Francisco (fuente del sistema); en Windows/Android, Inter. */
@font-face{
  font-family:"Inter";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* marca */
  --azul:#1D2F8A; --azul-2:#16245F; --agua:#1591D0; --agua-2:#4FC3F0;
  --azul-suave:#E6E9F7; --agua-suave:#E4F2FB;
  --degradado:linear-gradient(118deg,#16245F 0%,#1D2F8A 45%,#1591D0 120%);
  /* superficies */
  --fondo:#F5F7FB; --velo:#E9EEF7;
  --papel:#FFFFFF; --papel-2:#F3F6FB; --boton-2:#EEF2F8;
  /* texto */
  --tinta:#0E1A36; --tinta-2:#44506A; --apagado:#5F6B82;
  /* rayas */
  --linea:#E3E8F0; --linea-2:#EEF1F6;
  /* estados */
  --bien:#157A43; --bien-suave:#E3F6EA;
  --ojo:#8A5A00; --ojo-suave:#FFF4D6; --pendiente:#FFF4CC; --ambar:#F5A300;
  --malo:#C23B32; --malo-suave:#FDE7E5; --globito:#E5484D;
  /* crédito: solo la columna C y sus totales, como en el papel */
  --credito:#C05621; --credito-cab:#FFF7F0; --credito-celda:#FFFCF9;
  /* forma */
  --r-chico:10px; --r:12px; --r-tarjeta:18px; --r-ventana:22px;
  --sombra:0 1px 2px rgba(14,26,54,.05),0 6px 16px -6px rgba(29,47,138,.12);
  --sombra-2:0 1px 2px rgba(14,26,54,.05),0 12px 32px -12px rgba(29,47,138,.18);
  --sombra-marca:0 10px 24px -8px rgba(29,47,138,.55);
  --vidrio:rgba(255,255,255,.85);
  --vidrio-solido:rgba(250,251,253,.97);
  --borde-vidrio:rgba(29,47,138,.1);
  /* letra */
  --letra:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,system-ui,sans-serif;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--tinta);font:400 16px/1.5 var(--letra);letter-spacing:-.011em;
  font-optical-sizing:auto;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  background:var(--fondo) linear-gradient(180deg,var(--velo) 0,var(--fondo) 420px) no-repeat}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--agua);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:700}
p{margin:0}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums}
.apagado{color:var(--apagado)} .chico{font-size:14px;letter-spacing:-.006em} .mini{font-size:13px;letter-spacing:-.003em}
.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.entre{justify-content:space-between}
.columna{display:flex;flex-direction:column;gap:18px}
.vacio{padding:28px 16px;text-align:center;color:var(--apagado)}
.ic{width:20px;height:20px;flex:none;vertical-align:-4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   PANTALLA DE ENTRADA
   ============================================================ */
/* Oscura y editorial, como una revista: mosaico de fotos oscurecidas, logo en blanco,
   letras espaciadas y campos con solo la raya de abajo. Aunque sea minimalista, los
   campos y el botón son grandes: la usan personas mayores. */
.entrar{position:relative;isolation:isolate;min-height:100%;display:flex;flex-direction:column;color:#fff;background:#06080C;color-scheme:dark}
.entrar-mosaico{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  background:#06080C url("/img/planta.jpg") center/cover no-repeat}
/* Cada cuadro oscurece su parte de la foto, todos igual y sin rayas entre ellos (Isa no
   quiere líneas en el fondo). Los cuadros quedan listos para llevar fotos distintas. */
.entrar-mosaico span{background:rgba(5,8,13,.72)}
/* Sin recuadro detrás del formulario (Isa lo quiere solo sobre el fondo): una sombra
   difusa en el centro, sin bordes, basta para que los campos se lean sobre la foto. */
.entrar::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 30% 48% at 50% 50%,rgba(3,5,9,.62),rgba(3,5,9,0) 100%),
             radial-gradient(ellipse 70% 80% at 50% 45%,transparent 30%,rgba(0,0,0,.55))}
.entrar-sello{position:absolute;top:28px;left:32px;padding:9px 16px;border:1px solid rgba(255,255,255,.4);
  font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.entrar-centro{flex:1;display:grid;place-items:center;padding:96px 24px 32px}
.entrar-form{width:min(380px,100%);display:flex;flex-direction:column;gap:26px}
/* Sobre lo oscuro el logo se invierte y se le devuelve el tono: las letras azul oscuro
   quedan blancas y la salpicadura sigue en los azules de la marca. (Todo blanco no sirve:
   la palabra "neblinas" se funde con la salpicadura.) */
.entrar-logo{display:block;height:150px;width:auto;margin:0 auto 2px;
  filter:invert(1) hue-rotate(180deg) saturate(1.3) drop-shadow(0 10px 28px rgba(0,0,0,.6))}
.entrar-divisor{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:400;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(255,255,255,.6);white-space:nowrap}
.entrar-divisor::before,.entrar-divisor::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(79,195,240,.8))}
.entrar-divisor::after{background:linear-gradient(90deg,rgba(79,195,240,.8),transparent)}
.entrar-campo{display:flex;flex-direction:column;gap:4px}
/* letra fina y espaciada, como en una revista; el tamaño se queda grande para la gente mayor */
.entrar-campo > span:first-child{font-size:12.5px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.entrar-in{width:100%;min-height:54px;padding:8px 0;border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;
  background:transparent;color:#fff;font-size:19px;font-weight:300;letter-spacing:.02em;transition:border-color .2s,box-shadow .2s}
.entrar-in::placeholder{color:rgba(255,255,255,.3);font-weight:300}
.entrar-in:focus{outline:none;border-bottom-color:var(--agua-2);box-shadow:0 1px 0 var(--agua-2)}
/* Cuando el navegador autocompleta el usuario y la clave, pinta el campo como una caja clara.
   Se recorta ese fondo al tamaño de las letras (que van en blanco) para que no se vea la caja
   y el texto quede sobre la foto, solo con la raya de abajo. */
.entrar-in:-webkit-autofill,.entrar-in:-webkit-autofill:hover,.entrar-in:-webkit-autofill:focus,.entrar-in:-webkit-autofill:active{
  -webkit-text-fill-color:#fff;caret-color:#fff;-webkit-background-clip:text;background-clip:text;box-shadow:none;
  transition:background-color 600000s 0s,color 600000s 0s}
.entrar-in:autofill{-webkit-text-fill-color:#fff;-webkit-background-clip:text;background-clip:text}
.entrar .con-ojito .entrar-in{padding-right:48px}
.entrar .ojito{right:-6px;color:rgba(255,255,255,.62)}
.entrar .ojito:hover{color:#fff}
.entrar-error{padding:12px 14px;border-left:3px solid #E5484D;background:rgba(229,72,77,.15);color:#FFCFCB;font-size:15px}
.entrar-boton{display:flex;align-items:center;justify-content:space-between;min-height:62px;margin-top:6px;padding:0 26px;
  border:1px solid rgba(255,255,255,.32);background:rgba(6,8,12,.3);color:#fff;cursor:pointer;
  font-size:15px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;transition:background .2s,border-color .2s}
.entrar-boton svg{width:30px;height:12px;color:var(--agua-2);transition:transform .2s}
.entrar-boton:hover{border-color:var(--agua-2);background:rgba(79,195,240,.12)}
.entrar-boton:hover svg{transform:translateX(5px)}
.entrar-boton:focus-visible{outline:2px solid var(--agua-2);outline-offset:3px}
.entrar-pie{padding:20px 24px calc(20px + env(safe-area-inset-bottom));text-align:center;
  font-size:12px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.36)}
@media (max-width:899.98px){
  .entrar-mosaico{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  /* en el celular el formulario tapa casi todo: la foto va más oscura para que se lean los campos */
  .entrar-mosaico span:nth-child(n){background:rgba(5,8,13,.8)}
  .entrar-sello{top:18px;left:18px;padding:7px 12px;font-size:11.5px;letter-spacing:.24em}
  .entrar-centro{padding:84px 24px 16px}
  .entrar-logo{height:124px}
  .entrar-pie{letter-spacing:.2em;line-height:1.7}
}
.con-ojito{position:relative;display:block}
.con-ojito .in{padding-right:52px}
.ojito{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;
  cursor:pointer;color:var(--apagado);border-radius:10px;display:grid;place-items:center}
.ojito .ic{width:22px;height:22px;vertical-align:0}

/* ============================================================
   EL CASCARÓN: barra lateral (PC), barra de arriba y de abajo (celular)
   ============================================================ */
.app{min-height:100%}

/* barra lateral */
.lateral{display:none}
/* el logo real de Neblinas: fondo transparente, se ve bien sobre el vidrio claro */
.lateral-marca{display:flex;justify-content:center;padding:2px 8px 20px}
.lateral-marca img{display:block;height:96px;width:auto}
.logo-impreso{display:none}
.lateral-menu{display:flex;flex-direction:column;gap:4px}
.lateral-menu .item-menu{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:12px;
  background:none;color:var(--tinta-2);font-size:16px;font-weight:500;cursor:pointer;text-align:left;transition:background .15s}
.lateral-menu .item-menu svg{width:22px;height:22px;flex:none;color:var(--agua)}
.lateral-menu .item-menu:hover{background:rgba(29,47,138,.06)}
.lateral-menu .item-menu[aria-current="page"]{background:var(--azul);color:#fff;font-weight:600;box-shadow:0 8px 16px -10px rgba(29,47,138,.7)}
.lateral-menu .item-menu[aria-current="page"] svg{color:#fff}
.globito{min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--globito);color:#fff;
  font-size:12px;font-weight:700;font-style:normal;letter-spacing:0;display:inline-grid;place-items:center;line-height:1}
.lateral-menu .globito{margin-left:auto}
.yo{margin-top:auto;display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:16px;
  background:var(--papel);box-shadow:var(--sombra);cursor:pointer;text-align:left;transition:box-shadow .15s}
.yo:hover{box-shadow:var(--sombra-2)}
.yo img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--azul-suave);flex:none}
.yo-texto{min-width:0}
.yo-texto b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo-texto span{display:block;font-size:13px;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* como "Cerrar sesión" en el iPhone: tarjeta blanca, letra roja, separada de la tarjeta de perfil */
.salir-lateral{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin-top:14px;padding:0 14px;
  border:0;border-radius:16px;background:var(--papel);box-shadow:var(--sombra);color:var(--malo);
  font-size:15px;font-weight:600;letter-spacing:-.006em;cursor:pointer;transition:background .15s,box-shadow .15s}
.salir-lateral:hover{background:#FFF6F5;box-shadow:var(--sombra-2)}
.salir-lateral:active{transform:scale(.98)}
.salir-lateral .ic{width:20px;height:20px;vertical-align:0}

/* barra de arriba y de abajo: solo celular */
.barra,.menu-abajo{display:none}
.volver-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-10px 0 4px -8px;padding:0 10px 0 4px;
  border:0;background:none;color:var(--azul);font-size:16px;font-weight:600;cursor:pointer;border-radius:10px}
.volver-link:hover{background:rgba(29,47,138,.06)}
.volver-link .ic{width:22px;height:22px;vertical-align:0}
.heroe{display:none}
.solo-cel{display:none}

@media (min-width:900px){
  .app{display:grid;grid-template-columns:248px minmax(0,1fr);align-items:start}
  .lateral{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:20px 14px 16px;
    background:var(--vidrio-solido);border-right:1px solid var(--borde-vidrio)}
  .pantalla{padding:20px 36px 56px;width:100%;max-width:1400px;margin:0 auto}
  /* Arriba, sin espacio de más (2026-10-30): la flecha de volver va en el mismo renglón del título */
  .volver-link{float:left;margin:0 12px 0 -8px}
  .volver-link + .cabecera{align-items:center;min-height:44px}
  .volver-link + .cabecera + *{clear:both}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:900px){
    .lateral{background:rgba(246,248,252,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
  }
}

@media (max-width:899.98px){
  .solo-pc{display:none!important}
  .solo-cel{display:block}
  .volver-link{display:none}
  .barra{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;
    min-height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;
    background:var(--vidrio-solido);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
  .logo-barra{display:block;height:40px;width:auto}
  .salir-barra{margin-left:auto;display:flex;align-items:center;gap:5px;min-height:44px;padding:0 4px 0 10px;border:0;
    background:none;color:var(--malo);font-size:16px;font-weight:600;cursor:pointer;position:relative;z-index:1}
  .salir-barra .ic{width:22px;height:22px;vertical-align:0}
  .barra-titulo{position:absolute;left:112px;right:112px;bottom:0;height:52px;display:grid;place-items:center;
    font-size:17px;font-weight:600;letter-spacing:-.012em;opacity:0;transition:opacity .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra.desplazada{border-bottom-color:var(--borde-vidrio)}
  .barra.desplazada .barra-titulo{opacity:1}
  .volver{display:flex;align-items:center;gap:2px;min-height:44px;padding:0 8px 0 0;border:0;background:none;
    color:var(--azul);font-size:17px;font-weight:500;cursor:pointer;position:relative;z-index:1}
  .volver .ic{width:26px;height:26px;vertical-align:0}
  .volver:not([hidden]) + .logo-barra{display:none}

  .pantalla{padding:8px 16px calc(100px + env(safe-area-inset-bottom))}

  .menu-abajo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--vidrio-solido);border-top:1px solid var(--borde-vidrio)}
  .menu-abajo button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:50px;border:0;background:none;color:#7C879B;font-size:12px;font-weight:500;letter-spacing:0;cursor:pointer}
  .menu-abajo button svg{width:26px;height:26px}
  .menu-abajo button[aria-current="page"]{color:var(--azul);font-weight:600}
  .menu-abajo .globito{position:absolute;top:1px;left:calc(50% + 5px);min-width:20px;height:20px;padding:0 5px;font-size:11px;
    box-shadow:0 0 0 2px #fff}

  /* pantallas del vendedor: encabezado azul de marca en vez de la barra */
  body.con-heroe .barra{display:none}
  body.con-heroe .pantalla{padding-top:0}
  .heroe{display:block;position:relative;overflow:hidden;margin:0 -16px;color:#fff;background:var(--degradado);
    padding:calc(env(safe-area-inset-top) + 8px) 22px 56px}
  .heroe-arriba{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -6px 16px 0}
  /* sobre el azul el logo se perdería (sus letras son azul oscuro): va en una placa blanca */
  .heroe-marca{display:inline-flex;align-items:center;padding:4px 12px;border-radius:14px;background:#fff;
    box-shadow:0 6px 16px -8px rgba(0,8,40,.5)}
  .heroe-marca img{display:block;height:40px;width:auto}
  .salir-heroe{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;cursor:pointer;
    border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600}
  .salir-heroe .ic{width:20px;height:20px;vertical-align:0}
  .heroe::after{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle,rgba(79,195,240,.45),transparent 65%);pointer-events:none}
  .heroe h1{position:relative;font-size:30px;letter-spacing:-.022em;line-height:1.1}
  .heroe p{position:relative;margin-top:6px;font-size:16px;color:rgba(255,255,255,.85);max-width:34ch}
  .sobre-heroe{position:relative;margin-top:-32px}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:899.98px){
    .barra,.menu-abajo{background:var(--vidrio);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
  }
}

/* ============================================================
   PIEZAS QUE SE REPITEN
   ============================================================ */
.cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.cabecera h1{font-size:30px;line-height:1.08;letter-spacing:-.022em;color:var(--tinta)}
.cabecera p{margin-top:6px;color:var(--apagado);font-size:16px}
.cabecera-der{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:899.98px){
  .cabecera{margin:6px 0 18px;gap:12px}
  .cabecera h1{font-size:28px;letter-spacing:-.021em}
}

.caja{background:var(--papel);border-radius:var(--r-tarjeta);padding:18px 20px;box-shadow:var(--sombra)}
.caja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--linea-2)}
.caja-cab h2{font-size:20px;letter-spacing:-.017em}
.caja-cab p{font-size:14px;color:var(--apagado);margin-top:3px}
.caja-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linea-2);font-size:15px;color:var(--apagado)}
.caja-pie b{color:var(--tinta)}
.etiqueta-seccion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 12px}
.etiqueta-seccion h2{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--apagado)}
.etiqueta-seccion span{font-size:13px;color:var(--apagado)}
.seccion{margin-bottom:28px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r);
  background:var(--boton-2);color:var(--azul);font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s,box-shadow .15s,transform .1s}
.btn:hover{background:#E3E9F3}
.btn:active{transform:scale(.98)}
.btn .ic{width:20px;height:20px;vertical-align:0}
.btn.principal{background:var(--degradado);color:#fff;box-shadow:0 8px 18px -8px rgba(29,47,138,.6)}
.btn.principal:hover{box-shadow:0 10px 22px -8px rgba(29,47,138,.75);filter:brightness(1.05)}
.btn.grande{min-height:54px;width:100%;font-size:17px;border-radius:14px}
.btn.chico{min-height:40px;padding:0 14px;font-size:15px;border-radius:11px}
.btn.malo,.btn.rechazar{background:var(--malo-suave);color:var(--malo)}
.btn.malo:hover,.btn.rechazar:hover{background:#F9D6D2}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-texto{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--azul);
  font-size:16px;font-weight:600;cursor:pointer;border-radius:10px}
@media (max-width:899.98px){.btn.chico{min-height:44px}}

/* pastillas y chips */
.pastilla{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;background:var(--papel);
  box-shadow:var(--sombra);font-size:15px;font-weight:600;color:var(--azul)}
.pastilla .ic{color:var(--agua)}
.pastilla .fecha{border:0;background:none;padding:0;font-weight:600;color:var(--azul);width:auto;min-height:40px;cursor:pointer}
.pastilla .fecha:focus{outline:none}
/* La fecha de Despachos: el mismo diseño, pero no se cambia (es hoy, la del servidor) */
.pastilla .fecha-fija{display:inline-flex;align-items:center;cursor:default;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:14px;font-weight:600;
  background:var(--boton-2);color:var(--tinta-2);white-space:nowrap}
.chip .ic{width:17px;height:17px;vertical-align:0}
.chip.bien{background:var(--bien-suave);color:var(--bien)}
.chip.ojo{background:var(--ojo-suave);color:var(--ojo)}
.chip.malo{background:var(--malo-suave);color:var(--malo)}
.chip.agua{background:var(--agua-suave);color:var(--azul)}

/* avisos dentro de la pantalla */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:14px;background:var(--agua-suave);color:var(--azul-2);font-size:15.5px;line-height:1.45}
.aviso .ic{color:var(--agua);margin-top:1px}
.aviso.malo{background:var(--malo-suave);color:#8E2620}
.aviso.ojo{background:var(--ojo-suave);color:#6B4A00}
.aviso.bien{background:var(--bien-suave);color:#0F5E33}

/* campos */
.campo{display:flex;flex-direction:column;gap:7px;font-size:15px;font-weight:600;color:var(--tinta-2)}
.campo .pista{font-weight:400;color:var(--apagado);font-size:14px}
.in{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);
  font-size:16px;font-weight:400;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.in.grande{min-height:52px;font-size:17px}
.in:focus{border-color:var(--agua);outline:none;box-shadow:0 0 0 4px rgba(21,145,208,.16)}
textarea.in{min-height:92px;padding:12px 14px;resize:vertical;line-height:1.45}
::placeholder{color:#9AA5B6;font-weight:400;opacity:1}

/* contador + / − : botones redondos grandes, para el dedo */
.contador{display:inline-flex;align-items:center;gap:6px;flex:none}
.contador button{width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  font-size:26px;font-weight:500;line-height:1;transition:transform .1s,background .15s}
.contador button:active{transform:scale(.92)}
.contador [data-menos]{background:var(--agua-suave);color:var(--azul)}
.contador [data-mas]{background:var(--azul);color:#fff;box-shadow:0 6px 12px -6px rgba(29,47,138,.6)}
.contador input{width:52px;height:48px;border:0;background:none;text-align:center;font-size:21px;font-weight:700;color:var(--azul);
  -moz-appearance:textfield;appearance:textfield}
.contador input:focus{outline:none;background:var(--agua-suave);border-radius:10px}
.contador input::-webkit-outer-spin-button,.contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* listas estilo iPhone */
.lista{display:flex;flex-direction:column}
.reng{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:52px;padding:10px 0;border-bottom:1px solid var(--linea-2)}
.reng:last-child{border-bottom:0}
.reng .crece{flex:1;min-width:0;display:flex;gap:10px;align-items:center}
.reng .crece .ic{color:var(--agua)}

/* ============================================================
   DESPACHOS
   ============================================================ */
.vendido{text-align:right}
.vendido span{display:block;font-size:14px;color:var(--apagado)}
.vendido b{display:block;font-size:28px;font-weight:700;letter-spacing:-.021em;color:var(--azul);line-height:1.15}

.sala-tarjeta{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin-bottom:30px;padding:24px 28px;border-radius:24px;color:#fff;background:var(--degradado);box-shadow:var(--sombra-marca)}
.sala-tarjeta::after{content:"";position:absolute;right:-60px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,195,240,.42),transparent 65%);pointer-events:none}
.sala-izq{position:relative;z-index:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aro-blanco{position:relative;flex:none;display:block}
.aro-blanco img{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:rgba(255,255,255,.16)}
.aro-blanco .visto{position:absolute;right:-1px;bottom:3px;width:26px;height:26px;border-radius:50%;background:#1F9D55;border:2.5px solid #fff;
  display:grid;place-items:center}
.aro-blanco .visto .ic{width:14px;height:14px;color:#fff;stroke-width:3;vertical-align:0}
.sala-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sala-titulo h2{font-size:30px;letter-spacing:-.021em;line-height:1.05}
.etiqueta{background:rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px}
.sala-sub{margin-top:4px;font-size:15px;color:rgba(255,255,255,.8)}
.sala-turnos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn-vidrio{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;font-size:15px;font-weight:600;transition:background .15s}
.btn-vidrio:hover{background:rgba(255,255,255,.28)}
.btn-vidrio .ic{width:18px;height:18px;vertical-align:0}
.sala-cifras{position:relative;z-index:1;display:flex;align-items:center;gap:28px;text-align:right}
.sala-cifras b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sala-cifras span{display:block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media (max-width:899.98px){
  .sala-tarjeta{padding:20px;border-radius:22px;gap:18px}
  .sala-titulo h2{font-size:25px}
  .aro-blanco img{width:66px;height:66px}
  .sala-cifras{width:100%;justify-content:space-between;gap:12px;text-align:left;padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
  .sala-cifras b{font-size:21px}
  .vendido{text-align:left}
}

.rejilla-vendedores{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.vendedor{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;padding:20px 14px 14px;border:0;
  border-radius:var(--r-tarjeta);background:var(--papel);box-shadow:var(--sombra);cursor:pointer;color:inherit;
  transition:transform .15s,box-shadow .15s}
.vendedor:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.vendedor .aro{display:block;padding:3px;border-radius:50%;background:linear-gradient(145deg,var(--agua-2),var(--azul));margin-bottom:12px}
.vendedor .foto{display:block;width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:var(--azul-suave)}
/* el nombre puede partirse en dos renglones, pero nunca se corta: el #N es lo que identifica al vendedor */
.vendedor .nombre{font-size:20px;font-weight:700;letter-spacing:-.017em;line-height:1.15;max-width:100%;overflow-wrap:anywhere}
.vendedor .nombre em{font-style:normal;color:var(--agua);margin-left:4px}
.vendedor .cargo{margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}
.vendedor .estado{margin:12px 0 14px}
.estado{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:13px;font-weight:600;line-height:1.3}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.estado.ojo{background:var(--ojo-suave);color:var(--ojo)}
.estado.azul{background:var(--agua-suave);color:#0B5E8E}
.estado.bien{background:var(--bien-suave);color:var(--bien)}
.estado.rojo{background:var(--malo-suave);color:var(--malo)}
.estado.gris{background:var(--boton-2);color:var(--apagado)}
/* las cifras van en renglones (nombre a la izquierda, valor a la derecha): así la plata nunca se corta */
.vendedor .cifras{display:flex;flex-direction:column;width:100%;margin-top:auto;padding-top:6px;border-top:1px solid var(--linea-2)}
.vendedor .cifras > span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 2px}
.vendedor .cifras > span + span{border-top:1px solid var(--linea-2)}
.vendedor .cifras b{font-size:15px;font-weight:700;letter-spacing:-.008em;overflow-wrap:anywhere;text-align:right}
.vendedor .cifras b.credito{color:var(--credito)}
.vendedor .cifras b.b-faltan{color:var(--malo)}
.vendedor .cifras b.b-sobran{color:var(--ojo)}
.vendedor .cifras b.b-cuadrado{color:var(--bien)}
.vendedor .cifras b.b-planta{color:var(--azul)}
.vendedor .cifras span span{font-size:14px;color:var(--apagado)}
@media (max-width:899.98px){
  .rejilla-vendedores{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vendedor{padding:16px 10px 8px}
  .vendedor .foto{width:64px;height:64px}
  .vendedor .nombre{font-size:18px}
  .vendedor .cifras b{font-size:14px}
  .vendedor .cifras span span{font-size:13px}
}

.rejilla-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:6px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.dos span{display:block;font-size:14px;color:var(--apagado)}
.cifra{display:block;margin-top:2px;font-size:24px;font-weight:700;letter-spacing:-.02em}
.cifra.bien{color:var(--bien)} .cifra.azul{color:var(--azul)} .cifra.ojo{color:var(--ojo)} .cifra.credito{color:var(--credito)}
.caja-pie .rojo{color:var(--malo)}
.caja-pie .ojo{color:var(--ojo)}
.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:36px;padding-top:16px;
  border-top:1px solid var(--linea);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--apagado);font-weight:600}

/* ============================================================
   LA PLANILLA — papel fiel con acabado Apple
   ============================================================ */
.franja{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:13px 18px;border-radius:16px;
  background:var(--ojo-suave);color:#6B4A00;font-size:15.5px;box-shadow:0 0 0 1px rgba(214,158,0,.22)}
.franja .punto-ambar{width:10px;height:10px;border-radius:50%;background:var(--ambar);flex:none;box-shadow:0 0 0 5px rgba(245,163,0,.2)}
.franja .texto{flex:1;min-width:200px}
@media (max-width:899.98px){
  .franja{align-items:flex-start;padding:14px 16px}
  .franja .punto-ambar{margin-top:7px}
  .franja .texto{min-width:0;flex-basis:calc(100% - 30px)}
  .franja a{margin-left:24px;min-height:32px}
}
.franja a{color:var(--ojo);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px;min-height:40px}
.franja a:hover{text-decoration:underline}
.franja a .ic{width:18px;height:18px;vertical-align:0}

.hoja{background:var(--papel);border-radius:var(--r-tarjeta);overflow:hidden;box-shadow:var(--sombra-2)}
.hoja-cab{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 20px}
.hoja-cab .aro{flex:none;display:block;padding:2.5px;border-radius:50%;background:linear-gradient(145deg,var(--agua-2),var(--azul))}
.hoja-cab .aro img{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:var(--azul-suave)}
.hoja-cab .quien-cuando{flex:1;min-width:180px}
.hoja-cab .quien{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hoja-cab .quien em{font-style:normal;color:var(--agua);margin-left:5px}
.hoja-cab .cuando{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;font-size:15px;color:var(--apagado)}
.hoja-cab .cuando .chip{font-size:13px;padding:3px 10px}
.hoja-cab .der{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}

.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--linea)}
table.planilla{border-collapse:separate;border-spacing:0;width:100%;min-width:980px;font-size:14px}
table.planilla th,table.planilla td{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);text-align:center;padding:0 6px;height:42px}
table.planilla tr > :last-child{border-right:0}
table.planilla thead tr.grupo th{height:36px;background:var(--papel-2);color:var(--azul-2);font-size:13px;font-weight:600;letter-spacing:-.003em}
table.planilla thead tr.dc th{height:26px;background:var(--papel);color:var(--apagado);font-size:12px;font-weight:700;letter-spacing:.04em;min-width:46px}
table.planilla thead tr.dc th.c{background:var(--credito-cab);color:var(--credito)}
table.planilla th.fijo{background:var(--papel-2);color:var(--tinta-2)}
/* la columna de la hora se queda quieta al deslizar la tabla */
table.planilla .col-hora{position:sticky;left:0;z-index:2;text-align:left;white-space:nowrap;min-width:128px;padding:5px 12px;
  background:#FAFBFD;box-shadow:inset -1px 0 0 var(--linea);border-right:0}
table.planilla thead .col-hora{background:var(--papel-2);z-index:3}
table.planilla td.col-hora .h{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--tinta)}
table.planilla td.col-hora .q{display:block;font-size:12px;color:var(--apagado)}
/* Despacho: quién verificó la salida, debajo de la hora en verde */
/* Ventana de entregas: el nombre de un cliente nuevo o sin nombre */
.ent-nombrar{display:flex;flex-direction:column;gap:10px;width:100%;padding:14px;border-radius:14px;background:var(--papel-2);
  font-size:16px;color:var(--tinta-2)}
.ent-nombrar .in{min-height:52px;font-size:17px}
.ent-error{font-size:15px;color:var(--malo)}
.ent-error:empty{display:none}

/* ============================================================
   BANDEJA DEL DESPACHADOR — como la lista de chats de WhatsApp
   ============================================================ */
.bandeja{display:flex;flex-direction:column;background:var(--papel);border-radius:var(--r-tarjeta);box-shadow:var(--sombra);overflow:hidden}
.chat{display:flex;align-items:center;gap:14px;width:100%;min-height:78px;padding:12px 16px;border:0;border-bottom:1px solid var(--linea);
  background:none;text-align:left;font:inherit;color:var(--tinta);cursor:pointer}
.chat:last-child{border-bottom:0}
.chat:active{background:var(--papel-2)}
.chat .aro{flex:none;width:56px;height:56px;padding:2px;border-radius:50%;background:var(--linea)}
.chat.nuevo .aro{background:linear-gradient(135deg,var(--agua-2),var(--azul))}
.chat .aro img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--papel);background:var(--papel-2)}
.chat-centro{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.chat-nombre{font-size:18px;font-weight:700}
.chat-nombre em{font-style:normal;color:var(--agua)}
.chat-texto{display:flex;align-items:flex-start;gap:6px;font-size:15px;color:var(--apagado);line-height:1.35}
.chat-texto .ic{flex:none;width:18px;height:18px;margin-top:1px}
.chat-texto span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat.nuevo .chat-texto{color:var(--tinta)}
.chat-der{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:flex-start;padding-top:4px}
.chat-hora{font-size:13px;color:var(--apagado);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat.nuevo .chat-hora{color:var(--bien);font-weight:700}
.chat-globo{min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--bien);color:#fff;
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
/* En la planilla, lo que el despachador no había visto */
/* Lo del despachador: cada cargue como el pedido, con la cantidad grande y "Ya lo saqué" */
.sacar-quien{display:flex;align-items:center;gap:14px}
.sacar-quien .aro{flex:none;width:60px;height:60px;padding:2px;border-radius:50%;background:linear-gradient(135deg,var(--agua-2),var(--azul))}
.sacar-quien .aro img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--papel);background:var(--papel-2)}
.sacar-quien h1 em{font-style:normal;color:var(--agua)}
.sacar-cargue{display:flex;flex-direction:column;gap:6px}
.sacar-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:16px}
.sacar-cab b{font-size:20px;font-variant-numeric:tabular-nums}
.sacar-cargue .ped-lista{padding:0}
.sacar-cant{flex:none;min-width:64px;text-align:right;font-size:34px;font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums}
.sacar-cargue .btn.grande{margin-top:6px}
.cuenta-der{display:inline-flex;align-items:center;gap:12px}
.cuenta-der .btn-texto{min-height:36px;padding:0 6px}
/* La dirección del cliente: debajo del nombre en la caja del pedido; en la planilla, chiquita */
.ent-dir{display:block;font-size:14px;color:var(--apagado);line-height:1.3}
.para-dir{color:var(--apagado)}
@media print{.para-dir{display:none}}
/* Buscar una planilla: una fila por persona y un botón por turno */
.bp-lista{display:flex;flex-direction:column;margin-top:6px}
.bp-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--linea)}
.bp-fila:last-child{border-bottom:0}
.bp-quien{font-size:18px;font-weight:700}
.bp-quien em{font-style:normal;color:var(--agua)}
.bp-turnos{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bp-turnos .btn{min-width:96px}

/* Turnos: en Despachos, en qué turno se anota y el botón para cerrarlo */
.franja-turno{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 18px;padding:12px 16px;
  background:var(--papel);border-radius:var(--r-tarjeta);box-shadow:var(--sombra);font-size:16px;color:var(--tinta-2)}
.franja-turno > .ic{width:22px;height:22px;color:var(--agua);flex:none}
.franja-turno > span{flex:1 1 220px}
.franja-turno.cerrado > .ic{color:var(--apagado)}
/* Turnos: pasar de la planilla de la mañana a la de la tarde */
.pestanas-turno{display:flex;gap:6px;margin-top:8px}
.pestanas-turno button{min-height:44px;padding:0 16px;border:1px solid var(--linea);border-radius:99px;background:var(--papel);
  color:var(--tinta-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pestanas-turno button.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.nota-dia{margin:0;padding:12px 20px 16px;font-size:14px;color:var(--apagado)}
table.planilla .verifico{display:block;margin-top:3px;font-size:12px;color:var(--apagado);white-space:nowrap}
table.planilla tbody tr:hover td{background-color:#F7F9FC}
table.planilla tbody tr:hover td.col-hora{background-color:#F2F5FA}
table.planilla tr.pedido td{background:#FFFBEE}
table.planilla tr.pedido td.col-hora{background:#FFF8E1}
.marca-pedido{display:inline-block;padding:2px 6px;border-radius:5px;background:#FFE58A;color:#6B4A00;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
/* el préstamo de botellones de planta: su propio renglón, en azul agua para que no se confunda con un cargue */
table.planilla tr.prestamo td{background:#F1F8FD}
/* El vendedor solo trajo vacíos (sin cargue) */
.marca-vacios{display:inline-block;margin-bottom:2px;padding:2px 6px;border-radius:5px;background:#E3E8F0;color:#44506A;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
table.planilla tr.prestamo td.col-hora{background:#E4F2FB}
/* la etiqueta va encima de la hora y el "para quién" puede partirse: así la columna no se ensancha */
.marca-prestamo{display:inline-block;margin-bottom:2px;padding:2px 6px;border-radius:5px;background:#CDE9F9;color:#0B5E8E;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
table.planilla td.col-hora .q.para{white-space:normal;max-width:170px;line-height:1.3}
.sello.planta{background:var(--agua-suave);color:var(--azul)}
td.d,td.c{text-align:center}
td.c{color:var(--credito);background:var(--credito-celda)}
td.cero{color:#B4BCC9}
td.editable{cursor:pointer}
td.editable:hover{background:var(--agua-suave)!important;box-shadow:inset 0 0 0 2px var(--agua)}
td.pendiente{background:var(--pendiente)!important;box-shadow:inset 3px 0 0 var(--ambar)}
td.pendiente .viejo{display:block;text-decoration:line-through;color:var(--malo);font-size:12px;line-height:1.1}
td.pendiente .nuevo{display:block;font-weight:700;font-size:15px;line-height:1.2;color:var(--tinta)}
td .corregido{padding-bottom:1px;border-bottom:2px solid var(--bien)}
.sello{display:inline-block;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}
.sello.bien{background:var(--bien-suave);color:var(--bien)}
.sello.ruta{background:var(--ojo-suave);color:var(--ojo)}
.btn-mini{min-height:34px;padding:0 14px;border:0;border-radius:10px;background:var(--azul);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-mini:hover{background:var(--azul-2)}
.btn-mini.claro{background:var(--boton-2);color:var(--azul)}
.btn-mini.claro:hover{background:#E3E9F3}
.declaro{display:block;font-size:11.5px;line-height:1.1;color:var(--ojo);white-space:nowrap}
.esperando{font-size:13px;color:var(--apagado)}
table.planilla tfoot td{height:46px;background:#F5F7FB;font-weight:700;border-top:2px solid var(--tinta);border-bottom:0}
table.planilla tfoot td.col-hora{background:#EFF3F9;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
table.planilla tfoot td.c{background:#FFF6EE}
table.planilla tfoot .registrado{font-size:12px;font-weight:600;color:var(--apagado)}

/* la tira de seis recuadros de liquidación, pegada abajo como el pie del papel */
.liquidacion{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--linea)}
.liquidacion .r{padding:14px 18px;border-right:1px solid var(--linea);min-width:0}
.liquidacion .r:last-child{border-right:0}
.liquidacion .r span{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--apagado)}
.liquidacion .r b{display:block;margin-top:4px;font-size:20px;font-weight:700;letter-spacing:-.018em;overflow-wrap:anywhere}
.liquidacion .r.credito{background:var(--credito-celda)}
.liquidacion .r.credito span,.liquidacion .r.credito b{color:var(--credito)}
.liquidacion .r.fuerte{background:var(--degradado);color:#fff}
.liquidacion .r.fuerte span{color:rgba(255,255,255,.82)}
.liquidacion .r.fuerte b{font-size:23px}
@media (max-width:1180px){
  .liquidacion{grid-template-columns:repeat(3,minmax(0,1fr))}
  .liquidacion .r{border-bottom:1px solid var(--linea)}
  .liquidacion .r:nth-child(3n){border-right:0}
}
@media (max-width:899.98px){
  .hoja-cab{padding:16px}
  .hoja-cab .quien{font-size:22px}
  .hoja-cab .der{margin-left:0;width:100%}
  .hoja-cab .der .btn{flex:1}
  table.planilla .col-hora{min-width:112px;padding:5px 10px}
}
@media (max-width:560px){
  .liquidacion{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liquidacion .r:nth-child(3n){border-right:1px solid var(--linea)}
  .liquidacion .r:nth-child(2n){border-right:0}
  .liquidacion .r b{font-size:18px}
}

.rejilla-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}

/* las dos cuentas de botellones del vendedor: los suyos y los de planta, siempre aparte */
.cuenta{margin-top:10px}
.cuenta-fila{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--linea-2);font-size:16px}
.cuenta-fila span{color:var(--tinta-2)}
.cuenta-fila b{font-weight:600;font-variant-numeric:tabular-nums}
.cuenta-total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:12px 16px;border-radius:14px;
  font-size:17px;font-weight:700}
.cuenta-total b{font-size:26px;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:6px}
.cuenta-total b .ic{width:22px;height:22px}
.cuenta-total.faltan{background:var(--malo-suave);color:var(--malo)}
.cuenta-total.sobran{background:var(--ojo-suave);color:var(--ojo)}
.cuenta-total.cuadrado{background:var(--bien-suave);color:var(--bien)}
.cuenta-total.en-ruta{background:var(--papel-2);color:var(--tinta-2)}
.cuenta-total.planta{background:var(--agua-suave);color:var(--azul)}
.cuenta-nota{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:14px;color:var(--apagado)}
.cuenta-nota .ic{width:18px;height:18px;flex:none;margin-top:1px}
.movimientos{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tinta-2)}
.movimientos .cuandito{display:inline-block;min-width:74px}
.cuenta-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cuenta-botones .btn{flex:1;min-width:180px}

/* escoger una opción con botones grandes (en vez de un menú chiquito) */
.segmentado{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--boton-2)}
.segmentado label{position:relative;cursor:pointer}
.segmentado input{position:absolute;opacity:0;pointer-events:none}
.segmentado span{display:grid;place-items:center;min-height:46px;padding:0 10px;border-radius:11px;font-size:15px;font-weight:600;color:var(--tinta-2);text-align:center}
.segmentado input:checked + span{background:var(--papel);color:var(--azul);box-shadow:0 1px 3px rgba(14,26,54,.15)}
.segmentado input:focus-visible + span{outline:3px solid var(--agua);outline-offset:1px}
@media (max-width:420px){.rejilla-2{grid-template-columns:1fr}}
.gasto-valor{font-weight:700}
.cierre{display:flex;justify-content:center;padding:6px 0 4px}
.cierre .btn{min-width:360px}
@media (max-width:560px){.cierre .btn{min-width:0;width:100%}}

/* una corrección y su estado */
.cambio{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-radius:14px;background:#FFFBEE;
  box-shadow:inset 0 0 0 1px rgba(214,158,0,.25)}
.cambio .crece{flex:1;min-width:200px}
.cambio .que{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:600}
.cambio .que::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ambar);flex:none;margin-right:2px}
.cambio .tachado{text-decoration:line-through;color:var(--malo)}
.cambio .porque{margin-top:4px;font-size:14px;color:var(--apagado)}
.cambio.listo{background:var(--papel-2);box-shadow:none}
.cambio.listo .que::before{background:var(--bien)}
.cambio.no .que::before{background:var(--malo)}
.lista-cambios{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.traza{color:var(--bien);display:inline-flex;align-items:center;gap:6px}

/* ventana para anotar un cargue */
.tabla-anotar{width:100%;border-collapse:collapse}
.tabla-anotar th{padding:0 6px 8px;font-size:13px;font-weight:600;color:var(--apagado);text-align:center}
.tabla-anotar th:first-child{text-align:left}
.tabla-anotar th.c{color:var(--credito)}
.tabla-anotar td{padding:6px;border-top:1px solid var(--linea-2)}
.tabla-anotar td:first-child{padding-left:0}
.tabla-anotar td b{display:block;font-size:16px}
.tabla-anotar td span{display:block;font-size:13px;color:var(--apagado)}
.tabla-anotar .in{min-height:48px;text-align:center;font-size:18px;font-weight:600}
.tabla-anotar .in.nuevoC{color:var(--credito)}
.caja-numero{padding:16px;border-radius:14px;background:var(--papel-2)}
.caja-numero .que{font-size:14px;color:var(--apagado)}
.caja-numero .fila{align-items:center;gap:16px;margin-top:6px}
.numero-viejo{font-size:32px;font-weight:700;text-decoration:line-through;color:var(--apagado)}
.flecha-grande{font-size:24px;color:var(--apagado)}

/* ============================================================
   PEDIDO DEL VENDEDOR (celular)
   ============================================================ */
.ped-lista{padding:6px 18px}
.pedido-linea{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 0;border-bottom:1px solid var(--linea-2)}
.pedido-linea:last-child{border-bottom:0}
.pedido-linea .nom{flex:1;min-width:0}
.pedido-linea .nom b{display:block;font-size:18px;font-weight:700;letter-spacing:-.013em;line-height:1.25}
.pedido-linea .nom span{display:block;margin-top:2px;font-size:14px;color:var(--apagado);line-height:1.3}
.ped-nota .campo{gap:9px}
.ped-total{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-tarjeta);background:var(--papel);
  box-shadow:inset 0 0 0 1px var(--linea);font-size:16px;line-height:1.45;color:var(--tinta-2)}
.ped-total .ic{color:var(--agua);width:24px;height:24px;margin-top:0}
.ped-total b{color:var(--azul)}
@media (max-width:420px){
  .ped-lista{padding:4px 14px}
  .pedido-linea{gap:8px}
  .pedido-linea .nom b{font-size:17px}
  .contador{gap:2px}
  .contador input{width:44px}
}

/* ============================================================
   AVISOS Y AUTORIZACIONES — lo más sencillo posible
   ============================================================ */
.pide{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-tarjeta);background:var(--papel);box-shadow:var(--sombra)}
.pide.urgente{box-shadow:var(--sombra),inset 4px 0 0 var(--ambar)}
.quien-pide{display:flex;align-items:center;gap:12px}
.quien-pide img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--azul-suave);flex:none}
.quien-pide b{display:block;font-size:17px;line-height:1.25}
.quien-pide span{display:block;font-size:14px;color:var(--apagado)}
.numerito{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:16px 20px;border-radius:16px;background:var(--papel-2)}
.numerito .lado{text-align:center;min-width:96px}
.numerito .lado span{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--apagado)}
.numerito .lado b{display:block;margin-top:2px;font-size:40px;font-weight:700;letter-spacing:-.022em;line-height:1.1}
.numerito .lado.antes b{text-decoration:line-through;text-decoration-thickness:3px;color:var(--malo)}
.numerito .lado.ahora b{color:var(--bien)}
.numerito .lado.casilla{text-align:left}
.numerito .lado.casilla b{font-size:18px;letter-spacing:-.012em;line-height:1.3;margin-top:4px}
.numerito .flecha{font-size:30px;color:var(--apagado);line-height:1}
.porque-caja{padding:13px 16px;border-radius:14px;background:var(--papel-2);font-size:16px;line-height:1.45}
.porque-caja span{display:block;margin-bottom:3px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--apagado)}
.dos-botones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dos-botones .btn{min-height:54px;font-size:17px;border-radius:14px}
.aviso-linea{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--linea-2)}
.aviso-linea:last-child{border-bottom:0}
.redondo{width:42px;height:42px;border-radius:50%;background:var(--agua-suave);color:var(--azul);display:grid;place-items:center;flex:none}
.redondo .ic{width:21px;height:21px;vertical-align:0}
.aviso-linea.nueva .redondo{background:var(--ojo-suave);color:var(--ojo)}
.aviso-linea .crece{flex:1;min-width:0}
.aviso-linea .crece b{display:block;font-size:16px;line-height:1.35}
.aviso-linea .crece p{margin-top:2px;font-size:15px;color:var(--apagado);line-height:1.4}
.cuandito{font-size:13px;color:var(--apagado);white-space:nowrap}
.aviso-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.aviso-acciones .chip{font-size:13px}
.nuevo-punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--agua);margin-left:8px;vertical-align:2px}
@media (max-width:480px){
  .dos-botones{grid-template-columns:1fr}
  .aviso-linea{flex-wrap:wrap}
  .aviso-linea .cuandito{margin-left:56px}
}

/* ============================================================
   MI PERFIL — como Ajustes del iPhone
   ============================================================ */
.perfil-cab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 20px 22px}
.foto-grande{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--azul-suave);box-shadow:0 0 0 4px #fff,0 10px 24px -10px rgba(29,47,138,.4)}
/* La foto se agranda al tocarla; antes de cambiarla se ve cómo queda */
.foto-grande,.persona-cab .foto{cursor:zoom-in}
.foto-ampliada{display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:14px;background:var(--papel-2)}
.foto-confirmar{display:block;width:150px;height:150px;margin:6px auto 0;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px #fff,0 10px 24px -10px rgba(29,47,138,.45)}
.perfil-cab .nombre{margin-top:10px;font-size:28px;font-weight:700;letter-spacing:-.021em;line-height:1.15}
.perfil-cab .nombre em{font-style:normal;color:var(--agua);margin-left:4px}
.perfil-cab .cargo{color:var(--apagado)}
.perfil-cab label.btn-texto{cursor:pointer}
.campos-clave{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.campos-clave + .btn{margin-top:16px}
.rejilla-gente{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.persona{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 10px;border:0;border-radius:16px;background:var(--papel-2);
  font:inherit;color:inherit;cursor:pointer;transition:background .15s}
.persona.fuera{opacity:.62}
.gente-fuera{margin-top:16px}
/* En el celular el botón pasa debajo del título, para que el texto no quede apretado */
.caja-cab.con-boton{flex-wrap:wrap}
.caja-cab.con-boton > div{flex:1 1 260px}
.gente-fuera summary{cursor:pointer;color:var(--azul);font-weight:600;min-height:44px;display:flex;align-items:center}
/* Ventana con los datos de una persona */
.persona-cab{display:flex;align-items:center;gap:14px}
.persona-cab .foto{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--azul-suave)}
.persona-cab b{display:block;font-size:16px;margin-bottom:2px}
.persona-cab label.btn-texto{cursor:pointer}
.btn-texto.quitar{color:var(--malo);align-self:flex-start}
.ent-para{color:var(--apagado);font-weight:600}
.persona:hover{background:var(--agua-suave)}
.persona img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--azul-suave);margin-bottom:6px}
.persona b{font-size:16px}
.persona b em{font-style:normal;color:var(--agua);margin-left:3px}
.persona span{font-size:13px;color:var(--apagado)}
.salir{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border:0;border-radius:var(--r-tarjeta);
  background:var(--papel);box-shadow:var(--sombra);color:var(--malo);font-size:17px;font-weight:600;cursor:pointer}
.salir:hover{background:#FFF7F6}
.salir .ic{width:21px;height:21px;vertical-align:0}

/* ============================================================
   INFORMES DEL MES (contadora, gerencia y administración)
   ============================================================ */
/* colores de la gráfica: agua para lo de contado, el naranja del crédito para lo fiado.
   Revisados con la guía de gráficas (contraste y daltonismo). */
:root{--graf-contado:#1591D0; --graf-credito:#C05621}
.cifras-mes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.cabecera-der .btn{background:var(--papel);box-shadow:var(--sombra)}
.cabecera-der .btn:hover{background:var(--papel-2)}
.pantalla > .caja + .caja,.pantalla > .rejilla-informe + .caja{margin-top:18px}
.cifra-mes{display:flex;flex-direction:column;gap:4px;padding:18px 20px}
.etiqueta-cifra{font-size:14px;font-weight:600;color:var(--apagado)}
/* las cifras grandes van con números proporcionales: los tabulares se ven sueltos en grande */
.valor-cifra{font-size:28px;font-weight:700;letter-spacing:-.021em;line-height:1.15;font-variant-numeric:proportional-nums;overflow-wrap:anywhere}
.cifra-mes.fuerte .valor-cifra{color:var(--azul);font-size:32px}
.nota-cifra{font-size:14px;color:var(--apagado)}
/* en bloque, con la flecha en la línea del texto: así "Bajó 3 %" nunca se parte */
.cambio-mes{display:block;margin-top:4px;font-size:14px;font-weight:600;line-height:1.35}
.cambio-mes .ic{width:17px;height:17px;vertical-align:-3px;margin-right:3px}
.tabla-informe .cambio-mes,.sala-cambio .cambio-mes{display:inline-block}
.cambio-mes .contra{font-weight:400;color:var(--apagado)}
.cambio-mes.sube{color:var(--bien)}
.cambio-mes.baja{color:var(--malo)}
.cambio-mes.neutro{color:var(--tinta-2)}
.cambio-mes.igual{color:var(--apagado)}
.tabla-informe .cambio-mes{margin:0;white-space:nowrap}

.grafica{margin-bottom:0}
.grafica .caja-cab{align-items:flex-start;flex-wrap:wrap}
.grafica .caja-cab p{max-width:70ch;font-size:15px;line-height:1.5}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--tinta-2);padding-top:4px}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.clave{display:inline-block;width:12px;height:12px;border-radius:3px}
.clave.contado{background:var(--graf-contado)}
.clave.credito{background:var(--graf-credito)}
.grafica-envoltura{position:relative;margin-top:10px;min-height:230px}
/* width 100%: si el espacio cambia (por ejemplo al imprimir), la gráfica se estira con él */
.g-svg{display:block;overflow:visible;width:100%;height:auto}
.g-rejilla{stroke:var(--linea-2);stroke-width:1}
.g-base{stroke:#C9D2DF;stroke-width:1}
.g-eje{fill:var(--apagado);font-size:12px}
.g-contado{fill:var(--graf-contado)}
.g-credito{fill:var(--graf-credito)}
.g-promedio{stroke:var(--tinta-2);stroke-width:1}
.g-nota,.g-mejor{font-size:12px;font-weight:600;fill:var(--tinta);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.g-resalte{fill:var(--papel-2)}
.g-toque{fill:transparent;cursor:pointer;outline:none}
.g-toque:focus-visible{stroke:var(--agua);stroke-width:2}
.g-globo{position:absolute;z-index:5;min-width:170px;padding:10px 12px;border-radius:12px;background:var(--papel);
  box-shadow:0 10px 28px -8px rgba(14,26,54,.35),0 0 0 1px var(--linea);pointer-events:none;font-size:14px}
.g-globo b{display:block;margin-bottom:6px;font-size:14px}
.g-fila{display:flex;align-items:center;gap:8px;line-height:1.6}
.g-fila strong{font-weight:700}
.g-fila em{font-style:normal;color:var(--apagado)}
.clave-linea{display:inline-block;width:12px;height:3px;border-radius:2px;background:transparent}
.clave-linea.contado{background:var(--graf-contado)}
.clave-linea.credito{background:var(--graf-credito)}
.clave-linea.promedio{width:16px;height:2px;background:var(--tinta-2)}
.ver-tabla{margin-top:10px;border-top:1px solid var(--linea-2);padding-top:10px}
.ver-tabla summary{cursor:pointer;color:var(--azul);font-weight:600;min-height:40px;display:flex;align-items:center}
.ver-tabla[open] summary{margin-bottom:8px}

.tabla-desliza{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.tabla-informe{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.tabla-informe th{padding:10px 10px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--apagado);
  text-align:left;border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--papel)}
.tabla-informe td{padding:10px;border-bottom:1px solid var(--linea-2);vertical-align:middle;white-space:nowrap}
.tabla-informe tr:last-child td{border-bottom:0}
.tabla-informe .n{text-align:right}
.tabla-informe td.credito{color:var(--credito)}
.tabla-informe .sub,.fila-cifra .sub,.reng .sub{display:block;font-size:13px;color:var(--apagado);font-weight:400}
.tabla-informe .fija{position:sticky;left:0;z-index:1;background:var(--papel)}
.persona-mini{display:inline-flex;align-items:center;gap:9px}
.persona-mini img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--azul-suave)}
.persona-mini em,.num-v{font-style:normal;font-weight:700;color:var(--agua)}
.puesto{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--boton-2);font-size:12px;font-weight:700;color:var(--tinta-2)}
.parte{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tinta-2)}
.parte-barra{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--agua-suave);overflow:hidden}
.parte-barra i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--graf-contado)}
.parte-barra.ancha{display:block;width:100%;height:10px;margin:6px 0 4px}

.rejilla-informe{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin-top:18px}
.rejilla-informe .caja,.grafica + .caja{min-width:0}
.fila-cifra{padding:12px 0;border-bottom:1px solid var(--linea-2)}
.fila-cifra-cab{display:flex;justify-content:space-between;gap:12px;font-size:16px}
.fila-cifra-cab b{font-size:18px}
.sala-cambio{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 0;font-size:15px;color:var(--tinta-2)}
.sala-cambio .cambio-mes{margin:0}
.dos.turnos{margin-top:4px;padding-top:12px;border-top:1px solid var(--linea-2)}
.cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.cuatro span{display:block;font-size:14px;color:var(--apagado)}
.caja-cab h2 .ic{width:22px;height:22px;color:var(--agua);vertical-align:-4px;margin-right:4px}
.vacio .ic{color:var(--bien);vertical-align:-4px;margin-right:4px}
.caja-cab.sub-cab{margin-top:22px}
.b-planta{color:var(--azul)}

/* tarjetas tipo perfil de los botellones de planta de cada vendedor (más pequeñas que las de Despachos) */
.rejilla-planta{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px;margin-top:14px}
.tarjeta-planta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;width:100%;padding:16px 10px 14px;
  border:0;border-radius:16px;background:var(--papel-2);color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.tarjeta-planta:hover{transform:translateY(-2px);background:var(--papel);box-shadow:var(--sombra-2)}
.tarjeta-planta .aro{display:block;padding:2.5px;border-radius:50%;background:linear-gradient(145deg,#C5CEDC,#DDE3EC);margin-bottom:8px}
.tarjeta-planta.con-planta .aro{background:linear-gradient(145deg,var(--agua-2),var(--azul))}
.tarjeta-planta img{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:var(--azul-suave)}
.tarjeta-planta .nombre{font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.2;overflow-wrap:anywhere}
.tarjeta-planta .nombre em{font-style:normal;color:var(--agua);margin-left:3px}
.tarjeta-planta .tiene{margin-top:6px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--apagado)}
.tarjeta-planta.con-planta .tiene{color:var(--azul)}
.tarjeta-planta .tiene-txt{font-size:13px;color:var(--apagado)}
.tarjeta-planta .chip{margin-top:8px;font-size:12px;padding:3px 9px}

/* el historial de planta de un vendedor */
.planta-cab{display:flex;align-items:center;gap:14px}
.planta-cab .aro{flex:none;display:block;padding:2.5px;border-radius:50%;background:linear-gradient(145deg,var(--agua-2),var(--azul))}
.planta-cab img{display:block;width:54px;height:54px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:var(--azul-suave)}
.planta-cab b{display:block;font-size:19px;letter-spacing:-.014em}
.planta-cab span span,.planta-cab div span{display:block;font-size:14px;color:var(--apagado)}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px;border-radius:14px;background:var(--papel-2)}
.tres span{display:block;font-size:13px;color:var(--apagado)}
.historial-planta{list-style:none;margin:0;padding:0}
.historial-planta li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea-2)}
.historial-planta li:last-child{border-bottom:0}
.historial-planta .redondo{width:38px;height:38px}
.historial-planta li.devolucion .redondo{background:var(--bien-suave);color:var(--bien)}
.historial-planta .crece{flex:1;min-width:0}
.historial-planta .crece b{display:block;font-size:16px}
.historial-planta .detalle{display:block;font-size:14px;color:var(--apagado);line-height:1.4}
.mov-der{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.mov-der .btn-texto{min-height:36px;font-size:14px;padding:0 4px}
@media (max-width:560px){
  /* en el celular la fecha y "Ver planilla" bajan a su propio renglón para no apretar el texto */
  .historial-planta li{flex-wrap:wrap}
  .historial-planta .crece{flex-basis:calc(100% - 52px)}
  .mov-der{flex-direction:row;align-items:center;justify-content:space-between;width:calc(100% - 50px);gap:10px;margin-left:50px}
  .tres .cifra{font-size:20px}
}
@media (max-width:899.98px){
  .cifras-mes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cifra-mes{padding:14px 16px}
  .valor-cifra{font-size:22px}
  .cifra-mes.fuerte{grid-column:1 / -1}
  .cifra-mes.fuerte .valor-cifra{font-size:30px}
  .cambio-mes .contra{display:none}
  .rejilla-informe{grid-template-columns:1fr}
  .cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cabecera-der .btn{flex:1}
}
@media print{
  .cifras-mes{grid-template-columns:repeat(3,1fr)}
  .rejilla-informe{grid-template-columns:1fr 1fr}
  .ver-tabla,.pastilla,.g-globo{display:none!important}
  .cifra-mes,.caja{box-shadow:none;border:1px solid #999}
  .pestanas-turno{display:none!important}
}

/* ============================================================
   CLIENTES — de qué vendedor es cada número
   ============================================================ */
.chips-filtro{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chip-filtro{padding:8px 16px;border:0;border-radius:99px;background:var(--boton-2);color:var(--tinta-2);
  font-size:14px;font-weight:600;cursor:pointer}
.chip-filtro.activo{background:var(--azul);color:#fff}
.chips-filtro .btn-texto{margin-left:auto}
.reng-boton{border:0;background:none;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.reng-boton:active{background:var(--papel-2)}
.reng-boton .num{display:block}
.numero-grande{text-align:center;font-size:30px;font-weight:700;color:var(--azul);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.numero-dueno{text-align:center;color:var(--tinta-2);margin-top:4px}
.numero-dueno:empty{display:none}
/* En Clientes lo que más se ve es de qué vendedor es (lo pidió el dueño el 2026-10-19) */
.dueno-grande{text-align:center;font-size:30px;font-weight:800;color:var(--tinta);line-height:1.15}
.dueno-grande em{font-style:normal;color:var(--agua);font-size:34px}
.numero-chico{text-align:center;font-size:18px;font-weight:600;color:var(--tinta-2);margin-top:4px;font-variant-numeric:tabular-nums}

/* ============================================================
   VENTANAS (modales) Y ALERTAS
   ============================================================ */
@keyframes aparecer{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
@keyframes oscurecer{from{opacity:0}to{opacity:1}}
.fondo-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(14,26,54,.36);animation:oscurecer .2s ease}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fondo-modal{background:rgba(14,26,54,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}
.modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--papel);border-radius:var(--r-ventana);
  box-shadow:0 30px 80px -20px rgba(14,26,54,.5);animation:aparecer .2s ease}
.agarradera{display:none}
.modal-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px;background:var(--papel)}
.modal-cab h2{font-size:22px;letter-spacing:-.018em}
.cerrar{width:36px;height:36px;border:0;border-radius:50%;background:var(--boton-2);color:var(--apagado);display:grid;place-items:center;cursor:pointer;flex:none}
.cerrar:hover{background:#E3E9F3}
.cerrar .ic{width:18px;height:18px;vertical-align:0}
.modal-cuerpo{display:flex;flex-direction:column;gap:16px;padding:6px 20px 20px}
.modal-pie{position:sticky;bottom:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:14px 20px 18px;background:var(--papel);
  border-top:1px solid var(--linea-2)}
/* la pregunta de "¿está seguro?", como la alerta del iPhone */
.modal.alerta{width:min(400px,100%);text-align:center}
.modal.alerta .modal-cab{justify-content:center;padding:24px 22px 4px}
.modal.alerta .cerrar{display:none}
.modal.alerta .modal-cuerpo{padding:6px 22px 20px}
.modal.alerta .aviso{display:block;padding:0;background:none;color:var(--tinta-2);font-size:16px}
.modal.alerta .modal-pie{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px 18px}
.modal.alerta .modal-pie .btn{min-height:50px;width:100%}
@media (max-width:899.98px){
  .fondo-modal{place-items:end stretch;padding:0}
  .modal{width:100%!important;max-height:92vh;border-radius:var(--r-ventana) var(--r-ventana) 0 0;animation:subir .26s cubic-bezier(.2,.8,.2,1)}
  .agarradera{display:block;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:#D0D5DE}
  .modal-cab{padding-top:10px}
  .modal-pie{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .modal-pie .btn{flex:1;min-height:50px}
  .fondo-modal.con-alerta{place-items:center;padding:20px}
  .modal.alerta{width:min(400px,100%)!important;border-radius:var(--r-ventana);animation:aparecer .2s ease}
  .modal.alerta .agarradera{display:none}
}
@media (max-width:360px){.modal.alerta .modal-pie{grid-template-columns:1fr}}

/* Sin internet: lo anotado queda en el equipo y sube solo. Abajo al centro, sin tapar la planilla */
.franja-red{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:74;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100% - 32px);padding:10px 16px;border-radius:16px;background:var(--papel);
  box-shadow:0 14px 34px -10px rgba(14,26,54,.35),0 0 0 1px var(--linea);font-size:15px;color:var(--tinta);animation:aparecer .2s ease}
.franja-red > .ic{color:var(--agua);flex:none}
.franja-red.sin-red{background:#FFF6DD;box-shadow:0 14px 34px -10px rgba(14,26,54,.3),0 0 0 1px #F0D58A}
.franja-red.sin-red > .ic{color:var(--ojo)}
.franja-red .btn-texto{min-height:36px;font-size:15px}
.franja-red .btn-texto.mal{color:var(--malo);font-weight:700}
@media (min-width:900px){.franja-red{left:calc(50% + 124px)}}
@media (max-width:899.98px){.franja-red{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media print{.franja-red{display:none!important}}
.error-subir{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--linea)}
.error-subir:last-child{border-bottom:none}
.error-subir span{display:block;color:var(--malo);font-size:15px;margin-top:2px}
/* Un renglón anotado sin internet que todavía no sube */
.marca-subir{display:inline-block;margin:0 4px 2px 0;padding:2px 6px;border-radius:5px;background:#FFE7B8;color:#7A4F00;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.marca-subir.mal{background:#FBE0DD;color:var(--malo)}
table.planilla tr.por-subir td{background:#FFFBEF}
@media print{.marca-subir{display:none}}

/* Hay una versión nueva: arriba al centro del contenido. Nunca recarga sola: la persona decide */
.version-nueva{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:75;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100% - 32px);padding:8px 8px 8px 16px;border-radius:16px;background:var(--papel);
  box-shadow:0 14px 34px -10px rgba(14,26,54,.35),0 0 0 1px var(--linea);font-size:15px;font-weight:600;color:var(--tinta);
  animation:aparecer .2s ease}
.version-nueva > .ic{color:var(--agua)}
.version-nueva .btn{min-height:40px;padding:0 16px}
.version-nueva .btn-texto{min-height:40px;font-size:15px}
@media (min-width:900px){.version-nueva{left:calc(50% + 124px)}}
@media (max-width:899.98px){
  .version-nueva{top:calc(env(safe-area-inset-top) + 60px);flex-wrap:wrap;justify-content:center;text-align:center}
}
@media print{.version-nueva{display:none!important}}

/* mensajito de abajo */
.avisito{position:fixed;left:50%;bottom:28px;z-index:80;transform:translateX(-50%);max-width:calc(100% - 32px);
  padding:14px 22px;border-radius:99px;background:rgba(14,26,54,.92);color:#fff;font-size:15px;font-weight:600;text-align:center;
  box-shadow:0 14px 34px -10px rgba(14,26,54,.5);animation:aparecer .2s ease}
.avisito.malo{background:var(--malo)}
@media (max-width:899.98px){.avisito{bottom:calc(84px + env(safe-area-inset-bottom));border-radius:18px}}

/* ============================================================
   IMPRIMIR — limpio en blanco y negro
   ============================================================ */
@media print{
  body{background:#fff}
  .app{display:block}
  .lateral,.barra,.menu-abajo,.avisito,.volver-link,.heroe,.franja,.hoja-cab .der,.cierre,
  .cabecera-der,.btn,.btn-mini{display:none!important}
  .logo-impreso{display:block!important;height:64px;width:auto}
  .cabecera{align-items:center;justify-content:flex-start}
  .pantalla{padding:0;max-width:none}
  .hoja{box-shadow:none;border:1px solid #000;border-radius:0}
  .hoja-cab .aro{background:none;padding:0}
  table.planilla{min-width:0;font-size:11px}
  table.planilla th,table.planilla td{height:26px;border-color:#999}
  table.planilla .col-hora{position:static;box-shadow:none;border-right:1px solid #999}
  table.planilla tfoot td{border-top:2px solid #000}
  .liquidacion .r.fuerte{background:none;color:#000}
  .liquidacion .r.fuerte span{color:#000}
  .liquidacion .r{border-color:#999}
  .caja{box-shadow:none;border:1px solid #999;break-inside:avoid}
}

/* ---------- Surtido: a quién se le entregó cada cargue ---------- */
.ent-sugs{margin:0 0 12px}
.ent-pista{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:14px;color:var(--apagado)}
.ent-botones{display:flex;flex-wrap:wrap;gap:8px}
.ent-sug{min-height:44px;padding:0 16px;border:1.5px solid var(--agua);border-radius:99px;background:var(--papel);
  color:var(--azul);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.ent-sug.nuevo{border-style:dashed}
.ent-lista{display:flex;flex-direction:column}
.ent-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--linea)}
.ent-fila .crece{flex:1;min-width:160px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:16px}
.ent-num{color:var(--apagado);font-variant-numeric:tabular-nums}
.btn-icono{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;
  background:var(--boton-2);color:var(--tinta-2);cursor:pointer}
.btn-icono.armado,.btn-mini.armado{width:auto;padding:0 12px;background:var(--malo);color:#fff}
.ent-agregar{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ent-en-modal{margin-top:14px;border:1px solid var(--linea);box-shadow:none}
/* en la planilla: debajo de cada cargue, en letra chica; se queda a la vista al deslizar la tabla */
table.planilla tr.sub-entregas td{padding:4px 12px 10px;border-top:0;background:var(--papel);text-align:left}
.ent-renglon{position:sticky;left:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  max-width:calc(100vw - 64px);font-size:13px;color:var(--tinta-2)}
.ent-chico{padding:2px 8px;border-radius:8px;background:var(--papel-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ent-falta{font-weight:700;color:var(--malo)}
/* panel del vendedor y el botón de llamar */
.panel-vend{margin-bottom:14px}
/* en el celular el nombre del cliente va arriba y los botones debajo: así no se apretuja */
@media (max-width:560px){
  .panel-vend .reng{flex-wrap:wrap}
  .panel-vend .reng > .crece{flex-basis:100%}
  .panel-vend .reng > .btn-texto{margin-right:auto}
}
.btn.llamar{min-height:44px;border-color:var(--bien);background:var(--bien);color:#fff;text-decoration:none}
/* pestañas de Clientes */
.pestanas{display:flex;gap:6px;width:fit-content;max-width:100%;margin:0 0 16px;padding:4px;border-radius:14px;background:var(--boton-2)}
.pestanas button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:11px;
  background:transparent;color:var(--tinta-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pestanas button.activa{background:var(--papel);color:var(--azul);box-shadow:0 1px 3px rgba(14,26,54,.12)}
/* el nombre del vendedor va más pequeño que la cifra grande de "Clientes": son siete y la lista va debajo */
.pie-boton{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;padding-left:0;padding-right:0}
.pie-boton:disabled{cursor:default}
.segmentado.mini label span{padding:6px 10px;font-size:14px}
.numerito.entregas ul{margin:6px 0 0;padding-left:18px;font-size:15px;text-align:left}
.cifra.rojo{color:var(--malo)}
@media print{
  .ent-renglon button{display:none}
  .ent-chico{border:1px solid #999;background:none!important;color:#000!important}
}

/* ---------- Informes: el archivo de planillas cerradas ---------- */

/* ============================================================
   LA PLANILLA CON EL FORMATO DEL CLIENTE (2026-10-19)
   Columnas como el papel: HORA DE PEDIDO, los productos D y C, HORA DE DESPACHO, VACÍOS,
   HORA INGRESO VACÍOS y RECIBIDO. Abajo TOTAL PRODUCTO y TOTAL VENTA, y al lado la caja de
   totales con los gastos. Al imprimir sale igual al Excel que mandó el cliente.
   ============================================================ */
table.planilla{min-width:0}
table.planilla thead tr.grupo th{text-transform:uppercase;font-size:12px;letter-spacing:.02em;line-height:1.2}
table.planilla thead th.fijo{min-width:64px;padding:4px 4px}
table.planilla th,table.planilla td{padding:0 3px}
table.planilla thead tr.dc th{min-width:34px}
table.planilla .col-hora{min-width:118px;max-width:158px;white-space:normal}
table.planilla td.col-hora .para{display:block;max-width:150px;white-space:normal;line-height:1.3;color:var(--tinta-2)}
/* Los botones de la hoja pasan a dos renglones si hace falta: así caben VACÍOS y RECIBIDO */
table.planilla .btn-mini{white-space:normal;line-height:1.15;padding:5px 9px;max-width:100px}
table.planilla .sello{white-space:nowrap}
table.planilla .verifico{white-space:normal;max-width:96px;margin:2px auto 0}
.solo-impresion,tr.solo-impresion,.totales-hoja.solo-impresion{display:none}
table.planilla td.col-hora .ent-falta{display:block;font-size:12px}
table.planilla td.col-hora .btn-mini{margin-top:4px}
table.planilla td.vacios{font-weight:700}
table.planilla td.recibido{font-size:13px;color:var(--tinta-2);white-space:nowrap}
table.planilla tfoot tr.total-producto td.col-hora,table.planilla tfoot tr.total-venta td.col-hora{text-transform:uppercase;font-size:12px}
table.planilla tfoot tr.total-venta td{height:40px;font-size:12px;letter-spacing:-.02em;white-space:nowrap;border-top:1px solid var(--linea)}
tr.en-blanco,.cab-impresa,.firmas-impresas{display:none}

/* Debajo de la hoja, como en el papel: los gastos, la caja de la sala y los totales */
.pie-hoja{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:16px;padding:16px 18px;border-top:1px solid var(--linea)}
.pie-hoja:empty{display:none}
.gastos-hoja{flex:0 1 380px;min-width:260px}
.gastos-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.gastos-cab b{font-size:15px}
.gasto-fila{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--linea-2);font-size:15px}
.gasto-fila span{flex:1;min-width:0}
.gasto-fila .btn-texto{min-height:36px;font-size:14px;color:var(--malo)}
.totales-hoja,.caja-sala{display:grid;grid-template-columns:auto minmax(130px,auto);min-width:260px;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.totales-hoja > div,.caja-sala > div{display:contents}
.totales-hoja span,.caja-sala span{padding:8px 12px;background:var(--pendiente);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--tinta);border-bottom:1px solid var(--linea)}
.totales-hoja b,.caja-sala b{padding:8px 12px;text-align:right;font-size:17px;font-weight:700;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums}
.totales-hoja .credito b{color:var(--credito)}
.totales-hoja .fuerte span,.totales-hoja .fuerte b{border-bottom:0}
.totales-hoja .fuerte b{background:var(--degradado);color:#fff;font-size:19px}
/* Las transferencias, como el papel: a la izquierda de TOTAL D, una casilla por transferencia hacia abajo */
.transferencias-hoja{display:grid;grid-template-columns:150px;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.transferencias-hoja .tr-cab{padding:8px 12px;background:var(--pendiente);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--tinta);border-bottom:1px solid var(--linea)}
.transferencias-hoja > b{min-height:44px;padding:8px 12px;text-align:right;font-size:17px;font-weight:700;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums}
.transferencias-hoja > b[data-quitar-trans]{cursor:pointer}
.transferencias-hoja > b.por-subir{color:var(--apagado)}
.transferencias-hoja .tr-nueva{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;border:0;border-bottom:1px solid var(--linea);background:var(--papel-2);color:var(--azul);cursor:pointer}
.transferencias-hoja .tr-nueva:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(21,145,208,.35)}
.transferencias-hoja .tr-total{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--papel-2);font-variant-numeric:tabular-nums}
.transferencias-hoja .tr-total span{font-size:15px;color:var(--tinta-2);font-weight:600}
.transferencias-hoja .tr-total b{font-size:17px}
.caja-sala .in{min-height:40px;margin:4px 8px;width:auto;text-align:right;font-weight:600}
.caja-sala .falta b{color:var(--malo)}
.caja-sala .btn{grid-column:1 / -1;margin:8px;border-radius:10px}

@media print{
  @page{size:landscape;margin:8mm 6mm}
  .pantalla:has(.hoja) .cabecera,.rejilla-2,#cambios,#panelVendedor,.version-nueva{display:none!important}
  .hoja{border:0!important;break-inside:avoid}
  .hoja-cab,.gastos-hoja,.caja-sala .btn{display:none!important}
  .cab-impresa{display:grid!important;grid-template-columns:150px 1fr auto;align-items:center;gap:14px;margin-bottom:4px;color:#000}
  .cab-impresa img{height:54px;width:auto}
  .cab-impresa-centro{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10pt;text-align:center}
  .cab-impresa-nombre{font-size:30pt;font-weight:800;letter-spacing:.01em;white-space:pre}
  table.planilla{width:100%;border:2px solid #000;font-size:10pt}
  table.planilla th,table.planilla td{border:1px solid #000!important;color:#000!important;background:#fff!important;height:22px;padding:0 3px}
  table.planilla thead th,table.planilla thead tr.dc th,table.planilla thead tr.dc th.c{background:#FFFFCC!important;font-weight:400;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.planilla td.col-hora{font-size:9pt}
  table.planilla td.col-hora .q{font-size:8pt}
  tr.en-blanco,tr.solo-impresion{display:table-row!important}
  .totales-hoja.solo-impresion{display:grid!important}
  .totales-hoja.solo-impresion b{min-height:22px}
  /* Columnas de ancho fijo: la hoja cabe completa en una página horizontal */
  .tabla-envoltura{overflow:visible!important}
  table.planilla{table-layout:fixed}
  table.planilla col.c-hora{width:12%}
  table.planilla col.c-num{width:3.4%}
  table.planilla.de-vendedor col.c-fijo{width:8.8%}
  table.planilla.de-sala col.c-fijo{width:17.6%}
  table.planilla th,table.planilla td{overflow:hidden;word-break:break-word}
  table.planilla thead th.fijo,table.planilla thead tr.dc th,table.planilla .col-hora{min-width:0;max-width:none}
  .cab-impresa-nombre{font-size:22pt}
  /* la plata de cada columna cabe en la casilla angosta */
  table.planilla tfoot tr.total-venta td:not(.col-hora){font-size:7pt;letter-spacing:-.02em;padding:0 1px}
  .marca-prestamo,.marca-pedido,.marca-vacios{white-space:nowrap;font-size:7pt;padding:0 3px}
  .totales-hoja b,.totales-hoja .credito b{color:#000!important}
  tr.sin-cargues{display:none!important}
  table.planilla tfoot td{border-top:1px solid #000!important}
  table.planilla tfoot tr.total-venta td{height:26px}
  .sello{padding:0;background:none!important;color:#000!important;font-weight:400}
  /* Todo en una hoja: el pie no se parte y las dos cajas van lado a lado, con las firmas a la izquierda */
  .pie-hoja{padding:4px 0 0;border:0;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-end;gap:24px;break-inside:avoid}
  .totales-hoja,.caja-sala{border:1px solid #000;border-radius:0;min-width:240px;break-inside:avoid}
  /* Las dos cajas iguales, renglón con renglón, como el papel */
  .totales-hoja,.caja-sala{width:270px;min-width:0;grid-template-columns:128px 1fr;grid-auto-rows:23px}
  .totales-hoja span,.totales-hoja b,.caja-sala span,.caja-sala b{display:flex;align-items:center;min-height:0!important}
  .totales-hoja b,.caja-sala b{justify-content:flex-end}
  .caja-sala .in{min-height:0;height:100%;width:100%}
  .totales-hoja span,.caja-sala span{background:#FFFFCC!important;border-bottom:1px solid #000;font-weight:400;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .totales-hoja span,.caja-sala span{padding:3px 10px;font-size:9pt}
  .totales-hoja b,.caja-sala b{border-bottom:1px solid #000;font-size:10pt;padding:3px 10px;min-height:22px}
  .sin-dato{color:transparent!important}
  /* Las transferencias pegadas a TOTAL D, renglón con renglón, como el papel (sin título ni botón) */
  .transferencias-hoja.pegada{margin-right:-24px}
  /* Arriba con arriba: cada casilla frente a TOTAL D, TOTAL C…; la suma queda debajo */
  .pie-hoja{align-items:flex-start;padding-top:14px}
  .firmas-impresas{align-self:flex-end}
  .transferencias-hoja{grid-template-columns:110px;grid-auto-rows:23px;border:1px solid #000;border-right:0;border-radius:0}
  .transferencias-hoja .tr-cab{display:none}
  /* Sin fondo: al imprimir, el fondo de una casilla tapaba la raya de la de arriba */
  .transferencias-hoja > b,.transferencias-hoja .tr-nueva{min-height:0;height:23px;padding:3px 8px;font-size:10pt;color:#000!important;
    border:0;border-bottom:1px solid #000!important;background:none!important;display:flex;align-items:center;justify-content:flex-end}
  .transferencias-hoja .tr-nueva svg{display:none}
  .transferencias-hoja .tr-total{padding:3px 8px;font-size:9pt;background:none!important;align-items:center}
  .transferencias-hoja .tr-total span,.transferencias-hoja .tr-total b{font-size:9pt;color:#000}
  /* Cada renglón impreso queda de una línea o dos, como el papel: la hora y para quién iba. Quién lo
     anotó, la dirección y quién verificó se ven en la pantalla */
  table.planilla td{line-height:1.15}
  table.planilla td.col-hora .q:not(.para),table.planilla .verifico{display:none!important}
  table.planilla td.col-hora .q.para{display:block;max-width:none;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
  table.planilla td.col-hora{padding:1px 4px!important}
  table.planilla td.col-hora .h{font-size:8.5pt;line-height:1.1}
  table.planilla td.col-hora .q.para{font-size:7pt}
  table.planilla tbody td{white-space:nowrap;text-overflow:ellipsis}
  table.planilla .sello .ic{display:none}
  /* Las casillas en cero quedan en blanco, como en el papel (en pantalla llevan una raya) */
  table.planilla td.cero{color:transparent!important}
  .totales-hoja .fuerte b{background:none!important;color:#000}
  .caja-sala .in{border:0;border-bottom:1px solid #000;border-radius:0;margin:0;min-height:22px;height:auto;font-size:10pt;padding:3px 10px;background:none;box-shadow:none}
  .firmas-impresas{display:flex!important;gap:36px;margin-right:auto;padding-top:48px}
  .firmas-impresas span{min-width:160px;padding-top:4px;border-top:1px solid #000;font-size:8pt;font-weight:700;text-transform:uppercase;text-align:center}
}

/* ============================================================
   EL BUSCADOR LARGO (Planillas, Clientes y dentro de cada planilla)
   Una sola barra blanca, ancha, con todo lo que se busca adentro
   ============================================================ */
.buscador-largo{display:flex;align-items:center;gap:10px;min-height:58px;margin-bottom:14px;padding:8px 10px 8px 20px;
  background:var(--papel);border-radius:20px;box-shadow:var(--sombra)}
.buscador-largo > .ic{flex:none;width:23px;height:23px;color:var(--agua)}
.buscador-largo .bl-texto{flex:1;min-width:0;min-height:48px;padding:0 4px;border:0;background:none;font-size:18px;color:var(--tinta);outline:none}
.buscador-largo .bl-texto::placeholder{color:var(--apagado)}
.buscador-largo .bl-titulo{flex:1;min-width:0;font-size:18px;font-weight:700;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buscador-largo .bl-titulo em{font-style:normal;color:var(--agua)}
.buscador-largo .bl-campo{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:14px;
  background:var(--papel-2);color:var(--azul);font-weight:600;font-size:16px;cursor:pointer}
.buscador-largo .bl-campo.crece{flex:1;min-width:0}
.buscador-largo .bl-campo .ic{flex:none;width:19px;height:19px;color:var(--agua)}
.buscador-largo .bl-campo input,.buscador-largo .bl-campo select{min-width:0;width:100%;min-height:46px;padding:0;border:0;background:none;
  font:inherit;color:inherit;outline:none;cursor:pointer}
.buscador-largo .bl-turnos{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--papel-2)}
.buscador-largo .bl-turnos button{min-height:40px;padding:0 16px;border:0;border-radius:11px;background:none;font:inherit;font-size:15px;
  font-weight:600;color:var(--tinta-2);cursor:pointer}
.buscador-largo .bl-turnos button.activo{background:var(--papel);color:var(--azul);box-shadow:0 1px 3px rgba(14,26,54,.14)}
.buscador-largo .btn-texto{flex:none;min-height:44px;padding:0 12px}
.buscador-largo .chip{flex:none}
.buscador-largo.en-planilla{margin-bottom:14px}
@media (max-width:899.98px){
  .buscador-largo{flex-wrap:wrap;padding:12px}
  .buscador-largo:has(.bl-campo) > .ic{display:none}
  .buscador-largo .bl-titulo{flex:1 1 calc(100% - 40px);font-size:17px}
  .buscador-largo .bl-campo{flex:1 1 100%}
  .buscador-largo .bl-turnos{flex:1 1 100%}
  .buscador-largo .bl-turnos button{flex:1}
}

/* Cuando no hay nada: un icono grande en un círculo y una frase */
.vacio-grande{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 20px;text-align:center}
.vacio-grande > .ic{width:58px;height:58px;padding:15px;border-radius:50%;background:var(--agua-suave);color:var(--agua);box-sizing:border-box}
.vacio-grande b{font-size:17px;font-weight:600;color:var(--tinta-2)}

/* ============================================================
   EL APARTADO "PLANILLAS": tarjetas por día
   ============================================================ */
.pl-dia{margin-bottom:22px}
.pl-dia-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 12px}
.pl-dia-cab h2{font-size:18px;font-weight:700;color:var(--tinta)}
.pl-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pl-tarjeta{display:flex;flex-direction:column;gap:12px;padding:16px;border:2px solid transparent;border-radius:var(--r-tarjeta);
  background:var(--papel);box-shadow:var(--sombra);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
.pl-tarjeta:hover{border-color:var(--agua-suave)}
.pl-tarjeta:active{transform:scale(.99)}
.pl-arriba{display:flex;align-items:center;gap:12px}
.pl-tarjeta .aro{flex:none;width:52px;height:52px;padding:2px;border-radius:50%;background:linear-gradient(135deg,var(--agua-2),var(--azul))}
.pl-tarjeta .aro img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--papel);background:var(--papel-2)}
.pl-tarjeta.de-sala .aro{background:var(--degradado)}
.pl-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-quien b{font-size:18px;font-weight:700;line-height:1.2}
.pl-quien b em{font-style:normal;color:var(--agua)}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pl-chips .chip{font-size:13px;padding:3px 10px}
.pl-cifras{display:flex;flex-direction:column;border-top:1px solid var(--linea-2)}
.pl-cifras > span{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea-2);font-size:15px;color:var(--tinta-2)}
.pl-cifras b{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.pl-pie{font-size:13px;color:var(--apagado)}

/* ============================================================
   CLIENTES: recuadros con la foto de cada vendedor y filas más claras
   ============================================================ */
.vend-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-bottom:16px}
.vtile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:2px;
  min-height:84px;padding:14px;border:2px solid transparent;border-radius:18px;background:var(--papel);box-shadow:var(--sombra);
  text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
.vtile:active{transform:scale(.98)}
.vtile.activo{border-color:var(--azul);background:linear-gradient(180deg,#F3F7FF 0%,var(--papel) 100%)}
.vtile .aro,.vtile .vtile-icono{grid-row:1 / 3;width:52px;height:52px;border-radius:50%}
.vtile .aro{padding:2px;background:linear-gradient(135deg,var(--agua-2),var(--azul))}
.vtile .aro img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--papel);background:var(--papel-2)}
.vtile .vtile-icono{display:grid;place-items:center;background:var(--agua-suave);color:var(--azul)}
.vtile .vtile-icono .ic{width:24px;height:24px}
.vtile.ojo .vtile-icono{background:var(--ojo-suave);color:var(--ojo)}
.vtile-nombre{font-size:16px;font-weight:700;color:var(--tinta);line-height:1.2;overflow-wrap:anywhere}
.vtile-nombre em{font-style:normal;font-weight:800;color:var(--agua)}
.vtile-n{font-size:26px;font-weight:800;line-height:1.05;color:var(--azul);font-variant-numeric:tabular-nums}
.vtile.ojo .vtile-n{color:var(--ojo)}
.vtile-stats{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--apagado)}
.vtile-stats span{padding:2px 8px;border-radius:99px;background:var(--papel-2);white-space:nowrap}
/* En Surtido: la foto y el nombre arriba, las tres cifras de lado a lado abajo */
.vtile-surtido{row-gap:10px}
.vtile-surtido .aro{grid-row:1}
.vtile-surtido .vtile-stats{grid-column:1 / -1}
.vtile-stats b{color:var(--tinta);font-variant-numeric:tabular-nums}
.vtile-stats .ojo{background:var(--ojo-suave);color:var(--ojo)}
.vtile-stats .ojo b{color:var(--ojo)}
.vtile-stats .malo{background:var(--malo-suave);color:var(--malo)}
.vtile-stats .malo b{color:var(--malo)}
@media (max-width:899.98px){
  .vend-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vtile{padding:12px}
  .vtile .aro,.vtile .vtile-icono{width:44px;height:44px}
}

.lista-clientes{padding:6px 10px}
.cli-fila{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;padding:10px;border:0;border-bottom:1px solid var(--linea-2);
  border-radius:14px;background:none;text-align:left;font:inherit;color:inherit}
.cli-fila:last-child{border-bottom:0}
button.cli-fila,.cli-abrir{cursor:pointer}
button.cli-fila:hover,.cli-fila:has(.cli-abrir:hover){background:var(--papel-2)}
.cli-abrir{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.cli-avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--agua-suave);color:var(--azul);
  font-size:16px;font-weight:800;letter-spacing:.02em}
.cli-avatar .ic{width:21px;height:21px}
.cli-centro{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cli-centro b{font-size:17px;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-centro > span{font-size:14px;color:var(--apagado);overflow:hidden;text-overflow:ellipsis}
.vend-chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:99px;background:var(--papel-2);
  font-size:18px;font-weight:700;color:var(--tinta);white-space:nowrap}
.vend-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--papel)}
.vend-chip em{font-style:normal;font-weight:800;color:var(--agua)}
/* En el celular: el cliente arriba, a lo ancho; de quién es, debajo */
@media (max-width:899.98px){
  .lista-clientes{padding:4px 6px}
  .cli-fila{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:12px;row-gap:8px;padding:12px 6px}
  .cli-fila > .cli-abrir{grid-column:1 / -1}
  .cli-fila > .vend-chip,.cli-fila > .chip,.cli-fila > .btn-texto{grid-column:2;justify-self:start}
  .vend-chip{font-size:16px}
  .cli-centro > span{white-space:normal}
}

/* Seis opciones en la barra de abajo del celular: la letra un poco más pequeña para que quepan */
.menu-abajo.muchos button{font-size:11px}

/* ============================================================
   SIN LOS RECUADROS NEGROS: las listas desplegables y las fechas de los buscadores y las pastillas
   llevan dibujo propio; el navegador (Opera, Chrome) les pintaba un borde negro al tocarlas
   ============================================================ */
.pastilla select,.buscador-largo select{appearance:none;-webkit-appearance:none;padding-right:28px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2F8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center/16px}
.pastilla select,.pastilla input,.buscador-largo select,.buscador-largo input{border:0!important;box-shadow:none!important}
.pastilla select:focus,.pastilla input:focus,.buscador-largo select:focus,.buscador-largo input:focus,
.pastilla select:focus-visible,.pastilla input:focus-visible,.buscador-largo select:focus-visible,.buscador-largo input:focus-visible{outline:none!important}
/* En su lugar, un anillo suave alrededor de todo el campo */
.pastilla:focus-within,.buscador-largo .bl-campo:focus-within{box-shadow:var(--sombra),0 0 0 3px rgba(21,145,208,.28)}
.buscador-largo:has(.bl-texto:focus){box-shadow:var(--sombra),0 0 0 3px rgba(21,145,208,.22)}

/* ============================================================
   LOS LOTES DEL DESPACHADOR: uno por producto, puesto una vez; cada cargue sale con ese
   ============================================================ */
.sacar-cliente{font-weight:700;color:var(--tinta)}
.lotes-caja{margin-bottom:16px}
.lotes-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.lote-fila{display:grid;grid-template-columns:1fr auto;grid-template-areas:"prod accion" "valor accion" "desde accion";
  align-items:center;column-gap:12px;row-gap:2px;min-height:84px;padding:12px 14px;border:2px solid var(--linea);
  border-radius:16px;background:var(--papel);text-align:left;font:inherit;color:inherit;cursor:pointer}
.lote-fila:active{transform:scale(.99)}
.lote-prod{grid-area:prod;font-size:15px;font-weight:600;color:var(--tinta-2)}
.lote-valor{grid-area:valor;font-size:24px;font-weight:800;line-height:1.1;letter-spacing:.02em;color:var(--azul);overflow-wrap:anywhere}
.lote-desde{grid-area:desde;font-size:13px;color:var(--apagado)}
.lote-accion{grid-area:accion;padding:8px 14px;border-radius:12px;background:var(--boton-2);font-weight:700;color:var(--azul)}
/* Sin lote: en rojo. Puesto otro día: lo de "Desde el…" en ámbar, por si ya se acabó */
.lote-fila.falta{border-color:var(--malo);background:var(--malo-suave)}
.lote-fila.falta .lote-valor{color:var(--malo)}
.lote-fila.falta .lote-accion{background:var(--malo);color:#fff}
.lote-fila.viejo{border-color:var(--ojo-suave)}
.lote-fila.viejo .lote-desde{color:var(--ojo);font-weight:700}
.lote-ahora{margin-bottom:12px;font-size:16px;color:var(--tinta-2)}
.lote-ahora b{font-size:22px;color:var(--azul)}
.lote-in{font-size:22px!important;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.pedido-linea .nom .lote-sale{display:inline;margin-left:4px;font-size:16px;color:var(--azul);font-weight:800;letter-spacing:.02em}
.falta-lote{min-height:34px;padding:0;color:var(--malo)!important;font-weight:700}
@media (max-width:899.98px){
  .lotes-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lote-fila{grid-template-columns:1fr;grid-template-areas:"prod" "valor" "desde";min-height:78px;padding:10px 12px}
  .lote-accion{display:none}
  .lote-valor{font-size:21px}
}

/* ============================================================
   LA TRAZABILIDAD (FOR-NAP-CL-09): igual al Excel, en pantalla y al imprimir
   ============================================================ */
.traz-hojas{display:flex;flex-direction:column;gap:20px;overflow-x:auto;padding-bottom:6px}
.traz-hoja{min-width:980px;padding:24px;background:#fff;border-radius:var(--r-tarjeta);box-shadow:var(--sombra);color:#000}
table.traz{width:100%;border-collapse:collapse;table-layout:fixed;border:2px solid #000;font-size:13px;color:#000;
  font-family:Calibri,Carlito,-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,system-ui,sans-serif}
table.traz col.t-n{width:3.2%}
table.traz col.t-cant{width:6.3%}
table.traz col.t-prod{width:8.15%}
table.traz col.t-cliente{width:16.4%}
table.traz col.t-dir{width:13.5%}
table.traz col.t-tel{width:11.7%}
table.traz td,table.traz th{height:24px;padding:2px 5px;border:1px solid #000;vertical-align:middle;overflow:hidden;overflow-wrap:anywhere}
.traz-logo{text-align:center}
.traz-logo img{display:block;max-height:78px;max-width:100%;margin:0 auto}
.traz-empresa{text-align:center;font-size:20px;color:#2F75B5}
.traz-titulo{text-align:center;font-size:20px;font-weight:700}
.traz-dato{text-align:center;font-size:14px;font-weight:700}
.traz-version{text-align:center;font-size:14px;font-weight:700}
.traz-fv td{height:28px;font-size:14px;border-top:2px solid #000}
.traz-th th{height:44px;background:#DDEBF7;font-size:14px;font-weight:700;text-align:center;border-top:2px solid #000;border-bottom:2px solid #000;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.traz-n{font-size:11px;vertical-align:top!important;text-align:left}
.traz-et{font-size:11px}
.traz-et-lote{font-size:14px;font-weight:700;text-align:center}
.traz-num{text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.traz-cliente{font-size:13px;line-height:1.25}
.traz-tel{font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.traz-firma{margin-top:16px;font-size:12px}
.traz-firma span{display:inline-block;width:240px;margin-left:4px;border-bottom:1px solid #000}

@media print{
  /* La planilla impresa es SOLO la hoja: ni el buscador, ni los avisos, ni nada más de la app */
  .pantalla:has(.hoja) .columna > :not(.hoja){display:none!important}
  /* La trazabilidad impresa: cada hoja en su página, sin nada de la app */
  .pantalla:has(.traz-hojas) .cabecera,.pantalla:has(.traz-hojas) .volver-link{display:none!important}
  .traz-hojas{display:block;overflow:visible;padding:0}
  .traz-hoja{min-width:0;padding:0;box-shadow:none;border-radius:0;break-after:page;break-inside:avoid}
  .traz-hoja:last-child{break-after:auto}
  table.traz td,table.traz th{height:22px}
}

/* Mi perfil: los contactos de Google */
.google-estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.google-estado > div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--papel-2)}
.google-estado span{font-size:13px;color:var(--apagado);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.google-estado b{font-size:17px;color:var(--tinta);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* La fecha y "Ver todas" dentro del recuadro de la planilla (otro día de la misma persona) */
.hoja-otro-dia{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.hoja-otro-dia .bl-campo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--papel-2)}
.hoja-otro-dia .bl-campo .ic{width:18px;height:18px;color:var(--agua)}
.hoja-otro-dia input{min-height:42px;border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--azul);font-variant-numeric:tabular-nums}
.hoja-otro-dia .btn-texto{min-height:44px;padding:0 10px}
@media print{.hoja-otro-dia{display:none!important}}
.hoja-otro-dia input{appearance:none;-webkit-appearance:none;outline:none}
.hoja-otro-dia .bl-campo:focus-within{box-shadow:0 0 0 3px rgba(21,145,208,.22)}

/* El traslado a la sala, como el papel del despachador */
.traslado-cab{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--linea)}
.traslado-cab > div{display:flex;align-items:center;gap:10px}
.traslado-cab span{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--apagado)}
.traslado-cab b{font-size:18px}
table.traslado{min-width:900px}
table.traslado thead th{background:var(--pendiente);white-space:nowrap}
table.traslado td{height:44px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
table.traslado td + td{border-left:1px solid var(--linea-2)}
table.traslado tfoot td{font-weight:800;background:var(--papel-2)}
.tr-mas,.tr-valor{width:100%;min-height:42px;border:0;background:none;font:inherit;cursor:pointer;border-radius:8px}
.tr-mas{color:var(--azul);background:var(--papel-2)}
.tr-valor:hover{background:rgba(194,59,50,.06)}
.fecha-traslado{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--papel);box-shadow:var(--sombra)}
.fecha-traslado .ic{width:18px;height:18px;color:var(--agua)}
.fecha-traslado input{appearance:none;-webkit-appearance:none;border:0;background:none;outline:none;font:inherit;font-size:16px;font-weight:600;color:var(--azul)}
.tabla-comparar{width:100%;border-collapse:collapse;font-size:16px}
.tabla-comparar th,.tabla-comparar td{padding:10px 12px;border-bottom:1px solid var(--linea-2);text-align:left}
.tabla-comparar td:nth-child(2),.tabla-comparar td:nth-child(3){font-variant-numeric:tabular-nums;font-weight:700}
.tras-impreso{display:none}
@media print{
  /* El traslado, igual al papel del despachador */
  .traslado-hoja{border:0!important}
  .traslado-cab,table.traslado tfoot,.pantalla:has(.traslado-hoja) .cabecera,.pantalla:has(.traslado-hoja) .caja{display:none!important}
  .tras-impreso{display:grid!important;grid-template-columns:230px 1fr 130px;align-items:end;gap:14px;margin-bottom:6px;color:#000}
  .tras-izq{display:flex;flex-direction:column;gap:8px;font-size:10pt}
  .tras-lote{display:flex;align-items:center;gap:10px;min-height:30px;padding:2px 8px;border:1px solid #000}
  .tras-lote span{font-weight:700}
  .tras-centro{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5pt;text-align:center}
  .tras-centro b{font-size:10.5pt}
  .tras-impreso img{height:56px;width:auto;justify-self:end}
  table.traslado{min-width:0!important;width:100%;table-layout:fixed;border:2px solid #000}
  table.traslado thead th{background:#fff!important;font-weight:700;font-size:8.5pt;height:24px;white-space:normal}
  table.traslado td{height:21px!important;padding:0!important;font-size:10pt}
  table.traslado td + td{border-left:1px solid #000!important}
  .tr-mas,.tr-valor{min-height:0;height:100%;background:none!important;color:#000!important;font-size:10pt}
  .tr-mas svg{display:none}
}