/* DICAMAT v2.4 — mobile UX (phones ~360–430px). Desktop unchanged above 850px. */

.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;margin:0 8px 0 0;border-radius:8px;background:var(--navy);color:#fff;border:0;flex-shrink:0}
.nav-toggle-bars{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px}
.nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
.nav-backdrop{display:none}
.side-nav{display:contents}
.top{gap:8px}
.top h1{flex:1;min-width:0}
.top-user{white-space:nowrap}

/* Product filters (base; cost-discounts may also define) */
.product-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:9px;margin:0 0 10px}
.bulk-card{width:min(720px,98vw)}

@media (max-width:850px){
  .shell{grid-template-columns:1fr;min-height:100dvh}
  .nav-toggle{display:inline-flex}
  .nav-backdrop{display:block;position:fixed;inset:0;background:#10182088;z-index:35;border:0;padding:0;margin:0;cursor:pointer}
  .nav-backdrop[hidden]{display:none!important}
  .side{
    position:fixed!important;
    left:0;top:0;bottom:0;
    width:min(288px,86vw);
    height:100dvh!important;
    max-height:100dvh;
    z-index:40;
    transform:translateX(-105%);
    transition:transform .2s ease;
    display:flex!important;
    flex-direction:column;
    overflow:auto;
    padding:16px 12px 24px!important;
    box-shadow:none;
  }
  body.nav-open .side{transform:translateX(0);box-shadow:8px 0 28px #07172755}
  body.nav-open{overflow:hidden}
  .side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
  .side .brand{min-width:0;padding:4px 8px 16px!important}
  .side .brand small{white-space:normal}
  .side button{
    width:100%!important;
    white-space:normal!important;
    text-align:left;
    min-height:44px;
    padding:12px 12px;
    justify-content:flex-start;
  }
  .side .exit{margin-top:auto;border-top:1px solid #ffffff20;border-radius:0;padding-top:16px}
  .main{padding:12px!important;padding-bottom:28px!important}
  .top{align-items:center;margin-bottom:12px;flex-wrap:nowrap}
  .top h1{font-size:18px;line-height:1.25}
  .top-user,.top>span{display:none!important}
  .cards{grid-template-columns:1fr 1fr!important;gap:10px}
  .cards .metric b{font-size:22px}
  .toolbar{gap:8px}
  .toolbar input{min-width:0!important;flex:1 1 100%}
  .toolbar select{min-width:0;width:100%}
  .toolbar button,.selection-bar button,.price-tabs button{
    min-height:44px;
    padding:11px 14px;
    flex:1 1 auto;
  }
  .product-filters{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr!important}
  .actions{flex-wrap:wrap;justify-content:stretch}
  .actions button{flex:1 1 calc(50% - 6px);min-height:44px}
  .quote-lines input{min-width:0}
  td.desc{min-width:180px}

  /* Tables: horizontal scroll + sticky lead / código columns */
  .tablewrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .tablewrap table{min-width:640px}
  .tablewrap th,.tablewrap td{white-space:nowrap}
  .tablewrap td.desc,.quote-sheet td{white-space:normal}
  /* Default: stick first column (código / número / cliente) */
  .tablewrap th:first-child,
  .tablewrap td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:#fff;
    box-shadow:3px 0 6px rgba(16,40,70,.08);
  }
  .tablewrap thead th:first-child{background:#f7f8fa;z-index:3}
  /* Products tables with checkbox: stick checkbox + código */
  .tablewrap:has(th:first-child input) th:first-child,
  .tablewrap:has(th:first-child input) td:first-child{
    width:44px;min-width:44px;max-width:44px;
    padding-left:8px;padding-right:8px;
    box-shadow:none;
  }
  .tablewrap:has(th:first-child input) th:nth-child(2),
  .tablewrap:has(th:first-child input) td:nth-child(2){
    position:sticky;
    left:44px;
    z-index:2;
    background:#fff;
    box-shadow:3px 0 6px rgba(16,40,70,.08);
  }
  .tablewrap:has(th:first-child input) thead th:nth-child(2){background:#f7f8fa;z-index:3}
  .tablewrap tr.selected td:first-child,
  .tablewrap tr.selected td:nth-child(2){background:#dceeff}
  .tablewrap tbody tr:hover td:first-child,
  .tablewrap tbody tr:hover td:nth-child(2){background:#f8fbfd}
  .tablewrap tr.selected:hover td:first-child,
  .tablewrap tr.selected:hover td:nth-child(2){background:#dceeff}

  /* Touch + iOS zoom prevention */
  button,.btn{min-height:44px}
  input,select,textarea{
    font-size:16px!important;
    min-height:44px;
    padding:11px 12px;
  }
  textarea{min-height:96px}
  label{font-size:13px}
  .pill{padding:6px 10px}

  /* Login */
  .login{padding:20px 14px;align-content:center}
  .login .card{width:100%!important;max-width:420px;padding:22px 18px}
  .login form{gap:14px}
  .login button{width:100%;min-height:48px;font-size:16px}
  .login-brand .brand-logo{width:min(220px,72vw)!important}
  .login p{font-size:15px}

  /* Modals already full-bleed via modal-fix; tighten actions */
  .modal .actions{position:sticky;bottom:0;background:#fff;padding:12px 0 4px;margin-top:12px;border-top:1px solid var(--line);z-index:5}
  .modal .cards{grid-template-columns:1fr 1fr!important}
  .bulk-card{width:100%!important;max-width:none}
  .delivery-form .actions,.selection-confirm .actions{flex-direction:column}
  .delivery-form .actions button,.selection-confirm .actions button{width:100%;flex:1 1 auto}
  .quote-sheet .no-print.toolbar{flex-wrap:wrap}
  .quote-sheet .no-print.toolbar button{flex:1 1 auto;min-height:44px}

  /* Orders action stacks inside cells */
  td .actions{flex-direction:column;align-items:stretch;margin:0;gap:6px}
  td .actions button{width:100%}
}

@media (max-width:430px){
  .cards{grid-template-columns:1fr!important}
  .main{padding:10px!important}
  .top h1{font-size:17px}
  .tablewrap table{min-width:580px}
  .tablewrap th:nth-child(2),
  .tablewrap td:nth-child(2){left:40px}
  .metric b{font-size:20px!important}
}

@media (min-width:851px){
  .nav-toggle,.nav-backdrop{display:none!important}
  body.nav-open{overflow:auto}
}

@media print{
  .nav-toggle,.nav-backdrop,.side{display:none!important}
}

/* —— v2.5 mobile cards + drawer polish —— */
@media (max-width:850px){
  .side{
    background:linear-gradient(180deg,var(--navy,#0f2744),#0c1f36)!important;
  }
  .side button.active{
    background:var(--navy-active,#1e4a73)!important;
    color:#fff!important;
    box-shadow:inset 3px 0 0 var(--orange,#e85d04)!important;
  }
  .top-bar-right{gap:6px}
  .icon-btn{min-width:44px;min-height:44px;width:44px;height:44px}
  .user-avatar{width:36px;height:36px}

  /* Hide desktop tables when companion mobile list exists */
  .has-mobile-cards > .tablewrap{display:none}
  .has-mobile-cards > .m-card-list{display:grid}

  .m-card{min-height:44px}
  .m-card .row-actions button{min-height:44px;flex:1}
  .status-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .status-chips .chip{flex:0 0 auto;min-height:40px}
  .quote-footer-bar{flex-wrap:wrap}
  .quote-footer-bar button{flex:1 1 auto;min-height:44px}
  .quote-stepper .step{min-width:100%}
  .compare-grid{grid-template-columns:1fr}
  .product-filters{grid-template-columns:1fr}
  .selection-bar{flex-direction:column;align-items:stretch}
}