/* Capa móvil · pantalla Cartera. Dueño: agente CARTERA (23-sep-2026). Toda regla cuelga de html.mv.
   Especificación: qa/diseno/movil/variante_bc (estilo.css .hero/.bignum/.pill, estilo_pantallas.css
   .kgrid/.progreso/.apilada/.ley/.stats, estilo_listas.css). Tokens --mv-* del núcleo (movil.css):
   claro y oscuro salen solos de html.mv[data-theme="dark"]. Prefijo propio: mv-car-*. */

/* ── 1 · encabezado navy: sticky bajo la barra; la hoja blanca sube por encima (como la B) ──
   --mv-car-p (0..1) lo escribe movil_cartera.js con el scroll; --mv-car-y guarda dónde estaba el
   encabezado para cuando una hoja bloquea el scroll (html.mv-bloqueo) y el sticky deja de valer. */
html.mv .mv-car-heroe{
  --mv-car-p:0; --mv-car-y:0px;
  position:sticky; top:calc(var(--mv-barra-h) + var(--mv-top)); z-index:0;
  margin:-8px -16px 0; padding:4px 16px 48px;
  background:var(--mv-navy); color:#FFFFFF;
}
html.mv.mv-bloqueo .mv-car-heroe{ position:relative; top:var(--mv-car-y); }
html.mv .mv-car-heroe-l{ margin:0; font-size:.875rem; line-height:1.25rem; font-weight:500; color:var(--mv-on-navy-2); }
html.mv .mv-car-cifra{
  height:46px; margin:8px 0 16px; transform-origin:0 0;
  font-size:2.875rem; line-height:1; font-weight:700; letter-spacing:-.035em; white-space:nowrap; color:#FFFFFF;
  font-variant-numeric:tabular-nums;
  opacity:clamp(0,calc(1 - var(--mv-car-p)*1.25),1);   /* la hoja la tapa hacia p ≈ 0,62; la barra la muestra en p = 1 */
  transform:translateY(calc(var(--mv-car-p)*-24px)) scale(calc(1 - var(--mv-car-p)*.3));
}
/* «$» y «M» pequeños (B .cur/.uni); también en la cifra plegada de la barra (Movil.barraCompacta) */
html.mv .mv-car-cur{ font-size:.56em; font-weight:500; opacity:.72; margin-right:.14em; vertical-align:.52em; letter-spacing:0; }
html.mv .mv-car-uni{ font-size:.62em; font-weight:600; opacity:.8; margin-left:.06em; letter-spacing:0; }
html.mv .mv-car-hf{ opacity:clamp(0,calc(1 - var(--mv-car-p)*1.7),1); transform:translateY(calc(var(--mv-car-p)*-18px)); }
html.mv .mv-car-pills{ display:flex; flex-wrap:wrap; gap:8px; }
html.mv .mv-car-graf{ margin-top:20px; }
html.mv .mv-car-split{ display:flex; gap:3px; height:12px; border-radius:6px; overflow:hidden; }
html.mv .mv-car-split i{ display:block; height:100%; }
html.mv .mv-car-split i.pv{ background:var(--mv-lha-azul); }
html.mv .mv-car-split i.v{ flex:1; background:var(--mv-navy-aviso); }
html.mv .mv-car-split-l{
  display:flex; justify-content:space-between; gap:8px; margin-top:10px;
  font-size:.8125rem; line-height:1.125rem; color:var(--mv-on-navy-2);
}
html.mv .mv-car-split-l span{ display:flex; align-items:center; gap:6px; white-space:nowrap; min-width:0; }
html.mv .mv-car-split-l b{ color:#FFFFFF; font-weight:650; font-variant-numeric:tabular-nums; }
html.mv .mv-car-pto{ width:8px; height:8px; border-radius:50%; flex:none; }
html.mv .mv-car-pto.pv{ background:var(--mv-lha-azul); }
html.mv .mv-car-pto.v{ background:var(--mv-navy-aviso); }

/* ── 2 · hoja blanca (B .hoja): esquinas de 24, monta 24 px sobre el encabezado ── */
html.mv .mv-car-hoja{
  position:relative; z-index:1;
  margin:-24px -16px 0; padding:24px 16px 0;
  background:var(--mv-bg); color:var(--mv-tx); border-radius:24px 24px 0 0;
}
html.mv .mv-car-hoja>.mv-car-chips{ margin-top:-12px; }
html.mv .mv-car-hoja>.mv-nota{ margin-top:12px; }
html.mv .mv-car-rec{ margin-top:12px; }
html.mv .mv-car-prog{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:6px; }
html.mv .mv-car-prog b{ font-size:1.25rem; line-height:1.75rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.mv .mv-car-prog .mv-kpi-s{ margin:0; text-align:right; }

/* ── 3 · antigüedad: barra apilada tocable (48 px de toque, 14 px visibles) y leyenda por grupos ── */
html.mv .mv-car-apilada{ display:flex; gap:2px; height:48px; margin:-17px 0; }
html.mv .mv-car-seg{ position:relative; display:block; height:48px; min-width:2px; flex:0 1 auto; }
html.mv .mv-car-seg::before{
  content:''; position:absolute; left:0; right:0; top:17px; height:14px; background:var(--mv-car-c);
  transition:opacity .15s linear;
}
html.mv .mv-car-seg:first-child::before{ border-radius:7px 0 0 7px; }
html.mv .mv-car-seg:last-child::before{ border-radius:0 7px 7px 0; }
html.mv .mv-car-seg:only-child::before{ border-radius:7px; }
html.mv .mv-car-seg.tenue::before{ opacity:.28; }
html.mv .mv-car-leyenda{ margin-top:8px; }
html.mv .mv-car-ley-g{ margin:0; padding:12px 0 2px; font-size:.75rem; line-height:1rem; font-weight:650; letter-spacing:.01em; color:var(--mv-tx3); }
html.mv .mv-car-ley{
  position:relative; display:flex; align-items:center; gap:10px;
  width:calc(100% + 32px); min-height:48px; margin:0 -16px; padding:0 16px;
  font-size:.875rem; line-height:1.25rem; color:var(--mv-tx); text-align:left;
}
html.mv .mv-car-ley+.mv-car-ley::before{ content:''; position:absolute; left:16px; right:16px; top:0; height:1px; background:var(--mv-linea); }
html.mv .mv-car-sw{ width:10px; height:10px; border-radius:3px; flex:none; }
html.mv .mv-car-ley span{ flex:1; min-width:0; color:var(--mv-tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.mv .mv-car-ley b{ font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.mv .mv-car-ley em{ width:52px; flex:none; font-style:normal; text-align:right; font-size:.8125rem; color:var(--mv-tx3); white-space:nowrap; font-variant-numeric:tabular-nums; }
html.mv .mv-car-ley.sel{ background:var(--mv-sel-fila); }
html.mv .mv-car-ley.sel span{ color:var(--mv-tx); font-weight:600; }
html.mv .mv-car-ley.tenue .mv-car-sw{ opacity:.35; }
html.mv .mv-car-pista{ margin:10px 0 0; font-size:.75rem; line-height:1rem; color:var(--mv-tx3); }
html.mv .mv-car-quitar{ margin:8px 0 -8px -12px; }

/* ── 4 · listas: centros de costo (filtran la página, sin chevrón como la muestra) y ficha ── */
html.mv .mv-car-filtro .mv-fila-ch{ display:none; }
html.mv #mvCarCC .mv-car-pista{ margin-top:12px; }
html.mv .mv-car-cod{ font-variant-numeric:normal; }

/* ── 5 · ficha del cliente (hoja): dos cifras (B .stats) y las facturas vencidas ── */
html.mv .mv-car-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
html.mv .mv-car-stat{ min-width:0; padding:14px 12px; border-radius:16px; background:var(--mv-s1); }
html.mv .mv-car-stat b{
  display:block; font-size:1.375rem; line-height:1.75rem; font-weight:700; letter-spacing:-.025em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;
}
html.mv .mv-car-stat span{ display:block; margin-top:2px; font-size:.75rem; line-height:1rem; color:var(--mv-tx2); }
html.mv .mv-car-ficha .mv-nota{ margin:8px 0 4px; }
html.mv .mv-car-vacio{ padding:16px 8px 8px; }

/* ── 6 · esqueleto propio: el encabezado navy ya está en su sitio mientras llegan los datos ── */
html.mv .mv-car-heroe-esq{ min-height:230px; padding-top:12px; }
html.mv .mv-car-heroe-esq .mv-esqueleto{ background:rgba(255,255,255,.1); }
html.mv .mv-car-heroe-esq .mv-esqueleto::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
html.mv .mv-cargando .mv-car-hoja{ padding-top:24px; }

@media (prefers-reduced-motion: reduce){
  html.mv .mv-car-hf,html.mv .mv-car-cifra{ transform:none; }
  html.mv .mv-car-seg::before{ transition:none; }
}