/* Vista móvil contenida — 2026.08.10 */
html,body{max-width:100%;overflow-x:hidden}
.app{width:100%;min-width:0;max-width:100%}
.topbar,.main,#view{min-width:0;max-width:100%}

@media(max-width:900px){
  html,body{width:100%;max-width:100vw;overflow-x:hidden!important}
  .app,html[data-layout="horizontal"] .app{width:100%;max-width:100vw;min-width:0;overflow-x:hidden;grid-template-columns:minmax(0,1fr)!important}
  .topbar{width:100%;max-width:100vw;min-width:0;overflow:hidden}
  .brand-logo{min-width:0;flex:0 1 135px}
  #quick-new{white-space:nowrap;flex:0 0 auto}
  .main,html[data-layout="horizontal"] .main{width:100%;max-width:100vw;min-width:0;overflow-x:hidden;padding:12px}
  #view,.page-head,.kpis,.dashboard-grid,.dashboard-grid>*,.panel,.catalog-admin-layout,.config-panel{width:100%;max-width:100%;min-width:0}
  .page-head{overflow:hidden}
  .page-head h1,.page-head p{overflow-wrap:anywhere}
  .dashboard-grid{grid-template-columns:minmax(0,1fr)!important}
  .dashboard-grid>.panel{overflow:hidden}
  .panel-title{min-width:0;gap:8px;flex-wrap:wrap}
  .panel-title>div{min-width:0}
  .pipeline{display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:min(82vw,330px);width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:hidden;padding:1px 1px 10px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .stage{width:auto;min-width:0;max-width:100%;scroll-snap-align:start}
  .deal{min-width:0;max-width:100%;overflow:hidden}
  .deal b,.deal p,.deal-team-btn{max-width:100%;overflow-wrap:anywhere}
  .bar-row{grid-template-columns:minmax(78px,.8fr) minmax(100px,1.4fr) 26px;min-width:0}
  .bar-row>*{min-width:0}
  .sidebar{max-width:100vw}
  html[data-layout="horizontal"] .sidebar{left:0!important;width:100%!important;max-width:100vw!important;min-width:0;overflow-x:auto!important;overflow-y:hidden}
  html[data-layout="horizontal"] .sidebar nav{width:max-content;min-width:max-content;max-width:none}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto}
  img,svg,canvas{max-width:100%}
  .environment-banner{width:100%;max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:620px){
  .topbar{display:grid;grid-template-columns:40px minmax(68px,1fr) auto 40px 40px;gap:5px;padding:7px 8px}
  .topbar .mobile-only{display:block}
  .brand-logo{width:100%;max-width:108px;height:42px;justify-self:start}
  #quick-new{max-width:145px;padding:9px 8px;font-size:10px;overflow:hidden;text-overflow:ellipsis}
  .topbar .icon-btn{min-width:38px;padding:9px 7px}
  .main,html[data-layout="horizontal"] .main{padding:9px}
  .environment-banner{margin-bottom:11px;padding:9px 10px}
  .page-head{gap:10px;margin-bottom:12px}
  .page-head h1{font-size:23px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px}
  .kpi{min-width:0;padding:10px}
  .kpi strong{font-size:19px;overflow-wrap:anywhere}
  .kpi span,.kpi small{font-size:10px;overflow-wrap:anywhere}
  .panel{padding:11px}
  .pipeline{grid-auto-columns:calc(100vw - 40px)}
  .stage{min-height:220px;padding:8px}
  .deal{padding:9px}
  .deal-team-btn{min-height:38px}
  .bar-row{grid-template-columns:minmax(70px,.75fr) minmax(90px,1.25fr) 22px;gap:6px;font-size:10px}
  .actions{width:100%}
  .actions>*{flex:1 1 135px}
  .modal-backdrop{padding:7px}
  .modal{width:100%;max-width:100%;max-height:95vh;border-radius:9px}
  .modal-head,.modal-foot,.modal-body{padding:11px}
  .modal-foot{flex-wrap:wrap}
  .modal-foot>*{flex:1 1 130px}
  .toast{left:8px;right:8px;bottom:8px;max-width:none}
}

@media(max-width:390px){
  .topbar{grid-template-columns:38px minmax(55px,1fr) auto 38px 38px}
  .brand-logo{max-width:82px}
  #quick-new{max-width:118px;font-size:9px}
  .pipeline{grid-auto-columns:calc(100vw - 34px)}
}