/* =====================================================================
   Estructura: menú lateral (computadora/tablet) y barra inferior (celular)
   Prioridad: computadora → tablet → celular
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.brand-mark {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--color-primary); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-weight: var(--font-weight-bold); line-height: 1.15; font-size: var(--font-size-base); }
.brand-sub { font-size: 0.875rem; color: var(--color-text-muted); }

.nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; }
.nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition);
}
.nav-link:hover { background: var(--color-surface-alt); }
.label-short { display: none; }
.nav-link[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-weight-bold); }

.sidebar-footer { padding: var(--space-4); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold);
}
.user-name { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); line-height: 1.2; }
.user-role { font-size: 0.875rem; color: var(--color-text-muted); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.demo-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-warning-soft); color: var(--color-warning);
  padding: var(--space-2) var(--space-4); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm);
  text-align: center;
}

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-6); }
.login-card .brand { border: 0; padding: 0; justify-content: center; flex-direction: column; text-align: center; }
.login-card .brand-mark { width: 64px; height: 64px; }
.login-card .brand-name { font-size: var(--font-size-xl); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --sidebar-width: 104px; }
  .brand { justify-content: center; padding: var(--space-4) var(--space-2); }
  .brand-text, .sidebar-footer .user-text { display: none; }
  .nav-link { flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; padding: var(--space-2) var(--space-1); font-size: 0.8125rem; text-align: center; }
  .label-full { display: none; }
  .label-short { display: inline; }
  .sidebar-footer { justify-content: center; }
}

/* ---------- Celular ---------- */
@media (max-width: 700px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    order: 2; position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 40;
    width: 100%; height: auto; flex-direction: row;
    border-right: 0; border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .brand, .sidebar-footer { display: none; }
  .nav { flex-direction: row; padding: var(--space-1); gap: 0; }
  .nav-link { flex: 1; min-width: 0; min-height: 64px; font-size: 0.72rem; padding: var(--space-1) 0; }
  .main { padding-bottom: 84px; }
  .page { padding: var(--space-4); }
  .form-row { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .product-card .body { padding: var(--space-3); }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-footer .btn { flex: 1; }
  .toast-region { bottom: 96px; }
  .page-header .btn { width: 100%; }
}