/* AUMACA Responsive Contract 2026-10-01
   Global guardrails: no page-level horizontal scroll; local overflow only. */
html,body{max-width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box;min-width:0}
[hidden]{display:none!important}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code,.mono{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
p,li,td,th,label,strong,span,a,h1,h2,h3,h4{overflow-wrap:anywhere;word-break:normal}
.app-shell,.contenido,.main,.card,.cb,.ch,.grid,.frow,.toolbar,.workspace-subnav-inner{min-width:0;max-width:100%}
.main{width:100%!important;overflow-x:clip}
.twrap,.table-wrap,[data-table-wrap]{max-width:100%;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
table{max-width:none}
.workspace-tabs,.tabs,.tab-row,[role="tablist"]{max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}
.modal,.dialog,.lp-modal,.command-palette,[role="dialog"]{max-width:min(1180px,calc(100vw - 32px))!important;max-height:calc(100dvh - 32px)!important}
input,select,textarea,button{max-width:100%}
.frow{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 1280 */
@media(max-width:1280px){
  .main{padding-left:18px!important;padding-right:18px!important}
  .grid.g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top-search-action kbd{display:none}
}
/* 1100 */
@media(max-width:1100px){
  .grid.g4,.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{padding-left:14px!important;padding-right:14px!important;gap:10px}
  .top-actions{gap:4px!important}
  .top-search-action span{display:none}
  .workspace-subnav-inner{padding-left:14px!important;padding-right:14px!important}
}
/* 960: sidebar becomes overlay/drawer; main uses full width */
@media(max-width:960px){
  .sidebar{transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 35px rgba(18,48,78,.16)!important}
  .sidebar.open,.sidebar.is-open,.sidebar.mobile-open,body.nav-open .sidebar,.app-shell.nav-open .sidebar{transform:translateX(0)}
  .contenido{margin-left:0!important;width:100%!important}
  .menu-mobile{display:inline-flex!important}
  .page-heading strong{font-size:15px!important}
  .main{padding:14px 14px 40px!important}
}
/* 760 */
@media(max-width:760px){
  .frow,.grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr!important}
  .topbar{height:auto!important;min-height:58px;padding:8px 10px!important}
  .page-heading small{display:none}
  .top-actions .lang{font-size:11px}
  .workspace-subnav{top:58px!important}
  .workspace-subnav-title{display:none!important}
  .workspace-subnav-inner{padding:6px 8px!important}
  .card .ch{align-items:flex-start;gap:8px;flex-wrap:wrap}
  .toolbar{align-items:stretch}
  .toolbar>.btn,.toolbar>form,.toolbar>.fg{max-width:100%}
  .modal,.dialog,.command-palette,[role="dialog"]{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
}
/* 430 */
@media(max-width:430px){
  .main{padding:10px 8px 30px!important}
  .topbar{padding:7px 8px!important}
  .top-search-action{display:none!important}
  .top-actions{margin-left:auto}
  .top-profile-action{width:32px!important;height:32px!important}
  .workspace-tabs a{padding:7px 8px!important;font-size:11px!important}
  .card,.hero-banner,.mail-admin-hero{border-radius:10px!important}
  .card .cb{padding:11px!important}
  .card .ch{padding:10px 11px!important}
  .btn{white-space:normal;text-align:center}
}

/* Work-surface standard: forms and management dialogs should feel like pages, not tiny popups. */
@media(min-width:761px){
  .modal:not(.compact-modal),.dialog:not(.compact-modal),[role="dialog"]:not(.compact-modal){width:min(960px,calc(100vw - 40px))}
  .modal form,.dialog form,[role="dialog"] form{max-width:100%}
}
/* Flexible text/form controls must never force page width. */
fieldset,legend,form,.fg,.frow,.toolbar,.ch,.cb{min-width:0;max-width:100%}
textarea{resize:vertical}
select,input,textarea{min-width:0}
/* Local scroll only where content is inherently tabular or tab-like. */
.twrap table,.table-wrap table,[data-table-wrap] table{width:max-content;min-width:100%}