/* ═══════════════════════════════════════════════
   EduFood · Vendedores · Mobile Responsive
   Ruta del servidor: vendedores/css/mobile.css
   ═══════════════════════════════════════════════ */

/* ─── OVERLAY para cerrar sidebar ─── */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 149;
  backdrop-filter: blur(2px);
}
.sb-overlay.on { display: block; }

/* ─── Botón hamburguesa ─── */
.btn-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--ln);
  color: var(--ink2);
  font-size: .9rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   TABLET  (≤ 900px)
══════════════════════════════════════ */
@media (max-width: 900px) {

  /* Sidebar deslizable */
  .sb {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform .28s ease;
    width: 248px !important;
    flex-shrink: 0;
  }
  .sb.open { transform: translateX(0); }

  /* Main ocupa todo el ancho */
  #dash.on { flex-direction: column; }
  .main { width: 100%; min-width: 0; overflow: hidden; }

  /* Hamburguesa visible */
  .btn-hamburger { display: flex; }

  /* Topbar */
  .topbar { padding: 0 14px; gap: 10px; height: 54px; }

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

  /* Grids a 1 columna */
  .home-grid { grid-template-columns: 1fr !important; }
  .tienda-grid { grid-template-columns: 1fr !important; }
  .fin-grid-2 { grid-template-columns: 1fr !important; }

  /* KPIs 2 columnas */
  .home-kpis { grid-template-columns: repeat(2,1fr) !important; }

  /* Tablas con scroll */
  .table-wrap,
  .t-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }

  /* Overlay de modal */
  .overlay { padding: 14px; }
  .ov-box { max-width: 100% !important; max-height: 90vh; }

  /* Toast */
  .toast { right: 50%; transform: translateX(50%) translateY(10px); bottom: 16px; max-width: calc(100vw - 32px); }
}

/* ══════════════════════════════════════
   MÓVIL  (≤ 600px)
══════════════════════════════════════ */
@media (max-width: 600px) {

  /* Auth: ocultar panel izquierdo */
  #auth { grid-template-columns: 1fr !important; }
  .auth-l { display: none !important; }
  .auth-r { padding: 36px 20px !important; }

  /* Sidebar más angosto */
  .sb { width: 220px !important; }

  /* Topbar */
  .topbar { height: 54px; padding: 0 12px; gap: 8px; }
  .tb-title { font-size: .88rem; }
  .btn-cta span { display: none; }   /* solo ícono en mobile */
  .btn-cta { padding: 8px 10px; min-width: auto; }

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

  /* KPIs 1 columna */
  .home-kpis { grid-template-columns: 1fr !important; gap: 10px; }

  /* KPI card más compacta */
  .hk-val { font-size: 1.5rem !important; }

  /* Filtros de pedidos en columna */
  .ord-filters { flex-direction: column; gap: 8px; }
  .ord-filters select,
  .ord-filters input { width: 100%; }

  /* Pedidos: layout apilado */
  .ord-card { flex-direction: column; gap: 8px; }

  /* Producto modal full-screen */
  .overlay { padding: 0 !important; align-items: flex-end; }
  .ov-box {
    max-width: 100% !important;
    max-height: 92vh;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
  }

  /* Tabs de finanzas en scroll horizontal */
  .fin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .fin-tab { display: inline-flex; }

  /* Detalle finanzas 1 col */
  .fin-detail-grid { grid-template-columns: 1fr !important; }

  /* Section head apila */
  .ch { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Logo/banner zone centrado */
  .logo-zone { width: 110px; height: 110px; }

  /* Ocultar columnas secundarias */
  .hide-mobile { display: none !important; }

  /* Toast */
  .toast {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: 100%;
    transform: translateY(10px);
  }
}

/* ══════════════════════════════════════
   MUY PEQUEÑO  (≤ 380px)
══════════════════════════════════════ */
@media (max-width: 380px) {
  .content { padding: 10px 8px; }
  .hk-ico { width: 36px; height: 36px; }
  .btn { padding: 7px 11px; font-size: .72rem; }
  .ov-box { padding: 16px 14px !important; }
}