/* R12_R22 · Guardia móvil tipo app/PWA.
   Solo controla viewport móvil: sin zoom accidental ni desplazamiento global lateral. */
@media (max-width:900px){
  html,
  body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
    -webkit-text-size-adjust:100%;
    touch-action:pan-x pan-y;
  }

  body{
    min-height:100dvh;
    position:relative;
    margin:0;
  }

  #auth-shell,
  #app-shell,
  .app-main,
  .topbar,
  .page-root{
    box-sizing:border-box;
    width:100%;
    max-width:100vw;
    min-width:0;
  }

  #auth-shell,
  #app-shell,
  .app-main,
  .page-root{
    overflow-x:clip;
  }

  /* Evita que contenido ancho empuje el viewport completo. */
  .page-root>*,
  .topbar>*,
  .card,
  .modal-card,
  .wizard-card,
  .connector-setup,
  .connection-row,
  .form-stack,
  .form-grid{
    min-width:0;
    max-width:100%;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100%;
  }

  /* iOS no hace auto-zoom al enfocar campos pequeños. */
  input,
  select,
  textarea{
    font-size:16px!important;
  }

  /* Los componentes que deliberadamente desplazan contenido conservan su scroll local. */
  .family-tabs,
  .ai-usage-table-wrap,
  .dodonode-canvas,
  .dodo-suggestions{
    max-width:100%;
    overscroll-behavior-x:contain;
  }
}

@supports not (overflow:clip){
  @media (max-width:900px){
    #auth-shell,
    #app-shell,
    .app-main,
    .page-root{overflow-x:hidden}
  }
}