/* ============================================================================
   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; }
/* KAI phone-only controls (hub sheet toggle, scrim, close). */
.kai-strip__hubbtn, .kai-hub-scrim, .kai-hub__close { 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; }

  /* ── Ocultar el sidebar de escritorio (lo reemplaza el drawer).
     NO usamos flex-direction:column: con el sidebar oculto, .main (flex:1)
     llena el ancho completo igual que en escritorio. Usar columna hacía que
     .main se encogiera a la mitad del ancho. ─────────────────────────────── */
  .sidebar { display: none !important; }
  .app.is-sidebar-rail .main { margin-left: 0 !important; }
  .main { width: 100% !important; }
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ── Botón hamburguesa (fijo arriba-izquierda) ─────────────────────────── */
  .m-hamb {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    position: fixed; top: calc(var(--vvt, 0px) + 9px + env(safe-area-inset-top)); 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 a pantalla completa: la app abre aquí en teléfono ─────────────────
     Chat de 1 columna del alto real de la pantalla (dvh sigue a la barra del
     navegador), conversación con scroll propio y la caja de texto fija abajo.
     El hub de conversaciones es una hoja deslizable desde la derecha. */
  body.kai-fullscreen { overflow: hidden !important; }
  body.kai-fullscreen .content { padding: 0 !important; }
  .kai-grid { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; }
  .content--ai > .kai-grid, .content--ai > .kai-grid.kai-grid--side {
    height: 100vh !important; height: 100dvh !important;
    padding: 0 !important; gap: 0 !important; grid-template-columns: 1fr !important;
  }
  .content--ai .kai-chat { border: 0; border-radius: 0; height: 100%; }
  body:has(.env-banner) .content--ai > .kai-grid { height: calc(100dvh - 26px) !important; }
  /* Pinned to the visible viewport (mobile.js keeps --vvh/--vvt in sync with
     the iOS keyboard), so the page itself never scrolls: header stays put and
     the input sits right on top of the keyboard. */
  html:has(body.kai-fullscreen), body.kai-fullscreen { overscroll-behavior: none; }
  body.kai-fullscreen .content--ai > .kai-grid {
    position: fixed; left: 0; right: 0; top: var(--vvt, 0px);
    height: var(--vvh, 100dvh) !important;
  }
  html.m-kb .kai-inputbar { padding-bottom: 8px; }

  .kai-strip { padding: 9px 10px 9px 60px; min-height: 58px; padding-top: calc(9px + env(safe-area-inset-top)); }
  .kai-strip__convname { max-width: none; font-size: 15px; }
  .kai-strip__export { display: none; }
  .kai-strip__hubbtn {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px; padding: 0; cursor: pointer;
    border: 1px solid var(--app-tint-4); background: var(--app-tint-2); color: var(--app-fg-2);
  }
  .kai-strip__hubbtn--new { border-color: rgba(244,121,32,.5); color: #F47920; background: rgba(244,121,32,.12); }
  .kai-strip__hubbtn:disabled { opacity: .45; }

  /* Idle status card is noise on a small screen; it shows only while KAI works. */
  .kai-kaihead:not(.is-busy) { display: none !important; }
  .kai-kaihead { padding: 8px 14px !important; gap: 10px !important; flex-wrap: wrap; }
  .kai-kaihead__face img { width: 32px !important; height: 32px !important; }
  .kai-kaihead__badge, .kai-kaihead__caps { display: none !important; }
  .kai-kaihead__nm { font-size: 14px; }
  .kai-kaihead__st { font-size: 12px; }
  .kai-kaihead__right { flex-wrap: wrap; gap: 6px; }

  .content--ai .kai-stream { padding: 16px 14px 12px; gap: 12px; }
  .kai-welcome__bubble { max-width: 100%; }
  .kai-msg { gap: 8px !important; }
  .kai-msg__avatar { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; }
  .kai-msg--you .kai-msg__bubble { max-width: 86% !important; }
  .kai-msg__body { min-width: 0; overflow-wrap: break-word; }
  /* Tables already sit in a scrolling .kai-table-wrap: keep cells on one line
     and swipe sideways instead of breaking words letter by letter. */
  .kai-msg__body th, .kai-msg__body td { white-space: nowrap; }
  .kai-jump { bottom: calc(92px + env(safe-area-inset-bottom)); }

  .kai-inputbar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--app-surface-2, #0f1826); }
  .kai-inputbar__inner { align-items: center; padding: 4px 5px 4px 6px; border-radius: 14px; gap: 4px; }
  .kai-input { font-size: 16px !important; padding: 9px 4px; max-height: 132px; }
  .kai-clip, .kai-send { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
  .kai-send { border-radius: 11px; }
  .kai-entregable { padding: 0 !important; width: 40px; height: 40px; justify-content: center; flex: 0 0 40px; }
  .kai-entregable span { display: none; }
  .kai-inputbar__hint { display: none; }
  .kai-inputbar__hint:has(.kai-inputbar__hint--on) { display: block; font-size: 11px; margin-top: 6px; }

  .kai-hub-scrim { display: block; position: fixed; inset: 0; z-index: 1003; background: rgba(0,0,0,.55); animation: kaiSheetFade .18s ease; }
  .content--ai .kai-grid .kai-sidebar.kai-hub {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1004;
    width: 88vw; max-width: 360px; height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
    border-radius: 16px 0 0 16px; border-right: 0; box-shadow: -12px 0 40px rgba(0,0,0,.5);
    animation: kaiSheetIn .22s ease;
  }
  .kai-hub__close {
    display: grid; place-items: center; margin-left: auto; width: 36px; height: 36px;
    border-radius: 9px; border: 1px solid var(--app-tint-4); background: transparent;
    color: var(--app-fg-2); font-size: 15px; cursor: pointer;
  }
  .kai-conv { min-height: 52px; }

  /* KAI versión B: one header line, drawer rises from the bottom as a sheet */
  .kai-bar { height: auto; min-height: 58px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 60px; gap: 4px; }
  .kai-bar__desk { display: none !important; }
  .kai-bar__phone { display: inline-grid; width: 40px; height: 40px; }
  .kai-bar__sp { display: none; }
  .kai-bar__switch { flex: 1; min-width: 0; }
  .kai-bar__title { max-width: 100%; }
  .kai-bar__name { font-size: 15px; }
  .kai-pill { padding: 0 8px 0 3px; height: 30px; }
  .kai-pill__st { display: none; }
  .kai-bar.is-busy .kai-pill__st { display: inline; max-width: 22vw; }
  .kai-quick { position: fixed; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top)); width: auto; max-width: none; }
  .kai-drawer-scrim { position: fixed; z-index: 1003; background: rgba(0,0,0,.55); }
  .kai-drawer {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 1004;
    width: 100%; max-width: none; height: 88dvh; border-left: 0; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(104%);
  }
  .kai-drawer.is-open { transform: none; }
  .kai-row__ib { opacity: 1; min-width: 32px; min-height: 32px; }
  .kai-row__t { font-size: 15px; }
  .kai-hello { margin-top: 4vh; }
  .kai-hello__t { font-size: 24px; }
  .kai-hello__sugg { grid-template-columns: 1fr; }
  .kai-grid--b .kai-inputbar { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--app-surface-2); border-top: 1px solid var(--app-tint-3); }
  .kai-grid--b .kai-inputbar__inner.kai-compose { padding: 10px 6px 6px 12px; border-radius: 14px; }
  .kai-grid--b .kai-compose .kai-input { min-height: 26px; max-height: 132px; }
  .kai-compose__hint, .kai-compose__big { display: none; }
  .kai-conv__pin, .kai-conv__del { min-width: 32px; min-height: 32px; opacity: 1 !important; }
  .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 ancho pero SIN salirse del viewport (no overflow) */
  .kai-panel { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }

  /* Aviso de nueva versión: barra abajo, arriba de la caja de KAI, sin tapar el encabezado */
  .version-toast { top: auto !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important; justify-content: space-between; }

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

@keyframes kaiSheetIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes kaiSheetFade { from { opacity: 0; } to { opacity: 1; } }

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