/* ============================================================
   Nutrimetría · responsive.css
   Media queries · menú móvil · colapso del sidebar
   ============================================================ */

@media (max-width: 1080px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ── Escritorio: colapsar sidebar para ganar ancho ──────── */
@media (min-width: 761px) {
  .app-shell.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .app-shell.sidebar-collapsed .content { margin-left: 0; }
}

@media (max-width: 980px) {
  :root { --sidebar-w: 240px; }
  .main { padding: 24px 22px 80px; }
  .topbar { padding: 16px 22px; }
}

/* ── Móvil: sidebar colapsa, header con botón menú ──────── */
@media (max-width: 760px) {
  .content { margin-left: 0; }

  .sidebar {
    box-shadow: var(--shadow-md);
    width: 288px;
  }
  .sidebar:not(.open) { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }

  .menu-toggle { display: flex; }
  .sidebar-collapse-toggle { display: none; }

  .topbar { padding: 14px 16px; }
  .topbar h1 { font-size: 19px; }
  .topbar-sub { display: none; }
  .norm-chip { display: none; }

  .main { padding: 20px 16px 90px; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-head h1 { font-size: 23px; }

  .sidebar-foot { display: none; }
}

@media (max-width: 460px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .main { padding: 16px 12px 90px; }
  .card-pad { padding: 16px 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick-item { padding: 12px 14px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}