/* ==========================================================
   IPSUM ERP · Responsive global
   ÚNICA fuente de breakpoints del layout principal.
   ========================================================== */
.menu-toggle,.sidebar-backdrop{display:none}
.topbar-title{min-width:0}
.form-card{width:100%;max-width:1180px}
.form-card:has(.table-wrap),.form-card:has([id$="-lines"]),.form-card:has([id$="Items"]){max-width:none}
.form-grid>*{min-width:0}
.card,.table-wrap,.toolbar,.section-grid,.grid{min-width:0}
input,select,textarea{max-width:100%}
.table-wrap{-webkit-overflow-scrolling:touch}

@media(max-width:1100px){
  body{overflow-x:hidden}
  .app-shell{display:block;min-height:100dvh}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;height:100dvh;width:280px;
    transform:translateX(-105%);transition:transform .24s ease;
    box-shadow:0 18px 50px rgba(39,25,74,.18);z-index:50;margin:0
  }
  body.nav-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;border:0;background:rgba(29,24,43,.28);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:45}
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .main{margin-left:0;width:100%;min-height:100dvh;padding:0 22px 30px}
  .topbar{margin-left:-22px;margin-right:-22px;padding:12px 22px;gap:12px}
  .menu-toggle{display:inline-flex;flex:0 0 auto;width:44px;height:44px;padding:0;font-size:20px}
  .topbar-title{margin-right:auto}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-grid{grid-template-columns:1fr}
}

@media(max-width:780px){
  html{font-size:14px}
  body{min-width:0}
  .sidebar{width:min(82vw,292px)}
  .main{padding:0 14px 22px}
  .topbar{
    min-height:auto;margin:0 -14px 18px;padding:11px 14px;
    display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;
    position:relative;z-index:20
  }
  .topbar-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{grid-column:1/-1;width:100%;justify-content:flex-start;gap:7px}
  .topbar-actions .user-chip{order:3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:23px}
  .card{padding:16px;border-radius:16px}
  .form-card{max-width:none}
  .form-grid,.grid-4,.grid-3,.grid-2,.section-grid{grid-template-columns:1fr!important}
  input,select,textarea{font-size:16px}
  .toolbar{align-items:stretch}
  .toolbar>.search,.toolbar>form,.toolbar>.form-group{width:100%}
  .actions{display:grid;grid-template-columns:1fr}
  .actions .btn{width:100%}
  .table-wrap>table{min-width:680px}
  th,td{padding:11px 12px}
  .btn{min-height:42px}
  .login-wrap{grid-template-columns:1fr;padding:14px}
  .login-art{display:none}
  .login-card{padding:20px}
  .context-nav{margin-top:0;align-items:flex-start}
  .context-nav span{width:100%}

  .task{grid-template-columns:minmax(0,1fr) auto}
  .task:has(> .task-icon){grid-template-columns:38px minmax(0,1fr)}
  .task:has(> .task-icon):has(> :nth-child(3)){grid-template-columns:38px minmax(0,1fr)}
  .task:has(> .task-icon):has(> :nth-child(3))>:nth-child(3){grid-column:2;justify-self:start}
  .task form{justify-self:start}
  .task.history-item:has(> .visit-actions){grid-template-columns:1fr}
  .task.history-item>.badge{justify-self:start}
  .task.history-item>.visit-actions{grid-column:1;display:grid;grid-template-columns:1fr;gap:8px}

  .payment-mode{display:block}
  .segmented{display:grid;width:100%;margin-top:12px}
  .segmented span{text-align:center}
  .retention-entry{border:0;overflow:visible}
  .retention-entry table,.retention-entry tbody,.retention-entry tr,.retention-entry td{display:block;width:100%}
  .retention-entry thead{display:none}
  .retention-entry tr{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:#fff}
  .retention-entry td{border:0;padding:5px 0}
  .retention-entry td:first-child{padding-bottom:9px}
  .retention-entry input{min-width:0}
  .sale-flow-grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .topbar-actions .user-chip{display:none}
  .topbar-actions{display:grid;grid-template-columns:1fr 1fr}
  .topbar-actions .btn{min-width:0;width:100%}
  .main{padding-left:10px;padding-right:10px}
  .topbar{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .card{padding:14px}
  .table-wrap>table{min-width:620px}
}