/* ══════════════════════════════════════════════════════════════
   BREK — Ajustes EXCLUSIVOS de vista móvil
   ──────────────────────────────────────────────────────────────
   • Todo vive dentro de @media (max-width) → la versión desktop
     (≥ 900px) NO se ve afectada en absoluto.
   • Este archivo se carga como ÚLTIMA hoja de estilos del <head>
     (después del <style> inline de cada página) para ganar en los
     empates de especificidad sin tener que usar !important.
   • Si algo se quisiera revertir, basta con quitar el <link> de la
     página o borrar el bloque correspondiente. Nada toca al escritorio.
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   INDEX · Carrusel "recorrido" (sección .fcar)
   Las cards laterales en peek (.is-prev / .is-next) se trasladan
   hacia los costados (translateX ±46%) y se salían de la pantalla,
   generando scroll horizontal (el documento medía ~491px en un
   viewport de 380). Recortamos contra el escenario: el efecto de
   "deck" apilado se conserva pero ya no desborda.
   Sólo por debajo de 900px (donde arranca el layout desktop), así
   el diseño grande queda igual.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .fcar-stage { overflow: hidden; }
}


@media (max-width: 640px) {

  /* ───────────────────────────────────────────────────────────
     INDEX · Dashboard — fila de KPIs (.kpi-row)
     En desktop son 3 columnas. En celular "$17.840.000" no entra
     en un tercio del ancho y el 3er KPI quedaba cortado. Pasamos a
     2 columnas y el KPI de Equilibrio ocupa la fila completa de
     abajo. min-width:0 permite que los valores largos se acomoden.
     ─────────────────────────────────────────────────────────── */
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi-row > .kpi:nth-child(3) { grid-column: 1 / -1; }
  .kpi { min-width: 0; }

  /* ───────────────────────────────────────────────────────────
     INDEX · Visor de mockups (modal .mkwin) — desactivado en móvil
     El HTML del sistema está diseñado para ~1180px y en pantallas
     chicas se ve apretado y cortado. En celular las cards de módulos
     quedan sólo informativas. El JS ya no abre el visor (ver guard
     en index.html); acá quitamos la pista visual de "clickeable".
     ─────────────────────────────────────────────────────────── */
  .mod-card.has-shot { cursor: default; }
  .mod-card.has-shot .mod-peek { display: none; }
  /* El enlace "Ver ejemplos" de Reportes tampoco abre nada en móvil */
  .vis-examples { display: none; }

  /* ───────────────────────────────────────────────────────────
     SUSCRIBIR · Checkout (.co-grid)
     Los ítems del grid traían min-width:auto y empujaban el ancho
     ~9px fuera de la pantalla. min-width:0 los deja achicar y el
     contenido queda dentro del viewport.
     ─────────────────────────────────────────────────────────── */
  .co-grid, .co-main, .co-summary { min-width: 0; }
}
