/* Layout do shell — Roteirizador BR4 / Vestra (UI-02 / DEC-070).
 *
 * A "casca" das telas autenticadas: aba lateral persistente (sidebar) à esquerda
 * e a área de conteúdo à direita. No mobile a sidebar vira um drawer que desliza
 * da esquerda (botão hambúrguer, backdrop, fecha no Esc, trava o scroll do body).
 * Também estiliza o login em 2 colunas e a tela simples full-screen (bloqueado).
 *
 * CSS puro sobre os tokens Vestra. Sem Tailwind, sem build (NFR-005). Carregado
 * por último na cascata (fonts → tokens → base → components → layout). */

/* ============================ Shell autenticado ============================ */
body.app { padding: 0; }

.app-shell { display: flex; min-height: 100vh; }

/* A regra global `main {}` (base.css) centra em 1200px; no shell o main preenche
 * a área e a centralização passa para o wrapper interno. */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: var(--spacing-24);
}
.app-conteudo { max-width: var(--page-max-width); margin: 0 auto; }

/* ============================ Sidebar ============================ */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  background: var(--purple-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-topo {
  padding: var(--spacing-24) var(--spacing-16) var(--spacing-16);
}
.sidebar-logo {
  display: block;
  width: 150px;
  max-width: 80%;
  height: auto;
  /* Logo colorida → branca sólida sobre o roxo escuro (padrão do projeto Cotação). */
  filter: brightness(0) invert(1);
}

.sidebar-nav {
  flex: 1 1 auto;
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-grupo-titulo {
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-300);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 10px var(--spacing-16);
  border-radius: var(--radius-nav);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover {
  background: var(--purple-800);
  color: #fff;
  text-decoration: none;
}
.nav-item.ativo {
  background: var(--green-500);
  color: var(--purple-900);
}
.nav-item.ativo:hover { background: var(--green-500); color: var(--purple-900); }
/* Foco visível por teclado (acessibilidade). */
.nav-item:focus-visible,
.sidebar-sair button:focus-visible {
  outline: 2px solid var(--green-300);
  outline-offset: 2px;
}

.nav-item-icone { width: 18px; text-align: center; flex: 0 0 18px; }

.sidebar-rodape {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--spacing-16);
  font-size: var(--text-caption);
}
.sidebar-usuario { color: #fff; font-weight: var(--font-weight-medium); word-break: break-word; }
.sidebar-perfil { color: var(--purple-300); margin-top: 2px; }
.sidebar-sair { margin-top: var(--spacing-8); }
.sidebar-sair button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--green-300);
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.sidebar-sair button:hover { text-decoration: underline; }

/* ============================ Drawer (mobile) ============================ */
.menu-botao {
  display: none;
  position: fixed;
  top: var(--spacing-16);
  left: var(--spacing-16);
  z-index: 40;
  align-items: center;
  gap: var(--spacing-8);
  background: var(--purple-800);
  color: #fff;
  border: 0;
  border-radius: var(--radius-nav);
  padding: 8px 14px;
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: var(--shadow-xl-2);
}
.app-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 0, 80, 0.45);
  z-index: 30;
}

/* Link "pular para o conteúdo" (acessibilidade por teclado). */
.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--purple-800);
  color: #fff;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-nav);
}
.pular-link:focus { left: var(--spacing-8); top: var(--spacing-8); }

@media (max-width: 900px) {
  .menu-botao { display: inline-flex; }
  .app-main { padding-top: 64px; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 35;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-xl-2);
  }
  .app-shell.aberto .sidebar { transform: translateX(0); }
  .app-shell.aberto .app-backdrop { display: block; }
}

/* ============================ Login (2 colunas) ============================ */
.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.login-marca {
  background: var(--gradient-marca);
  color: #fff;
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-marca .login-logo {
  width: 190px;
  max-width: 70%;
  height: auto;
  filter: brightness(0) invert(1);
}
.login-headline {
  color: #fff;  /* vence a regra global `h1 { color: ink }` (base.css) sobre o painel escuro */
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  margin: 0 0 var(--spacing-16);
  max-width: 22ch;
}
.login-headline .verde { color: var(--green-300); }
.login-apoio { color: rgba(255, 255, 255, 0.82); max-width: 42ch; }
.login-copy { font-size: var(--text-caption); color: rgba(255, 255, 255, 0.6); }

.login-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-48) var(--spacing-24);
  background: var(--card);
}
.login-form { width: 100%; max-width: 360px; }
.login-form h1 { font-size: var(--text-heading-sm); margin-bottom: var(--spacing-24); }
.login-logo-mobile { display: none; }
.login-logo-mobile img { width: 170px; height: auto; margin-bottom: var(--spacing-24); }

.campo { display: block; margin-bottom: var(--spacing-16); }
.campo-rotulo {
  display: block;
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.login-form input { width: 100%; }
.login-form .btn { width: 100%; justify-content: center; margin-top: var(--spacing-8); }
.form-erro {
  background: var(--pill-danger-bg);
  color: var(--ink);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-16);
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body-sm);
}

@media (max-width: 820px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { display: none; }
  .login-logo-mobile { display: block; }
}

/* ============================ Formulário de cadastro ============================ */
.form-cadastro .campo { margin-bottom: var(--spacing-16); }
.campo-legenda { font-size: var(--text-caption); margin: 0 0 var(--spacing-16); }
.campo-obrigatorio { color: #b3261e; font-weight: var(--font-weight-bold); }
.form-cadastro input:not([type="checkbox"]):not([type="radio"]),
.form-cadastro select,
.form-cadastro textarea { width: 100%; }
.form-cadastro select[multiple] { min-height: 120px; }
.form-cadastro .campo-ajuda {
  display: block;
  margin-top: 4px;
  font-size: var(--text-caption);
  color: var(--color-slate);
}
.form-cadastro .campo-erro { display: block; margin-top: 4px; font-size: var(--text-body-sm); }
/* Perfis (checkbox list): lista vertical legível em vez de inline apertado. */
.form-cadastro ul { list-style: none; margin: 0; padding: 0; }
.form-cadastro ul li { margin: 4px 0; }
.form-cadastro ul li label { text-transform: none; letter-spacing: 0; color: var(--ink); }

/* ============================ Tela simples full-screen ============================ */
/* Usada pela tela de bloqueio (django-axes): sem sidebar, cartão centrado. */
.tela-simples {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
}
.tela-simples-card { width: 100%; max-width: 460px; text-align: center; }
.tela-simples-card .login-logo-mobile { display: block; }
.tela-simples-card .login-logo-mobile img { margin: 0 auto var(--spacing-24); }