/* ===========================================================================
   Adaptación a tablet y móvil.

   Va en un archivo aparte y se carga EL ÚLTIMO a propósito: así estas reglas
   ganan por orden sin necesidad de !important ni de subir la especificidad, y
   todo lo móvil se lee de un tirón en vez de repartido por cuatro hojas.

   Solo CSS salvo dos detalles: el cajón de navegación y el de Flow AI necesitan
   una clase que alterne el JS (ver topbar.js). Las transiciones usan transform
   —que compone la GPU— para que en un teléfono modesto no haya tirones.

   Dos cortes:
     · ≤ 860px  el rail y la barra lateral no caben junto al contenido
     · ≤ 560px  teléfono: se recorta también la barra superior
   =========================================================================== */

/* ===========================================================================
   0. Reglas que valen para cualquier pantalla táctil pequeña
   =========================================================================== */
@media (max-width: 860px) {

  /* --- El zoom automático de iOS ----------------------------------------
     Safari en iPhone AMPLÍA la página al enfocar un campo cuya letra mide
     menos de 16px, y al ampliar deja la página desplazada, con una franja
     blanca al costado y la barra superior cortada. No es un fallo de la
     maqueta: es el navegador. La única forma de evitarlo es que los campos
     midan 16px o más. */
  .input, .textarea, select, select.input, input, textarea,
  /* Estos llevan su propio font-size con más peso, así que hay que nombrarlos
     uno a uno: con la misma especificidad, gana el que va después. */
  .setup-field .input, .setup-field select.input,
  .ai-input, .ai-side-search-input, .search-input, .panel-title {
    font-size: 16px;
  }
  /* Estos ya eran más grandes; conservan su tamaño. */
  .setup-otp, .tfa-code { font-size: 19px; }
  .panel-title { font-size: 19px; }

  /* --- Nada de deslizar la página a los lados ---------------------------
     Con el shell fijo no debería haber scroll horizontal nunca; esto es la
     red de seguridad para que un elemento suelto no permita "salirse" de la
     pantalla y dejar a la vista el fondo en blanco. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Y tampoco dentro de la app. Ojo: los contenedores con scroll vertical
     (.view, el panel de detalle, la barra lateral) NO pueden tener el eje X en
     `visible` — el CSS lo convierte en `auto` automáticamente. Resultado: basta
     un elemento un pixel más ancho para que toda la vista se deslice de lado
     (se notaba en la documentación). Aquí se cierra explícitamente; lo que sí
     debe desplazarse (tablas, kanban, filtros) lleva su propio contenedor. */
  .view, .panel-scroll, .sidebar-scroll, .ai-full-scroll, .settings-pane {
    overflow-x: hidden;
    overscroll-behavior: contain;   /* el scroll no se contagia a lo de detrás */
  }

  /* Que lo largo se parta en vez de ensanchar: nombres de constantes, rutas de
     la API, URLs… en la documentación hay mucho de eso. */
  .docs-pre, .docs-table td, .docs-note, .docs-p,
  .setup-hint, .panel-desc, .comment-body { overflow-wrap: anywhere; }

  /* --- Menús desplegables acotados a la pantalla ------------------------
     El posicionador (core/dropdown.js) sabe pegarlos al borde, pero si el
     panel es MÁS ANCHO que la pantalla no hay dónde ponerlo y se corta por
     los dos lados. Con un techo de ancho, el cálculo vuelve a funcionar. */
  .dropdown-panel {
    max-width: calc(100vw - 16px);
    min-width: 0;
  }
  .dropdown-panel .menu-item { white-space: normal; }
}

/* ===========================================================================
   1. Tablet y móvil (≤ 860px): el shell cambia de forma
   =========================================================================== */
@media (max-width: 860px) {

  /* --- Barra inferior de navegación -------------------------------------
     El rail de iconos pasa de columna lateral a barra fija abajo (el patrón
     que espera cualquiera en un teléfono, y donde llega el pulgar). Se
     reutiliza el MISMO elemento: cero JS y cero peso extra. */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 80;
    width: auto; height: auto;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
  }
  .rail-item {
    width: auto; flex: 1;
    max-width: 88px;
    padding: 6px 0 4px;
    font-size: 10px;
    gap: 2px;
  }
  .rail-item span { display: block; }   /* el corte de 900px los ocultaba */
  .rail-sep { display: none; }

  /* El contenido deja hueco para la barra; el scroll interno de cada vista
     también, para que la última fila no quede tapada. */
  .app { padding-bottom: 58px; }

  /* --- La barra lateral pasa a ser un cajón ------------------------------
     Se superpone en vez de robar ancho. La abre el mismo botón del crumbbar
     (topbar.js detecta el ancho y alterna .drawer-open en lugar de .collapsed). */
  .sidebar,
  .sidebar.collapsed {
    display: flex;
    position: fixed;
    top: 50px; bottom: 58px; left: 0;
    width: min(290px, 84vw);
    z-index: 82;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.drawer-open { transform: none; }

  /* Esquinas redondeadas por el lado que queda a la vista: un rectángulo de
     borde a borde se ve duro pegado a la pantalla. */
  .sidebar, .sidebar.collapsed, .ai-side {
    border-radius: 0 18px 18px 0;
    border-right: 1px solid var(--border);
    overflow: hidden;
  }
  /* El scroll interno vuelve a su sitio (el overflow:hidden de arriba es para
     que el contenido respete el redondeo). */
  .sidebar-scroll, .ai-side-body { border-radius: inherit; }

  .nav-backdrop {
    position: fixed; inset: 0;
    z-index: 81;
    background: rgba(10, 14, 20, .4);
    animation: nav-backdrop-in .18s ease-out;
  }
  @keyframes nav-backdrop-in { from { opacity: 0; } }

  /* --- Barra superior compacta ------------------------------------------ */
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar-search { max-width: none; margin: 0; }
  .topbar-search kbd { display: none; }
  .topbar-right .btn { display: none; }        /* "Get started" */
  /* Solo el de la barra superior: .ws-name se reutiliza en el menú de espacios. */
  .ws-chip .ws-name { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Respiración de las vistas ---------------------------------------- */
  .crumbbar { padding: 6px 12px; gap: 8px; }
  /* El breadcrumb se recorta con puntos suspensivos en vez de empujar la fila:
     "Elementos de trabajo" no cabe en una pantalla de 320px. */
  .crumb { overflow: hidden; }
  .crumb .row { min-width: 0; overflow: hidden; }
  .crumb b { overflow: hidden; text-overflow: ellipsis; }
  .view-head { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .view-body { padding: 16px 14px 24px; }
  .items-body { padding: 8px 12px 24px; }
  /* Los filtros en UNA fila deslizable: apilados ocupaban tres y empujaban la
     lista fuera de la primera pantalla. */
  .filter-bar {
    padding: 10px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex: none; }

  /* --- Panel de detalle a pantalla completa ------------------------------ */
  .item-panel { width: 100%; border-left: none; }
  .panel-scroll { padding: 16px 16px 40px; }
  .panel-prop-label { width: 92px; }

  /* --- Kanban: una columna por pantalla, con enganche al deslizar -------- */
  .kanban {
    padding: 12px 14px 24px;
    gap: 10px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    min-width: 84vw; width: 84vw;
    scroll-snap-align: start;
    max-height: none;
  }

  /* --- Flow AI: su barra lateral también es un cajón --------------------- */
  .ai-side {
    position: fixed;
    top: 50px; bottom: 58px; left: 0;
    z-index: 82;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .ai-side.drawer-open { transform: none; }
  .ai-full-scroll { padding-left: 14px; padding-right: 14px; }
  .ai-full-greeting { font-size: 25px; }

  /* --- Pestañas: deslizables, pero el gesto se queda dentro --------------
     La fila se recorre de lado (caben cinco pestañas y en 320px no entran
     todas), y `overscroll-behavior` corta el "scroll chaining": al llegar al
     extremo, el arrastre NO se propaga al contenedor de al lado, así que la
     página no se mueve de su marco. */
  .tabs {
    padding: 0 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 12px; white-space: nowrap; flex: none; }

  /* --- Stickies: en un teléfono el lienzo libre no sirve -----------------
     Las notas guardan una posición absoluta puesta desde el escritorio, así que
     en 390px la mitad caen fuera de la pantalla. Aquí se apilan en una columna
     (las coordenadas se ignoran, no se pierden: al volver al PC siguen ahí). */
  .stickies-canvas {
    min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .stickies-canvas .sticky-card { position: static; width: auto; }
  .sticky-handle { cursor: default; }

  /* La burbuja flotante sobra: la barra inferior ya lleva a Flow AI, y encima
     tapaba contenido en una pantalla pequeña. */
  .ai-fab { display: none; }

  /* --- Rejillas: una sola columna cuando el mínimo ya no cabe ------------ */
  .projects-grid,
  .specs-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

  /* --- Tablas: que scrollee la tabla, nunca la página -------------------- */
  .docs-table-wrap,
  .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .docs-table { min-width: 480px; }
}

/* ===========================================================================
   2. Teléfono (≤ 560px): se recorta lo accesorio
   =========================================================================== */
@media (max-width: 560px) {

  /* En la barra superior solo queda lo imprescindible: espacio del workspace,
     buscar y tu avatar. Bandeja y ayuda viven en el menú del avatar. */
  .ws-chip .ws-name { display: none; }
  .topbar-search { flex: 1; padding: 6px 10px; justify-content: center; }
  .topbar-search-label { display: none; }
  .topbar-right .icon-btn:not(:last-child) { display: none; }

  /* Modales anclados abajo: se alcanzan con el pulgar y dejan ver el contexto. */
  .modal-backdrop { padding: 0; place-items: end stretch; }
  .modal {
    width: 100%;
    max-width: 100vw;   /* techo duro: ningún contenido puede estirarlo más */
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    border-left: none; border-right: none;
    animation: modal-up .2s ease-out;
  }
  @keyframes modal-up { from { transform: translateY(24px); } }
  .modal-body { padding: 16px; }

  /* Los formularios de dos columnas (p. ej. «Identificador» + «Lead» al crear
     un proyecto) no caben en 390px y estiraban el modal más allá de la
     pantalla. En el teléfono van uno debajo del otro. */
  .field-row, .setup-row { flex-direction: column; gap: 0; }
  .field-row .field, .setup-row .setup-field { width: 100%; }

  /* Configuración: la navegación en fila arriba (ya venía de 640px) */
  .settings-nav { gap: 4px; }
  .settings-pane { padding-top: 4px; }

  /* Titulares y espaciados a escala de teléfono */
  .home-greeting { margin: 18px 0 24px; }
  .home-greeting h1 { font-size: 23px; }
  .view-body { padding: 14px 12px 24px; }
  .section-title { margin: 22px 0 10px; }
  .overview-banner { height: 112px; }
  .kanban-col { min-width: 88vw; width: 88vw; }

  /* Códigos de respaldo del 2FA: dos por fila entran justas */
  .tfa-codes { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .tfa-qr img { width: 160px; height: 160px; }
  .tfa-row { flex-direction: column; align-items: stretch; }
  .tfa-secret { font-size: 12.5px; letter-spacing: .04em; }
}

/* ===========================================================================
   3. Táctil: sin hover no hay "aparece al pasar el cursor"
   ===========================================================================
   Varias acciones (el lápiz de una sección, el menú de un proyecto) solo se
   muestran con :hover. En una pantalla táctil eso las vuelve inalcanzables,
   así que ahí van siempre visibles. */
@media (hover: none) {
  .side-section .icon-btn { visibility: visible; }
  .list-row .icon-btn,
  .kanban-card .icon-btn { opacity: 1; }

  /* Zonas de toque de al menos 40px: lo que recomienda cualquier guía táctil. */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .rail-item { min-height: 46px; }
  .side-item, .side-project-head { padding-top: 9px; padding-bottom: 9px; }
}

/* ===========================================================================
   4. Flow AI: botón para abrir el cajón de conversaciones
   ===========================================================================
   En escritorio la barra está siempre visible y este botón sobra. */
.ai-side-open { display: none; }

@media (max-width: 860px) {
  .ai-side-open {
    display: grid;
    position: absolute; top: 8px; left: 10px;
    z-index: 6;
    background: var(--bg);
  }
  .ai-shell { position: relative; }
  /* Deja sitio al botón para que no pise el saludo ni el primer mensaje. */
  .ai-full-scroll { padding-top: 52px; }
}

/* ===========================================================================
   5. Acceso, registro, onboarding e instalador en el teléfono
   ===========================================================================
   El "split canvas" (panel oscuro con la cordillera + formulario) se convierte
   en una banda superior fina y el formulario debajo. A 900px ya se apilaban,
   pero la banda seguía comiendo un cuarto de la pantalla con tres ventajas
   apretadas que ahí no aportan nada. */
@media (max-width: 640px) {
  .setup-aside-inner { padding: 14px 18px; gap: 0; }
  .setup-perks { display: none; }          /* ventajas: en un teléfono estorban */
  .setup-word-sub { font-size: 12px; }
  .setup-logo { width: 38px; height: 38px; font-size: 18px; }

  /* .setup-body va DENTRO de .setup-main: si ambos ponen padding lateral, se
     suman y en una pantalla de 320px se comen 72px de ancho útil. El margen
     lateral lo pone solo el contenedor de fuera. */
  .setup-main { padding: 26px 18px 40px; }
  .setup-body { padding-left: 0; padding-right: 0; }
  .setup-head h1 { font-size: 25px; }
  .setup-head p { font-size: 14.5px; }
  .setup-card { padding: 16px; }

  /* Acciones a lo ancho y en el orden natural del pulgar: la principal abajo. */
  .setup-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
  }
  .setup-btn { width: 100%; justify-content: center; }
  .setup-link { text-align: center; padding: 6px 0; }

  /* El stepper del instalador: círculos algo más chicos para que quepan los 7. */
  .setup-steps { gap: 0; }
  .setup-step-mark { width: 26px; height: 26px; font-size: 12px; }

  /* Códigos de respaldo y QR del 2FA cuando se activa desde el teléfono */
  .tfa-qr { margin-left: auto; margin-right: auto; }
}