/* =============================================
   ARATECH v6 — RESPONSIVE / MOBILE
   Breakpoints:
   - Mobile:  < 640px
   - Tablet:  640px – 1024px
   - Desktop: > 1024px
   ============================================= */

    /* --- Hamburger button (hidden on desktop) --- */
    #hamburger {
      display: none;
      position: fixed;
      top: 10px;
      left: 12px;
      z-index: 500;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 7px 10px;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
    }

    #hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--accent2);
      border-radius: 2px;
      transition: all .25s;
    }

    #hamburger.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    #hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    #hamburger.open span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* --- Sidebar overlay for mobile --- */
    #sb-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 150;
    }

    #sb-overlay.active {
      display: block;
    }

    /* ---- LAPTOP (1025–1440) ---- */
@media (max-width: 1440px) {

  #sidebar{
    width:220px;
  }

  #main{
     margin-left:220px;
  }

  .topbar{
    height:90px;
    padding:18px 24px 14px;
  }

  .topbar h1{
    font-size:20px;
  }

  .topbar-center{
    max-width:680px;
  }

  #search-res{
    max-width:680px;
  }

  .content{
      padding:12px 16px 16px;
  }

  .g5{
      grid-template-columns:repeat(3,1fr);
  }

  .g4{
      grid-template-columns:repeat(2,1fr);
  }

  .g3{
      grid-template-columns:repeat(2,1fr);
  }

  .g2{
      grid-template-columns:1fr;
  }

}

    /* ---- TABLET (640–1024) ---- */
    @media (max-width: 1024px) {
      #hamburger{
          display:flex;
      }

      #sidebar{
          width:240px;
          transform:translateX(-100%);
          transition:transform .28s ease;
          z-index:200;
          box-shadow:4px 0 24px rgba(0,0,0,.5);
      }

      #sidebar.open{
          transform:translateX(0);
      }

      #main{
          margin-left:0;
      }

      #sb-overlay.active{
          display:block;
      }

      .g4 {
        grid-template-columns: repeat(2, 1fr);
      }

      .g3 {
        grid-template-columns: repeat(2, 1fr);
      }

      .fr.c4 {
        grid-template-columns: 1fr 1fr;
      }

      .fr.c3 {
        grid-template-columns: 1fr 1fr;
      }

      .kv {
        font-size: 22px;
      }

      .topbar {
        padding: 0 14px;
        gap: 10px;
      }

      .topbar h1 {
        font-size: 16px;
      }

      .content{
          padding:16px 20px 20px;
      }

      .sbr input{
          max-width:none;
      }

      .tbl-wrap table{
          min-width:900px;
      }

      .tbl-wrap th,
      .tbl-wrap td{
          white-space:nowrap;
      }

      .mo-lg{
          width:92vw;
      }

      .mo{
          max-height:90vh;
          overflow-y:auto;
      }

      @media (max-width:800px){

          .fr.c2,
          .fr.c3,
          .fr.c4{
              grid-template-columns:1fr;
          }

      }


    }

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

  /* Show hamburger, hide sidebar by default */
      #hamburger{
          display:flex;
      }


      #sidebar {
        width:240px;
        transform:translateX(-100%);
        transition:transform .28s ease;
        z-index:200;
        box-shadow:4px 0 24px rgba(0,0,0,.5);
      }

      #sidebar.open {
        transform: translateX(0);
      }

      #main {
        margin-left: 0;
      }

      /* Topbar */
      .topbar {
        padding: 0 10px 0 52px;
        /* space for hamburger */
        gap: 8px;
        height: 48px;
      }

      .topbar h1 {
        font-size: 13px;
        letter-spacing: 1px;
      }

      /* Hide search on tiny screens */
      #global-search {
        display: none;
      }

      .search-wrap {
        display: none;
      }

      /* Theme toggle — más pequeño */
      #theme-toggle {
        font-size: 9px;
        padding: 4px 8px;
      }

      /* Content */
      .content {
        padding: 12px 10px;
      }

      /* Grids → 1 columna */
      .g4,
      .g3,
      .g2 {
        grid-template-columns: 1fr;
      }

      /* Form rows → 1 columna */
      .fr.c4,
      .fr.c3,
      .fr.c2 {
        grid-template-columns: 1fr;
      }

      /* Section bars */
      .sbr {
        flex-direction: column;
        align-items: stretch;
      }

      .sbr input {
        max-width: 100%;
      }

      /* Tables → scroll horizontal */
      .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      table {
        min-width: 520px;
        font-size: 12px;
      }

      th,
      td {
        padding: 7px 8px;
      }

      /* Modals → full screen */
      .mb{
          padding:8px;
          align-items:center;
          justify-content:center;
      }


      .mo,
      .mo-lg{

          width:calc(100vw - 16px);
          max-width:calc(100vw - 16px);

          max-height:92vh;

          margin:0;

          padding:18px 14px;

          border-radius:var(--rl);

          overflow-y:auto;
      }

  }

      /* KPI values */
      .kv {
        font-size: 20px;
      }

      /* Button groups wrap */
      .bg-btn {
        flex-wrap: wrap;
        gap: 5px;
      }

      .btn {
        padding: 6px 10px;
        font-size: 11px;
      }

      /* Inventory row */
      .ls {
        grid-template-columns: 1fr 80px 30px;
      }

      /* Bar chart responsive */
      .bc {
        height: 80px;
      }


    /* Login — ocultar sistema hasta autenticar */
    #sidebar,
    #main {
      display: none !important;
    }

    body.autenticado #sidebar {
      display: flex !important;
    }

    body.autenticado #main {
      display: flex !important;
    }

    body.autenticado #login-screen {
      display: none !important;
    }

    /* ==========================================================
   FIN LAYOUT
========================================================== */

body{
    overflow-x:hidden;
}