/* ============================================
   GanadoPro — Responsive
   Todo el responsive aquí. Nunca en archivos individuales.
   ============================================ */

/* Reglas base obligatorias (CLAUDE.md) */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
.main-content, .page-container { overflow-x: hidden !important; max-width: 100% !important; }
* { box-sizing: border-box; }
.table-wrapper { overflow-x: auto !important; }

/* ============================================
   TABLET — hasta 1100px
   ============================================ */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .page-container { padding: 20px 24px; }
}

/* ============================================
   MOBILE — hasta 768px
   ============================================ */
@media (max-width: 768px) {
  /* Sidebar: oculto, deslizable */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    width: 260px;
  }

  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }

  /* Main sin margen izquierdo */
  .main-content { margin-left: 0; }

  /* Mostrar barra mobile */
  .mobile-header { display: flex; }

  /* Ajustes de contenedor */
  .page-container { padding: 16px; }

  /* Stats: 2 columnas */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card  { padding: 14px 16px; }
  .stat-value { font-size: 1.8rem; }

  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Modal — sube desde abajo */
  .modal {
    max-width: 100%;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  /* Form row: columna única */
  .form-row { grid-template-columns: 1fr; }

  /* Filters */
  .filters-bar { gap: 8px; }
  .search-input { max-width: 100%; }

  /* Dashboard grid */
  .dashboard-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Toast */
  .toast-container { bottom: 16px; right: 12px; left: 12px; }
  .toast { min-width: unset; max-width: 100%; }

  /* Weather */
  .weather-details { grid-template-columns: 1fr 1fr; }

  /* Table */
  .table { font-size: 0.82rem; }
  .table td, .table th { padding: 9px 10px; }

  /* Nav links más grandes en mobile */
  .nav-link { padding: 12px 20px; font-size: 0.95rem; }
}

/* ============================================
   MÓVIL PEQUEÑO — hasta 480px
   ============================================ */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-value { font-size: 1.6rem; }
  .stat-label { font-size: 0.68rem; }

  .page-title { font-size: 1.3rem; }

  .btn { padding: 7px 12px; font-size: 0.82rem; }

  .table td, .table th { padding: 8px 8px; }

  .weather-temp { font-size: 2.4rem; }
}