/* shells.css — layouts de página. CERO valores crudos: solo var(--token). */

@layer shells {
  /* ── Marca ── */
  .brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em;
    color: var(--text); text-decoration: none;
  }
  .brand__img { height: 56px; width: auto; }
  .brand__suffix { font-weight: 500; color: var(--accent); }
  .brand--sm { font-size: var(--text-base); }
  .brand--sm .brand__img { height: 44px; width: auto; }

  /* ── Shell auth (login, password reset) ── */
  .shell-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
  .auth-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-6); }
  .auth-brand { display: flex; justify-content: center; }
  .auth-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    padding: var(--space-8);
  }
  .auth-card--centered { text-align: center; }
  .auth-card h1 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
  .auth-card .sub { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-6); }
  .auth-foot { text-align: center; font-size: var(--text-sm); }

  /* ── Topbar (portal lab) ── */
  .topbar {
    position: sticky; top: 0; z-index: var(--z-topbar);
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .topbar__in {
    max-width: 1100px; margin: 0 auto; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-4);
  }
  .shell-lab { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; }
  .shell-lab > .topbar { width: 100%; align-self: stretch; }
  .content { max-width: 1100px; width: 70%; margin: 0 auto; padding: var(--space-8) var(--space-4); flex: 1; }
  .user-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--text-2);
    background: none; border: 0; cursor: pointer;
    padding: 6px 8px; border-radius: var(--radius-sm);
  }
  .user-btn:hover { background: var(--surface-2); color: var(--text); }
  .user-btn .icon { width: 14px; height: 14px; }

  /* ── Admin (sidebar) ── */
  .admin { min-height: 100dvh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .admin-top { display: none; }
  .sidebar {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; gap: var(--space-6);
    background: var(--surface); border-right: 1px solid var(--border);
    padding: var(--space-4);
  }
  .sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar__link {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-weight: 500;
    color: var(--text-2); text-decoration: none;
  }
  .sidebar__link:hover { background: var(--surface-2); color: var(--text); }
  .sidebar__link.is-active { background: var(--accent-soft); color: var(--accent); }
  .sidebar__link .icon { width: 16px; height: 16px; }
  .sidebar__foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: var(--space-3); }
  .sidebar__user {
    font-size: var(--text-xs); color: var(--text-2);
    padding: 0 10px var(--space-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .admin-main { min-width: 0; display: flex; flex-direction: column; }
  .admin-content { max-width: 1200px; width: 100%; margin: 0 auto; padding: var(--space-8) var(--space-6); flex: 1; }

  @media (max-width: 1023px) {
    .admin { grid-template-columns: 1fr; }
    .admin-top {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: var(--z-topbar);
      height: 56px; padding: 0 var(--space-4);
      background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .sidebar {
      position: fixed; inset: 0 auto 0 0; width: 260px; z-index: var(--z-modal);
      transform: translateX(-100%);
      transition: transform var(--dur) var(--ease);
    }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-pop); }
    .admin-content { padding: var(--space-6) var(--space-4); }
  }

  /* ── Footer ── */
  .footer {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
  }
  .footer__in {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    font-size: var(--text-sm); color: var(--text-2);
  }
  .footer__copy { display: inline-flex; align-items: center; gap: 2px; }
  .footer__brand {
    color: var(--text); font-weight: 600; text-decoration: none;
    margin-right: 6px;
  }
  .footer__brand:hover { color: var(--accent); }
  .footer__meta { display: inline-flex; align-items: center; gap: var(--space-4); }
  .footer__link { color: var(--text-2); text-decoration: none; }
  .footer__link:hover { color: var(--accent); text-decoration: underline; }
  .footer__version {
    font-family: var(--font-mono); font-size: var(--text-xs);
    color: var(--text-3);
  }
  @media (max-width: 639px) {
    .footer__in { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
  }

  /* ── Legal (aviso de privacidad, página standalone) ── */
  .shell-legal { display: flex; flex-direction: column; min-height: 100dvh; }
  .legal-content { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-4); flex: 1; }
  .legal-content .auth-brand { margin-bottom: var(--space-6); }
  .legal-content h1 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
  .legal-content h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
  .legal-content p, .legal-content li { font-size: var(--text-base); color: var(--text-2); line-height: 1.6; }
  .legal-content ul { padding-left: var(--space-6); }
}