@media (max-width: 1500px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1366px) {
  .builder { grid-template-columns: minmax(0, 1fr) 340px; }
  .content { padding: 20px 20px 44px; }
}
@media (max-width: 1180px) {
  .builder { grid-template-columns: 1fr; }
  .builder-side { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { grid-template-columns: 1fr 1fr; }
  .lr-grid { grid-template-columns: 1fr; }
  .lr-grid > :nth-child(2) { display: none; }
}
@media (max-width: 1023px) {
  .shell, .shell.sb-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: var(--sh-3); }
  .shell.sb-open .sidebar { transform: none; }
  .shell.sb-collapsed .sb-brand-text, .shell.sb-collapsed .sb-group-btn span, .shell.sb-collapsed .sb-link span, .shell.sb-collapsed .sb-badge, .shell.sb-collapsed .sb-search span, .shell.sb-collapsed .sb-user .who-text { display: initial; }
  .shell.sb-collapsed .sb-search, .shell.sb-collapsed .sb-user { justify-content: flex-start; padding: 0 12px; }
  .shell.sb-collapsed .sb-link { justify-content: flex-start; padding: 7px 10px; }
  .sb-collapse-btn { display: none; }
  .backdrop-mobile { position: fixed; inset: 0; background: var(--overlay); z-index: 35; }
  .shell.sb-open .backdrop-mobile { display: block; }
  .hd-menu { display: grid; }
  .header { padding: 0 16px; }
  .hd-hide-md { display: none !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { grid-template-columns: 1fr; }
  .login-right { display: none; }
  .login-left { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 767px) {
  .content { padding: 16px 16px 40px; }
  .header { padding: 0 12px; gap: 6px; height: 60px; }
  .hd-icon-btn, .hd-user { width: 36px; height: 36px; }
  .hd-search-m { display: grid; }
  .hd-title { font-size: 17px; }
  .hd-hide-sm { display: none !important; }
  .content { padding-top: 4px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 17px; }
  .page-head { align-items: flex-start; }
  .page-title h1 { font-size: 19px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .dt-toolbar .input-icon { max-width: none; flex-basis: 100%; }
  .dt-filters { width: 100%; }
  .dt-filters .select { flex: 1 1 140px; min-width: 0; }
  .table .hide-sm { display: none; }
  .modal-foot .btn { flex: 1 1 auto; }
  .overlay { padding: 10px; align-items: end; }
  .modal { max-height: calc(100vh - 20px); border-radius: 16px; }
  .drawer-overlay { align-items: stretch; }
  .login-left { padding: 24px 20px; }
  .login-profiles { grid-template-columns: 1fr; }
  .doc { padding: 24px 18px; min-width: 640px; }
  .doc.tpl-modern .doc-head { margin: 0 -18px; padding: 22px 18px; }
  .doc-wrap { padding: 8px; }
  .funnel-row { grid-template-columns: 90px 1fr 80px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 8px; }
  .cal-d { min-height: 64px; padding: 3px; }
  .cal-ev { font-size: 0; height: 6px; padding: 0; }
  .cal.week .cal-ev { font-size: 10.5px; height: auto; padding: 2px 4px; }
  .portal-top-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; }
  .portal-nav { order: 3; width: 100%; }
  .portal-body { padding: 16px 16px 48px; }
  /* Líneas del constructor como tarjetas apiladas */
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr, .lines td { display: block; width: 100%; }
  .lines tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lines td { border: 0; padding: 2px; }
  .lines td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
  .lines td.l-prod, .lines td.l-full { grid-column: 1 / -1; }
  .lines .w-qty, .lines .w-price, .lines .w-disc, .lines .w-tax, .lines .w-total { width: auto; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .btn { padding: 0 11px; }
}