/* Bridge: tokens antigos do PerfilEdu → molde 2.6.0
 * extras.css continua usando --bg, --ink, --blue, etc. Os apelidos são
 * resolvidos no <html>, então valem para Clássico e Escuro.
 */
:root {
  --auth-watermark: url("/static/icons/icon-512.png");
  --bg: var(--surface-app);
  --surface: var(--surface-raised);
  --panel: var(--surface-raised);
  --panel-soft: var(--surface-sunken);
  --ink: var(--text-1);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --line: var(--border);
  --blue: var(--accent);
  --blue-bright: var(--accent);
  --blue-soft: var(--accent-soft);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --shadow: var(--shadow-md);
  --radius: var(--r-md);
}

/* Aviso da página (flash do Flask) = .alert do molde, com espaço até o conteúdo. */
.aviso-pagina { margin: 0 0 var(--sp-4); }

/* Botão Sair na nav-utils como item de navegação */
.nav-utils form { margin: 0; }
.nav-utils .nav-item { width: calc(100% - var(--sp-4)); }

/* Atalhos quietos no Início (sem tiles dashboard) */
.home-atalhos {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.home-atalhos a {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.home-atalhos li:last-child a { border-bottom: 0; }
@media (hover: hover) {
  .home-atalhos a:hover { background: var(--surface-hover); }
}
.home-atalhos .ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}
.home-atalhos strong {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}
.home-atalhos span {
  display: block;
  font-size: var(--fs-12);
  color: var(--text-2);
  margin-top: 2px;
}

/* Indicadores da Visão geral (.stat do molde) em grade que se ajusta à largura */
.indicadores { margin-bottom: var(--sp-6); }
/* Painel ajuda: estado inicial fechado (CSS do molde cuida do is-open) */
#ajudaPanel:not(.is-open) { pointer-events: none; }

.state.state-compacto { padding: var(--sp-5) var(--sp-3); }
.state.state-compacto p { max-width: none; }

/* Fundo já no html — com data-theme no <head>, a navegação não pisca claro→escuro */
html, body {
  background-color: var(--surface-app);
}

/* Soft-nav: área de conteúdo opaca — o swap de .main não revela fundo claro */
.app .main {
  background-color: var(--surface-app);
  min-height: 0;
}

/* Sem View Transition crossfade — era a “piscada de leve” no Chromium.
   Soft-nav já mantém o shell; hard reload usa o script de tema no <head>. */
@view-transition {
  navigation: none;
}

/* Ícone Liquid Glass (PERFIL_DESIGN_RULE §17): tile azul + transparência externa.
   Não forçar caixa branca/preta atrás do símbolo no tema escuro. */
.product-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.brand-mark,
.auth-mark {
  background: transparent !important;
  padding: 0 !important;
  overflow: visible;
}

/* Rodapé das telas de entrada fica sobre a casca azul (--chrome-bg). */
.auth-page .page-foot { color: var(--chrome-muted); }

/* Item atual no rodapé da lateral (Ajuda, Minha conta): o molde deixa o
   rodapé vazio, e a cor apagada de .nav-utils vencia a do item atual. */
.sidebar .nav-utils .nav-item[aria-current="page"],
.sidebar .nav-utils .nav-item[aria-current="page"] .ico { color: var(--chrome-on-active); }

/* Abas do molde: quebram de linha em vez de rolar para o lado (regra do
   PerfilEdu: nenhuma tela com rolagem lateral). Aba que é link para outra
   página marca a atual com aria-current. */
.tabs.tabs-quebra { flex-wrap: wrap; overflow: visible; margin-bottom: var(--sp-4); }
.tab { text-decoration: none; }
@media (hover: hover) {
  .tab:hover { text-decoration: none; }
}
.tab[aria-current="page"] {
  color: var(--color-brand-accent); border-bottom-color: var(--color-action-accent);
  font-weight: var(--fw-medium);
}
[data-theme="dark"] .tab[aria-current="page"] { color: var(--color-action-accent); }