/* Capa móvil · pantalla Ventas. Dueño: agente VENTAS (23-sep-2026). Toda regla cuelga de html.mv.
   Especificación: qa/diseno/movil/variante_bc (estilo.css «encabezado navy», estilo_pantallas.css
   «KPIs», «gráficos», LEEME.md §3-4). Tokens --mv-* del núcleo (movil.css); aquí solo lo propio. */

/* ── héroe navy: etiqueta, cifra grande, píldoras y barras de 12 meses ──
   Empieza justo debajo de la barra (que con barra:'marca' es navy): #main tiene 8 px arriba y 16 a
   los lados, el héroe los recupera para ir de borde a borde. */
html.mv .mv-ven-heroe{ position:relative; margin:-8px -16px 0; padding:4px 16px 48px; background:var(--mv-navy); color:#FFFFFF; }
html.mv .mv-ven-heroe-l{ margin:0; font-size:.875rem; line-height:1.25rem; font-weight:500; color:var(--mv-on-navy-2); }
html.mv .mv-ven-big{
  margin:8px 0 16px; font-size:2.875rem; line-height:1; font-weight:700; letter-spacing:-.035em; white-space:nowrap;
  color:#FFFFFF; font-variant-numeric:tabular-nums;
}
/* «$» y «M» de la cifra (también en la cifra compacta de la barra, #mvT2n) */
html.mv .mv-ven-cur{ font-size:.56em; font-weight:500; opacity:.72; margin-right:.14em; vertical-align:.52em; letter-spacing:0; }
html.mv .mv-ven-uni{ font-size:.62em; font-weight:600; opacity:.8; margin-left:.06em; letter-spacing:0; }
html.mv .mv-ven-pills{ display:flex; flex-wrap:wrap; gap:8px; }
html.mv .mv-ven-graf{ margin-top:20px; }
html.mv .mv-ven-svg{ display:block; width:100%; height:84px; overflow:visible; }
html.mv .mv-ven-barras-l{
  display:grid; grid-template-columns:repeat(var(--n,12),minmax(0,1fr)); margin-top:6px;
  font-size:.6875rem; line-height:1rem; color:var(--mv-on-navy-3); text-align:center;
}
html.mv .mv-ven-barras-l .on{ color:#FFFFFF; font-weight:650; }

/* ── hoja blanca que sube sobre el héroe (radio 24, se monta 24 px) ── */
html.mv .mv-ven-hoja{
  position:relative; margin:-24px -16px 0; padding:24px 16px 0;
  background:var(--mv-bg); border-radius:24px 24px 0 0;
}
html.mv .mv-ven-hoja>.mv-chips{ margin-top:-12px; }

/* ── tarjeta de resumen: 4 KPIs en rejilla + contado/crédito ── */
html.mv .mv-ven-k4{ display:grid; grid-template-columns:1fr 1fr; }
html.mv .mv-ven-kpi{ padding:16px; min-width:0; }
html.mv .mv-ven-kpi:nth-child(odd){ border-right:1px solid var(--mv-linea); }
html.mv .mv-ven-kpi:nth-child(n+3){ border-top:1px solid var(--mv-linea); }
html.mv .mv-ven-k4 .mv-kpi-v{ font-size:1.25rem; line-height:1.75rem; overflow:hidden; text-overflow:ellipsis; }
html.mv .mv-ven-k4+.mv-pad{ border-top:1px solid var(--mv-linea); }
html.mv .mv-ven-split{
  display:flex; justify-content:space-between; gap:12px; margin-bottom:8px;
  font-size:.8125rem; line-height:1.125rem; color:var(--mv-tx2); font-variant-numeric:tabular-nums;
}
html.mv .mv-ven-split b{ color:var(--mv-tx); font-weight:650; }
html.mv .mv-ven-dos{ display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; }
html.mv .mv-ven-dos i{ display:block; height:100%; }
html.mv .mv-ven-dos .c{ background:var(--mv-pri); }
html.mv .mv-ven-dos .r{ flex:1; background:var(--mv-lha-azul); }

/* ── listas de C: las filas filtran o abren un modal; sin chevrón, como la muestra ── */
html.mv .mv-ven-cli .mv-fila-ch,html.mv .mv-ven-fac .mv-fila-ch{ display:none; }
html.mv .mv-ven-cod{ font-variant-numeric:normal; }

/* ── medios de pago (B): barra apilada + leyenda; cada renglón filtra (48 px de toque) ── */
html.mv .mv-ven-apilada{ display:flex; gap:2px; height:14px; border-radius:7px; overflow:hidden; }
html.mv .mv-ven-apilada i{ display:block; height:100%; min-width:2px; transition:opacity .2s linear; }
html.mv .mv-ven-apilada i.tenue{ opacity:.32; }
html.mv .mv-ven-leyenda{ margin-top:8px; }
html.mv .mv-ven-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; text-align:left; color:var(--mv-tx);
}
html.mv .mv-ven-ley+.mv-ven-ley::before{ content:''; position:absolute; top:0; left:16px; right:16px; height:1px; background:var(--mv-linea); }
html.mv .mv-ven-sw{ width:10px; height:10px; border-radius:3px; flex:none; }
html.mv .mv-ven-ley>span{ flex:1; min-width:0; color:var(--mv-tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.mv .mv-ven-ley>b{ font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.mv .mv-ven-ley>em{ width:52px; flex:none; font-style:normal; font-size:.8125rem; text-align:right; color:var(--mv-tx3); white-space:nowrap; font-variant-numeric:tabular-nums; }
html.mv .mv-ven-ley.sel{ background:var(--mv-sel-fila); }
html.mv .mv-ven-ley.sel>span{ color:var(--mv-tx); font-weight:600; }
html.mv .mv-ven-ley.tenue .mv-ven-sw{ opacity:.32; }

/* ── modal de la factura (verFactura de ventas.js: #modal .mbox-fx2, z 260 sobre barras y hojas) ──
   Es el visor de escritorio; en el teléfono su cabecera de dos columnas (marca | recuadro del número)
   dejaba la marca en ~50 px y partía las palabras letra por letra. Aquí se apila y el pie de
   totales (rejilla en línea «1fr 236px») pasa a una columna. Solo con html.mv: el escritorio no cambia. */
html.mv #modal .mbox-fx2{ width:100%; padding:20px 16px 16px; }
html.mv #modal .mbox-fx2 .x{ top:6px; right:6px; width:48px; height:48px; }
html.mv .mbox-fx2 .fx2-head{ flex-direction:column; align-items:stretch; gap:16px; }
html.mv .mbox-fx2 .fx2-brand{ padding-right:44px; }
html.mv .mbox-fx2 .fx2-empresa{ overflow-wrap:normal; word-break:normal; }
html.mv .mbox-fx2 .fx2-box{ min-width:0; max-width:none; width:100%; }
html.mv .mbox-fx2 .fx2-num{ overflow-wrap:anywhere; }
html.mv .mbox-fx2 .factMeta{ grid-template-columns:1fr; }
html.mv .mbox-fx2 .factFoot{ grid-template-columns:1fr !important; gap:12px !important; }
html.mv .mbox-fx2 .fx2-qr{ width:84px; height:84px; }
/* las tablas del visor ya se desplazan dentro de su .scroll: los códigos no se parten */
html.mv .mbox-fx2 table{ overflow-wrap:normal; }
html.mv .mbox-fx2 .scroll td:first-child{ white-space:nowrap; }

/* ── periodo sin ventas ── */
html.mv .mv-ven-vacio{ padding-top:32px; }
html.mv .mv-ven-vacio .mv-btn{ padding:0 24px; }

@media (prefers-reduced-motion:reduce){
  html.mv .mv-ven-apilada i{ transition:none; }
}