/* ============================================================
   NODO Engine — responsive.css
   Mobile-first. Breakpoints: sm=480, md=768, lg=1024
   ============================================================ */

/* ── MOBILE BASE (< 768px) ── */
@media (max-width: 767px) {

  /* Login */
  #scr-login { padding: 16px; align-items: flex-start; padding-top: 60px; }
  .l-card    { width: 100%; padding: 32px 24px; border-radius: 12px; }
  .login-topbar { top: 14px; right: 14px; }

  /* Topbar */
  .topbar { padding: 0 16px; gap: 10px; }
  .tb-logo-text { display: none; }
  .tb-actions { gap: 6px; }

  /* Tenant bar */
  .tenant-bar { height: auto; min-height: 44px; flex-wrap: wrap; padding: 6px 0; }
  .tb-back    { padding: 0 12px; font-size: 11px; height: 32px; }
  .tb-tenant-info { padding: 0 12px; flex-wrap: wrap; gap: 6px; }
  .tb-tenant-name { font-size: 12px; }
  .tb-tenant-ruc  { font-size: 10px; }
  .tb-env { margin-right: 8px; font-size: 10px; padding: 2px 8px; }

  /* Empresas body */
  .emp-body   { padding: 20px 16px; }
  .emp-header { flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .emp-title  { font-size: 20px; }
  .emp-actions { width: 100%; display: flex; }
  .emp-actions .btn { flex: 1; justify-content: center; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .search-box { max-width: 100% !important; flex: 0 0 100%; }
  .filter-pill { font-size: 11px; padding: 6px 10px; }
  .emp-grid   { grid-template-columns: 1fr; }

  /* Panel body — sidebar se oculta, se abre con hamburger */
  .panel-body { position: relative; }
  .sidebar {
    position: fixed;
    top: 0; left: -100%;
    width: 260px; height: 100%;
    z-index: 150;
    transition: left .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
    padding-top: 58px; /* topbar height */
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 140;
  }
  .sidebar-overlay.on { display: block; }

  /* Hamburger button */
  .ham-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--bg4); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; color: var(--text2);
    flex-shrink: 0;
  }

  /* Main content full width */
  .main { width: 100%; }
  .pg   { padding: 18px 16px; }

  /* Page header stack */
  .ph { flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .ph-right { width: 100%; display: flex; gap: 8px; }
  .ph-right .btn { flex: 1; justify-content: center; font-size: 12px; }
  .ph-title { font-size: 18px; }

  /* Stats grid — 2 columns on mobile */
  .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .stat-val { font-size: 22px; }

  /* Two-col → single col */
  .grid-2, .two { grid-template-columns: 1fr !important; gap: 12px; }
  .grid-3 { grid-template-columns: 1fr !important; gap: 12px; }

  /* Form sections */
  .fsec-body { padding: 14px; }
  .fsec-head { padding: 12px 14px; }

  /* Table — horizontal scroll */
  .tw-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .tw-head .search-box { max-width: 100% !important; flex: 0 0 100%; }
  table { font-size: 12px; }
  thead th { padding: 9px 12px; font-size: 9px; }
  td { padding: 10px 12px; }

  /* Pagination */
  .pag { flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
  .pag-info { flex: 0 0 100%; font-size: 11px; }

  /* Tabs */
  .tabs { overflow-x: auto; gap: 0; }
  .tab  { white-space: nowrap; padding: 10px 14px; font-size: 12px; }

  /* Logo upload */
  .logo-upload-wrap { flex-direction: column; align-items: center; }
  .logo-preview { width: 100px; height: 100px; }

  /* Env switch */
  .env-sw { flex-direction: column; }

  /* Modal */
  .modal { width: 95vw !important; margin: 0 auto; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* Alerts */
  .alert { padding: 11px 12px; font-size: 12px; }

  /* Notif panel */
  .notif-panel { right: 8px; left: 8px; width: auto; }

  /* Lote rows */
  .lrow { flex-wrap: wrap; gap: 6px; }
  .ltime { margin-left: auto; }

  /* Timeline */
  .tl { padding: 12px 14px; }

  /* Filter pills horizontal scroll */
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-bar::-webkit-scrollbar { height: 0; }
}

/* ── TABLET (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Sidebar colapsa a iconos */
  .sidebar { width: 60px; }
  .sb-lbl  { display: none; }
  .nav span:not(.nav-badge) { display: none; }
  .nav     { justify-content: center; padding: 10px; border-left-width: 0; border-bottom: 2px solid transparent; }
  .nav.on  { border-left-color: transparent; border-bottom-color: var(--orange); background: rgba(255,140,0,.07); }
  .nav svg { opacity: 1; }
  .nav-badge { display: none; }

  /* Topbar */
  .topbar { padding: 0 20px; }

  /* Empresas */
  .emp-body   { padding: 24px 20px; }
  .emp-grid   { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  /* Two-col stays 2 col on tablet */
  .grid-3 { grid-template-columns: 1fr 1fr !important; }

  /* Page padding */
  .pg { padding: 22px 24px; }
}

/* ── DESKTOP (>= 1024px) ── */
@media (min-width: 1024px) {
  .ham-btn { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* ── HAM BUTTON (hidden on desktop via above) ── */
.ham-btn { display: none; }

/* ── TOUCH IMPROVEMENTS ── */
@media (hover: none) {
  .emp-card:hover { transform: none; }
  .btn-o:hover    { transform: none; }
  .btn-login:hover { transform: none; }
}

/* ── SAFE AREA (notch phones) ── */
@supports (padding: max(0px)) {
  .topbar    { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  .emp-body  { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .pg        { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}