/* ═══════════════════════════════════════════════════════
   PORTAL SION — Responsive Overrides
   Breakpoints: 768px (tablet), 480px (mobile)
   ═══════════════════════════════════════════════════════ */

/* ── Hamburger Button (hidden on desktop) ─────────── */
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;margin-right:10px;flex-shrink:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}

/* ── Sidebar Overlay ──────────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;transition:opacity .3s;}
.sidebar-overlay.on{display:block;}

/* ── SAP Docs Grid (replaces inline style) ────────── */
.sap-docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}

/* ═══════════════════════════════════════════════════════
   TABLET — max-width: 768px
   ═══════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Sidebar → Off-canvas Drawer ──────────────── */
  .sidebar{
    position:fixed;left:-280px;top:0;bottom:0;
    z-index:300;width:272px;height:100vh;
    transition:left .3s ease;
    border-right:1px solid var(--border);
  }
  .sidebar.open{left:0;}
  .hamburger{display:flex;}

  /* ── Topbar & Content ─────────────────────────── */
  .topbar{padding:10px 14px;}
  .topbar h2{font-size:16px;}
  .topbar p{font-size:11px;}
  .cnt{padding:14px;}

  /* ── Grids → Stack ────────────────────────────── */
  .fg3{grid-template-columns:1fr!important;}
  .fg2{grid-template-columns:1fr!important;}
  .c2,.c3{grid-column:span 1!important;}

  /* ── Dashboard Stats ──────────────────────────── */
  .sr{grid-template-columns:repeat(2,1fr);}
  .dg{grid-template-columns:repeat(2,1fr);}

  /* ── Tables → Horizontal Scroll ───────────────── */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:0!important;}

  /* ── Admin Facturas Table ─────────────────────── */
  #pg-a-fac table{min-width:700px;table-layout:auto!important;}
  #pg-a-fac th,#pg-a-fac td{width:auto!important;min-width:0!important;white-space:normal!important;}
  #pg-a-fac th:last-child,#pg-a-fac td:last-child{position:static!important;box-shadow:none!important;min-width:auto!important;}
  #pg-a-fac .af-actions{flex-wrap:wrap;}

  /* ── Modals → Bottom Sheet Style ──────────────── */
  .mo{padding:8px;align-items:flex-end;}
  .md,.md.wide{max-width:100%!important;border-radius:14px 14px 0 0;}
  .mb2{max-height:65vh;}

  /* ── Panels & Headers ─────────────────────────── */
  .ph{padding:12px 14px;gap:8px;}
  .pb{padding:14px;}

  /* ── Table Header → Stack ─────────────────────── */
  .th{flex-direction:column;align-items:stretch;gap:8px;}
  .tt{width:100%;flex-wrap:wrap;}
  .si{width:100%;box-sizing:border-box;}
  select.si{width:auto;min-width:120px;}
  .sw{width:100%;}
  .sw .si{padding-left:26px;}

  /* ── Tabs → Full Width ────────────────────────── */
  .tabs{width:100%;}
  .tab{flex:1;text-align:center;font-size:12px;padding:7px 8px;}

  /* ── SAT Info Grid ────────────────────────────── */
  .sat-info-grid{grid-template-columns:1fr 1fr!important;}
  .rdata{grid-template-columns:1fr!important;}

  /* ── SAP Docs → Stack ─────────────────────────── */
  .sap-docs-grid{grid-template-columns:1fr!important;}

  /* ── File Drop Areas ──────────────────────────── */
  .fdrop{padding:14px;}
  .fdrop h4{font-size:12px;}

  /* ── Contact Items ────────────────────────────── */
  .ci .fg2{grid-template-columns:1fr!important;}

  /* ── Flex Actions Wrap ────────────────────────── */
  .flex.gap12{flex-wrap:wrap;}
  .flex.gap8{flex-wrap:wrap;}

  /* ── Expediente Modal Grid ────────────────────── */
  [class*="fg3"][style*="margin-bottom"]{grid-template-columns:1fr 1fr!important;}

  /* ── RTU Data Grid ────────────────────────────── */
  .rdata{grid-template-columns:1fr 1fr!important;}

  /* ── Pagination ───────────────────────────────── */
  .pager{flex-wrap:wrap;justify-content:center;gap:8px;}

  /* ── Audit/History Items ──────────────────────── */
  .ae{flex-direction:column;gap:6px;}
  .at{min-width:auto;}
}

/* ═══════════════════════════════════════════════════════
   MOBILE — max-width: 480px
   ═══════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Login Card ───────────────────────────────── */
  .lcard{width:100%;max-width:100%;padding:32px 20px;border-radius:12px;margin:10px;}

  /* ── Content Area ─────────────────────────────── */
  .cnt{padding:10px;}

  /* ── Dashboard Stats → Single Column ──────────── */
  .sr{grid-template-columns:1fr;gap:10px;}
  .sv{font-size:22px;}
  .dg{grid-template-columns:1fr;}

  /* ── Modals → Full Width ──────────────────────── */
  .mo{padding:0;}
  .md,.md.wide{border-radius:14px 14px 0 0;max-width:100%!important;}
  .mh{padding:14px 16px 12px;}
  .mb2{padding:14px 16px;max-height:70vh;}
  .mf2{padding:12px 16px;flex-wrap:wrap;}
  .mf2 .btn{flex:1;justify-content:center;min-width:0;}

  /* ── Buttons ──────────────────────────────────── */
  .btn{padding:10px 14px;font-size:13px;}
  .btn.fw{padding:12px 16px;}

  /* ── Toast → Full Width Bottom ────────────────── */
  #toast{left:10px;right:10px;bottom:10px;}

  /* ── Topbar Compact ───────────────────────────── */
  .topbar h2{font-size:15px;}
  .ta{gap:6px;}
  .ta .bdg{font-size:10px;padding:2px 7px;}
  .ta .mono{font-size:10px!important;}

  /* ── Form Labels ──────────────────────────────── */
  .fg label{font-size:10px;margin-bottom:5px;}
  .fg input,.fg select,.fg textarea{padding:10px 12px;font-size:13px;}

  /* ── Panels ───────────────────────────────────── */
  .nc{font-size:12px;padding:8px 10px;}

  /* ── SAT Info Grid → Single Column ────────────── */
  .sat-info-grid{grid-template-columns:1fr!important;}

  /* ── Table Cells Compact ──────────────────────── */
  th{padding:8px 10px;font-size:10px;}
  td{padding:8px 10px;font-size:11px;}

  /* ── Admin Facturas More Compact ──────────────── */
  #pg-a-fac table{min-width:580px;}
  #pg-a-fac .af-actions .btn{padding:5px 8px;font-size:10px;}

  /* ── Expediente Sections ──────────────────────── */
  [class*="fg3"][style*="margin-bottom"]{grid-template-columns:1fr!important;}

  /* ── Rule Chips ───────────────────────────────── */
  .rule-chip{font-size:11px;padding:3px 8px;}

  /* ── Credit Preview ───────────────────────────── */
  .cprev{padding:12px;}

  /* ── Dividers Smaller Margin ──────────────────── */
  .divider{margin:12px 0;}
}