/* =============================================================
   app.css — Sistema visual do shell interno (sidebar + main)
   Sprint 5.2 (28/Abr/2026)

   Aplicado em telas internas que usam app-shell:
   - dashboard/home.html (esta sprint)
   - futuras: listasses, admaloca, prevsel, etc (sprints 5.3+)

   Layout:
   - Mobile (<1024px): sidebar como drawer (hidden por padrão), main full-width
   - Desktop (>=1024px): sidebar fixa 280px à esquerda, main flexível

   Tema dark default; dark/light dual mode via tokens (Sprint 5.0).
   ============================================================= */

/* Bloco 9.10 polish (12/Mai): utility a11y — oculta visualmente mas
   mantem disponivel pra screen readers. Usar em <legend> de fieldsets
   onde o titulo seria redundante visualmente mas necessario pra a11y. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Reset/base ===
   Bloco 9.10 polish (12/Mai): <code> tag default vira rosa-vermelho no
   light mode (browser default). Padroniza pra tom dourado tematico do
   Nvcleopar em ambos os modos. Mesma cor que links de destaque. */
code, kbd {
  font-family: var(--font-family-base);
  font-size: 0.92em;
  color: var(--color-accent-primary);
  background: rgba(201, 169, 97, 0.10);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

/* === SIDEBAR === */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0; /* top right bottom left */
  width: 280px;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  /* Bloco 9.12: scrollbar custom Nvcleopar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-primary-dark) transparent;
}
/* Bloco 9.12: scrollbar custom WebKit (Chrome/Edge/Safari) */
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-accent-primary-dark);
  border-radius: var(--radius-pill);
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-primary);
}

.sidebar.is-open {
  transform: translateX(0);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.40);
}

/* Backdrop quando sidebar aberta — bloqueia interação e escurece o conteúdo */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 40;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* === Sidebar header === */
.sidebar__header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar__logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Light mode: usa o MESMO arquivo (logo-dourada.png) e aplica filter pra
   deixar todos os pixels não-transparentes pretos. Garante estrutura,
   tamanho e aspect ratio 100% idênticos entre dark e light. */
[data-theme="light"] .sidebar__logo {
  filter: brightness(0);
}

.sidebar__tagline {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

/* === Sidebar nav === */
.sidebar__nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar__nav-link,
.sidebar__nav-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition:
    background-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
}

.sidebar__nav-link i,
.sidebar__nav-toggle i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.sidebar__nav-link span,
.sidebar__nav-toggle span {
  flex: 1;
  text-align: left;
}

.sidebar__nav-link:hover,
.sidebar__nav-toggle:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.sidebar__nav-link:focus-visible,
.sidebar__nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-secondary);
}

/* Item ativo — dark mode */
.sidebar__nav-link.is-active {
  background-color: rgba(174, 255, 0, 0.10);
  color: var(--color-accent-secondary);
  font-weight: 600;
}

.sidebar__nav-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background-color: var(--color-accent-secondary);
  border-radius: 0 3px 3px 0;
}

/* Item ativo — light mode (verde-limão sólido + texto preto pra leitura) */
[data-theme="light"] .sidebar__nav-link.is-active {
  background-color: rgba(174, 255, 0, 0.30);
  color: #1a3000;
  font-weight: 600;
}

[data-theme="light"] .sidebar__nav-link.is-active::before {
  background-color: #4a6e00; /* verde escuro pra alto contraste em fundo claro */
}

/* === Submenu (collapsible) === */
.sidebar__nav-group {
  display: flex;
  flex-direction: column;
}

.sidebar__chevron {
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar__nav-group.is-open .sidebar__chevron {
  transform: rotate(180deg);
}

.sidebar__submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar__nav-group.is-open .sidebar__submenu {
  grid-template-rows: 1fr;
}

.sidebar__submenu > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 8px;
}

.sidebar__submenu a {
  display: block;
  padding: 8px 12px 8px 34px;
  margin: 2px 8px;  /* Sub-fase 6.D.9: respiro lateral pro item ativo */
  border-radius: var(--radius-md);  /* 12px — mais arredondado, estilo botao */
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
  position: relative;
  transition:
    color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar__submenu a::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 1px;
  background-color: var(--color-border-strong);
}

.sidebar__submenu a:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-hover);
}

.sidebar__submenu a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-secondary);
}

/* Sub-fase 6.D.7 + 6.D.8: pai toggle destaca quando:
   - algum sub-item esta ativo (`:has`)
   - JS marcou diretamente como `.is-active` (fallback de path,
     ex: /montador/ sem link exato — Sub-fase 6.D.8)
   Pai recebe MESMO destaque do sub (background + cor + traço). */
.sidebar__nav-group:has(.sidebar__submenu a.is-active) > .sidebar__nav-toggle,
.sidebar__nav-toggle.is-active {
  background-color: rgba(174, 255, 0, 0.10);
  color: var(--color-accent-secondary);
  font-weight: 600;
  position: relative;
}
.sidebar__nav-group:has(.sidebar__submenu a.is-active) > .sidebar__nav-toggle::before,
.sidebar__nav-toggle.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background-color: var(--color-accent-secondary);
  border-radius: 0 3px 3px 0;
}

[data-theme="light"] .sidebar__nav-group:has(.sidebar__submenu a.is-active) > .sidebar__nav-toggle,
[data-theme="light"] .sidebar__nav-toggle.is-active {
  background-color: rgba(174, 255, 0, 0.30);
  color: #1a3000;
}
[data-theme="light"] .sidebar__nav-group:has(.sidebar__submenu a.is-active) > .sidebar__nav-toggle::before,
[data-theme="light"] .sidebar__nav-toggle.is-active::before {
  background-color: #4a6e00;
}

/* Sub-item ativo — dark mode (Sub-fase 6.D.4) */
.sidebar__submenu a.is-active {
  background-color: rgba(174, 255, 0, 0.10);
  color: var(--color-accent-secondary);
  font-weight: 600;
}

.sidebar__submenu a.is-active::before {
  background-color: var(--color-accent-secondary);
  width: 8px;
  height: 1px;
}

/* Sub-item ativo — light mode */
[data-theme="light"] .sidebar__submenu a.is-active {
  background-color: rgba(174, 255, 0, 0.30);
  color: #1a3000;
  font-weight: 600;
}

[data-theme="light"] .sidebar__submenu a.is-active::before {
  background-color: #4a6e00;
}

/* === Sidebar footer === */
.sidebar__footer {
  padding: 16px 12px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  align-self: flex-end;
  transition:
    background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.theme-toggle:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-secondary);
}

.theme-toggle i {
  width: 16px;
  height: 16px;
}

/* Em dark: mostra sun (oferece light); em light: mostra moon (oferece dark) */
.theme-toggle .theme-toggle__sun { display: inline-flex; }
.theme-toggle .theme-toggle__moon { display: none; }

[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle .theme-toggle__moon { display: inline-flex; }

/* User block */
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}

.sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-bold);
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sidebar__user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-email {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botão Sair na sidebar */
.sidebar__signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar__signout:hover {
  background-color: rgba(206, 91, 91, 0.10);
  border-color: rgba(206, 91, 91, 0.40);
  color: #f08080;
}

.sidebar__signout i {
  width: 14px;
  height: 14px;
}

/* === MAIN CONTENT === */
.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px;
  min-width: 0; /* impede que conteúdo (tabelas largas) force overflow no grid pai */
}

/* Hamburguer agora é "pull tab" colado na borda esquerda — não precisa de
   padding-top extra no main (botão não fica em cima do título). */

/* Hamburger button — colado na borda esquerda da viewport, estilo
   "pull tab". Sempre visível ao rolar, fica fora do fluxo do conteúdo. */
.sidebar-toggle {
  position: fixed;
  top: 96px;
  left: 0;
  z-index: 60;            /* acima do drawer (50) e backdrop (40) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0 8px 8px 0;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-left: none;
  color: var(--color-text-primary);
  cursor: pointer;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.16);
  transition:
    background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    padding 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 0;
}

[data-theme="light"] .sidebar-toggle {
  background-color: #FFFFFF;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

.sidebar-toggle:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-accent-primary);
  padding-right: 4px;     /* avança 4px pra direita no hover (microinteração) */
}

.sidebar-toggle:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
}

.sidebar-toggle i {
  width: 18px;
  height: 18px;
}

/* Quando drawer está aberto, esconde o hamburger (sai de cima da sidebar).
   Usuário fecha clicando no backdrop ou pressionando Esc. */
.sidebar.is-open ~ .sidebar-toggle,
body:has(.sidebar.is-open) .sidebar-toggle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* === App header === */
.app-header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-title {
  font-family: var(--font-family-bold);
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-accent-primary);
  line-height: 1.15;
}

.app-subtitle {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* === App header com actions (botões no canto superior direito) === */
.app-header--with-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-header__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 1024px) {
  .app-header--with-actions {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .app-header__actions {
    flex-shrink: 0;
    align-items: flex-start;
    padding-top: 6px;
  }
}

/* === Header action button (genérico) === */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  font-family: var(--font-family-demi);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
}

.header-action-btn:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.header-action-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow-secondary);
}

.header-action-btn i,
.header-action-btn svg {
  width: 16px;
  height: 16px;
}

.header-action-btn__chevron {
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px;
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Variante primária (Financial Planning — destaque dourado) */
.header-action-btn--primary {
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  border-color: var(--color-accent-primary-dark);
}

.header-action-btn--primary:hover {
  background-color: var(--color-accent-primary-light);
  color: var(--color-accent-primary-text);
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow-primary);
}

/* Estado "copiado" — feedback visual (botão Financial Planning) */
.header-action-btn__icon-success,
.header-action-btn__label-success {
  display: none;
}

.header-action-btn.is-copied .header-action-btn__icon-default,
.header-action-btn.is-copied .header-action-btn__label-default {
  display: none;
}

.header-action-btn.is-copied .header-action-btn__icon-success,
.header-action-btn.is-copied .header-action-btn__label-success {
  display: inline-flex;
  align-items: center;
}

.header-action-btn.is-copied {
  background-color: var(--color-success, #1F9D55);
  color: #FFFFFF;
  border-color: var(--color-success, #1F9D55);
  box-shadow: none;
}

/* === Dropdown (Apresentação comercial) === */
.header-action-dropdown {
  position: relative;
  display: inline-block;
}

.header-action-dropdown[data-open="true"] .header-action-btn__chevron {
  transform: rotate(180deg);
}

.header-action-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  padding: 6px;
  display: none;
  z-index: 30;
}

.header-action-dropdown[data-open="true"] .header-action-dropdown__menu {
  display: block;
}

.header-action-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.header-action-dropdown__menu a:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-accent-primary);
}

.header-action-dropdown__menu a i,
.header-action-dropdown__menu a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.header-action-dropdown__menu a:hover i,
.header-action-dropdown__menu a:hover svg {
  color: var(--color-accent-primary);
}

[data-theme="light"] .header-action-dropdown__menu {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* === Section title === */
.section-title {
  font-family: var(--font-family-demi);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-subtle);
  margin: 0 0 16px 0;
}

/* === Shortcut grid === */
.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .shortcut-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .shortcut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .shortcut-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === Atalhos fixos do dashboard ===
   .shortcut-grid--fixed: 5 tiles (Comite/Assessor) ou 4 (RH com --four).
   Mantem grid sempre simetrico em qualquer viewport. */

/* Tablet 640-1023: 2 cols + ultimo tile impar estica pra preencher a linha */
@media (min-width: 640px) and (max-width: 1023px) {
  .shortcut-grid.shortcut-grid--fixed > .shortcut-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Desktop medio 1024-1279: forca 2 cols (em vez de 3-2 assimetrico) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .shortcut-grid.shortcut-grid--fixed {
    grid-template-columns: repeat(2, 1fr);
  }
  .shortcut-grid.shortcut-grid--fixed > .shortcut-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Desktop largo >= 1280: 5 cols (Comite/Assessor) ou 4 cols (RH) em 1 linha */
@media (min-width: 1280px) {
  .shortcut-grid.shortcut-grid--fixed {
    grid-template-columns: repeat(5, 1fr);
  }
  .shortcut-grid.shortcut-grid--fixed.shortcut-grid--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === Shortcut tile === */
.shortcut-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    border-color 240ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 240ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.shortcut-tile:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20),
              0 0 0 1px rgba(201, 169, 97, 0.20);
}

.shortcut-tile:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow-secondary);
}

.shortcut-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background-color: var(--color-surface-active);
  color: var(--color-text-primary);
  transition:
    background-color 240ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 240ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.shortcut-tile__icon i,
.shortcut-tile__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

/* Hover: ícone ganha sutil tom dourado — único accent de cor da grid. */
.shortcut-tile:hover .shortcut-tile__icon {
  background-color: rgba(201, 169, 97, 0.14);
  color: var(--color-accent-primary);
}

/* Variantes mantidas como aliases vazios pra retrocompatibilidade.
   Visual idêntico — diferenciação acontece pelo ícone Lucide e pelo texto. */
.shortcut-tile__icon--gold,
.shortcut-tile__icon--green,
.shortcut-tile__icon--blue,
.shortcut-tile__icon--purple,
.shortcut-tile__icon--rose,
.shortcut-tile__icon--amber {
  /* sem override de cor — todos seguem o estilo base monocromático */
}

.shortcut-tile__label {
  font-family: var(--font-family-demi);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}

.shortcut-tile__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

.shortcut-tile__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 0;
  transform: translateX(-4px);
  color: var(--color-text-muted);
  transition:
    opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.shortcut-tile__arrow i,
.shortcut-tile__arrow svg {
  width: 18px;
  height: 18px;
}

.shortcut-tile:hover .shortcut-tile__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ==============================================================
   DESKTOP (>= 1024px) — Sidebar fixa em telas de "navegação"
   (Dashboard). Em telas de dados (.app-shell--data), sidebar continua
   como drawer pra dar mais espaço pra tabelas/conteúdo.
   ============================================================== */
@media (min-width: 1024px) {
  /* Default — sidebar fixa */
  .app-shell:not(.app-shell--data) {
    grid-template-columns: 280px 1fr;
  }

  .app-shell:not(.app-shell--data) .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
    transition: none;
    box-shadow: none;
  }

  .app-shell:not(.app-shell--data) .sidebar-backdrop {
    display: none;
  }

  .app-shell:not(.app-shell--data) .sidebar-toggle {
    display: none;
  }

  .app-main {
    padding: 40px 48px;
  }

  /* .app-shell--data: padding lateral menor à esquerda pra não ficar em cima
     do "pull tab" — hambúrguer colado na borda esquerda */
  .app-shell--data .app-main {
    padding: 40px 48px 40px 56px;
  }

  .app-title {
    font-size: 36px;
  }

  .app-subtitle {
    font-size: 16px;
  }

  .app-header {
    margin-bottom: 40px;
  }

  /* Variante "data" — sidebar drawer mesmo em desktop, hambúrguer fica */
  .app-shell--data {
    grid-template-columns: 1fr;
  }
  .app-shell--data .sidebar-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1440px) {
  .app-main {
    padding: 56px 72px;
  }

  .app-title {
    font-size: 42px;
  }
}

/* ==============================================================
   COMPONENTES REUTILIZÁVEIS — Sprint 5.3 (29/Abr/2026)
   ============================================================== */

/* === Page header (título + descrição) — alternativa ao .app-header === */
.page-header {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-header__title {
  font-family: var(--font-family-bold);
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-accent-primary);
  line-height: 1.15;
}

.page-header__subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .page-header {
    margin-bottom: 32px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
  }

  .page-header__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .page-header__title {
    font-size: 28px;
  }
}

/* Bloco 9.12: page-header actions — pattern de navegação no header.
   Botões de voltar pro Dashboard + nav contextual entre páginas
   relacionadas (Comitê de fundos ↔ previdência, LHF ↔ admin, etc).
   Padroniza inline styles que existiam em listcomite/prevlist/etc. */
.page-header__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 1023px) {
  .page-header__actions {
    width: 100%;
    margin-top: var(--space-3);
  }
}

/* === App message (alerta dentro do main) === */
.app-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.app-message i,
.app-message svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.app-message--error {
  background-color: rgba(206, 91, 91, 0.10);
  color: #f08080;
  border: 1px solid rgba(206, 91, 91, 0.32);
}
[data-theme="light"] .app-message--error {
  color: #8c2828;
}

.app-message--success {
  background-color: rgba(174, 255, 0, 0.10);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(174, 255, 0, 0.40);
}
[data-theme="light"] .app-message--success {
  color: #4a6e00;
}

.app-message--info {
  background-color: var(--color-surface-active);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

/* === Segmented control (filtros agrupados) === */
.segmented-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.segmented-control {
  display: inline-flex;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}

.segmented-control__btn,
.segmented-control button[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 7px;
  transition:
    background-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
}

.segmented-control__btn:hover:not(:disabled),
.segmented-control button[type="submit"]:hover:not(:disabled) {
  color: var(--color-text-primary);
  background-color: var(--color-surface-hover);
}

.segmented-control__btn:disabled,
.segmented-control button[type="submit"]:disabled {
  /* "disabled" no contexto desses templates legados = item ATIVO/SELECIONADO */
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  cursor: default;
  font-weight: 600;
}

.segmented-control__btn.is-active {
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  font-weight: 600;
}

.segmented-control form {
  margin: 0;
  padding: 0;
  display: contents;
}

/* === Data table (tabela densa estilo Linear/Notion) === */
.data-table-wrap {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  /* Sem overflow: hidden — bloquearia o sticky do thead em relacao a pagina.
     O bg do thead e do wrap sao identicos (--color-bg-elevated), entao os
     cantos arredondados do wrap se misturam visualmente com o thead. */
}

.data-table-scroll {
  width: 100%;
  /* Sem overflow:auto em desktop — sticky thead precisa que a pagina seja o
     scroll-context. Em mobile/tablet, fallback para horizontal-scroll. */
}

@media (max-width: 1023px) {
  .data-table-scroll {
    overflow-x: auto;
  }
  /* Trade-off conhecido: em mobile o sticky thead nao funciona (overflow-x
     vira scroll-context), mas mobile ja tem viewport curto e poucos rows
     visiveis ao mesmo tempo, entao o impacto e baixo. */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-bg-elevated);
  font-family: var(--font-family-demi);
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 8px 5px;
  text-align: center; /* headers centralizados */
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 5px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.data-table tbody td.cell-truncate {
  max-width: 110px;
}

.data-table tbody td.cell-narrow {
  max-width: 80px;
}

.data-table tbody td.cell-left {
  text-align: left;
}

/* === Sub-grupo dentro da tabela (Classificação XP dentro de Renda Fixa, etc) === */
.data-table tbody tr.subgroup-row td {
  background-color: var(--color-surface-active);
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
}

.data-table tbody tr.subgroup-row:hover td {
  background-color: var(--color-surface-active);
}

.subgroup-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.subgroup-row__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-demi);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-primary);
}

[data-theme="light"] .subgroup-row__label {
  color: #8C6F3D;
}

.subgroup-row__label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 11px;
  background-color: var(--color-accent-primary);
  border-radius: 1.5px;
  flex-shrink: 0;
}

.subgroup-row__count {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* === Modal customizado pra data-confirm (substitui window.confirm)
   Bloco 9.5.1.3: substitui o "dev.nucleodata.com.br diz" feio do
   confirm nativo. Promise-based via app.js. */
.app-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Fonte do projeto explicita (modais absolutamente posicionados podem
     perder a heranca do body em alguns contextos). */
  font-family: var(--font-family-base);
}
.app-confirm-backdrop.is-open { display: flex; }
.app-confirm {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-family: var(--font-family-base);
}
.app-confirm__msg {
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0 0 24px 0;
}
.app-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

/* === Currency wrap: R$ prefix dentro do input — globally reusable.
   Antes definido inline em montador_config.html; movido pra app.css
   pra Tela 1 e outros formularios usarem. */
.currency-wrap {
  position: relative;
  display: block;
}
.currency-wrap__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 13px;
  pointer-events: none;
  font-family: var(--font-family-base);
  z-index: 1;
}
.currency-wrap input {
  padding-left: 44px !important;
}

/* === Percent wrap: % suffix dentro do input. Default inline-flex
   (pequeno chip). Variante --block pra preencher cell de tabela. */
.percent-wrap {
  position: relative;
  display: block;
}
.percent-wrap__suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 13px;
  pointer-events: none;
  font-family: var(--font-family-base);
}
.percent-wrap input {
  padding-right: 32px !important;
  /* Esconde spinners do type=number */
  -moz-appearance: textfield;
}
.percent-wrap input::-webkit-outer-spin-button,
.percent-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* === Fund badges (Geral / Qualificado / no comite) === */
.fund-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-family-demi);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}
.fund-badge--geral {
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.40);
  color: var(--color-accent-primary);
}
.fund-badge--qualificado {
  background: rgba(174, 255, 0, 0.10);
  border: 1px solid rgba(174, 255, 0, 0.40);
  color: var(--color-accent-secondary);
}
.fund-badge--comite {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--color-text-muted);
}
[data-theme="light"] .fund-badge--qualificado {
  color: #4a6e00;
}
[data-theme="light"] .fund-badge--comite {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

/* === Click-to-copy nas células (CNPJ, nome do fundo, peso, R$, etc) ===
   Generalizado pra qualquer tabela usar. Antes era scoped em .data-table
   so; a partir do Bloco 9.4.2.2 a Carteira gerada (.carteira-table) tambem
   usa, entao melhor desescopar. */
.cell-copyable {
  cursor: copy;
  position: relative;
  transition: background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cell-copyable:hover {
  background-color: var(--color-surface-hover);
}

.cell-copyable.is-copied {
  background-color: rgba(174, 255, 0, 0.18);
  color: var(--color-accent-secondary);
  font-weight: 600;
}

[data-theme="light"] .cell-copyable.is-copied {
  color: #4a6e00;
}

/* === Filtros de macro/micro classes (listasses, listcomite, prevlist) === */
.class-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .class-filters {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.class-filters__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.class-filters__label {
  font-family: var(--font-family-demi);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.class-filters__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-family: var(--font-family-base);
  font-size: 13px;
  cursor: pointer;
  min-width: 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.class-filters__select:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.class-filters__select:focus,
.class-filters__select:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.20);
}

.class-filters__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sub-fase 9.10 (12/Mai): borda sutil em hover de selects/inputs
   Caio: "uns botoes que quando coloca o mouse em cima fica um
   contorno suave como se fosse uma borda" */
.class-filters__select:hover:not(:disabled) {
  border-color: var(--color-accent-primary);
}

/* === Tom Select theme-aware (Bloco 9.10 polish 12/Mai) ===
   Specificity `html body` necessária porque dropdownParent='body' tira
   o dropdown do contexto local. Pattern testado no LHF. */
html body .ts-wrapper.single .ts-control,
html body .ts-wrapper .ts-control {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-base) !important;
  font-size: 13px !important;
  min-height: 38px;
  padding: 4px 12px !important;
}
html body .ts-wrapper input,
html body .ts-control input {
  color: var(--color-text-primary) !important;
  background: transparent !important;
}
html body .ts-dropdown {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-accent-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-base) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  z-index: var(--z-dropdown);
}
html body .ts-dropdown .option {
  color: var(--color-text-primary) !important;
  padding: 8px 12px !important;
  font-family: var(--font-family-base) !important;
}
html body .ts-dropdown .option:hover,
html body .ts-dropdown .active {
  background: rgba(201, 169, 97, 0.15) !important;
  color: var(--color-accent-primary) !important;
}
html body .ts-dropdown .optgroup-header {
  background: var(--color-bg-primary) !important;
  color: var(--color-accent-primary) !important;
  font-family: var(--font-family-demi) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 12px 4px !important;
  border-bottom: 1px solid var(--color-border) !important;
}


/* Sub-fase 9.10 pré (12/Mai): busca por nome de fundo. Caio: "comite
   de fundos e prev vamos colocar um filtro de nome dos fundos alem dos
   que ja tem de macro classe e sub classe". */
.class-filters__group--grow {
  flex: 1 1 240px;
  min-width: 0;
}

.class-filters__input {
  appearance: none;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px 8px 36px;
  font-family: var(--font-family-base);
  font-size: 13px;
  width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.class-filters__input:hover {
  border-color: var(--color-border-strong);
}

.class-filters__input:focus,
.class-filters__input:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.20);
}

.class-filters__input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.class-filters__count {
  font-size: 12px;
  color: var(--color-accent-primary);
  font-family: var(--font-family-demi);
  white-space: nowrap;
  align-self: center;
}

/* === Listing section group — categoria como header, não coluna ===
   Sprint 5.4 refine: ao invés de coluna "Categoria" repetida em cada
   linha (gera coluna larga + scroll horizontal), usar <h3> de section.
   Cada categoria (Renda Fixa, Multimercado, Variável, Cambial) vira
   um bloco separado com título destacado. Reduz 1 coluna na tabela. */
.listing-section-group {
  margin-bottom: 28px;
}

.listing-section-group:last-child {
  margin-bottom: 0;
}

.listing-section-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-left: 4px;
}

.listing-section-group__title {
  font-family: var(--font-family-bold);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.listing-section-group__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--color-accent-primary);
  border-radius: 2px;
}

.listing-section-group__count {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
}

/* === Indicadores de scroll horizontal nas bordas da tabela ===
   Gradient fade pra indicar visualmente que há mais conteúdo escondido
   quando a tabela tem scroll horizontal. */
.data-table-wrap {
  position: relative;
}

.data-table-wrap::before,
.data-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.data-table-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    var(--color-bg-elevated) 0%,
    rgba(0, 0, 0, 0) 100%);
}

[data-theme="light"] .data-table-wrap::before {
  background: linear-gradient(to right,
    #FAFAFA 0%,
    rgba(255, 255, 255, 0) 100%);
}

.data-table-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    var(--color-bg-elevated) 0%,
    rgba(0, 0, 0, 0) 100%);
}

[data-theme="light"] .data-table-wrap::after {
  background: linear-gradient(to left,
    #FAFAFA 0%,
    rgba(255, 255, 255, 0) 100%);
}

/* JS adiciona is-scrollable-left / is-scrollable-right conforme posição */
.data-table-wrap.is-scrollable-left::before {
  opacity: 1;
}

.data-table-wrap.is-scrollable-right::after {
  opacity: 1;
}

/* === Drag-to-scroll na tabela (cursor grab) === */
.data-table-scroll {
  cursor: grab;
  scroll-behavior: smooth;
}

.data-table-scroll.is-grabbing {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

/* Não aplicar grab cursor em elementos interativos dentro da tabela */
.data-table-scroll a,
.data-table-scroll button,
.data-table-scroll input {
  cursor: pointer;
}

.data-table tbody tr:hover td {
  background-color: var(--color-surface-hover);
}

/* Linha de "Investidor Qualificado" — letra DOURADA (informação
   restrita, chama atenção destacando do fluxo "Geral"). */
.data-table tbody tr.text-quali td {
  color: #d4a356; /* dourado em dark */
}
.data-table tbody tr.text-quali .tabfundo {
  color: #d4a356;
}
[data-theme="light"] .data-table tbody tr.text-quali td,
[data-theme="light"] .data-table tbody tr.text-quali .tabfundo {
  color: #a06010; /* dourado escuro pra leitura em fundo claro */
}

/* Linhas com track record incompleto — FUNDO transparente colorido
   (não muda cor da letra pra evitar conflito com qualificado).
   Degradê de warning crescente:
   - zero-row    → n36meses faltando (alerta médio) — fundo âmbar
   - both-zero-row → n24+n36meses faltando (alerta forte) — fundo coral */
.data-table tbody tr.zero-row td {
  background-color: rgba(212, 163, 86, 0.10); /* âmbar transparente */
}

.data-table tbody tr.both-zero-row td {
  background-color: rgba(229, 138, 138, 0.14); /* coral transparente */
}

[data-theme="light"] .data-table tbody tr.zero-row td {
  background-color: rgba(160, 96, 16, 0.08);
}
[data-theme="light"] .data-table tbody tr.both-zero-row td {
  background-color: rgba(140, 40, 40, 0.10);
}

/* Hover preserva — sobrepõe ao bg da linha */
.data-table tbody tr.zero-row:hover td,
.data-table tbody tr.both-zero-row:hover td {
  background-color: var(--color-surface-hover);
}

/* Combinação qualificado + 24m/12m funciona naturalmente: letra dourada
   sobre fundo levemente colorido (âmbar/coral transparente). Sem conflito. */

/* Linha separadora entre categorias de fundo (RF, Multi, Var, Cambial) */
.data-table tbody tr.separator-row td {
  height: 12px;
  border-bottom: none;
  background-color: transparent;
}

/* Coluna "Categoria" (primeira coluna em listasses/prevlist) — destaque sutil */
.data-table .tabfundo {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Link externo com ícone Lucide */
.data-table .ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-active);
  color: var(--color-text-muted);
  text-decoration: none;
  transition:
    background-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.data-table .ext-link:hover {
  background-color: rgba(174, 255, 0, 0.16);
  color: var(--color-accent-secondary);
}

.data-table .ext-link i,
.data-table .ext-link svg {
  width: 14px;
  height: 14px;
}

/* === Section card (envelope simples para conteúdo não-tabular) === */
.section-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 16px;
}

.section-card__title {
  font-family: var(--font-family-demi);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-subtle);
  margin: 0 0 16px 0;
}

/* Header agrupa title + hint. Hint sem margin nativa do <p>; respiro
   pos-header antes do conteudo. Quando o header existe, o margin-bottom
   do title (16px) cria gap title->hint, e este margin-bottom cria gap
   hint->form. Padrao aditivo: paginas sem .section-card__header
   continuam com title margin 16px direto pra forma. */
.section-card__header {
  margin-bottom: 20px;
}

.section-card__hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* === Section group (categoria com label + tabela) — Sprint 5.4 === */
.section-group {
  margin-bottom: 28px;
}

.section-group:last-child {
  margin-bottom: 0;
}

.section-group__title {
  font-family: var(--font-family-demi);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-muted);
  margin: 0 0 12px 0;
}

/* === Inputs dentro de data-table (admaloca/prevaloca seleção) === */
.data-table .input-cell {
  text-align: right;
  width: 120px;
}

.data-table .input-cell input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 6px 10px;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
  font-size: 13px;
  text-align: right;
  transition:
    border-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.data-table .input-cell input[type="number"]:hover:not(:disabled) {
  border-color: var(--color-accent-primary);
}

.data-table .input-cell input[type="number"]:focus,
.data-table .input-cell input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.20);
}

/* Linha de total — destacada, peso bold, separador top */
.data-table tbody tr.total-row td {
  font-family: var(--font-family-demi);
  font-weight: 600;
  background-color: var(--color-surface-active);
  border-top: 2px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

.data-table tbody tr.total-row:hover td {
  background-color: var(--color-surface-active);
}

/* === Action bar (CTA principal flutuante na parte inferior do form) === */
.action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
}

.action-bar--center {
  justify-content: center;
}

.action-bar--start {
  justify-content: flex-start;
}

/* Stack de botões (vertical) — útil em telas curtas tipo selfundos */
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}

/* === File upload (importação de Excel/planilha) === */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-elevated);
  text-align: center;
  transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
              background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
}

.file-upload:hover,
.file-upload.is-dragging {
  border-color: var(--color-accent-primary);
  background-color: rgba(201, 169, 97, 0.04);
}

.file-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-active);
  color: var(--color-accent-primary);
}

.file-upload__icon i,
.file-upload__icon svg {
  width: 22px;
  height: 22px;
}

.file-upload__text {
  font-family: var(--font-family-demi);
  font-size: 15px;
  color: var(--color-text-primary);
  margin: 0;
}

.file-upload__hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.file-upload input[type="file"],
.file-upload input[type="text"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  background-color: var(--color-bg-surface);
  color: var(--color-text-on-light);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 13px;
  cursor: pointer;
}

.file-upload input[type="file"]:focus,
.file-upload input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.20);
}

[data-theme="light"] .file-upload input[type="file"],
[data-theme="light"] .file-upload input[type="text"] {
  background-color: #FFFFFF;
}

@media (min-width: 640px) {
  .btn-stack {
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ==============================================================
   MY SHORTCUTS — atalhos customizados do usuário (localStorage)
   Renderizados no dashboard abaixo dos atalhos fixos
   ============================================================== */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.section-title-row .section-title {
  margin-bottom: 0;
  margin-top: 0;
}

.btn-add-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(201, 169, 97, 0.10);
  color: var(--color-accent-primary);
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: 8px;
  font-family: var(--font-family-demi);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.btn-add-shortcut:hover {
  background: rgba(201, 169, 97, 0.20);
  border-color: rgba(201, 169, 97, 0.55);
}

.btn-add-shortcut i,
.btn-add-shortcut svg {
  width: 14px;
  height: 14px;
}

.my-shortcut-tile {
  position: relative;
}

.my-shortcut-tile__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(206, 91, 91, 0.12);
  border: 1px solid rgba(206, 91, 91, 0.30);
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
  padding: 0;
}

.my-shortcut-tile:hover .my-shortcut-tile__remove {
  opacity: 1;
}

.my-shortcut-tile__remove:hover {
  background: rgba(206, 91, 91, 0.22);
  transform: scale(1.06);
}

.my-shortcut-tile__remove i,
.my-shortcut-tile__remove svg {
  width: 14px;
  height: 14px;
}

.my-shortcuts-empty {
  padding: 28px 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
}

.my-shortcuts-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-family-demi);
  font-size: 14px;
}

/* === Modal pra adicionar atalho === */
.shortcut-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.shortcut-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.shortcut-modal {
  width: min(92vw, 480px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42);
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms ease;
}

.shortcut-modal-backdrop.is-open .shortcut-modal {
  transform: translateY(0) scale(1);
}

[data-theme="light"] .shortcut-modal {
  background: #FFFFFF;
}

.shortcut-modal__header {
  margin-bottom: 18px;
}

.shortcut-modal__title {
  margin: 0 0 4px 0;
  font-family: var(--font-family-bold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-accent-primary);
}

.shortcut-modal__hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.shortcut-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shortcut-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-modal__field label {
  font-family: var(--font-family-demi);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-subtle);
}

.shortcut-modal__field input[type="text"],
.shortcut-modal__field input[type="url"] {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-family-base);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

[data-theme="light"] .shortcut-modal__field input[type="text"],
[data-theme="light"] .shortcut-modal__field input[type="url"] {
  background: #FFFFFF;
}

.shortcut-modal__field input:hover {
  border-color: var(--color-accent-primary);
}

.shortcut-modal__field input:focus,
.shortcut-modal__field input:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.18);
}

.shortcut-modal__icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.shortcut-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  padding: 0;
}

[data-theme="light"] .shortcut-modal__icon {
  background: #FFFFFF;
}

.shortcut-modal__icon:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.shortcut-modal__icon.is-selected {
  background: rgba(201, 169, 97, 0.14);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.shortcut-modal__icon i,
.shortcut-modal__icon svg {
  width: 18px;
  height: 18px;
}

.shortcut-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.shortcut-modal__error {
  font-size: 12px;
  color: var(--color-danger);
  margin: 0;
  min-height: 14px;
}

/* === Catálogo dentro do modal === */
.shortcut-modal--catalog {
  width: min(94vw, 640px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.shortcut-modal--catalog .shortcut-modal__body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

[data-theme="light"] .catalog-item {
  background: #FFFFFF;
}

.catalog-item:hover:not(:disabled) {
  border-color: var(--color-accent-primary);
  background: rgba(201, 169, 97, 0.04);
}

.catalog-item:active:not(:disabled) {
  transform: translateY(1px);
}

.catalog-item:disabled,
.catalog-item.is-added {
  opacity: 0.55;
  cursor: not-allowed;
}

.catalog-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
}

.catalog-item__icon i,
.catalog-item__icon svg {
  width: 18px;
  height: 18px;
}

.catalog-item__icon--gold   { background: rgba(201, 169, 97, 0.14); color: var(--color-accent-primary); }
.catalog-item__icon--green  { background: rgba(174, 255,   0, 0.10); color: var(--color-accent-secondary); }
.catalog-item__icon--blue   { background: rgba( 59, 130, 246, 0.14); color: #3b82f6; }
.catalog-item__icon--purple { background: rgba(168,  85, 247, 0.14); color: #a855f7; }
.catalog-item__icon--rose   { background: rgba(244,  63,  94, 0.14); color: #f43f5e; }
.catalog-item__icon--amber  { background: rgba(245, 158,  11, 0.14); color: #f59e0b; }

.catalog-item__body {
  flex: 1;
  min-width: 0;
}

.catalog-item__label {
  font-family: var(--font-family-demi);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
  letter-spacing: -0.005em;
}

.catalog-item__desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-family-demi);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-accent-primary);
}

.catalog-item__action i,
.catalog-item__action svg {
  width: 14px;
  height: 14px;
}

.catalog-item.is-added .catalog-item__action {
  color: var(--color-text-subtle);
}

.catalog-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
}

/* ==============================================================
   USER-FILTERS — barra de busca + filtro de perfil
   nas telas de listagem de usuários (listuser, excluir,
   edituser, editperfil)
   ============================================================== */
.user-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.user-filters__search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}

.user-filters__search-wrap i,
.user-filters__search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.user-filters__search {
  width: 100%;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 9px 12px 9px 36px;
  font-family: var(--font-family-base);
  font-size: 14px;
  transition:
    border-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.user-filters__search::placeholder {
  color: var(--color-text-subtle);
}

.user-filters__search:hover {
  border-color: var(--color-accent-primary);
}

.user-filters__search:focus,
.user-filters__search:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.18);
}

.user-filters__select {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 9px 32px 9px 12px;
  font-family: var(--font-family-base);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 160px;
}

.user-filters__select:hover {
  border-color: var(--color-accent-primary);
}

.user-filters__select:focus,
.user-filters__select:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.18);
}

.user-filters__count {
  font-size: 12px;
  color: var(--color-text-subtle);
  font-family: var(--font-family-demi);
  letter-spacing: 0.04em;
}

[data-theme="light"] .user-filters__search,
[data-theme="light"] .user-filters__select {
  background-color: #FFFFFF;
}

/* Esconde linha quando filtrada via JS */
tr[data-user-row].is-filtered-out {
  display: none;
}

/* ==============================================================
   FORM-PAGE — wrapper centralizado para forms simples
   (caduser, altsenha, edit_user, edit_perfil)
   ============================================================== */
.form-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 16px;
}

.form-page .section-card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.form-page .section-card + .section-card {
  margin-top: 24px;
}

/* ==============================================================
   APP-FORM — inputs em contexto escuro (telas internas)
   Substitui visual do .form-field quando dentro de app-shell--data
   ============================================================== */
.app-shell--data .form-field label {
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.10em;
}

.app-shell--data .form-field input,
.app-shell--data .form-field select,
.app-shell--data .form-field textarea {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}

.app-shell--data .form-field input::placeholder,
.app-shell--data .form-field textarea::placeholder {
  color: var(--color-text-subtle);
}

.app-shell--data .form-field input:hover:not(:disabled),
.app-shell--data .form-field select:hover:not(:disabled) {
  border-color: var(--color-accent-primary);
}

.app-shell--data .form-field input:focus,
.app-shell--data .form-field input:focus-visible,
.app-shell--data .form-field select:focus,
.app-shell--data .form-field select:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.18);
}

/* Quando o input esta dentro de um wrapper visual (.currency-wrap,
   .percent-wrap, .vol-chip), o halo de focus deve aparecer NO WRAPPER,
   nao no input — senao da efeito de duplo ring. */
.app-shell--data .form-field .currency-wrap input:focus,
.app-shell--data .form-field .percent-wrap input:focus,
.app-shell--data .form-field .vol-chip input:focus {
  box-shadow: none;
  border-color: transparent;
}

.app-shell--data .form-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  caret-color: var(--color-text-primary);
}

[data-theme="light"] .app-shell--data .form-field input,
[data-theme="light"] .app-shell--data .form-field select,
[data-theme="light"] .app-shell--data .form-field textarea {
  background-color: #FFFFFF;
}

/* ==============================================================
   ACTION-BAR — variante sticky para telas com tabela longa
   (excluir, editperfil) — botão flutua na base da viewport
   ============================================================== */
.action-bar--sticky {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

[data-theme="light"] .action-bar--sticky {
  background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.action-bar--sticky .selection-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-right: auto;
}

.action-bar--sticky .selection-summary strong {
  font-family: var(--font-family-demi);
  color: var(--color-accent-primary);
  font-size: 16px;
}

.action-bar--sticky .selection-summary i,
.action-bar--sticky .selection-summary svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent-primary);
}

/* ==============================================================
   AUTOFILL-BAR — barra de ações no topo das telas de seleção
   (admaloca, prevaloca, admrealoc, prevrealoc)
   ============================================================== */
.autofill-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 24px;
}

.autofill-bar__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-right: auto;
}

.autofill-bar__hint i,
.autofill-bar__hint svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-primary);
}

[data-theme="light"] .autofill-bar {
  background: #F8F8F9;
}

/* ==============================================================
   CALC-FRAME — moldura branca do iframe externo
   (calculadora_aposentadoria; iframe é externo, não controlamos
   suas cores, então a moldura serve de transição visual)
   ============================================================== */
.calc-frame--blend {
  background: #FFFFFF;
  padding: 0;
}

.calc-frame--blend iframe {
  border-radius: var(--radius-md);
}

/* ==============================================================
   METRICS-LEGEND — legenda técnica das métricas exibidas em
   listcomite, listasses, prevlist. Default collapsed via <details>
   ============================================================== */
.metrics-legend {
  margin-top: 32px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.metrics-legend__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-family: var(--font-family-demi);
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.metrics-legend__summary::-webkit-details-marker {
  display: none;
}

.metrics-legend__summary:hover {
  background: var(--color-surface-hover);
}

.metrics-legend__summary i,
.metrics-legend__summary svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.metrics-legend__chevron {
  margin-left: auto;
  transition: transform 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.metrics-legend[open] .metrics-legend__chevron {
  transform: rotate(180deg);
}

.metrics-legend__body {
  padding: 4px 20px 24px 20px;
  border-top: 1px solid var(--color-border);
}

.metrics-legend__intro {
  margin: 16px 0 24px 0;
}

/* Pillars (3 callouts) */
.metrics-legend__pillars {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .metrics-legend__pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

.metrics-legend__pillar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

[data-theme="light"] .metrics-legend__pillar {
  background: #FFFFFF;
}

.metrics-legend__pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.25);
  flex-shrink: 0;
}

.metrics-legend__pillar-icon i,
.metrics-legend__pillar-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-primary);
}

.metrics-legend__pillar h5 {
  margin: 0 0 4px 0;
  font-family: var(--font-family-demi);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.metrics-legend__pillar p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.metrics-legend__pillar p em {
  font-style: italic;
  color: var(--color-text-subtle);
}

/* Tip — destaque "Como o comitê usa" */
.metrics-legend__tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.10) 0%, rgba(201, 169, 97, 0.04) 100%);
  border: 1px solid rgba(201, 169, 97, 0.30);
  flex-wrap: wrap;
}

.metrics-legend__tip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(201, 169, 97, 0.20);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-demi);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-accent-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.metrics-legend__tip-badge i,
.metrics-legend__tip-badge svg {
  width: 12px;
  height: 12px;
}

.metrics-legend__tip p {
  margin: 0;
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.metrics-legend__tip p strong {
  color: var(--color-accent-primary);
  font-family: var(--font-family-demi);
}

.metrics-legend__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}

@media (min-width: 768px) {
  .metrics-legend__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
  }
}

@media (min-width: 1280px) {
  .metrics-legend__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.metrics-legend__item {
  margin: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

[data-theme="light"] .metrics-legend__item {
  background: #FFFFFF;
}

.metrics-legend__item dt {
  font-family: var(--font-family-demi);
  font-size: 13px;
  color: var(--color-accent-primary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.metrics-legend__item dt em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.metrics-legend__item dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.metrics-legend__item dd strong {
  color: var(--color-text-primary);
  font-family: var(--font-family-demi);
}

.metrics-legend__item dd em {
  font-style: italic;
  color: var(--color-text-subtle);
}

.metrics-legend__item dd code {
  background: rgba(174, 255, 0, 0.10);
  color: var(--color-accent-secondary);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-family-base);
  font-size: 12px;
  white-space: nowrap;
}

[data-theme="light"] .metrics-legend__item dd code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-accent-primary-text);
}

.metrics-legend__footnote {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
  margin: 20px 0 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--color-accent-primary);
  background: rgba(201, 169, 97, 0.04);
  border-radius: 0 6px 6px 0;
}

.metrics-legend__footnote strong {
  color: var(--color-text-primary);
  font-family: var(--font-family-demi);
}

/* === Item "wide" (ocupa todas as colunas) — usado pelo Sharpe === */
.metrics-legend__item--wide {
  grid-column: 1 / -1;
  padding: 18px 20px;
}

/* === Estrutura interna rica do card Sharpe === */
.metrics-legend__lead {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.metrics-legend__formula {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: rgba(174, 255, 0, 0.04);
  border: 1px solid rgba(174, 255, 0, 0.18);
  border-radius: 8px;
}

.metrics-legend__formula-label {
  font-family: var(--font-family-demi);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-subtle);
  flex-shrink: 0;
}

.metrics-legend__formula code {
  background: transparent;
  color: var(--color-accent-secondary);
  padding: 0;
  font-size: 13px;
  font-family: var(--font-family-base);
  white-space: normal;
}

[data-theme="light"] .metrics-legend__formula {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .metrics-legend__formula code {
  color: var(--color-accent-primary-text);
}

.metrics-legend__sub {
  margin-bottom: 16px;
}

.metrics-legend__sub:last-child {
  margin-bottom: 0;
}

.metrics-legend__sub-title {
  margin: 0 0 8px 0;
  font-family: var(--font-family-demi);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-primary);
}

.metrics-legend__sub p {
  margin: 0 0 6px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.metrics-legend__sub p:last-child {
  margin-bottom: 0;
}

.metrics-legend__sub p strong {
  color: var(--color-text-primary);
  font-family: var(--font-family-demi);
}

.metrics-legend__sub p em {
  font-style: italic;
  color: var(--color-text-subtle);
}

/* Chips Eficiente / Ineficiente */
.metrics-legend__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 768px) {
  .metrics-legend__chips {
    grid-template-columns: 1fr 1fr;
  }
}

.metrics-legend__chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 12.5px;
  line-height: 1.5;
}

.metrics-legend__chip strong {
  display: inline-block;
  margin-right: 4px;
}

.metrics-legend__chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.metrics-legend__chip--positive {
  background: rgba(174, 255, 0, 0.06);
  border-color: rgba(174, 255, 0, 0.30);
  color: var(--color-text-primary);
}
.metrics-legend__chip--positive .metrics-legend__chip-dot {
  background: var(--color-accent-secondary);
  box-shadow: 0 0 8px rgba(174, 255, 0, 0.55);
}
.metrics-legend__chip--positive strong {
  color: var(--color-accent-secondary);
}

.metrics-legend__chip--negative {
  background: rgba(206, 91, 91, 0.06);
  border-color: rgba(206, 91, 91, 0.30);
  color: var(--color-text-primary);
}
.metrics-legend__chip--negative .metrics-legend__chip-dot {
  background: var(--color-danger);
  box-shadow: 0 0 8px rgba(206, 91, 91, 0.55);
}
.metrics-legend__chip--negative strong {
  color: var(--color-danger);
}

/* Refs (>1 bom, >2 muito bom) */
.metrics-legend__refs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0 0 !important;
  font-size: 12px;
}

/* Nota conclusiva sob os refs (Sharpe — conceito vs número exato) */
.metrics-legend__note {
  margin: 8px 0 0 0 !important;
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-style: italic;
}

.metrics-legend__ref {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-demi);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-primary);
  white-space: nowrap;
}

.metrics-legend__ref--strong {
  background: rgba(201, 169, 97, 0.18);
  border-color: rgba(201, 169, 97, 0.55);
}

/* ============================================================
   Validação inline reusable — Bloco 6.2 (UX polish)
   Aplicado automaticamente em qualquer <form data-validate-inline>
   pelo modulo window.formValidation em app.js.
   ============================================================ */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(206, 91, 91, 0.16) !important;
}
.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(206, 91, 91, 0.28) !important;
}
.field-error {
  display: block;
  font-family: var(--font-family-base) !important;
  font-size: 11px !important;
  color: var(--color-danger) !important;
  margin-top: 4px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3;
}

/* Em containers de form que tenham margem inferior consistente,
   reserva espaco pro .field-error sem deslocar layout (ele aparece
   sobreposto na margem inferior em vez de empurrar o proximo campo).
   Usado no caduser/edit_user/altsenha onde .form-field e empilhado.

   Tambem forca layout column + largura full mesmo quando ha overrides
   de outros CSS — garante que label fique em cima do input e que todos
   os inputs/selects/textareas tenham mesma largura (alinhamento
   visual consistente em forms verticais). */
.auth-form .form-field,
.form-page .form-field,
.app-shell--data .auth-form .form-field {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  position: relative;
  padding-bottom: 16px;
  box-sizing: border-box;
}
.auth-form .form-field > input,
.auth-form .form-field > select,
.auth-form .form-field > textarea,
.form-page .form-field > input,
.form-page .form-field > select,
.form-page .form-field > textarea {
  width: 100% !important;
  box-sizing: border-box;
  min-width: 0 !important;
}
.auth-form .form-field .field-error,
.form-page .form-field .field-error {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: 0;
}

/* .class-filters__group renderiza filtros em linha. Quando ha
   .field-error, queremos que o erro fique abaixo do select (nao
   ao lado). Posiciona absoluto pra nao quebrar o layout flex. */
.class-filters__group {
  position: relative;
}
.class-filters__group .field-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  white-space: nowrap;
}

/* ============================================================
   Toast notifications — Bloco 6.1 (UX polish)
   Renomeado pra .app-toast pra NAO conflitar com Bootstrap .toast
   (Bootstrap 5 tem ".toast:not(.show) { display: none }" que matou
   nossos toasts). Bug descoberto em 05/Mai/2026.
   ============================================================ */
.app-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
  width: 360px;
}
@media (max-width: 600px) {
  .app-toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--duration-base) var(--easing-default),
              transform var(--duration-base) var(--easing-default);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.4;
}
.app-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.app-toast.is-leaving {
  opacity: 0;
  transform: translateX(20px);
}

.app-toast--success { border-left-color: var(--color-accent-secondary); }
.app-toast--error   { border-left-color: var(--color-danger); }
.app-toast--warning { border-left-color: var(--color-warning); }
.app-toast--info    { border-left-color: var(--color-info); }

.app-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.app-toast--success .app-toast__icon { color: var(--color-accent-secondary); }
.app-toast--error   .app-toast__icon { color: var(--color-danger); }
.app-toast--warning .app-toast__icon { color: var(--color-warning); }
.app-toast--info    .app-toast__icon { color: var(--color-info); }

.app-toast__body { flex: 1; min-width: 0; word-wrap: break-word; }

.app-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}
.app-toast__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

[data-theme="light"] .app-toast {
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Loading states — Bloco 6.3 (UX polish)
   1) .btn--loading: spinner no botao + disabled visual.
   2) .app-loading-overlay: overlay full screen pra uploads pesados.
   ============================================================ */
@keyframes app-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.btn--loading {
  pointer-events: none;
  cursor: wait;
  opacity: 0.85;
  position: relative;
  /* Bloco 9.5.1.4: hide texto inline (text node sem span wrapper).
     `> *` so' esconde elementos filhos (icones); text nodes precisam
     de font-size:0 + color:transparent. Pseudo-elements ::before/::after
     restauram font-size/color explicitos. */
  font-size: 0;
  color: transparent;
  /* Cor do spinner (border) e texto loading. Override por variante:
     primary tem bg dourado -> branco. ghost tem bg transparente ->
     usa cor do texto do tema. */
  --btn-loading-color: #FFFFFF;
}
.btn--loading > * {
  visibility: hidden;
}
.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--btn-loading-color);
  border-radius: 50%;
  border-top-color: transparent;
  animation: app-spin 0.7s linear infinite;
}
.btn--loading[data-loading-text]::after {
  /* Quando ha texto, posiciona spinner antes do texto */
  margin-left: 0;
  left: calc(50% - 56px);
}
.btn--loading[data-loading-text]::before {
  content: attr(data-loading-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--btn-loading-color);
  white-space: nowrap;
}

/* Cor do spinner por variante de botao (override do default branco) */
.btn--ghost.btn--loading,
.btn--outline.btn--loading {
  --btn-loading-color: var(--color-text-primary);
}

/* Sub-fase 6.D.2.5 (13/Mai): modo icon-only pra botoes pequenos.
   Quando data-loading-mode="icon" no botao, override esconde o texto
   de loading (::before vazio) e centraliza o spinner sem offset.
   Aplicar em botoes onde o texto ("Recalculando...", "Salvando...")
   nao cabe sem quebrar layout. */
.btn--loading[data-loading-mode="icon"]::before {
  content: none;
}
.btn--loading[data-loading-mode="icon"]::after {
  margin-left: -9px;
  left: 50%;
}

/* Bloco 9.10 polish (12/Mai): fix botao primary branco-em-branco no
   loading. .btn--primary tem bg dourado mas o spinner branco default
   ficava OK em dark mas invisivel em light (branco sobre branco).
   Spinner preto sobre dourado contrasta em ambos modos. */
.btn--primary.btn--loading {
  --btn-loading-color: var(--color-accent-primary-text);  /* #000000 — preto sobre dourado */
}
/* .btn--secondary: bg verde-limao. Spinner preto contrasta melhor
   (16:1 vs branco que daria 4.5:1). Bloco 9.10 polish 12/Mai. */
.btn--secondary.btn--loading {
  --btn-loading-color: var(--color-accent-secondary-text);
}
/* .btn--danger: bg vermelho. Branco sobre vermelho funciona em ambos
   os modos. Default ja' OK. */

/* Overlay full screen pra uploads pesados */
.app-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-default);
}
.app-loading-overlay.is-open {
  display: flex;
  opacity: 1;
}
.app-loading-overlay__card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px 40px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.app-loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
.app-loading-overlay__title {
  font-family: var(--font-family-bold);
  font-size: 16px;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}
.app-loading-overlay__hint {
  font-family: var(--font-family-base);
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}
[data-theme="light"] .app-loading-overlay__card {
  background: #FFFFFF;
}

/* ============================================================
   Flow stepper — Bloco 6.4
   Indicador horizontal de etapas em fluxos multi-step
   (importação Excel, seleção do comitê, etc).
   ============================================================ */
.flow-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 28px;
  flex-wrap: wrap;
  font-family: var(--font-family-base);
}
.flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}
.flow-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-demi);
  font-size: 11px;
  flex-shrink: 0;
  transition: all var(--duration-base) var(--easing-default);
}
.flow-step__label {
  font-family: var(--font-family-base);
  white-space: nowrap;
}
.flow-step.is-active {
  color: var(--color-text-primary);
}
.flow-step.is-active .flow-step__num {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.20);
}
.flow-step.is-active .flow-step__label {
  font-family: var(--font-family-demi);
}
.flow-step.is-done {
  color: var(--color-accent-primary);
}
.flow-step.is-done .flow-step__num {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
}
.flow-step__sep {
  flex: 0 1 48px;
  height: 1.5px;
  background: var(--color-border-strong);
  min-width: 16px;
  border-radius: 1px;
}
.flow-step__sep.is-done {
  background: var(--color-accent-primary);
}
@media (max-width: 600px) {
  .flow-step__label { display: none; }
  .flow-step.is-active .flow-step__label { display: inline; }
  .flow-step__sep { flex: 1; }
}

/* =================================================================
   Pulso da Ferramenta — card de sugestão no dashboard + modal
   Bloco 9.12 (13/Mai/2026)
   ================================================================= */

.pulso-sugestao-card {
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
}
.pulso-sugestao-card__inner {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.pulso-sugestao-card__icon {
  width: 44px;
  height: 44px;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}
.pulso-sugestao-card__text {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) 0;
}
.pulso-sugestao-card__title {
  font-family: var(--font-family-demi);
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-2);
}
.pulso-sugestao-card__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin: 0;
}
@media (max-width: 700px) {
  .pulso-sugestao-card__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: var(--space-6);
    gap: var(--space-4);
  }
}

.pulso-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 100);
  padding: var(--space-4);
}
.pulso-modal-overlay[hidden] { display: none; }

.pulso-modal {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary-dark);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
}
.pulso-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.pulso-modal__title {
  font-family: var(--font-family-demi);
  color: var(--color-accent-primary);
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}
.pulso-modal__close {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.pulso-modal__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}
.pulso-modal__body {
  flex: 1;
  overflow: auto;
  padding: var(--space-8);
}
.pulso-modal__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-2);
  font-family: var(--font-family-demi);
}
.pulso-modal__label + .pulso-modal__label {
  margin-top: var(--space-4);
}
.pulso-modal__input {
  width: 100%;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: var(--space-3);
  font-family: var(--font-family-base);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pulso-modal__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.15);
}
.pulso-modal__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  margin-top: var(--space-2);
}
.pulso-modal__error {
  color: var(--color-danger);
  font-size: 13px;
  margin-top: var(--space-2);
}
.pulso-modal__footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-border);
}