/* ============================================================================
   MEXUS V3 — Capa MÓVIL (solo teléfono). Cargada DESPUÉS de styles.css.
   GARANTÍA: salvo el bloque base que oculta los elementos NUEVOS (.m-*), todo
   vive en @media (max-width: 767px) — inerte en pantallas >=768px. El
   ESCRITORIO no cambia. No se toca styles.css. Para desactivar: quita el
   <link> de mobile.css y el <script> de mobile.js en index.html.
   El menú hamburguesa lo inyecta mobile.js leyendo el nav existente.
   ========================================================================== */

/* Elementos nuevos del móvil: ocultos por defecto (no existen en escritorio). */
.m-hamb, .m-overlay, .m-drawer { display: none; }

@media (max-width: 767px) {

  /* ── Escala nativa (sin el zoom de escritorio) ─────────────────────────── */
  .main, .app.is-presenting .main { zoom: 1 !important; }
  body { -webkit-text-size-adjust: 100%; }
  body.m-open { overflow: hidden; }

  /* ── Apilar y MATAR el sidebar de escritorio (lo reemplaza el drawer) ──── */
  .app { flex-direction: column; }
  .sidebar { display: none !important; }
  .app.is-sidebar-rail .main { margin-left: 0 !important; }

  /* ── Botón hamburguesa (fijo arriba-izquierda) ─────────────────────────── */
  .m-hamb {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    position: fixed; top: 9px; left: 10px; z-index: 1000;
    width: 40px; height: 40px; padding: 0;
    background: var(--app-surface, #131d2c); border: 1px solid var(--app-tint-4, rgba(255,255,255,.15));
    border-radius: 9px; cursor: pointer;
  }
  .m-hamb span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--app-fg-1, #fff); transition: transform .2s, opacity .2s; }

  /* Topbar: dejar espacio para el hamburger + envolver */
  .topbar { flex-wrap: wrap; gap: 8px; padding-left: 60px !important; min-height: 46px; }
  .topbar .title { font-size: 17px; }

  /* ── Overlay + Drawer ──────────────────────────────────────────────────── */
  .m-overlay {
    display: block; position: fixed; inset: 0; z-index: 1001;
    background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.m-open .m-overlay { opacity: 1; pointer-events: auto; }

  .m-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1002;
    width: 82vw; max-width: 320px;
    background: var(--app-surface-2, #0f1826); border-right: 1px solid var(--app-border, rgba(255,255,255,.08));
    transform: translateX(-100%); transition: transform .22s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.m-open .m-drawer { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }

  .m-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--app-border, rgba(255,255,255,.08)); }
  .m-drawer__title { font-family: var(--mx-font-display, sans-serif); font-weight: 800; letter-spacing: -.01em; color: var(--app-fg-1, #fff); font-size: 16px; }
  .m-drawer__close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--app-tint-4, rgba(255,255,255,.15)); color: var(--app-fg-2, rgba(255,255,255,.7)); font-size: 15px; cursor: pointer; }

  .m-drawer__list { flex: 1; padding: 8px 10px; }
  .m-drawer__group { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-fg-4, rgba(255,255,255,.45)); padding: 14px 10px 6px; }
  .m-drawer__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px; margin-bottom: 2px; border-radius: 9px;
    background: transparent; border: none; cursor: pointer; text-align: left;
    color: var(--app-fg-2, rgba(255,255,255,.78)); font-size: 14.5px; font-weight: 600;
  }
  .m-drawer__item:active { background: var(--app-tint-2, rgba(255,255,255,.04)); }
  .m-drawer__item.active { background: rgba(244,121,32,.14); color: var(--app-fg-1, #fff); box-shadow: inset 2px 0 0 var(--accent, #F47920); }
  .m-drawer__item.soon { opacity: .5; }
  .m-drawer__ic { display: inline-flex; width: 18px; height: 18px; color: var(--accent, #F47920); flex: 0 0 auto; }
  .m-drawer__ic svg { width: 18px; height: 18px; }
  .m-drawer__lbl { flex: 1; }
  .m-drawer__badge { font-size: 11px; font-weight: 700; background: var(--accent, #F47920); color: #1a1206; border-radius: 999px; padding: 1px 7px; }
  .m-drawer__foot { padding: 12px 14px 18px; border-top: 1px solid var(--app-border, rgba(255,255,255,.08)); }
  .m-drawer__logout { width: 100%; padding: 11px; border-radius: 9px; background: transparent; border: 1px solid var(--app-tint-4, rgba(255,255,255,.15)); color: var(--app-fg-2, rgba(255,255,255,.7)); font-size: 13.5px; font-weight: 600; cursor: pointer; }

  /* ── Filter rail: brand-pill a ancho completo ──────────────────────────── */
  .filter-rail { gap: 8px; }
  .brand-pill { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }

  /* ── Dropdowns: que quepan en el viewport ──────────────────────────────── */
  .dropdown, .period-dropdown { min-width: 0 !important; max-width: calc(100vw - 16px) !important; }

  /* ── Tablas anchas: scroll horizontal ──────────────────────────────────── */
  .ppc-scroll, .ven-scroll, .seo-scroll, .set-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ppc-scroll > table, .ven-scroll > table, .seo-scroll > table, .set-scroll > table { min-width: 560px; }

  /* ── KPI grids que no colapsaban ───────────────────────────────────────── */
  .agency-kpis { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── KAI: usable a pantalla completa, 1 columna, sin zoom de iOS al teclear */
  .content--ai > .kai-grid, .kai-grid { grid-template-columns: 1fr !important; height: auto !important; min-height: calc(100vh - 150px); }
  .kai-input, .kai-panel__input textarea, .ppc-search, .ppc-select,
  input[type="text"], input[type="search"], textarea, select { font-size: 16px !important; }
  /* Panel flotante de KAI a casi-pantalla completa en móvil */
  .kai-panel { width: 100vw !important; max-width: 100vw !important; right: 0 !important; left: 0 !important; height: 88vh !important; border-radius: 16px 16px 0 0 !important; }

  /* ── Modal: que nunca se salga ─────────────────────────────────────────── */
  .modal-card { max-width: calc(100vw - 24px) !important; }
}

/* ── Teléfono angosto (<=480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .agency-kpis { grid-template-columns: 1fr !important; }
  .topbar .title { font-size: 16px; }
}