/* Capa móvil · pantalla Inicio. Dueño: agente INICIO (23-sep-2026). Toda regla cuelga de html.mv.
   Medidas y colores de la muestra B+C (variante_bc/estilo.css «encabezado navy», estilo_pantallas.css
   «KPIs» y «contenido de hojas»). Los componentes compartidos (.mv-kpi, .mv-pill, .mv-lista, .mv-seccion,
   .mv-medidor…) son del núcleo (movil.css); aquí solo va lo propio con el prefijo mv-ini-*.
   Capas: héroe fijo 0 · hoja blanca 1 · (barras 242) · cifra que viaja a la barra 243 · (FAB 246, hojas 257/258). */

/* ── contenedor: de borde a borde (#main tiene 8 px 16 px de relleno) ── */
html.mv .mv-ini{
  --mv-ini-p:0;
  position:relative; margin:-8px -16px 0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; line-height:1.5;
  font-variant-numeric:tabular-nums; color:var(--mv-tx);
}
html.mv .mv-ini :where(h2,p){ margin:0; }

/* ── héroe navy: fijo bajo la barra; la hoja blanca sube sobre él (B «encabezado navy que se pliega») ── */
html.mv .mv-ini-heroe{
  position:fixed; top:calc(var(--mv-barra-h) + var(--mv-top)); left:0; right:0; z-index:0;
  padding:4px 16px 48px; background:var(--mv-navy); color:#FFFFFF;
}
html.mv .mv-ini-hl{ font-size:.875rem; line-height:1.25rem; font-weight:500; color:var(--mv-on-navy-2); }
html.mv .mv-ini-hueco{ height:46px; margin:8px 0 16px; }
html.mv .mv-ini-hf{ opacity:clamp(0,calc(1 - var(--mv-ini-p)*1.7),1); transform:translateY(calc(var(--mv-ini-p)*-18px)); }
html.mv .mv-ini-pills{ display:flex; flex-wrap:wrap; gap:8px; }
html.mv .mv-ini-g{ margin-top:20px; }
html.mv .mv-ini-svg{ display:block; width:100%; height:auto; overflow:visible; }
html.mv .mv-ini-area stop{ stop-color:var(--mv-lha-azul); }
html.mv .mv-ini-linea{ fill:none; stroke:var(--mv-lha-azul); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
html.mv .mv-ini-fin{ fill:var(--mv-lha-azul); stroke:var(--mv-navy); stroke-width:2.5; }
html.mv .mv-ini-ejes{ display:flex; justify-content:space-between; margin-top:8px; font-size:.75rem; line-height:1rem; color:var(--mv-on-navy-3); }
html.mv .mv-ini-pie{ margin-top:12px; font-size:.8125rem; line-height:1.125rem; color:var(--mv-on-navy-2); }
html.mv .mv-ini-pie.sin-g{ margin-top:16px; }
html.mv .mv-ini-pie b{ color:#FFFFFF; font-weight:600; }

/* ── la cifra grande: viaja de su hueco en el héroe a la barra y se achica (movil_inicio.js) ── */
html.mv .mv-ini-num{
  position:fixed; left:0; top:0; z-index:243; pointer-events:none; transform-origin:0 0; will-change:transform;
  font-size:2.875rem; line-height:1; font-weight:700; letter-spacing:-.035em; white-space:nowrap; color:#FFFFFF;
}
html.mv .mv-ini-cur{ font-size:.56em; font-weight:500; opacity:.72; margin-right:.14em; vertical-align:.52em; letter-spacing:0; }
html.mv .mv-ini-uni{ font-size:.62em; font-weight:600; opacity:.8; margin-left:.06em; letter-spacing:0; }
/* sin medir, plegada (la barra ya muestra su compacto) o con «Más» abierto (la barra deja de ser navy): oculta */
html.mv .mv-ini:not(.medido) .mv-ini-num,
html.mv .mv-ini.plegado .mv-ini-num,
html.mv:not(.mv-marca) .mv-ini-num{ visibility:hidden; }

/* ── hoja blanca que sube sobre el héroe ── */
html.mv .mv-ini-esp{ height:340px; }
html.mv .mv-ini-hoja{
  position:relative; z-index:1; background:var(--mv-bg); border-radius:24px 24px 0 0; padding:24px 16px 16px;
  min-height:calc(100vh - var(--mv-barra-h) - var(--mv-top) - var(--mv-nav-h) - var(--mv-bot));
}
html.mv .mv-ini-corte{ display:flex; align-items:center; gap:6px; font-size:.8125rem; line-height:1.125rem; color:var(--mv-tx3); margin-bottom:16px; }

/* ── tarjetas KPI (las del núcleo) + la fila de tres de «Cobertura de stock» ── */
html.mv .mv-ini-kpis>.mv-kpi{ min-width:0; }
html.mv .mv-ini-c{ display:flex; flex-direction:column; }
html.mv .mv-ini-tri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
html.mv .mv-ini-tri b{ display:block; font-size:1.375rem; line-height:1.75rem; font-weight:700; letter-spacing:-.025em; white-space:nowrap; color:var(--mv-tx); }
html.mv .mv-ini-tri b.mv-c-er{ color:var(--mv-er); }
html.mv .mv-ini-tri span{ display:flex; align-items:center; gap:6px; font-size:.75rem; line-height:1rem; color:var(--mv-tx2); white-space:nowrap; }
html.mv .mv-ini-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; }
html.mv .mv-ini-esqv{ width:70%; height:26px; margin-top:8px; }
html.mv .mv-ini-esqs{ width:55%; height:12px; margin-top:8px; }
html.mv .mv-ini-tri .mv-ini-esqv{ width:80%; height:22px; margin-top:4px; }

/* ── alertas: la lista densa de C (núcleo); el texto va en dos líneas como en la muestra ── */
html.mv .mv-ini-alertas .mv-fila{ min-height:60px; }

/* ── esqueleto navy (primer cuadro) ── */
html.mv .mv-ini-esqn{ display:block; border-radius:6px; background:rgba(255,255,255,.1); }
html.mv .mv-ini-hoja .mv-ini-esqn{ background:var(--mv-s2); }

/* ── hojas «Cobertura de stock» y «Alerta comercial» (viven en #mvApp, fuera de .mv-ini) ── */
html.mv .mv-ini-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
html.mv .mv-ini-stats.dos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
html.mv .mv-ini-stat{ padding:14px 12px; border-radius:16px; background:var(--mv-s1); min-width:0; }
html.mv .mv-ini-stat b{ display:block; font-size:1.375rem; line-height:1.75rem; font-weight:700; letter-spacing:-.025em; color:var(--mv-tx); white-space:nowrap; }
html.mv .mv-ini-stat b.mv-c-er{ color:var(--mv-er); }
html.mv .mv-ini-stat b.mv-c-av{ color:var(--mv-av); }
html.mv .mv-ini-stat span{ display:block; margin-top:2px; font-size:.75rem; line-height:1rem; color:var(--mv-tx2); }
html.mv .mv-ini-hj .mv-sub-h{ margin-top:20px; }

@media (prefers-reduced-motion: reduce){
  html.mv .mv-ini-hf{ transform:none; }
  html.mv .mv-ini-num{ will-change:auto; }
}