:root{
  --fondo:#0b0f14; --panel:#141a22; --panel2:#1b232d; --linea:#232d3a;
  --texto:#eef3f8; --suave:#8b9bad; --tenue:#5d6b7c;
  --acento:#3ddc84; --acento-tenue:#1d3a2a;
  --ok:#3ddc84; --bajo:#f5b544; --critico:#ff5c5c;
  /* La tinta que va ENCIMA del acento. Separada a proposito: en modo claro el
     acento se oscurece y el fondo se aclara, y usar var(--fondo) como tinta
     daba casi blanco sobre verde claro. */
  --sobre-acento:#06210f;
  --radio:16px;
  --arriba:env(safe-area-inset-top); --abajo:env(safe-area-inset-bottom);

}
@media (prefers-color-scheme: light){
  :root{
    --fondo:#f2f5f8; --panel:#fff; --panel2:#f7f9fb; --linea:#e3e9ef;
    --texto:#0e1720; --suave:#4a5765; --tenue:#5d6b7c; --acento-tenue:#e2f7ec;

    /* Los colores de significado, en su version legible sobre claro. Mismo
       significado, distinta luz: verde sigue siendo verde y rojo sigue siendo
       rojo, pero ahora se leen. */
    --acento:#0f7a44; --ok:#0f7a44; --bajo:#8a5a00; --critico:#c0271f;
    --sobre-acento:#ffffff;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior-y:none}
body{
  background:var(--fondo); color:var(--texto);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
.oculto{display:none !important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2{margin:0;font-weight:650;letter-spacing:-.02em}

/* ---------- candado ---------- */
.candado{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:var(--fondo);z-index:60}
.candado-caja{width:100%;max-width:320px;text-align:center}
/* Se sirve a 288 px de alto y se muestra a 96: 3x, para que se vea nitido
   en la pantalla del iPhone. La del encabezado sigue siendo la de 74 px. */
.logo-candado{height:96px;width:auto;display:block;margin:0 auto 4px}
.candado-sub{margin:2px 0 30px;color:var(--suave);font-size:14px}
#form-clave{display:grid;gap:10px}
#clave{
  width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--linea);
  background:var(--panel);color:var(--texto);font-size:17px;text-align:center;
  letter-spacing:.28em;
}
#clave:focus{outline:none;border-color:var(--acento)}
.btn-primario{
  width:100%;padding:15px;border-radius:14px;background:var(--acento);
  /* La tinta va por variable, no fija: asi se invierte con el esquema en vez
     de depender de una regla dentro de un @media que sobreescriba despues.
     Un color fijo contra uno que cambia siempre termina mal. */
  color:var(--sobre-acento);font-weight:680;font-size:16px;
}
.btn-secundario{
  width:100%;padding:14px;border-radius:14px;background:var(--panel);
  border:1px solid var(--linea);color:var(--texto);font-weight:600;margin-top:12px;
}
.btn-secundario.peligro{color:var(--critico)}
.btn-faceid{
  width:100%;padding:15px;border-radius:14px;background:var(--panel);
  border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;
  gap:9px;font-weight:640;color:var(--texto);
}
.faceid-icono{display:flex;color:var(--acento)}
.separador{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--tenue);font-size:13px}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.error{min-height:20px;margin:12px 0 0;color:var(--critico);font-size:14px}

/* ---------- estructura ---------- */
.barra-arriba{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;
  gap:11px;
  padding:calc(var(--arriba) + 12px) 18px 12px;
  background:color-mix(in srgb,var(--fondo) 82%,transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--linea);
}
.logo-barra{height:34px;width:auto;display:block;flex:0 0 auto}
.barra-arriba h1{font-size:22px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.semaforo{padding:8px;margin:-8px;display:flex;align-items:center;gap:6px}
.semaforo-txt{font-size:12.5px;font-weight:620;color:var(--suave);
  letter-spacing:-.01em}
.punto{display:block;width:13px;height:13px;border-radius:50%;background:var(--tenue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tenue) 22%,transparent)}
.punto.verde{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.punto.amarillo{background:var(--bajo);box-shadow:0 0 0 4px color-mix(in srgb,var(--bajo) 22%,transparent)}
.punto.rojo{background:var(--critico);box-shadow:0 0 0 4px color-mix(in srgb,var(--critico) 24%,transparent);
  animation:latido 1.8s ease-in-out infinite}
@keyframes latido{50%{opacity:.45}}

#contenido{padding:0 16px calc(var(--abajo) + 84px)}
.titulo-seccion{font-size:14px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.06em;margin:26px 0 10px;font-weight:640}

.aviso-ejemplo{
  margin:14px 0 4px;padding:9px 13px;border-radius:11px;font-size:13px;
  background:color-mix(in srgb,var(--bajo) 15%,transparent);
  color:var(--bajo);border:1px solid color-mix(in srgb,var(--bajo) 32%,transparent);
}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px;margin-top:12px}
.principal .etiqueta{color:var(--suave);font-size:14px}
.cifra-grande{font-size:42px;font-weight:730;letter-spacing:-.035em;margin:4px 0 14px;
  font-variant-numeric:tabular-nums}
.fila-sub{display:flex;gap:14px}
.fila-sub>div{flex:1;background:var(--panel2);border-radius:12px;padding:11px 13px}
.fila-sub b{display:block;font-size:17px;font-variant-numeric:tabular-nums;margin-top:2px}
.mini{font-size:12.5px;color:var(--suave)}
.centro{text-align:center}
.delta{margin-top:12px;font-size:14px;font-weight:600}
.delta.sube{color:var(--ok)} .delta.baja{color:var(--critico)}
.avance{height:7px;border-radius:99px;background:var(--panel2);margin-top:14px;overflow:hidden}
.avance-relleno{height:100%;background:var(--acento);border-radius:99px;
  transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- plazas ---------- */
.plaza{background:var(--panel);border:1px solid var(--linea);border-radius:14px;
  padding:14px 16px;margin-bottom:9px}
.plaza-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plaza-top b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.barra{height:6px;border-radius:99px;background:var(--panel2);margin-top:10px;overflow:hidden}
.barra span{display:block;height:100%;border-radius:99px;background:var(--acento)}

/* ---------- listas ---------- */
.lista{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden}
.reng{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--linea)}
.reng:last-child{border-bottom:0}
.reng .nom{flex:1;min-width:0}
.reng .nom b{display:block;font-weight:560;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reng .val{font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap}
.pastilla{font-size:12px;font-weight:640;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pastilla.ok{background:color-mix(in srgb,var(--ok) 17%,transparent);color:var(--ok)}
.pastilla.bajo{background:color-mix(in srgb,var(--bajo) 17%,transparent);color:var(--bajo)}
.pastilla.critico{background:color-mix(in srgb,var(--critico) 17%,transparent);color:var(--critico)}
.reng.parcial .val{color:var(--suave)}

/* ---------- segmentado ---------- */
.segmentado{display:flex;gap:4px;background:var(--panel2);border-radius:12px;
  padding:4px;margin:14px 0 14px}
.segmentado button{flex:1;padding:9px 6px;border-radius:9px;font-size:14px;
  font-weight:600;color:var(--suave);transition:.18s}
.segmentado button.activo{background:var(--panel);color:var(--texto);
  box-shadow:0 1px 3px rgba(0,0,0,.28)}

/* ---------- vacío ---------- */
.vacio{padding:70px 20px;text-align:center;color:var(--suave)}
.vacio h2{font-size:24px;color:var(--texto);margin-bottom:10px}

/* ---------- barra abajo ---------- */
.barra-abajo{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  padding:8px 6px calc(var(--abajo) + 8px);
  background:color-mix(in srgb,var(--fondo) 86%,transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--linea);
}
/* Cinco pestañas en el mismo ancho: el ícono y el texto bajan un punto, pero
   el alto de toque no — sigue arriba de los 44 px que pide Apple. */
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 1px;color:var(--tenue);font-size:9.5px;font-weight:600;
  letter-spacing:-.01em;min-height:46px;justify-content:center}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab svg{width:21px;height:21px;flex:0 0 auto}
.tab.activo{color:var(--acento)}

/* ---------- hoja ---------- */
.hoja-fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;
  backdrop-filter:blur(2px)}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--panel);
  border-radius:22px 22px 0 0;padding:10px 20px calc(var(--abajo) + 20px);
  border-top:1px solid var(--linea);animation:sube .28s cubic-bezier(.2,.9,.25,1)}
@keyframes sube{from{transform:translateY(100%)}}
.hoja-asa{width:38px;height:4px;border-radius:99px;background:var(--linea);
  margin:0 auto 16px}
.hoja h2{font-size:20px;margin-bottom:14px}
.hoja .nota{margin:16px 0 18px;line-height:1.5}
.dato{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:15px}
.dato:last-of-type{border-bottom:0}
.dato span{color:var(--suave)}
.falta{background:var(--panel2);border-radius:12px;padding:12px 14px;margin-top:10px}
.falta b{display:block;font-size:15px;font-weight:600}

/* ---------- selector de usuario ---------- */
/* ---------- quien entra ----------
   Era una fila de botones, uno por persona. Con ocho ya no cabían y se
   cortaban. Un desplegable de un renglón cabe siempre. */
.campo-usuario{position:relative;display:block;margin:0 0 18px;
  background:var(--panel);border:1px solid var(--linea);border-radius:13px;
  padding:9px 14px 10px}
.campo-usuario .mini{display:block;margin-bottom:1px}
.campo-usuario select{
  -webkit-appearance:none;appearance:none;width:100%;border:0;background:none;
  color:var(--texto);font:inherit;font-size:17px;font-weight:640;
  padding:0 26px 0 0;margin:0;line-height:1.35}
.campo-usuario select:focus{outline:none}
.campo-usuario:focus-within{border-color:var(--acento)}
/* La flecha no la pinta el select: en iOS y en Android cada uno dibuja la
   suya y ninguna respeta la paleta. */
.campo-flecha{position:absolute;right:13px;top:50%;margin-top:-4px;
  color:var(--suave);pointer-events:none}

/* ---------- sesiones ---------- */
.nombre-usuario{font-size:26px;font-weight:700;text-transform:capitalize;
  letter-spacing:-.02em;margin-top:2px}
.ses{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--linea)}
.ses:last-child{border-bottom:0}
.ses .info{flex:1;min-width:0}
.ses .info b{display:block;font-weight:600;font-size:15px}
.ses .info .mini{margin-top:2px}
.chip-actual{font-size:11px;font-weight:700;color:var(--acento);
  background:var(--acento-tenue);padding:2px 8px;border-radius:99px;
  margin-left:6px;vertical-align:middle}
.cerrar-ses{padding:8px 13px;border-radius:10px;border:1px solid var(--linea);
  color:var(--critico);font-size:13.5px;font-weight:640;background:var(--panel2);
  white-space:nowrap}

/* ---------- refresco al deslizar ---------- */
/* El indicador vive fuera del contenido y por debajo de la barra de arriba, en
   las cuatro pestanas. No se mueve solo: lo mueve el dedo. */
.jalon{
  position:fixed;left:0;right:0;
  top:calc(var(--arriba) + 52px);
  z-index:15;display:flex;justify-content:center;
  pointer-events:none;opacity:0;
  transform:translateY(-34px);
}
.jalon.animado{transition:transform .28s cubic-bezier(.2,.9,.25,1),opacity .2s}
.jalon-rueda{
  width:34px;height:34px;border-radius:50%;
  background:var(--panel);border:1px solid var(--linea);
  display:grid;place-items:center;color:var(--suave);
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.jalon.listo .jalon-rueda{color:var(--acento);border-color:var(--acento)}
.jalon.listo svg{transform:rotate(180deg);transition:transform .2s}
.jalon svg{transition:transform .2s}
.jalon.girando .jalon-rueda{animation:girar .7s linear infinite}
.jalon.girando svg{opacity:0}
.jalon.girando .jalon-rueda::after{
  content:"";position:absolute;width:17px;height:17px;border-radius:50%;
  border:2.2px solid color-mix(in srgb,var(--acento) 28%,transparent);
  border-top-color:var(--acento);
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- motor háptico ---------- */
/* Fuera de la vista pero PRESENTE. Con display:none no vibra. */
.hap{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;
  pointer-events:none;overflow:hidden;z-index:-1}

/* ---------- interruptor ---------- */
.reng.interruptor{cursor:pointer}
.palanca{position:relative;flex:0 0 auto;width:50px;height:30px}
.palanca input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.palanca i{position:absolute;inset:0;border-radius:99px;background:var(--panel2);
  border:1px solid var(--linea);transition:.2s}
.palanca i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--texto);opacity:.55;transition:.2s}
.palanca input:checked + i{background:var(--acento);border-color:var(--acento)}
.palanca input:checked + i::after{left:23px;background:#fff;opacity:1}

/* ---------- inventario: dos y cuatro datos por renglón ---------- */
.reng-alto{align-items:flex-start;padding:14px 16px}
.dos-datos{text-align:right;flex:0 0 auto;min-width:92px}
.val.grande{font-size:19px;font-weight:680;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.val.chico{font-size:15px;font-weight:620;color:var(--suave);
  font-variant-numeric:tabular-nums;margin-top:1px}
.dos-datos u{text-decoration:none;font-size:11px;font-weight:600;color:var(--tenue);
  margin-left:4px}
.dos-datos .mini{margin-top:3px}
.plazas{display:flex;gap:12px;margin-top:5px;flex-wrap:wrap}
.plazas span{font-size:13px;font-variant-numeric:tabular-nums;color:var(--texto)}
.plazas i{font-style:normal;font-size:10.5px;color:var(--tenue);
  text-transform:uppercase;letter-spacing:.05em;margin-right:4px}

.mini.uso{margin-top:4px;line-height:1.4;max-width:100%}
.pastilla.critico.sin-alta{opacity:.9}
.mini.vendido{color:var(--acento);font-weight:600}

/* ---------- Alba ---------- */
.mov{display:flex;gap:0;margin-top:7px}
.mov div{flex:1;text-align:center}
.mov b{display:block;font-size:14px;font-variant-numeric:tabular-nums;font-weight:620}
.mov i{font-style:normal;font-size:10px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.05em}
.mov .ent b{color:var(--ok)} .mov .sal b{color:var(--critico)}
.pendientes{display:grid;gap:9px}
.pend{background:var(--panel);border:1px solid var(--linea);
  border-left:3px solid var(--bajo);border-radius:12px;padding:13px 15px}
.pend b{display:block;font-size:15px;font-weight:620;margin-bottom:3px}

/* ---------- deslizar entre pestañas ---------- */
/* clip y no hidden: hidden obligaría a overflow-y auto y convertiría esto en
   un contenedor con desplazamiento propio, que rompe el jalón de refresco. */
#contenido{position:relative;overflow-x:clip}
.vista.entrando{position:absolute;top:0;left:0;right:0}
.vista.animando{transition:transform .22s cubic-bezier(.2,.85,.25,1)}

/* ---------- cuentas por cobrar ---------- */
.cxc-boton{width:100%;text-align:left;background:none;font:inherit;color:inherit}
.cxc-boton .flecha{color:var(--tenue);font-size:19px;margin-left:2px}
.cxc-cifras{display:flex;gap:14px;margin-top:8px}
.cxc-cifras div{flex:1;background:var(--panel2);border-radius:11px;padding:10px 12px}
.cxc-cifras b{display:block;font-size:17px;font-variant-numeric:tabular-nums;margin-top:2px}
.cxc-cifras .venc b{color:var(--critico)}

/* ---------- histórico contra año anterior ---------- */
.anio{display:flex;gap:14px;margin-top:6px;align-items:baseline}
.anio span{font-size:12.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.yoy{font-size:13px;font-weight:660;font-variant-numeric:tabular-nums;white-space:nowrap}
.yoy.sube{color:var(--ok)} .yoy.baja{color:var(--critico)}
.marca-parcial{font-size:10.5px;font-weight:650;color:var(--bajo);
  background:color-mix(in srgb,var(--bajo) 16%,transparent);
  padding:2px 7px;border-radius:99px;margin-left:6px}
.val.chico.vencido-chico{color:var(--critico)}

/* ---------- cartera: árbol de tres niveles ---------- */
.avance-relleno.rojo{background:var(--critico)}
.fila-sub .venc b{color:var(--critico)}
.arbol{display:grid;gap:9px}
.arbol details{background:var(--panel);border:1px solid var(--linea);
  border-radius:14px;overflow:hidden}
.arbol summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;
  align-items:center;gap:12px}
.arbol summary::-webkit-details-marker{display:none}
.arbol summary .nom{flex:1;min-width:0}
.arbol summary .nom b{display:block;font-size:16px;font-weight:640}
.arbol .chevron{color:var(--tenue);font-size:17px;transition:transform .2s;
  flex:0 0 auto}
.arbol details[open] > summary .chevron{transform:rotate(90deg)}
.arbol details[open] > summary{border-bottom:1px solid var(--linea)}
.arbol .cuerpo{padding:6px 10px 10px}
.arbol details details{background:var(--panel2);border-radius:11px;margin:5px 0}
.arbol details details summary{padding:11px 13px}
.arbol details details summary .nom b{font-size:15px;font-weight:600}
.dinero{text-align:right;flex:0 0 auto}
.dinero b{display:block;font-size:15.5px;font-weight:660;
  font-variant-numeric:tabular-nums}
.dinero .v{font-size:12.5px;color:var(--critico);font-variant-numeric:tabular-nums}
.fac{display:flex;align-items:center;gap:10px;padding:9px 13px;
  border-bottom:1px solid var(--linea);font-size:14px}
.fac:last-child{border-bottom:0}
.fac .n{flex:1;min-width:0}
.fac .n b{font-weight:600;font-variant-numeric:tabular-nums}
.fac .m{font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap}
.dias{font-size:11.5px;font-weight:660;padding:2px 8px;border-radius:99px;
  white-space:nowrap;background:color-mix(in srgb,var(--critico) 16%,transparent);
  color:var(--critico)}
.dias.alcorriente{background:color-mix(in srgb,var(--ok) 16%,transparent);
  color:var(--ok)}

/* ---------- velo de bloqueo ---------- */
.velo{position:fixed;inset:0;z-index:90;background:var(--fondo);
  display:grid;place-items:center}
.velo img{height:96px;width:auto;opacity:.85}

/* ---------- buscador ---------- */
.buscador{display:flex;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--linea);border-radius:13px;padding:0 12px;margin-bottom:12px}
.buscador svg{width:17px;height:17px;color:var(--tenue);flex:0 0 auto}
.buscador input{flex:1;min-width:0;border:0;background:none;color:var(--texto);
  font-size:16px;padding:12px 0;outline:none;-webkit-appearance:none}
.buscador input::-webkit-search-cancel-button{display:none}
.limpiar{font-size:22px;line-height:1;color:var(--tenue);padding:4px 6px;
  margin-right:-4px}
.vacio-busqueda{padding:34px 20px;text-align:center;color:var(--suave);
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio)}
.vacio-busqueda b{display:block;color:var(--texto);font-size:16px;margin-bottom:5px}

/* ---------- Alba: botón de salida ---------- */
.btn-salida{margin:14px 0 4px}

/* ---------- segmentado chico ---------- */
.segmentado.chico{margin:9px 0 0;padding:3px}
.segmentado.chico button{padding:7px 4px;font-size:12.5px}

/* ---------- asistente de salida ---------- */
.asistente{position:fixed;inset:0;z-index:75;background:var(--fondo);
  display:flex;flex-direction:column}
.asist-barra{display:flex;align-items:center;gap:10px;
  padding:calc(var(--arriba) + 12px) 14px 12px;border-bottom:1px solid var(--linea)}
.asist-titulo{flex:1;text-align:center;min-width:0}
.asist-titulo b{font-size:16px;font-weight:650}
.asist-btn{color:var(--acento);font-size:15px;font-weight:600;padding:6px 4px;
  flex:0 0 auto}
.asist-btn[disabled]{color:var(--tenue);opacity:.5}
.asist-aviso{margin:12px 14px 0;padding:11px 13px;border-radius:12px;font-size:13px;
  line-height:1.45;background:color-mix(in srgb,var(--bajo) 15%,transparent);
  color:var(--bajo);border:1px solid color-mix(in srgb,var(--bajo) 32%,transparent)}
.asist-cuerpo{flex:1;overflow-y:auto;padding:14px 14px 20px;-webkit-overflow-scrolling:touch}
.asist-pie{padding:12px 14px calc(var(--abajo) + 14px);border-top:1px solid var(--linea)}
.campo{display:block;margin-bottom:14px}
.campo span{display:block;font-size:13px;color:var(--suave);margin-bottom:6px}
.campo input{width:100%;padding:14px 15px;border-radius:13px;
  border:1px solid var(--linea);background:var(--panel);color:var(--texto);
  font-size:17px;-webkit-appearance:none}
.campo input:focus{outline:none;border-color:var(--acento)}
.cap{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--linea)}
.cap:last-child{border-bottom:0}
.cap .nom{flex:1;min-width:0}
.cap .nom b{display:block;font-size:15px;font-weight:600}
.cap input{width:74px;padding:10px;border-radius:11px;border:1px solid var(--linea);
  background:var(--panel2);color:var(--texto);font-size:17px;text-align:center;
  font-variant-numeric:tabular-nums;-webkit-appearance:none}
.cap input:focus{outline:none;border-color:var(--acento)}
.cap input.malo{border-color:var(--critico);color:var(--critico)}
.cap .tope{font-size:11.5px;color:var(--critico);margin-top:3px}
.resumen-tot{display:flex;gap:12px;margin-top:14px}
.resumen-tot div{flex:1;background:var(--panel);border:1px solid var(--linea);
  border-radius:13px;padding:13px;text-align:center}
.resumen-tot b{display:block;font-size:22px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums}
.conf{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:15px}
.conf:last-child{border-bottom:0}
.conf b{font-variant-numeric:tabular-nums}
.flecha-saldo{color:var(--suave);font-variant-numeric:tabular-nums}
.flecha-saldo u{text-decoration:none;color:var(--acento);font-weight:650}

/* ---------- historial de salidas ---------- */
.sal-cab{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px}
.sal-cab span{font-size:12px;color:var(--suave);white-space:nowrap}
.sal-cab b{color:var(--texto);font-weight:600;font-variant-numeric:tabular-nums}
.fechas{display:grid;gap:10px;padding:12px 13px 4px}
.fechas label{display:block}
.fechas label span{display:block;font-size:12.5px;color:var(--suave);margin-bottom:5px}
.fechas input[type=date]{width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid var(--linea);background:var(--panel);color:var(--texto);
  font-size:16px;-webkit-appearance:none;font-variant-numeric:tabular-nums}
.fechas input[type=date]:focus{outline:none;border-color:var(--acento)}
.auto{font-size:11.5px;color:var(--acento);margin-top:5px}
.auto.manual{color:var(--bajo)}

/* ---------- kilos por cubeta ---------- */
#cub-zona{margin-top:14px}
.cub{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--linea)}
.cub:last-child{border-bottom:0}
.cub .nom{flex:1;min-width:0}
.cub .nom b{display:block;font-size:15px;font-weight:600}
.cub input{width:78px;padding:10px;border-radius:11px;border:1px solid var(--linea);
  background:var(--panel2);color:var(--texto);font-size:17px;text-align:center;
  font-variant-numeric:tabular-nums;-webkit-appearance:none}
.cub input:focus{outline:none;border-color:var(--acento)}
.cub input.cambiado{border-color:var(--acento);background:var(--acento-tenue)}
.cub .kg{font-size:12px;color:var(--tenue);flex:0 0 auto}
.suelto{color:var(--suave)}
.sin-peso{color:var(--critico);font-weight:600}

/* ---------- avance del proyecto ---------- */
.avance-cab{display:flex;align-items:baseline;gap:12px;margin:4px 0 12px}
.avance-cab .cifra-grande{margin:0;font-size:38px}
.etapas{margin-top:16px;display:grid;gap:1px;background:var(--linea);
  border-radius:12px;overflow:hidden}
.et{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;
  background:var(--panel)}
.et .cl{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:700}
.et.hecha .cl{background:var(--acento);color:var(--sobre-acento)}
.et.encurso .cl{background:var(--bajo);color:var(--sobre-acento)}
.et.pendiente .cl{background:var(--panel2);color:var(--tenue);
  border:1px solid var(--linea)}
.et .txt{flex:1;min-width:0}
.et .txt b{display:block;font-size:14.5px;font-weight:620}
.et.pendiente .txt b{color:var(--suave)}
.et .est{font-size:11px;font-weight:660;padding:2px 8px;border-radius:99px;
  white-space:nowrap;flex:0 0 auto}
.et.hecha .est{background:color-mix(in srgb,var(--acento) 17%,transparent);color:var(--acento)}
.et.encurso .est{background:color-mix(in srgb,var(--bajo) 17%,transparent);color:var(--bajo)}
.et.pendiente .est{background:var(--panel2);color:var(--tenue)}

/* ---------- dato real vs dato de ejemplo ---------- */
.banda-real{margin:14px 0 4px;padding:9px 13px;border-radius:11px;font-size:13px;
  background:color-mix(in srgb,var(--acento) 13%,transparent);
  color:var(--acento);border:1px solid color-mix(in srgb,var(--acento) 30%,transparent)}
.banda-error{margin:14px 0 4px;padding:11px 13px;border-radius:11px;font-size:13.5px;
  line-height:1.45;background:color-mix(in srgb,var(--critico) 14%,transparent);
  color:var(--critico);border:1px solid color-mix(in srgb,var(--critico) 34%,transparent)}
.banda-error b{display:block;margin-bottom:3px}
.nota-dias{margin:0 0 12px;padding:9px 13px;border-radius:11px;font-size:12.5px;
  line-height:1.45;background:var(--panel2);color:var(--suave);
  border:1px solid var(--linea)}
.precio-cab{display:flex;gap:14px;margin-top:6px}
.precio-cab span{font-size:12.5px;color:var(--suave);font-variant-numeric:tabular-nums}

/* ---------- filtro por estado ---------- */
.filtro-estado{display:flex;gap:7px;margin:0 0 12px;overflow-x:auto;
  padding-bottom:2px;-webkit-overflow-scrolling:touch}
.filtro-estado button{flex:0 0 auto;padding:7px 13px;border-radius:99px;
  border:1px solid var(--linea);background:var(--panel);color:var(--suave);
  font-size:13px;font-weight:620;white-space:nowrap;transition:.16s}
.filtro-estado button i{font-style:normal;font-weight:700;margin-left:5px;
  font-variant-numeric:tabular-nums;opacity:.75}
.filtro-estado button.on{color:var(--texto);border-color:currentColor}
.filtro-estado button.on[data-e="ok"]{background:color-mix(in srgb,var(--ok) 17%,transparent);color:var(--ok)}
.filtro-estado button.on[data-e="bajo"]{background:color-mix(in srgb,var(--bajo) 17%,transparent);color:var(--bajo)}
.filtro-estado button.on[data-e="critico"]{background:color-mix(in srgb,var(--critico) 17%,transparent);color:var(--critico)}
.filtro-estado button.on[data-e="todos"]{background:var(--acento-tenue);color:var(--acento);border-color:var(--acento)}

.mini.por-comercial{color:var(--acento);margin-top:3px;font-size:11.5px}

/* ---------- permisos ---------- */
.perm-grupo{padding:10px 13px}
.perm-grupo > span{display:block;font-size:12px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.perm-chips{display:flex;flex-wrap:wrap;gap:6px}
.perm-chips button{padding:6px 11px;border-radius:99px;border:1px solid var(--linea);
  background:var(--panel2);color:var(--suave);font-size:12.5px;font-weight:620}
.perm-chips button.on{background:var(--acento-tenue);color:var(--acento);
  border-color:var(--acento)}
.perm-pie{display:flex;gap:9px;align-items:center;padding:6px 13px 12px}
.perm-pie button{flex:1;padding:11px;border-radius:12px;background:var(--acento);
  color:var(--sobre-acento);font-weight:660;font-size:14px}
.perm-pie .aviso{font-size:12px;color:var(--critico)}

/* Aviso del refresco: aparece un momento cuando el jalón no bajó nada nuevo,
   sea porque ya iba una o porque se llegó al tope de la hora. Callarlo haría
   ver el jalón como si hubiera funcionado. */
.aviso-refresco{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);
  transform:translateX(-50%) translateY(-14px);
  z-index:60;max-width:88vw;
  padding:7px 13px;border-radius:999px;
  background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea);
  font-size:12.5px;line-height:1.3;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;
}
.aviso-refresco.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.aviso-refresco.oculto{display:none}

/* El precio por reja va debajo del de kilo y más chico: es cálculo nuestro,
   no cifra publicada, y no debe competir de tamaño con la que sí lo es. */
.val.chico.reja{margin-top:4px;font-size:17px;font-weight:600;opacity:.92}
.val.chico.reja u{font-size:11px;font-weight:500;opacity:.7;
  text-decoration:none;display:block;line-height:1.2}
.nota-reja{line-height:1.45}

/* ===================== REPARTO ===================== */

/* El renglón cerrado enseña SOLO el cliente. El repartidor va manejando: lo
   que necesita de un vistazo es a quién le toca, no cuánto ni qué. */
.rep-reng{border-bottom:1px solid var(--linea)}
.rep-reng>summary{
  display:flex;align-items:center;gap:11px;padding:15px 4px;
  cursor:pointer;list-style:none;
}
.rep-reng>summary::-webkit-details-marker{display:none}
.rep-punto{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.rep-punto.pendiente{background:var(--tenue)}
.rep-punto.entregado{background:var(--ok)}
.rep-punto.no_entregado{background:var(--critico)}
.rep-quien{flex:1;min-width:0}
.rep-quien b{display:block;font-size:15px;line-height:1.28;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-quien .mini{margin-top:2px}
.rep-flecha{flex:0 0 auto;opacity:.45;transition:transform .18s}
.rep-reng[open] .rep-flecha{transform:rotate(90deg)}

.rep-detalle{padding:2px 4px 16px 26px}
.rep-pidio{margin:0 0 12px;padding:0;list-style:none}
.rep-pidio li{display:flex;gap:10px;padding:6px 0;
  border-bottom:1px dashed var(--linea);font-size:13.5px}
.rep-pidio li:last-child{border-bottom:0}
.rep-pidio .cuantos{flex:0 0 auto;font-variant-numeric:tabular-nums;
  font-weight:600;min-width:52px}
.rep-botones{display:flex;gap:9px;margin-top:6px}
.rep-botones button{flex:1;padding:12px 8px;border-radius:11px;
  font-size:14px;font-weight:600;border:1px solid var(--linea);
  background:var(--panel2);color:var(--texto)}
.rep-botones .ok{border-color:var(--ok);color:var(--ok)}
.rep-botones .no{border-color:var(--tenue)}
.rep-hecho{margin-top:8px;font-size:13px;line-height:1.5}
.rep-hecho .quien{font-weight:600}
.rep-mini-foto{margin-top:9px;border-radius:10px;max-width:150px;
  border:1px solid var(--linea);display:block}

/* Vista previa de la evidencia, dentro del asistente. */
.ent-previa{width:100%;border-radius:12px;display:block;
  border:1px solid var(--linea);background:var(--panel2)}
.ent-marca{margin-top:10px;font-size:13px;line-height:1.55}
.ent-marca .clave{opacity:.6}
.ent-tomar{width:100%;padding:15px;border-radius:13px;font-size:15px;
  font-weight:600;border:1px dashed var(--linea);
  background:var(--panel2);color:var(--texto)}
.ent-motivos{display:grid;gap:9px;margin-top:4px}
.ent-motivos button{padding:14px;border-radius:12px;text-align:left;
  font-size:14.5px;border:1px solid var(--linea);
  background:var(--panel2);color:var(--texto)}
.ent-motivos button.elegido{border-color:var(--acento);
  color:var(--acento);font-weight:600}
.ent-nota{margin-top:14px;font-size:12.5px;line-height:1.5;opacity:.72}

.visor{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;padding:16px}
.visor img{max-width:100%;max-height:100%;border-radius:8px}
.visor.oculto{display:none}

/* ===================== QR, RUTA Y MAPA ===================== */

.qr-camara{position:relative;width:100%;aspect-ratio:3/4;max-height:52vh;
  border-radius:14px;overflow:hidden;background:var(--fondo);
  border:1px solid var(--linea)}
.qr-camara video{width:100%;height:100%;object-fit:cover}
.qr-mira{position:absolute;inset:16% 12%;border:2px solid rgba(255,255,255,.85);
  border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
.qr-dice{margin-top:14px;font-size:14px;line-height:1.5;min-height:44px}
.qr-dice.mal{color:var(--critico)}
.qr-dice.bien{color:var(--ok)}
.qr-dice button{margin-top:10px;width:100%;padding:13px;border-radius:12px;
  font-size:14.5px;font-weight:600;border:1px solid var(--acento);
  color:var(--acento);background:transparent}

/* El número de la parada, del lado del cliente. Es lo que el repartidor mira
   primero para saber por dónde va. */
/* EL NUMERO DE PARADA TIENE QUE LEERSE.
   Estaba oscuro sobre oscuro: circulo #2b2b30 con texto heredado del renglon,
   invisible con sol de frente. Es lo PRIMERO que el repartidor mira para saber
   por donde va, asi que va al reves — claro y con el numero en negro. */
.rep-num{flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--acento);color:var(--sobre-acento);border:1px solid var(--acento);
  line-height:1}
/* Ya resuelto: se apaga, para que resalte lo que falta. */
.rep-num.entregado{background:transparent;color:var(--tenue);border-color:var(--linea);
  font-weight:600}
.rep-num.no_entregado{background:transparent;color:var(--critico);border-color:var(--critico);
  font-weight:700}

/* Encabezado de plaza. Solo aparece para quien ve mas de una. */
.rep-plaza{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:22px 0 2px;padding:9px 12px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--linea);
}
.rep-plaza:first-child{margin-top:6px}
.rep-plaza b{font-size:14.5px;font-weight:700;color:var(--texto);letter-spacing:.2px}
.rep-plaza span{font-size:12.5px;color:var(--suave);white-space:nowrap}
.rep-nuevo{margin-left:7px;font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:999px;background:var(--acento);color:var(--sobre-acento);
  vertical-align:middle}
.rep-ruta{margin:2px 0 12px;font-size:12.5px;line-height:1.5;opacity:.72}

.filtros-ruta{display:flex;gap:9px;margin:4px 0 14px}
.filtros-ruta select{flex:1;padding:11px;border-radius:11px;font-size:14px;
  background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea)}

.dia-paso{display:flex;gap:11px;padding:11px 2px;
  border-bottom:1px solid var(--linea)}
.dia-paso .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:700;background:var(--ok);color:var(--sobre-acento)}
.dia-paso.fallo .n{background:var(--critico);color:#fff}
.dia-paso .quien{flex:1;min-width:0}
.dia-paso .quien b{display:block;font-size:14.5px}
.dia-foto{margin-top:8px;border-radius:9px;max-width:120px;display:block;
  border:1px solid var(--linea)}

#dia-mapa{width:100%;height:340px;border-radius:14px;margin-top:16px;
  border:1px solid var(--linea);background:var(--panel2)}
.punto-num{background:var(--ok);color:var(--sobre-acento);border-radius:50%;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;border:2px solid var(--panel);
  box-shadow:0 1px 4px rgba(0,0,0,.4)}

.zona-avisos{margin-top:18px}
.av-fila{display:flex;align-items:flex-start;gap:12px;padding:14px 2px;
  border-bottom:1px solid var(--linea)}
.av-fila .txt{flex:1;min-width:0}
.av-fila .txt b{display:block;font-size:14.5px}
.av-fila input[type=checkbox]{width:44px;height:26px;flex:0 0 auto}

/* Marca del renglón sin nombre comercial, y del usuario apagado. */
.rep-sinnombre{margin-left:7px;font-size:10px;font-weight:600;padding:2px 7px;
  border-radius:999px;background:var(--panel2);
  color:var(--suave);vertical-align:middle;text-transform:none}

/* La lista para elegir a mano y los motivos: mismos botones que el resto de
   la app, con la paleta de siempre. */
#qr-renglones button,
.ent-motivos button{
  color:var(--texto);
  background:var(--panel2);
  border:1px solid var(--linea);
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  padding:15px 14px;
}
#qr-renglones button .mini,
.ent-motivos button .mini{color:var(--suave);font-size:13px;margin-top:4px}
#qr-renglones button:active,
.ent-motivos button:active{background:var(--panel)}
.ent-motivos button.elegido{
  border-color:var(--acento);color:var(--acento);background:var(--acento-tenue);
}

/* Estado de los avisos en ESTE telefono. Va arriba de los interruptores: de
   nada sirve elegir cuales quieres si el telefono no entrega ninguno. */
.av-estado{padding:13px 14px;border-radius:12px;margin-bottom:14px;
  font-size:13.5px;line-height:1.5;background:var(--panel2);
  border:1px solid var(--linea);color:var(--texto)}
.av-estado.bien{border-color:var(--ok);color:var(--ok)}
.av-estado.mal{border-color:var(--critico);color:var(--critico)}
.av-botones{display:flex;gap:9px;margin-bottom:16px}
.av-botones button{flex:1}

/* Marca del renglon que no se pudo ubicar. Distinta del "sin nombre
   comercial": son dos problemas distintos y uno no se arregla con el otro. */
.rep-sinpunto{margin-left:7px;font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:999px;background:var(--acento-tenue);color:var(--bajo);vertical-align:middle;
  text-transform:none}
.rep-ruta.sin-punto{color:var(--bajo)}


/* Filtro rapido de plaza. Mismo gesto que el filtro por estado de Inventario:
   chips con su cuenta, y la cuenta es sobre TODA la lista del dia. */
.filtro-plaza{display:flex;gap:8px;margin:2px 0 14px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.filtro-plaza::-webkit-scrollbar{display:none}
.filtro-plaza button{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:10px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--linea);color:var(--texto);
  font-size:14px;font-weight:600;white-space:nowrap;
}
.filtro-plaza button i{
  font-style:normal;font-size:12px;font-weight:700;
  min-width:20px;padding:1px 6px;border-radius:999px;
  background:var(--panel2);color:var(--suave);font-variant-numeric:tabular-nums;
}
.filtro-plaza button.on{background:var(--acento);border-color:var(--acento);
  color:var(--sobre-acento)}
.filtro-plaza button.on i{background:var(--fondo);color:var(--acento)}

/* ===================== GRAFICA DEL AÑO ===================== */
.graf{display:flex;align-items:flex-end;gap:4px;height:150px;margin:14px 0 8px}
.graf-col{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;height:100%;
}
.graf-zona{
  position:relative;width:100%;flex:1;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--linea);
}
.graf-bar{
  width:100%;border-radius:4px 4px 0 0;background:var(--acento);
  display:block;transition:opacity .15s;
}
/* El mes a medias va rayado: se ve que le falta, sin tener que leer la nota. */
.graf-bar.parcial{
  background:repeating-linear-gradient(45deg,
    var(--acento) 0 4px, var(--acento-tenue) 4px 8px);
}
.graf-vacio{width:100%;height:2px;background:var(--linea);display:block}
/* El año pasado, una linea encima. No una segunda barra: dos barras por mes
   en la pantalla de un telefono no se distinguen. */
.graf-ant{
  position:absolute;left:0;right:0;height:2px;background:var(--suave);
  display:block;border-radius:2px;
}
.graf-mes{font-size:10.5px;color:var(--suave);text-transform:capitalize}
.graf-mes.parcial{color:var(--acento);font-weight:700}
.graf-col.elegido .graf-bar{outline:2px solid var(--texto);outline-offset:1px}
.graf-col.elegido .graf-mes{color:var(--texto);font-weight:700}
#v-anio-pie{margin-top:4px;min-height:18px}

/* Los papeles: ver la factura y compartirla. */
.rep-papel{display:flex;gap:9px;margin:0 0 12px}
.rep-papel button{
  flex:1;padding:11px 8px;border-radius:11px;font-size:13.5px;font-weight:600;
  border:1px solid var(--linea);background:var(--panel2);color:var(--texto);
}
.rep-papel button:active{background:var(--panel)}
.zona-papeles{margin:0 0 14px}


/* ===================== MODO CLARO: LAS BANDAS =====================
 *
 * Las bandas de estado se pintaban con el color de significado como TEXTO
 * sobre el fondo de la pantalla. Sobre oscuro se lee; sobre claro no.
 *
 * En vez de aclarar el texto —que lo haria mas invisible— se le da fondo
 * propio: el color tenue detras y el color fuerte en el texto y el borde. Se
 * ve igual de "verde" y se lee.
 */
@media (prefers-color-scheme: light){
  .banda-real{
    background:var(--acento-tenue);
    border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    color:#0b4d2b;
  }
  .aviso-ejemplo{
    background:#fdf3dd;
    border:1px solid color-mix(in srgb, var(--bajo) 45%, transparent);
    color:#6b4600;
  }
  .banda-error{
    background:#fdecea;
    border:1px solid color-mix(in srgb, var(--critico) 45%, transparent);
    color:#8c1d16;
  }
  /* La "×" de limpiar la busqueda: era el gris mas tenue de la paleta sobre
     el panel mas claro. */
  .limpiar{color:var(--suave)}
  /* Las marcas chicas de Reparto. */
  .rep-sinpunto{background:#fdf3dd;color:#6b4600}
  .rep-ruta.sin-punto{color:#8a5a00}
  .rep-sinnombre{background:var(--linea);color:var(--suave)}
  /* El numero de parada: tinta clara sobre acento oscuro. */
  .rep-num{background:var(--acento);color:var(--sobre-acento);
           border-color:var(--acento)}
  .rep-num.entregado{background:transparent;color:var(--tenue);
                     border-color:var(--linea)}
  .rep-num.no_entregado{background:transparent;color:var(--critico);
                        border-color:var(--critico)}
  /* Botones de accion del renglon. */
  .rep-botones .ok{border-color:var(--ok);color:var(--ok)}
  /* El segmentado activo. */
  .segmentado button.activo{background:var(--panel);color:var(--texto)}
  /* La grafica: la barra rayada del mes en curso necesita mas contraste entre
     las dos franjas o se ve como un bloque sucio. */
  .graf-bar.parcial{
    background:repeating-linear-gradient(45deg,
      var(--acento) 0 4px, #b9e6cd 4px 8px);
  }
  .graf-ant{background:var(--tenue)}
}

/* Los dos ultimos que quedaban por debajo del minimo, medidos:
   la "x" de limpiar la busqueda en modo oscuro —era el gris mas tenue de la
   paleta sobre el panel— y el boton primario de Alba en modo claro, que ponia
   la tinta oscura del acento sobre un verde ya oscurecido. */
.limpiar{color:var(--suave)}
@media (prefers-color-scheme: light){
}

/* Desglose por plaza del historico mensual. Cuatro columnas fijas para que las
   cifras queden alineadas entre plazas: comparar en diagonal no se puede. */
.mes-plazas{
  padding:4px 14px 14px;margin:-6px 0 9px;
  background:var(--panel2);border:1px solid var(--linea);
  border-top:0;border-radius:0 0 14px 14px;
}
.mes-plaza{
  display:grid;grid-template-columns:1.35fr 1fr 1fr .8fr;gap:8px;
  align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--linea);font-size:13.5px;
}
.mes-plaza:last-child{border-bottom:0}
.mes-plaza.cab{font-size:11px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.4px;padding-bottom:6px}
.mes-plaza .nom{font-weight:600}
.mes-plaza .hoy{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mes-plaza .ant{text-align:right;font-variant-numeric:tabular-nums;color:var(--suave)}
.mes-plaza .pct{text-align:right;font-weight:700;font-size:12.5px}
.mes-plaza .pct.sube{color:var(--ok)} .mes-plaza .pct.baja{color:var(--critico)}
#v-historico .abrir{opacity:.65;font-size:11px}
#v-historico [data-mes]{cursor:pointer}
#v-historico [data-mes].abierto{border-bottom-left-radius:0;border-bottom-right-radius:0}
#v-historico [data-mes].abierto .abrir{color:var(--acento);opacity:1}

/* ===================== VISOR DE PDF ===================== */
.visor-pdf{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  background:var(--fondo);
}
.visor-pdf.oculto{display:none}
.visor-barra{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background:var(--panel);border-bottom:1px solid var(--linea);
}
/* El boton de regresar va a la IZQUIERDA y con la palabra, no solo la flecha:
   es lo primero que se busca cuando uno quiere salir de una pantalla llena. */
.visor-atras{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:9px 13px 9px 9px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--linea);
  color:var(--texto);font-size:14.5px;font-weight:600;
}
.visor-atras:active{background:var(--linea)}
.visor-titulo{flex:1;min-width:0;text-align:center}
.visor-titulo b{display:block;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-accion{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--linea);color:var(--texto);
}
/* Las hojas: centradas y con aire arriba y abajo. Antes quedaba pegado al
   borde de arriba y parecia cortado. */
.visor-hojas{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:12px 10px calc(env(safe-area-inset-bottom) + 20px);
  overscroll-behavior:contain;
}
.pdf-hoja{
  display:block;border-radius:6px;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.35);max-width:100%;
}

/* Cuanto falta para igualar el mes anterior. Va debajo de la cifra, no al
   lado: al lado compite con ella y las dos se leen como una sola. */
.mini.falta{margin-top:3px;font-weight:600;color:var(--bajo)}
.mini.falta.arriba{color:var(--ok)}

/* Totales de Cobertura. Tres columnas iguales y las cifras alineadas: se leen
   de un vistazo sin tener que compararlas en diagonal. */
.inv-totales{display:flex;gap:9px;margin:2px 0 14px}
.inv-totales.oculto{display:none}
.inv-tot{
  flex:1;padding:11px 12px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--linea);text-align:center;
}
.inv-tot b{display:block;font-size:19px;margin-top:2px;
  font-variant-numeric:tabular-nums}
/* El total general va mas chico que el filtrado: el que manda es el que se
   esta viendo, y el otro es la referencia. */
.inv-tot .gen{display:block;margin-top:2px;font-size:11px;opacity:.85}


/* ---------- tarjetas de Proyeccion y Mes anterior ----------
   Estaban chicas y con el texto pegado a la izquierda, y la cifra —lo unico
   que se mira— era del mismo tamaño que su etiqueta. Se centran y la cifra
   crece. Paleta sin cambios: mismas variables que el resto de la app. */
.fila-sub>div{padding:14px 12px;text-align:center;
  display:flex;flex-direction:column;justify-content:center}
.fila-sub b{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:5px}

/* La proyeccion NO es un hecho. El mes anterior ya cerro; la proyeccion es un
   pronostico que puede no cumplirse, y con el mismo relleno solido las dos se
   leian igual de firmes. Borde punteado y sin relleno para que se distinga sin
   inventar un color nuevo. */
.fila-sub>div.pronostico{background:transparent;
  border:1px dashed color-mix(in srgb,var(--suave) 48%,transparent)}
/* --suave y no --tenue: medido, --tenue da 3.21 contra el panel oscuro y no
   se lee con sol. Es el mismo gris del boton deshabilitado. */
.pie-pron{margin-top:5px;font-size:11px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.07em}
.flecha{font-size:11px;margin-right:5px}
.flecha.sube{color:var(--ok)}
.flecha.baja{color:var(--critico)}

/* El renglon de "faltan X" heredaba el .falta generico —panel2 con 12px de
   padding— dentro de una tarjeta que YA es panel2: una caja dentro de otra
   caja del mismo color, que es de donde salia el hueco. */
.fila-sub .mini.falta{background:transparent;padding:0;margin-top:5px;
  border-radius:0;font-size:12.5px}


/* La pastilla de "sin dato" NO es un color de semáforo: es la ausencia de uno.
   Gris deliberado — pintarla de amarillo diría "cuidado" y pintarla de verde
   diría "bien", y lo que dice es "no sé". */
.pastilla.sin_dato{background:color-mix(in srgb,var(--suave) 15%,transparent);
  color:var(--suave)}
.mini.dias{font-weight:640;color:var(--texto)}


/* ---------- la venta del día ----------
   Tenía tarjeta propia y gastaba media pantalla para decir tres cosas. Va en
   un renglón arriba de la del mes.

   Se sigue notando que NO es cifra cerrada, pero con un punto y una línea de
   puntos abajo en vez de con una tarjeta entera: la del mes y la del mes
   anterior ya no se mueven, ésta sube toda la jornada. */
.linea-dia{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px dashed color-mix(in srgb,var(--suave) 40%,transparent)}
.linea-dia #v-dia-tit{color:var(--suave);font-size:13px}
.linea-dia b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.linea-dia .mini{color:var(--suave)}
/* El punto dice "esto sigue corriendo" sin gastar una palabra. */
.latido{width:7px;height:7px;border-radius:99px;background:var(--acento);
  flex:0 0 auto;align-self:center;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 22%,transparent)}
@media (prefers-reduced-motion: no-preference){
  .latido{animation:latir 2.4s ease-in-out infinite}
}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}


/* ---------- que el nombre se lea entero ----------
   `.reng .nom b` recorta con puntos suspensivos, que está bien cuando lo que
   compite por el espacio es un número. En Inventario lo que competía era una
   frase —"ninguna receta activa lo consume"— y el nombre perdía: se veía
   "Pouch ..." sin saber de cuál. Aquí el nombre no se recorta: da la vuelta. */
#inv-lista .reng .nom b, #inv-extra .reng .nom b{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
/* Y la columna de cifras no puede crecer sin freno a costa del nombre. */
#inv-lista .dos-datos, #inv-extra .dos-datos{max-width:112px}

/* El motivo por el que no hay días: informativo, no alarma. Gris, en su propio
   renglón, debajo del nombre. */
.mini.nota-sin{margin-top:5px;color:var(--suave)}
.mini.sin-dias{color:var(--suave)}


/* La razón social bajo el nombre comercial. Sigue estando —es con la que se
   factura— pero deja de ser el título: para cobrar sirve el nombre del negocio,
   no el del contribuyente. */
.cart .nom .mini.razon, #c-plazas .mini.razon{color:var(--suave);margin-top:2px}


/* ---------- reparto: lo que se toca en la calle ----------
   Se usa de pie, con una mano en el documento y la otra en el teléfono. Lo que
   quede en la mitad de arriba no se alcanza con el pulgar sin soltar algo, así
   que los botones que se aprietan en cada parada bajan al fondo. */
.ent-pulgar{position:sticky;bottom:0;margin:16px -14px calc(var(--abajo) + 4px);
  padding:12px 14px calc(var(--abajo) + 12px);
  background:linear-gradient(to top,var(--fondo) 62%,transparent);
  display:flex;flex-direction:column;gap:9px;align-items:stretch}
.ent-pulgar .ent-tomar,.ent-pulgar .ent-rechazar{
  width:100%;min-height:62px;border-radius:16px;font-size:17px;font-weight:700;
  text-align:center;letter-spacing:-.01em}
.ent-pulgar .ent-tomar{background:var(--acento);color:var(--sobre-acento);
  border:0}
/* Rechazar el recorte no es un error ni un peligro: es una eleccion. Va con el
   mismo peso que aceptar, sin rojo. */
.ent-pulgar .ent-rechazar{background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea)}
.ent-decidir{margin-top:12px}

/* La linea que dice por que no hubo escaneo de QR. */
.ent-salto{margin:0 0 14px;padding:11px 13px;border-radius:12px;font-size:13px;
  line-height:1.45;background:var(--panel2);color:var(--suave);
  border:1px solid var(--linea)}

/* El desplegable de imprimir. */
.menu-plaza{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.menu-plaza button{width:100%;padding:15px;border-radius:13px;font-size:15px;
  font-weight:600;text-align:left;background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea)}
.menu-plaza button:last-child{border-color:var(--acento);color:var(--acento)}


/* ---------- la evidencia de una entrega ----------
   Se abre dentro de la app, con el mismo esqueleto del visor de PDF: barra
   arriba, regresar a la izquierda, compartir a la derecha. */
.ev-img{width:100%;display:block;border-radius:12px;background:var(--panel2);
  border:1px solid var(--linea)}
.ev-datos{margin-top:14px;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:4px 16px}
.ev-datos .dato span{color:var(--suave)}
.ev-datos .dato b{font-weight:640;text-align:right}
.ev-mapa{display:block;padding:13px 0 14px;color:var(--acento);
  font-size:14.5px;font-weight:600;text-decoration:none}
/* Elegir cuál se ve —y por lo tanto cuál se comparte— solo aparece cuando de
   verdad se guardaron las dos. */
.ev-cual{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin-bottom:11px}
.ev-cual button{padding:9px 15px;border-radius:999px;font-size:13.5px;
  font-weight:600;background:var(--panel2);color:var(--suave);
  border:1px solid var(--linea)}
.ev-cual button.on{background:var(--acento);color:var(--sobre-acento);
  border-color:var(--acento)}
.ev-cual .mini{flex:1 0 100%}
/* El botón que la abre, en el renglón y en el historial. */
.ev-abrir{margin-top:9px;padding:11px 15px;border-radius:12px;font-size:14px;
  font-weight:600;background:var(--panel2);color:var(--texto);
  border:1px solid var(--linea)}


/* ---------- anular una entrega ----------
   Ventana propia, dos pasos, y el boton por omision es Cancelar: es el unico
   paso del sistema que deshace evidencia. */
.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;padding:18px}
.modal-caja{width:100%;max-width:430px;background:var(--panel);
  border:1px solid var(--linea);border-radius:var(--radio);padding:20px}
.modal-caja>b{font-size:17px;font-weight:700;display:block}
.modal-caja>.mini{margin:3px 0 15px}
.modal-pie{display:flex;gap:9px;margin-top:6px}
.modal-pie button{flex:1;min-height:50px}
.an-aviso{margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:13.5px;
  line-height:1.5;background:color-mix(in srgb,var(--critico) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--critico) 30%,transparent)}
.an-marca{font-weight:700;color:var(--critico)}


/* ---------- la cuota de Bind ---------- */
.bind-cab{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.bind-cab .cifra-grande{font-size:34px;margin:0}
.bind-detalle{margin-top:12px;border-top:1px solid var(--linea);padding-top:2px}
.bind-detalle .dato span{color:var(--suave);text-transform:capitalize}
#bind-nota{margin-top:9px}


/* ---------- telefonos de WhatsApp ---------- */
.tel-cargar{margin-top:13px;padding-top:13px;border-top:1px solid var(--linea)}
.tel-cargar .mini{margin-top:7px}
.tel-num{color:var(--texto);font-weight:600;margin-top:4px}
.tel-de{margin-left:6px;font-size:10.5px;font-weight:600;padding:1px 7px;
  border-radius:999px;background:var(--panel2);color:var(--suave)}
.tel-falta{color:var(--bajo);font-weight:600;margin-top:4px}
.tel-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  margin:13px 0 11px}
.tel-resumen>div{background:var(--panel2);border-radius:12px;padding:10px;
  text-align:center}
.tel-resumen b{display:block;font-size:20px;font-weight:700}
.tel-detalle{max-height:340px;overflow-y:auto;margin:12px 0;
  border:1px solid var(--linea);border-radius:12px}
.tel-fila{padding:10px 13px;border-bottom:1px solid var(--linea);font-size:13.5px}
.tel-fila:last-child{border-bottom:0}
.tel-fila b{display:block;font-weight:640}
.tel-fila span{display:block;color:var(--suave);font-size:12.5px}
.tel-fila.ok{border-left:3px solid var(--ok)}
.tel-fila.cambia{border-left:3px solid var(--bajo)}
.tel-fila.malo{border-left:3px solid var(--critico)}


/* ---------- el telefono en el renglon ---------- */
.tel-reng{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tel-editar{margin-left:auto;padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--panel2);color:var(--acento);
  border:1px solid var(--linea)}
.cart .tel-reng,#c-plazas .tel-reng{padding:11px 16px;
  border-bottom:1px solid var(--linea);font-size:13.5px}


/* ---------- el aviso del QR dentro de la foto ----------
   Solo aparece cuando hay algo que decir. Si el QR coincide no se dice nada:
   un aviso por cada entrega correcta enseña a ignorar los avisos. */
.ent-qr{margin:0 0 12px;padding:12px 14px;border-radius:12px;font-size:13.5px;
  line-height:1.5}
.ent-qr b{display:block;margin-bottom:4px}
.ent-qr.mal{background:color-mix(in srgb,var(--critico) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--critico) 32%,transparent)}
.ent-qr.tibio{background:color-mix(in srgb,var(--bajo) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--bajo) 30%,transparent);
  color:var(--bajo)}
.ent-qr button{margin-top:10px;width:100%;min-height:46px;border-radius:12px;
  font-size:14.5px;font-weight:650;background:var(--acento);
  color:var(--sobre-acento);border:0}
.ent-qr .mini{margin-top:8px}


/* ---------- entra al pedido ----------
   Lo que le queda no alcanza para que llegue su reemplazo. */
.mini.al-pedido{margin-top:4px;font-weight:700;color:var(--critico)}


/* La clave nueva dentro del arbol de usuarios: misma caja que la del alta. */
#m-usuarios .clave-nueva{margin:10px 0 4px}
#m-usuarios .clave-valor{font-size:22px}


/* El registro de WhatsApp: se lee de un vistazo cual salio y cual no. */
.bind-detalle .ok-si{color:var(--acento)}
.bind-detalle .ok-no{color:var(--critico)}


/* "Sin ventas aún" no es una cifra: no va con el peso de una cifra. */
.v-dia-cero{font-size:15px;font-weight:600;color:var(--suave)}


/* EL HISTORIAL POR TIEMPO. El dia manda sobre el renglon: es la mitad de la
   prueba de entrega. */
.rh-cuerpo{padding:13px 4px;display:flex;gap:11px;align-items:flex-start}
.rh-dia{margin:2px 0 10px}
.rh-dia-tit{display:flex;align-items:baseline;gap:8px;padding:9px 4px 3px;
  font-size:13px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--linea)}
.rh-dia-tit .mini{text-transform:none;letter-spacing:0;font-weight:500}
#rh-lista > details.rh-mes{border-bottom:1px solid var(--linea)}
#rh-lista > details.rh-mes > .cuerpo{padding:0 0 8px}


/* El registro de topes: se lee de un vistazo qué puerta se abrió y cuál no. */
.tope-reng{align-items:flex-start}
.tope-gana{color:var(--critico);font-weight:600}
.tope-pierde{color:var(--suave)}
#panel-tope .perm-grupo{margin:10px 0}


/* El estado de cuenta: al final del cliente, despues de sus facturas, que es
   donde se acaba de leer lo que se le va a cobrar. */
.cob-pie{padding:10px 13px 14px}
.cob-btn{width:100%;padding:12px;border-radius:12px;border:1px solid var(--linea);
  background:var(--panel2);color:var(--acento);font-weight:660;font-size:14px}
.cob-btn:disabled{opacity:.6}