/* ============================================
   Responsive Design
   ============================================ */

/* ---- TABLET (1024px) ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- MOBILE (768px) ---- */
@media (max-width: 768px) {
  /* Sidebar: oculta por defecto en movil */
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .sidebar-toggle {
    display: block;
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-content {
    padding: var(--space-4);
  }

  .admin-topbar {
    padding: var(--space-3) var(--space-4);
  }

  .admin-topbar-title {
    font-size: var(--text-lg);
  }

  /* Grids */
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* Tabla scroll horizontal */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Overlay al abrir sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 99;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* Cards en movil */
  .card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  /* Modal en movil: full width */
  .modal-box {
    margin: var(--space-3) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 85vh !important;
  }

  /* Calendar grid mejor en movil */
  .cal-grid {
    gap: 2px !important;
  }

  .cal-day {
    font-size: var(--text-sm) !important;
  }

  /* Slots grid: 2 columnas en movil */
  .slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .slot-btn {
    font-size: var(--text-sm) !important;
    padding: var(--space-3) !important;
    min-height: 44px;
  }

  /* Form inputs mas grandes para touch */
  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--space-3) var(--space-4);
    font-size: 16px; /* Evita zoom en iOS */
  }

  /* Toast en movil: full width */
  #toast-container {
    left: 16px !important;
    right: 16px !important;
    top: 12px !important;
  }

  /* Progress bar */
  .progress-bar {
    margin-bottom: var(--space-6);
  }
}

/* ---- SMALL MOBILE (480px) ---- */
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }

  .client-layout {
    padding: var(--space-3);
  }

  .client-page-title {
    font-size: var(--text-xl);
  }

  .btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    width: 100%;
  }

  .btn-block-mobile {
    width: 100%;
  }

  /* Navbar en movil */
  .client-navbar {
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
  }

  .client-navbar-logo-text {
    font-size: var(--text-base);
  }

  .client-navbar-logo-icon {
    width: 32px;
    height: 32px;
  }

  /* Stats cards en 2 columnas compact */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }

  .stat-card {
    padding: var(--space-3) !important;
  }

  .stat-value {
    font-size: var(--text-xl) !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  /* Tablas: hide less important columns */
  .hide-mobile {
    display: none !important;
  }
}

/* ---- SAFE AREA (notch devices) ---- */
@supports (padding: env(safe-area-inset-top)) {
  .client-layout {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
  }

  .admin-topbar {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  }

  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- TOUCH IMPROVEMENTS ---- */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .card-hover:hover {
    transform: none;
    box-shadow: none;
  }

  .btn-primary:hover {
    transform: none;
  }

  /* Add active states instead */
  .card-hover:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .btn:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  .sidebar-link:active {
    background: var(--bg-card-hover);
  }

  /* Bigger touch targets */
  .sidebar-link {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
  }

  /* Calendar days bigger touch target */
  .cal-day-clickable {
    min-height: 40px;
    min-width: 40px;
  }
}