/* Estructura de la aplicación sobre los tokens de Nocturne */

/* --- Acceso --- */
.auth-wrap { display: flex; min-height: 100vh; }
.auth-panel {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 460px; margin: 0 auto; padding: var(--space-8);
}
.auth-brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-weight: 500; margin-bottom: var(--space-8);
}
.auth-hero {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-8);
  background: radial-gradient(120% 90% at 80% 10%, var(--color-section-glow), var(--color-section) 60%);
  color: var(--color-neutral-100);
}
.auth-hero-inner { max-width: 380px; }
.auth-hero h1 { font-size: 34px; line-height: 1.18; }
.auth-hero h6 { opacity: .7; }
@media (max-width: 800px) { .auth-hero { display: none; } }

.brand-mark {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid var(--color-accent); color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-family: var(--font-heading);
}
.brand-mark-logo { width: 34px; height: 34px; border-radius: var(--radius-md); object-fit: contain; flex-shrink: 0; }

/* --- Shell --- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex-shrink: 0; background: var(--color-surface);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-4);
}
.side-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-8);
  font-family: var(--font-heading); font-weight: 500;
}
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-link {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text); font-size: 14px;
}
.nav-link i { font-size: 18px; }
.nav-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.nav-link.is-active { color: var(--color-accent); background: var(--color-accent-900); }
.side-user {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); box-shadow: var(--shadow-sm); border-radius: var(--radius-md);
}
.side-user-meta { flex: 1; min-width: 0; line-height: 1.2; }
.su-name { display: block; font-weight: 500; font-size: 13px; font-family: var(--font-heading); }
.su-role { display: block; font-size: 11.5px; color: var(--color-neutral-400); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-accent-800); color: var(--color-accent-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: var(--space-8); overflow: auto; }
.content-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.content-sub { font-size: 12.5px; color: var(--color-neutral-400); }

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; }
  .side-nav { flex-direction: row; }
  .nav-link span { display: none; }
  .side-user { display: none; }
}