/* ═══════════════════════════════════════════════════════════════
   XPRESS TOOLS — RESPONSIVE SYSTEM v1.0
   Breakpoints: 
     Mobile:  < 640px
     Tablet:  640px – 1024px
     Desktop: > 1024px
   ═══════════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ── */
#menu-toggle{
  display:none;
  position:fixed;
  top:12px;left:12px;
  z-index:200;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--white);
  cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
#menu-toggle span{
  display:block;width:18px;height:2px;
  background:var(--text);border-radius:2px;
  transition:all .25s;
}
#menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#menu-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
#menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── SIDEBAR OVERLAY (mobile) ── */
#sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:98;
  backdrop-filter:blur(2px);
}

/* ══ TABLET (640px – 1024px) ══════════════════════════════════ */
@media(max-width:1024px){
  /* Sidebar se vuelve más angosta */
  #sidebar{width:180px!important;min-width:180px!important;}
  .sb-app-name,.sb-brand-name{font-size:13px!important;}
}

/* ══ MOBILE (< 640px) ════════════════════════════════════════ */
@media(max-width:640px){

  /* Body no overflow hidden en mobile — necesitamos scroll */
  body{height:auto!important;overflow:auto!important;}
  #app{flex-direction:column!important;height:auto!important;min-height:100vh!important;}

  /* Mostrar hamburger */
  #menu-toggle{display:flex;}

  /* Sidebar se convierte en drawer lateral */
  #sidebar{
    position:fixed!important;
    top:0!important;left:0!important;
    height:100vh!important;
    width:260px!important;min-width:260px!important;
    z-index:99!important;
    transform:translateX(-100%)!important;
    transition:transform .25s cubic-bezier(.4,0,.2,1)!important;
    box-shadow:4px 0 20px rgba(0,0,0,.4)!important;
  }
  #sidebar.open{
    transform:translateX(0)!important;
  }
  #sidebar-overlay.show{display:block!important;}

  /* Main ocupa todo el ancho */
  #main{
    width:100%!important;
    min-height:100vh!important;
    overflow:visible!important;
  }

  /* Topbar adapta para mobile */
  #topbar,.top-bar{
    padding:12px 14px 12px 60px!important; /* espacio para hamburger */
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .tb-l,.top-title{font-size:13px!important;gap:6px!important;}
  .tb-r,.top-actions{gap:6px!important;}
  .tb-r .btn,.top-actions .btn{
    padding:6px 10px!important;
    font-size:11px!important;
  }

  /* Content padding reducido */
  #content{
    padding:14px!important;
    overflow-y:visible!important;
    height:auto!important;
  }
  #content-row{
    flex-direction:column!important;
    overflow:visible!important;
    height:auto!important;
  }

  /* Cards grids */
  .cards-row,.two-col,
  .grid-2,.grid-3,.f-row,
  [class*="col-"]{
    grid-template-columns:1fr!important;
    flex-direction:column!important;
  }

  /* Tables: scroll horizontal */
  .tbl-wrap,table{
    overflow-x:auto!important;
    display:block!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Modals full-screen en mobile */
  .modal{
    width:100%!important;
    max-width:100%!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
    margin:0!important;
  }
  .modal-bg{align-items:flex-end!important;}

  /* Formularios full width */
  .f,.form-row,.field-row{
    flex-direction:column!important;
    gap:10px!important;
  }
  .f > *,.form-row > *{width:100%!important;}

  /* Botones */
  .btn{font-size:12px!important;padding:8px 12px!important;}

  /* Hub grid */
  .hub-grid,#tools-grid{
    grid-template-columns:1fr 1fr!important;
    padding:12px!important;
    gap:10px!important;
  }
  .htcard{padding:16px 12px!important;}
  .hname{font-size:13px!important;}
  .hdesc{font-size:11px!important;}

  /* Board kanban — scroll horizontal */
  #board{
    flex-direction:row!important;
    overflow-x:auto!important;
    padding:12px!important;
  }
  .col{min-width:240px!important;max-height:calc(100vh - 120px)!important;}

  /* Status chips wrap */
  .status-bar{flex-wrap:wrap!important;}

  /* Sidebar footer */
  .sb-footer{padding:8px 12px!important;}
}

/* ══ SMALL MOBILE (< 380px) ════════════════════════════════════ */
@media(max-width:380px){
  .hub-grid,#tools-grid{
    grid-template-columns:1fr!important;
  }
  .htcard{padding:14px 10px!important;}
  #topbar,.top-bar{padding-left:54px!important;}
}

/* ══ LARGE SCREENS (> 1400px) ══════════════════════════════════ */
@media(min-width:1400px){
  #sidebar{width:230px!important;min-width:230px!important;}
  #content{padding:28px!important;}
}