: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;
  --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:#5d6b7c; --tenue:#8b9bad; --acento-tenue:#e2f7ec;
  }
}
*{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);
  color:#06210f;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}
.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 ---------- */
.usuarios{display:flex;gap:8px;margin:0 0 18px}
.usuarios button{
  flex:1;padding:13px 8px;border-radius:13px;background:var(--panel);
  border:1px solid var(--linea);color:var(--suave);font-weight:640;
  text-transform:capitalize;transition:.16s}
.usuarios button.activo{
  background:var(--acento-tenue);border-color:var(--acento);color:var(--texto)}

/* ---------- 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}