/* =============================================
   RESPONSIVE — SISTEMA COMPLETO
   ============================================= */

/* Botón hamburguesa */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  color: var(--text-dark);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: var(--cream); }

/* Overlay para cerrar sidebar en móvil */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.5);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ===== LAPTOP PEQUEÑA (≤1280px) ===== */
@media (max-width: 1280px) {
  .sidebar { width: 210px; }
  .main { margin-left: 210px; }
  .layout:has(.sidebar.collapsed) .main { margin-left: 60px; }
  .content { padding: 24px 20px; }
  .metrics-row.cols4 { grid-template-columns: repeat(2, 1fr); }
  .form-grid.cols4 { grid-template-columns: 1fr 1fr; }
  .section-header h2 { font-size: 1.5rem; }
}

/* ===== LAPTOP MUY PEQUEÑA / NETBOOK (≤1100px) ===== */
@media (max-width: 1100px) {
  .sidebar { width: 60px; }
  .sidebar .sb-logo-text { opacity: 0; width: 0; }
  .sidebar .sb-label { opacity: 0; width: 0; }
  .sidebar .sb-section-label { opacity: 0; padding: 7px 0; pointer-events: none; }
  .sidebar .sb-footer { opacity: 0; padding: 8px 0; }
  .sidebar .sb-nav-item { justify-content: center; padding: 10px; border-left-color: transparent !important; }
  .sidebar .sb-nav-item.active { background: rgba(201,168,76,0.14); }
  .sidebar .sb-nav-item.usd-item.active { background: rgba(86,210,143,0.1); }
  .sidebar .sb-nav-item:hover .sb-tooltip { display: block; }
  .sidebar .sb-toggle { right: 50%; transform: translate(50%, -50%); }
  .main { margin-left: 60px; }
  .layout:has(.sidebar.collapsed) .main { margin-left: 60px; }
  .content { padding: 20px 16px; }
  .metrics-row.cols4 { grid-template-columns: repeat(2, 1fr); }
  .metrics-row.cols3 { grid-template-columns: repeat(3, 1fr); }
  .form-grid.cols3, .form-grid.cols4 { grid-template-columns: 1fr 1fr; }
  .cierre-grid { grid-template-columns: repeat(3, 1fr); }
  .section-header h2 { font-size: 1.4rem; }
  .topbar { padding: 0 20px; }
  .dash-chart-grid { grid-template-columns: 1fr; }
}

/* Dashboard chart grid */
.dash-chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
/* Two-col grid (gastos CUP, gastos USD, Mi Negocio, etc.) */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* DJ body two-col */
.dj-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
/* Inicio tel/correo row */
.inicio-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 900px) {
  .two-col-grid { grid-template-columns: 1fr; }
  .dj-two-col { grid-template-columns: 1fr; }
  /* Sidebar deslizable — ignora el modo collapsed en móvil */
  .sidebar {
    transform: translateX(-100%);
    width: 240px !important;
    z-index: 100;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(10,22,40,0.22); }
  .sidebar.collapsed { width: 240px !important; }
  .sidebar.collapsed .sb-logo-text { opacity: 1 !important; width: auto !important; }
  .sidebar.collapsed .sb-label { opacity: 1 !important; width: auto !important; }
  .sidebar.collapsed .sb-section-label { opacity: 1 !important; padding: 14px 18px 4px !important; pointer-events: auto !important; }
  .sidebar.collapsed .sb-footer { opacity: 1 !important; padding: 12px 18px !important; }
  .sidebar.collapsed .sb-nav-item { justify-content: flex-start !important; padding: 10px 18px !important; }
  .sb-toggle { display: none; }

  /* Layout */
  .main { margin-left: 0 !important; }
  .hamburger-btn { display: flex; }

  /* Topbar */
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-title { font-size: 0.9rem; }
  .topbar-year { display: none; }

  /* Content */
  .content { padding: 16px; }

  /* Grids */
  .metrics-row.cols4 { grid-template-columns: repeat(2, 1fr); }
  .metrics-row.cols3 { grid-template-columns: repeat(2, 1fr); }
  .metrics-row.cols2 { grid-template-columns: 1fr 1fr; }
  .form-grid, .form-grid.cols3, .form-grid.cols4 { grid-template-columns: 1fr; }
  .mes-grid { grid-template-columns: repeat(4, 1fr); }
  .cierre-grid { grid-template-columns: 1fr 1fr; }

  /* Historial filtros */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > div { width: 100%; }

  /* Tipo cards en inicio */
  .tipo-cards { flex-direction: column; align-items: center; }
  .tipo-card { width: 100%; max-width: 300px; }

  /* Section header */
  .section-header h2 { font-size: 1.4rem; }

  /* Btn row wrap */
  .btn-row { flex-wrap: wrap; }
  .btn-row .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; }
}

/* ===== MÓVIL (≤600px) ===== */
@media (max-width: 600px) {
  /* Inicio screen */
  .inicio-title { font-size: 2.2rem; }
  .inicio-content { padding: 0 16px; width: 100%; }
  .tipo-cards { gap: 10px; }
  .inicio-year-row { flex-wrap: wrap; justify-content: center; }
  .btn-entrar { width: 100%; max-width: 320px; }
  .inicio-two-col { grid-template-columns: 1fr; }

  /* App layout */
  .content { padding: 12px; }
  .card { padding: 16px; }
  .topbar { height: 56px; padding: 0 12px; }
  .topbar-tipo { display: none; }
  .btn-salir { font-size: 0.75rem; padding: 5px 10px; }

  /* Metrics */
  .metrics-row.cols4,
  .metrics-row.cols3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metrics-row.cols2 { grid-template-columns: 1fr; }
  .metric { padding: 14px 16px; }
  .metric-value { font-size: 1.2rem; }

  /* Section header */
  .section-header { margin-bottom: 16px; }
  .section-header h2 { font-size: 1.2rem; }
  .section-header p { font-size: 0.8rem; }

  /* Cards */
  .card-title { font-size: 0.72rem; }

  /* Forms */
  .field input, .field select, .field textarea { font-size: 0.875rem; padding: 9px 12px; }

  /* Cierre grid */
  .cierre-grid { grid-template-columns: 1fr; gap: 10px; }
  .cierre-card { padding: 16px; }

  /* Meses grid */
  .mes-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mes-btn { padding: 8px 4px; }

  /* Historial de cierres filtros */
  .filter-bar { padding: 12px; gap: 8px; }

  /* Transacciones */
  .txn-item { gap: 10px; padding: 10px 12px; }
  .txn-amount { font-size: 0.85rem; }

  /* Inventario */
  .inventario-table { min-width: 640px; font-size: 0.78rem; }
  .inventario-table th { padding: 10px 7px; font-size: 0.58rem; }
  .inventario-table td { padding: 9px 7px; }

  /* Barra de controles inventario */
  #sec-inventario > div:nth-child(3) > div { flex-direction: column; }
  #sec-inventario > div:nth-child(3) > div > div:last-child { flex-wrap: wrap; justify-content: stretch; }
  #sec-inventario > div:nth-child(3) > div > div:last-child button { flex: 1 1 auto; }

  /* Config card */
  .config-row { flex-direction: column; gap: 12px; }
  .config-row .field { min-width: unset; width: 100%; }

  /* Modal producto */
  .inv-modal-box { max-width: 100%; border-radius: 16px 16px 0 0; }
  #inv-modal { align-items: flex-end; padding: 0; }
  .inv-modal-body { padding: 16px 20px 24px; }
  .inv-field-row.cols2, .inv-field-row.cols3 { grid-template-columns: 1fr; }

  /* Modal baja */
  #inv-baja-modal > div { border-radius: 16px 16px 0 0; }

  /* Modal confirm */
  #confirm-modal > div { border-radius: 16px; margin: 16px; }

  /* Modal overlay (license modal) */
  .license-panel { padding: 16px; }
  .license-app-name { font-size: 2.2rem; letter-spacing: 4px; }
  .license-card { padding: 24px 20px; }
  .license-features { grid-template-columns: 1fr; }

  /* Backup section */
  .metrics-row.cols3 { grid-template-columns: 1fr 1fr; }

  /* DJ rows */
  .dj-row { flex-direction: column; gap: 4px; font-size: 0.82rem; }
  .dj-row .dj-val { font-size: 0.9rem; font-weight: 600; }

  /* Historial tabla overflow */
  #hist-tabla, #hist-usd-tabla { overflow-x: auto; }

  /* Toast */
  .toast { left: 12px; right: 12px; bottom: 16px; }

  /* Btn row en móvil */
  .btn-row { gap: 8px; }
  .btn-row .btn { font-size: 0.82rem; padding: 9px 14px; }
}

/* ===== MÓVIL MUY PEQUEÑO (≤380px) ===== */
@media (max-width: 380px) {
  .metrics-row.cols4,
  .metrics-row.cols3,
  .metrics-row.cols2 { grid-template-columns: 1fr; }
  .mes-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-title { font-size: 0.82rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .section-header h2 { font-size: 1.1rem; }
}
.filter-search-input:focus { border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(201,168,76,0.12); }