/* NC AI Business · Mobile layer
   Solo presentación responsive. No cambia lógica, autenticación, bot, Meta ni datos. */
@media(max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{min-width:0}
  img,video,canvas,svg{max-width:100%;height:auto}

  /* PORTADA / ACCESO: el login siempre queda visible en teléfono. */
  .auth-shell .public-head{
    position:sticky!important;top:0;z-index:120;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;padding:12px 14px!important;
    background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px);
    border-bottom:1px solid #e7e7e7!important;
  }
  .auth-shell .public-head .brand{min-width:0;gap:8px;font-size:1rem;line-height:1.05}
  .auth-shell .public-head .brand img{width:38px;height:38px;flex:0 0 38px}
  .auth-shell .public-head .brand-sub{font-size:.48rem;letter-spacing:.20em;margin-top:3px}
  .auth-shell .public-head>.text-link{
    display:inline-flex!important;visibility:visible!important;opacity:1!important;
    align-items:center;justify-content:center;flex:0 0 auto;
    min-height:44px;padding:10px 13px;border-radius:11px;
    background:#111!important;color:#fff!important;border:1px solid #111;
    font-size:.83rem!important;font-weight:800!important;white-space:nowrap;
  }
  .auth-shell .public-main{width:100%;max-width:100%;padding:22px 14px 32px!important}
  .auth-shell .hero,.auth-shell .auth-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  .auth-shell .hero{padding:0!important}
  .auth-shell .hero-copy,.auth-shell .hero-panel,.auth-shell .auth-card{min-width:0;width:100%}
  .auth-shell .hero h1{font-size:clamp(2.65rem,14vw,3.7rem)!important;line-height:1.02;margin:14px 0 20px}
  .auth-shell .hero-copy p{font-size:1rem;line-height:1.55}
  .auth-shell .hero-copy>.button{width:100%;min-height:48px}
  .auth-shell .secondary-link{text-align:center;padding:11px 0}
  .auth-shell .hero-panel{padding:22px!important;border-radius:16px}
  .auth-shell .editorial-number{font-size:clamp(4.4rem,24vw,6rem)}
  .auth-shell .hero-panel h2{font-size:1.55rem!important}
  .auth-shell .public-footer{padding:18px 14px!important;flex-direction:column;align-items:flex-start!important}
  .auth-shell .auth-grid{max-width:520px;margin:0 auto}
  .auth-shell .auth-intro{display:none!important}
  .auth-shell .auth-card{padding:20px!important;border-radius:16px}
  .auth-shell .auth-card h2{font-size:1.45rem}
  .auth-shell .auth-card .button{width:100%;min-height:48px}
  .auth-shell .auth-card .small{line-height:1.7}

  /* APP: navegación móvil horizontal sin perder ninguna sección. */
  .app-shell .sidebar{
    position:sticky!important;top:0!important;left:auto!important;z-index:100!important;
    width:100%!important;height:auto!important;max-height:none!important;
    padding:10px 12px 8px!important;display:block!important;
    background:rgba(255,255,255,.98)!important;color:#111!important;
    backdrop-filter:blur(16px);border-bottom:1px solid #e8e9ef;
    overflow:visible!important;
  }
  .app-shell .sidebar .brand{color:#111!important;font-size:.92rem;gap:8px;padding:0 2px 7px}
  .app-shell .sidebar .brand img{width:34px;height:34px}
  .app-shell .sidebar .brand-sub{font-size:.46rem;letter-spacing:.19em}
  .app-shell .sidebar .workspace{display:none!important}
  .app-shell .sidebar nav{
    display:flex!important;flex-wrap:nowrap!important;width:100%!important;
    max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x proximity;gap:6px;padding:3px 0 7px!important;margin:0!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .app-shell .sidebar nav::-webkit-scrollbar{display:none}
  .app-shell .nav-link{
    display:inline-flex!important;align-items:center;justify-content:center;
    flex:0 0 auto;scroll-snap-align:start;min-height:42px;
    padding:9px 12px!important;margin:0!important;border-radius:10px!important;
    white-space:nowrap;font-size:.78rem!important;color:#555!important;
    border:1px solid #e8e8ee;background:#fff!important;
  }
  .app-shell .nav-link.selected{background:#f1f0ff!important;color:#392fd4!important;border-color:#dcd9ff!important}
  .app-shell .nav-icon{display:none!important}
  .app-shell .sidebar-bottom{display:none!important}
  .app-shell .main{margin:0!important;width:100%!important;max-width:100%!important;padding:16px 12px 48px!important}

  /* Encabezados, tarjetas y métricas. */
  .app-shell .page-head{display:flex!important;align-items:flex-start!important;gap:6px!important;flex-direction:column!important;margin-bottom:16px!important}
  .app-shell .page-head h1{font-size:1.85rem!important;line-height:1.08;overflow-wrap:anywhere}
  .app-shell .page-head .date{white-space:normal!important;font-size:10px!important;line-height:1.35}
  .app-shell .main .card,.app-shell .main .metric{padding:16px!important;border-radius:15px!important;min-width:0!important}
  .app-shell .welcome-banner{padding:20px!important;border-radius:16px!important;display:block!important}
  .app-shell .welcome-banner h2{font-size:1.45rem!important}
  .app-shell .welcome-banner .button{width:100%;margin-top:16px}
  .app-shell .metrics,.app-shell .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .app-shell .metric strong{font-size:1.5rem!important;overflow-wrap:anywhere}
  .columns,.work-grid,.account-grid,.dashboard-layout,.client-bottom,.industry-grid,.form-grid{grid-template-columns:minmax(0,1fr)!important}
  .section-head{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .section-head>*{min-width:0}
  .section-head .button,.section-head>a.button{width:100%}
  .list-row{align-items:flex-start!important;flex-wrap:wrap!important;gap:10px!important}
  .list-row>*,.executive-row>*{min-width:0;max-width:100%}
  .button{min-height:44px;max-width:100%;white-space:normal;text-align:center}
  .card>.button,.card>form>.button{max-width:100%}
  details,summary{max-width:100%;overflow-wrap:anywhere}

  /* Formularios: sin zoom de iPhone y sin controles que se salen. */
  form,label{min-width:0;max-width:100%}
  input,select,textarea{font-size:16px!important;min-height:44px;max-width:100%!important}
  textarea{min-height:90px}
  .inline-form{width:100%!important;display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:10px!important}
  .inline-form>*{flex:1 1 150px;min-width:0!important;max-width:100%!important}
  .inline-form .button,.inline-form button{flex:1 1 100%;width:100%}
  .check{align-items:flex-start!important}
  .check input{min-height:0!important;margin-top:2px!important;flex:0 0 auto}

  /* Tablas se deslizan; el resto nunca ensancha la página. */
  .table-wrap{width:calc(100% + 4px)!important;max-width:calc(100% + 4px)!important;margin-left:-2px!important;margin-right:-2px!important;padding-bottom:6px;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}
  table{max-width:none}
  td,th{white-space:normal;overflow-wrap:anywhere}
  code,pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}

  /* Conversaciones / modales / fotos. */
  .chat-shell,.conversation-layout,.chat,.test-chat{min-width:0!important;max-width:100%!important}
  .bubble,.bot-bubble,.user-bubble{max-width:92%!important;overflow-wrap:anywhere}
  .modal{padding:10px!important;align-items:flex-end!important}
  .modal-card{width:100%!important;max-width:100%!important;max-height:92vh!important;border-radius:18px 18px 8px 8px!important;padding:18px!important}
  .photo-manager-grid{grid-template-columns:1fr!important}
  .photo-manager-preview,.photo-manager-empty{width:100%!important;height:180px!important}
  .photo-actions{align-items:stretch!important}
  .photo-actions>*{width:100%}
  .photo-pick-button{width:100%!important}

  /* Canales y bloques operativos: botones tocables, sin overflow. */
  .channel-card,.connection-card,.account-overview,.account-person,.profile-industry-link{min-width:0;max-width:100%}
  .channel-actions,.setup-actions,.hero-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%}
  .channel-actions .button,.setup-actions .button,.hero-actions .button{width:100%}
  .cred-row{flex-wrap:wrap!important;gap:10px!important}
}

@media(max-width:480px){
  .app-shell .metrics,.app-shell .dashboard-kpis{grid-template-columns:minmax(0,1fr)!important}
  .auth-shell .public-head{padding:10px 11px!important}
  .auth-shell .public-head .brand img{width:34px;height:34px;flex-basis:34px}
  .auth-shell .public-head .brand{font-size:.9rem}
  .auth-shell .public-head>.text-link{min-height:42px;padding:9px 11px;font-size:.78rem!important}
  .auth-shell .public-main{padding:18px 11px 28px!important}
  .auth-shell .hero h1{font-size:clamp(2.35rem,13vw,3.1rem)!important}
  .app-shell .main{padding-left:10px!important;padding-right:10px!important}
  .app-shell .main .card,.app-shell .main .metric{padding:14px!important}
  .app-shell .page-head h1{font-size:1.65rem!important}
}

@media(max-width:360px){
  .auth-shell .public-head .brand span{font-size:.82rem}
  .auth-shell .public-head>.text-link{padding:8px 9px;font-size:.72rem!important}
  .app-shell .nav-link{padding:8px 10px!important;font-size:.74rem!important}
}