/* ═══════════════════════════════════════════════════════════════════
   CANAIMA RESPONSIVE — Bodega App
   Optimizado para pantallas 768px–1280px (laptops Canaima)
   Se aplica DESPUÉS de design_system.css y styles.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── VARIABLES ADAPTADAS PARA PANTALLA PEQUEÑA ─────────────────── */
@media (max-width: 1280px) {
  :root {
    --sidebar-w:    210px;
    --sidebar-w-sm: 56px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-w:    190px;
    --sidebar-w-sm: 52px;
    font-size: 13px;
  }
}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .sidebar-logo-name { font-size: 13px !important; }
  .sidebar-logo-sub  { font-size: 10px !important; }
  .sidebar-item      { font-size: 12.5px !important; padding: 7px 8px !important; }
  .sidebar-section-label { font-size: 10px !important; padding: 10px 8px 3px !important; }
}

@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-w) !important; }
  .sidebar.collapsed { width: var(--sidebar-w-sm) !important; }

  .sidebar-logo { padding: 14px 12px 10px !important; }
  .sidebar-logo-icon { width: 30px; height: 30px; font-size: 13px; }
  .sidebar-logo-name { font-size: 12px !important; }
  .sidebar-item  { padding: 7px 8px !important; font-size: 12px !important; }
  .sidebar-icon  { width: 15px; height: 15px; }
}

/* ── TOPBAR ─────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .topbar { height: 50px !important; padding: 0 16px !important; }
  .topbar-title { font-size: 14px !important; }
  .topbar-search { max-width: 220px !important; }
}

@media (max-width: 1024px) {
  .topbar { height: 46px !important; padding: 0 12px !important; }
  .topbar-title { font-size: 13px !important; }
  .topbar-search { max-width: 180px !important; padding: 5px 10px !important; }
  .topbar-search input { font-size: 12px !important; }
  .topbar-btn { width: 30px; height: 30px; }
  .topbar-avatar { width: 28px; height: 28px; font-size: 11px; }
}

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .main-content { margin-left: var(--sidebar-w) !important; }
  .sidebar.collapsed ~ .main-content,
  body.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-sm) !important; }
  .topbar { margin-left: var(--sidebar-w) !important; }
  .sidebar.collapsed ~ .main-content .topbar,
  body.sidebar-collapsed .topbar { margin-left: var(--sidebar-w-sm) !important; }
  .content-area { padding: 18px !important; }
}

@media (max-width: 1024px) {
  .content-area { padding: 14px !important; }
}

/* ── PAGE HEADER ────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .page-title    { font-size: 18px !important; }
  .page-subtitle { font-size: 12px !important; }
  .page-header   { margin-bottom: 16px !important; }
}

@media (max-width: 1024px) {
  .page-title { font-size: 16px !important; }
}

/* ── CARDS STATS ────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .stat-card-value   { font-size: 22px !important; }
  .stat-card-label   { font-size: 10px !important; }
  .stat-card         { padding: 16px 18px !important; }
  .dashboard-card    { padding: 16px 18px !important; }
  .dashboard-card .value { font-size: 22px !important; }
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .stat-card-value   { font-size: 20px !important; }
  .dashboard-card .value { font-size: 20px !important; }
  .stat-card         { padding: 14px 14px !important; }
  .dashboard-card    { padding: 14px 14px !important; }
}

/* ── CARDS CONTENEDOR ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .card-body   { padding: 16px 18px !important; }
  .card-header { padding: 12px 18px !important; }
  .card-title  { font-size: 13px !important; }
}

/* ── TABLA ──────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  thead th { padding: 9px 12px !important; font-size: 10px !important; }
  tbody td  { padding: 10px 12px !important; font-size: 13px !important; }
}

@media (max-width: 1024px) {
  thead th  { padding: 8px 10px !important; font-size: 10px !important; }
  tbody td  { padding: 9px 10px !important; font-size: 12px !important; }
  .table-container { padding: 14px !important; border-radius: 12px !important; }
}

/* ── BOTONES ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .btn    { height: 36px !important; padding: 7px 14px !important; font-size: 12.5px !important; }
  .btn-sm { height: 28px !important; padding: 4px 10px  !important; font-size: 11px  !important; }
  .btn-lg { height: 42px !important; padding: 10px 20px !important; font-size: 14px  !important; }
}

@media (max-width: 1024px) {
  .btn    { height: 34px !important; padding: 6px 12px !important; font-size: 12px  !important; }
  .btn-sm { height: 26px !important; padding: 4px 9px  !important; font-size: 10.5px !important; }
}

/* ── INPUTS / FORM ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="search"], select, textarea, .form-control {
    height: 40px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  label, .form-label { font-size: 11.5px !important; }
  .form-group { margin-bottom: 14px !important; }
}

@media (max-width: 1024px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="search"], select, textarea, .form-control {
    height: 38px !important;
    font-size: 12.5px !important;
    padding: 7px 10px !important;
  }
  label, .form-label { font-size: 11px !important; }
  .form-group { margin-bottom: 12px !important; }
}

/* ── BADGES ─────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .badge { font-size: 10.5px !important; padding: 3px 8px !important; }
}

/* ── MODALES ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .modal-content { max-width: 520px !important; }
  .modal-header  { padding: 14px 18px !important; }
  .modal-body    { padding: 16px 18px !important; }
  .modal-actions { padding: 12px 18px !important; }
  .modal-header h2, .modal-header h3 { font-size: 14px !important; }
}

@media (max-width: 1024px) {
  .modal-content { max-width: 480px !important; }
  .modal         { padding: 14px !important; }
}

/* ── POS LAYOUT ─────────────────────────────────────────────────── */
/* La barra inferior #posBottomBar es sticky y siempre visible en TODAS las pantallas */
#posBottomBar {
  position: sticky !important;
  bottom: 0 !important;
}

@media (max-width: 1280px) {
  .pos-layout {
    grid-template-columns: 1fr 280px !important;
    gap: 12px !important;
  }
  /* El carrito muestra solo header + items + cliente + descuento */
  .cart-section {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }
  .product-card-img    { height: 60px !important; }
  .product-card-body   { padding: 8px 10px !important; }
  .product-card-name   { font-size: 12px !important; }
  .product-card-price  { font-size: 14px !important; }
  .product-card-stock  { font-size: 10px !important; }
}

@media (max-width: 1024px) {
  .pos-layout {
    grid-template-columns: 1fr 250px !important;
    gap: 10px !important;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
    gap: 8px !important;
  }
  .product-card-img    { height: 54px !important; }
  .product-card-name   { font-size: 11.5px !important; }
  .product-card-price  { font-size: 13px !important; }
  /* Barra inferior más compacta en Canaima */
  #posBottomBar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  #posBottomBar .btn-accent {
    padding: 0 18px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* ── CART SECTION ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .cart-item      { padding: 8px 12px !important; }
  .cart-item-name { font-size: 12.5px !important; }
  .cart-item-price{ font-size: 13px !important; }
  .qty-btn        { width: 26px !important; height: 26px !important; font-size: 14px !important; }
}

/* ── FILTROS / CHIPS ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .filter-chip { font-size: 11.5px !important; padding: 5px 11px !important; }
}

/* ── TABLA TOOLBAR ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .table-toolbar { gap: 8px !important; margin-bottom: 10px !important; }
  .table-header h2 { font-size: 16px !important; }
}

@media (max-width: 1024px) {
  .table-header h2 { font-size: 14px !important; }
}

/* ── GRÁFICO DASHBOARD ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  #graficoVentasContainer { height: 220px !important; }
}

@media (max-width: 1024px) {
  #graficoVentasContainer { height: 180px !important; }
}

/* ── SECONDARY TABS ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .secondary-tab { padding: 10px 14px !important; font-size: 12.5px !important; }
}

@media (max-width: 1024px) {
  .secondary-tab { padding: 9px 12px !important; font-size: 12px !important; }
}

/* ── DROPDOWN USER ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .user-dropdown-menu-inner { min-width: 170px !important; }
  .dropdown-item { font-size: 12.5px !important; padding: 7px 9px !important; }
  .user-info strong { font-size: 12px !important; }
  .user-info span   { font-size: 10px !important; }
}

/* ── CRÉDITOS STATS ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .cred-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .cred-stat-val { font-size: 20px !important; }
  .cred-stat-lbl { font-size: 10px !important; }
  .cred-stat-card { padding: 14px 12px !important; }
}

@media (max-width: 1024px) {
  .cred-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── COMPRAS RESUMEN ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #tab-compras > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ── MENSAJE FLOTANTE ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .mensaje { font-size: 13px !important; padding: 10px 16px !important; bottom: 16px !important; right: 16px !important; }
}

/* ── SCROLLBAR MÁS DELGADO ──────────────────────────────────────── */
@media (max-width: 1280px) {
  ::-webkit-scrollbar       { width: 4px !important; height: 4px !important; }
}

/* ── BARRA FILTROS DASHBOARD ─────────────────────────────────────── */
@media (max-width: 1280px) {
  #tab-dashboard > div:first-child {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
}

/* ── TOPBAR JUNTO AL SIDEBAR COLAPSADO ───────────────────────────── */
@media (max-width: 1024px) {
  /* Cuando carga por primera vez, auto-colapsar el sidebar */
  .sidebar { width: var(--sidebar-w) !important; }
}

/* ── UTILIDADES RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .hide-canaima { display: none !important; }
}