/* ═══════════════════════════════════════════════════════════════════
   cd-mobile.css — Tikitago responsive · "se siente como una app"
   ───────────────────────────────────────────────────────────────────
   Capa aditiva. En ≤820px: el rail se esconde tras una hamburguesa y se
   desliza como drawer; el contenido usa todo el ancho; los grids de 2-3
   columnas colapsan a 1. La navegación global sigue siendo una sola:
   cabecera + menú Cortina. No toca la lógica ni los selectores funcionales.
   ═══════════════════════════════════════════════════════════════════ */

/* El menú móvil actual es el mismo menú generado por cd-rail.js.
   La implementación móvil se apoya exclusivamente en el menú generado por
   cd-rail.js y su cortina compartida; no mantiene un segundo drawer. */
@media (max-width: 820px) {
  /* Menú actual: drawer único, con el mismo #cdm-scrim que usa escritorio. */
  nav.cdm {
    top: var(--cdm-top, 54px) !important;
    left: 0 !important;
    width: min(320px, 88vw) !important;
    max-height: calc(100dvh - var(--cdm-top, 54px) - 12px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 18px !important;
  }
  body.cdm-open { overflow: hidden; }
  .cdm-scrim { touch-action: none; }
  nav.cdm button, nav.cdm a { min-height: 44px !important; }
  nav.cdm .cdm-subitem { min-height: 42px !important; }

  /* La cabecera conserva la hamburguesa única #cdm-gall. */
  #cdm-gall { min-width: 38px; min-height: 38px; }

  /* Defensivos globales anti-desborde. */
  html, body { overflow-x: hidden !important; }
  img, video, canvas, svg { max-width: 100%; }
  .page table { display: block; max-width: 100%; overflow-x: auto; }

  .app-wrap { height: auto !important; min-height: calc(100vh - 42px); }
  .app-wrap > *:not(aside) { margin-left: 0 !important; }

  #featured-bar { left: 0 !important; padding-left: 44px; }
  .page { padding: 16px 14px 28px !important; }
  .page .topbar { padding-left: 50px; }


  .card { border-radius: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORÍA RESPONSIVE GLOBAL (2026-07-12)
   Rupturas detectadas en la auditoría del sitio y corregidas mobile-first.
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal cerrar sesión: en mobile más aire lateral, sin desbordarse */
@media (max-width: 400px) {
  .lg-card { padding: 28px 20px 20px !important; max-width: calc(100vw - 32px) !important; }
  .lg-title { font-size: 17px !important; }
  .lg-emblem { width: 64px !important; height: 64px !important; margin-bottom: 14px !important; }
  .lg-btns button { padding: 11px !important; font-size: 12px !important; }
}

/* Toasts: en mobile ocupan casi todo el ancho, sin desbordar */
@media (max-width: 480px) {
  .cd-toast { left: 12px !important; right: 12px !important; max-width: none !important;
    transform: none !important; }
}

/* Prevención de scroll horizontal global (regla de barrido) */
html, body { overflow-x: hidden; }

/* Cards genéricas: no permitir que su contenido las estire */
.card, .kpi { min-width: 0; }

/* Tablas con min-width: siempre en wrapper con scroll horizontal */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Imágenes: nunca desbordan su contenedor */
img { max-width: 100%; height: auto; }

/* Botones con SVG: el SVG no debe forzar el ancho */
button svg { max-width: 100%; }

/* Inputs y textareas: siempre dentro de su contenedor */
input, textarea, select { max-width: 100%; box-sizing: border-box; }