/* =============================================
   HUMANO — RESPONSIVE
   Mobile-first breakpoints
   ============================================= */

/* ===== TABLET (≤ 1024px) ===== */
@media (max-width: 1024px) {
  :root {
    --content-padding: 1.5rem;
    --sidebar-width: 240px;
  }
  .content-grid-sidebar { grid-template-columns: 1fr; }
  .feed-layout { grid-template-columns: 1fr; }
  .feed-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .licencias-stats { grid-template-columns: repeat(2, 1fr); }
  .calendar-cell { min-height: 80px; }
  .login-screen { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-form-panel { min-height: 100vh; }
  .content-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .content-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
  :root {
    --content-padding: var(--content-padding-mobile);
    --header-height: 58px;
  }

  /* Sidebar becomes off-canvas */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    width: var(--sidebar-width) !important;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Main content full width */
  .main-wrapper { margin-left: 0; }

  /* Show hamburger */
  .header-hamburger { display: flex !important; }

  /* Header adjustments */
  .top-header { padding: 0 var(--space-4); }
  .header-page-subtitle { display: none; }

  /* Page header stack */
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .page-actions { width: 100%; justify-content: flex-end; }

  /* Grid collapsing */
  .content-grid-2,
  .content-grid-3,
  .content-grid-4 { grid-template-columns: 1fr; }
  .content-grid-sidebar { grid-template-columns: 1fr; }

  /* Feed */
  .feed-layout { grid-template-columns: 1fr; }
  .feed-sidebar { grid-template-columns: 1fr; }

  /* Licencias */
  .licencias-stats { grid-template-columns: repeat(2, 1fr); }
  .licencia-type-grid { grid-template-columns: repeat(2, 1fr); }
  .request-stepper { gap: 0; }
  .step-label { display: none; }
  .days-counter-number { font-size: 2.5rem; }

  /* Calendar */
  .calendar-cell { min-height: 56px; padding: var(--space-1); }
  .calendar-event { display: none; }
  .calendar-cell .calendar-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 1px; }
  .calendar-filters { gap: var(--space-2); }

  /* Users */
  .user-grid { grid-template-columns: 1fr; }

  /* Profile */
  .profile-hero-content { flex-direction: column; text-align: center; }
  .profile-meta-items { justify-content: center; }

  /* Modals */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-width: 100%;
    max-height: 92vh;
  }

  /* Toast */
  .toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .toast { min-width: unset; max-width: 100%; }

  /* Tabs */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: var(--space-3) var(--space-4); }

  /* Tables */
  .data-table thead { display: none; }
  .data-table tbody td { display: block; padding: var(--space-2) var(--space-3); }
  .data-table tbody td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .data-table tbody tr { border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); margin-bottom: var(--space-3); display: block; padding: var(--space-2); }

  /* Solicitud row */
  .solicitud-row { flex-wrap: wrap; }
  .solicitud-actions { width: 100%; justify-content: flex-end; }
}

/* ===== SMALL MOBILE (≤ 480px) ===== */
@media (max-width: 480px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  .page-title { font-size: var(--font-size-xl); }
  .licencias-stats { grid-template-columns: 1fr 1fr; }
  .licencia-type-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { flex-direction: column; gap: var(--space-3); }
  .calendar-day-header { font-size: 9px; }
  .login-form-panel { padding: var(--space-6); }
}

/* ===== PRINT ===== */
@media print {
  .sidebar, .top-header, .toast-container, .modal-backdrop { display: none !important; }
  .main-wrapper { margin-left: 0; }
  .main-content { padding: 0; }
}