/* ==========================================================================
   Design Tokens Estruturais & Configurações de Layout (Mobile-First SaaS)
   (As variáveis de cor são gerenciadas dinamicamente via theme.css)
   ========================================================================== */
:root {
  /* Tipografia */
  /* Pilhas do sistema: a CSP da suíte não permite fontes externas (Google Fonts). */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Espaçamento */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Raios de Borda */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transições e Curvas de Animação */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-sheet: 300ms cubic-bezier(0.32, 0.72, 0, 1);

  /* Safe Area Insets & Alturas Fixas */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --mobile-topbar-height: 58px;
  --mobile-dock-height: 64px;
}

/* ==========================================================================
   Reset Básico & Ergonomia Mobile
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  color-scheme: var(--color-scheme, light);
}

html, body {
  min-height: 100%;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Scrollbars Refinados & Consistentes com o Tema */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-border-hover);
}

/* Indicador de Foco Acessível */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Layout Base: Mobile First (< 768px)
   ========================================================================== */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative;
  background-color: var(--color-bg);
}

/* Oculta a sidebar desktop por padrão no mobile */
.sidebar {
  display: none;
}

/* Topbar Mobile (Glassmorphic) */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--space-sm) + var(--safe-area-top)) var(--space-md) var(--space-sm) var(--space-md);
  background-color: var(--color-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
  gap: var(--space-sm);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  flex: 1;
}

.brand-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  flex-shrink: 0;
}

.brand-mobile-emblem svg {
  width: 18px;
  height: 18px;
}

.header-title {
  min-width: 0;
  flex: 1;
}

.header-title h1 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title .subtitle {
  display: none; /* Oculta em telas pequenas para manter topbar limpa */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.d-none-mobile {
  display: none;
}

/* Conteúdo Principal Mobile */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: calc(var(--mobile-dock-height) + var(--safe-area-bottom) + var(--space-xl));
}

.content-body {
  padding: var(--space-md);
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  /* Keep navigation in the viewport while only the main pane scrolls. */
  .app-layout {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .main-content {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0;
    scroll-padding-bottom: calc(var(--mobile-dock-height) + var(--safe-area-bottom) + var(--space-xl));
  }

  .content-body {
    flex-shrink: 0;
    padding-bottom: calc(var(--mobile-dock-height) + var(--safe-area-bottom) + var(--space-xl));
  }
}

/* ==========================================================================
   Layout Desktop / Tablet (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .app-layout {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }

  /* Sidebar Clássica SaaS com visual refinado */
  .sidebar {
    display: flex;
    width: 248px;
    background-color: var(--color-sidebar);
    color: var(--color-sidebar-text);
    flex-direction: column;
    border-right: 1px solid var(--color-sidebar-border);
    flex-shrink: 0;
    user-select: none;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--color-sidebar-border);
  }

  .brand-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--color-primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
  }

  .brand-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .brand-headline {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .brand-headline h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-sidebar-text);
    letter-spacing: -0.02em;
  }

  .version-chip {
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-sidebar-surface);
    color: var(--color-sidebar-text);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-sidebar-border);
    letter-spacing: 0.02em;
  }

  .brand-sub {
    font-size: 0.725rem;
    color: var(--color-sidebar-text);
  }

  .nav-wrapper {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    flex: 1;
    overflow-y: auto;
  }

  .nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .nav-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-sidebar-text);
    padding: 0 var(--space-sm);
    margin-bottom: 2px;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--color-sidebar-text);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    position: relative;
    width: 100%;
    min-height: 44px;
  }

  .nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.85;
    transition: transform var(--transition-fast);
  }

  .nav-item-label {
    flex: 1;
    letter-spacing: -0.01em;
  }

  .nav-item-shortcut {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    background-color: var(--color-sidebar-surface);
    color: var(--color-sidebar-text);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-sidebar-border);
    transition: all var(--transition-fast);
  }

  .nav-item:hover {
    background-color: var(--color-sidebar-surface);
    color: var(--color-sidebar-text);
  }

  .nav-item:hover .nav-item-icon {
    opacity: 1;
  }

  .nav-item.active {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 600;
    box-shadow: none;
  }

  .nav-item.active .nav-item-icon {
    opacity: 1;
  }

  .nav-item.active .nav-item-shortcut {
    background-color: transparent;
    color: var(--color-primary-contrast);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .sidebar-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-sidebar-border);
  }

  .system-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-sidebar-surface);
    border: 1px solid var(--color-sidebar-border);
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    gap: var(--space-xs);
  }

  .status-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    flex: 1;
  }

  .status-radar {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .status-indicator-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-warning);
    transition: background-color var(--transition-normal);
  }

  .status-ping {
    display: none;
  }

  .status-indicator-dot.online {
    background-color: var(--color-success);
  }

  .status-indicator-dot.offline {
    background-color: var(--color-danger);
  }

  .status-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .status-title {
    font-size: 0.75rem;
    color: var(--color-sidebar-text);
    font-weight: 600;
  }

  .status-subtitle {
    font-size: 0.7rem;
    color: var(--color-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-status-sync {
    background: transparent;
    border: none;
    color: var(--color-sidebar-text);
    opacity: 0.6;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
  }

  .btn-status-sync:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
    transform: rotate(45deg);
  }

  /* Ajustes do Main Content no Desktop */
  .main-content {
    overflow-y: auto;
    padding-bottom: 0;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-md) var(--space-2xl);
    gap: var(--space-lg);
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .topbar-left { min-width: 0; }

  .brand-mobile {
    display: none;
  }

  .header-title h1 {
    font-size: 1.35rem;
    font-weight: 600;
  }

  .header-title .subtitle {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    max-width: 58ch;
    line-height: 1.45;
  }

  .header-actions {
    gap: var(--space-md);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .topbar .system-guide-link,
  .topbar #btn-install-pwa,
  .topbar .theme-selector-wrapper,
  .topbar #btn-refresh-health { display: none !important; }

  .topbar .context-selector-wrapper { order: 1; }
  .topbar .user-menu-wrapper { order: 2; }

  .topbar .topbar-settings-button {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-main);
    cursor: pointer;
  }
  .topbar-settings-button:hover { background: var(--color-surface-hover); }

  .d-none-mobile {
    display: inline;
  }

  .content-body {
    padding: var(--space-2xl);
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
  }
}

.topbar-settings-button { display: none; }

@media (max-width: 1023px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    padding: calc(var(--space-sm) + var(--safe-area-top)) var(--space-md) var(--space-sm);
    gap: var(--space-sm);
    position: sticky;
    top: 0;
  }
  .topbar-left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .topbar .brand-mobile { display: flex; }
  .topbar .header-title h1 { font-size: 1.05rem; }
  .topbar .header-title .subtitle { display: none; }
  .topbar > .header-actions { display: contents; }
  .topbar-settings-button {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-main);
    cursor: pointer;
  }
  .topbar-settings-button:hover { background: var(--color-surface-hover); }
  .topbar .user-menu-wrapper { grid-column: 3; grid-row: 1; }
  .topbar .context-selector-wrapper {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
  }
  .topbar .theme-selector-wrapper,
  .topbar #btn-install-pwa,
  .topbar #btn-refresh-health { display: none !important; }
}

.app-skip-link {
  position: fixed;
  z-index: 1200;
  top: var(--safe-area-top);
  left: var(--space-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 8px));
  transition: transform var(--transition-fast);
}
.app-skip-link:focus-visible { transform: translateY(0); }
#app-container { scroll-margin-top: calc(var(--mobile-topbar-height) + var(--safe-area-top)); }

.sidebar-footer > .system-guide-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-sm);
  padding: 0 var(--space-sm);
  color: var(--color-sidebar-text);
  font-size: 0.8125rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.sidebar-footer > .system-guide-link:hover {
  color: var(--color-text-inverse);
  background: var(--color-sidebar-surface);
}

/* Home financeira: hierarquia de leitura, contexto dos dados e áreas de ação. */
.finance-home { display: grid; gap: var(--space-lg); align-items: start; }
.finance-home section { min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.home-intro { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); padding: 0 0 var(--space-sm); }
.home-intro h2 { margin: 0; color: var(--color-text-main); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.home-intro > p { max-width: 55ch; margin: 0; color: var(--color-text-muted); font-size: .875rem; line-height: 1.55; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.home-section-title-wrap { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.home-section-heading h2 { font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; line-height: 1.25; margin: 0; }
.home-section-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; color: var(--color-primary); background: var(--color-primary-subtle); border-radius: var(--radius-md); }
.home-section-icon svg { width: 22px; height: 22px; }
.home-eyebrow { color: var(--color-text-muted); font-size: .75rem; font-weight: 650; letter-spacing: .045em; line-height: 1.4; margin: 0 0 .25rem; }
.home-section-heading .btn { min-height: 44px; white-space: normal; gap: var(--space-sm); }
.home-note { color: var(--color-text-muted); line-height: 1.6; margin: var(--space-md) 0 0; max-width: 72ch; font-size: .875rem; }
.home-ledger { margin: 0; }
.home-ledger > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-subtle); }
.home-ledger dt { flex: 1 1 12rem; color: var(--color-text-muted); line-height: 1.5; }
.home-ledger dd { margin: 0; font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.home-ledger .home-primary-metric { align-items: center; margin: 0 calc(-1 * var(--space-sm)); padding: var(--space-md) var(--space-sm); border-bottom-color: var(--color-border); background: var(--color-surface-muted); border-radius: var(--radius-md); }
.home-primary-metric dd { color: var(--color-text-main); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.035em; }
.home-context { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-md); color: var(--color-text-muted); font-size: .875rem; }
.home-empty-state { display: grid; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md); border: 1px dashed var(--color-border-hover); border-radius: var(--radius-md); background: var(--color-bg); }
.home-empty-state p { margin: 0; line-height: 1.5; }
.home-empty-state p + p { color: var(--color-text-muted); font-size: .9rem; }
.home-empty-state .btn { justify-self: start; min-height: 44px; margin-top: var(--space-xs); }
.home-period-note { margin-left: auto; color: var(--color-text-muted); font-size: .8125rem; }
.home-loading { min-height: 18rem; padding: var(--space-xl) 0; }
.finance-home button { min-height: 44px; white-space: normal; }
.reserve-progress { margin-top: var(--space-md); min-width: 0; }
.reserve-progress-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); font-size: .875rem; }
.reserve-progress-heading strong, .reserve-progress-meta strong { font-variant-numeric: tabular-nums; }
.reserve-progress-track { height: 8px; margin-top: var(--space-sm); border-radius: var(--radius-full); overflow: hidden; background: var(--color-border); }
.reserve-progress-track > div { height: 100%; background: var(--color-primary); border-radius: inherit; }
.reserve-progress-meta { margin: var(--space-sm) 0 0; font-size: .875rem; color: var(--color-text-main); }
.classification-visual { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-lg) 0; }
.classification-ring { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.classification-ring svg { width: 100%; height: 100%; fill: none; stroke-width: 10; }
.classification-ring .ring-track { stroke: var(--color-border-hover); }
.classification-ring .ring-fill { stroke: var(--color-primary); }
.classification-ring > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.classification-ring strong { font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.classification-ring span { font-size: .75rem; }
.visual-legend { flex: 1; min-width: 130px; margin: 0; }
.visual-legend > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; }
.visual-legend dt { display: flex; align-items: center; gap: var(--space-sm); font-size: .875rem; }
.visual-legend dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.visual-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tone-primary { background: var(--color-primary); }
.tone-success { background: var(--color-success); }
.tone-danger { background: var(--color-danger); }
.tone-warning { background: var(--color-warning); }
.tone-muted { background: var(--color-border-hover); }
.value-bars { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0; min-width: 0; }
.value-bar-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); font-size: .875rem; }
.value-bar-heading strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.value-bar-track { height: 16px; border-radius: 4px; background: var(--color-surface-muted); overflow: hidden; }
.value-bar-track > span { display: block; height: 100%; border-radius: inherit; }
.visual-empty { font-size: .875rem; margin: 0; }
.visual-details { margin-top: var(--space-md); font-size: .875rem; }
.visual-details summary { cursor: pointer; min-height: 44px; padding: var(--space-sm) 0; }
.visual-details p { max-width: 72ch; margin: var(--space-sm) 0; }
.planning-contribution { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-border); font-size: .875rem; }
.planning-contribution strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.financial-total { display: flex; flex-direction: column; margin: var(--space-lg) 0; gap: var(--space-xs); }
.financial-total > span { font-size: .875rem; }
.financial-total > strong { font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
@media (max-width: 767px) {
  .finance-home { gap: var(--space-md); }
  .finance-home section { padding: var(--space-md); }
  .home-intro { align-items: start; flex-direction: column; gap: var(--space-xs); padding-bottom: 0; }
  .home-intro > p { max-width: 64ch; }
  .home-section-heading { align-items: stretch; }
  .home-section-heading > .btn { width: 100%; justify-content: center; }
  .home-ledger dt { flex-basis: 8rem; }
  .home-ledger dd { font-size: 1rem; }
  .classification-ring { width: 112px; height: 112px; }
  .classification-visual { gap: var(--space-md); }
}
::selection { color: var(--color-primary-contrast); background: var(--color-primary); }
input, textarea { caret-color: var(--color-primary); }
.finance-home, .cartao-module { scrollbar-color: var(--color-border-hover) var(--color-surface); }
@media (min-width: 1100px) {
  .finance-home { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--space-lg); align-items: stretch; }
  .home-followup, .home-account { display: flex; flex-direction: column; }
  .home-followup .home-context, .home-account .visual-details { margin-top: auto; }
  .home-followup { grid-column: 1; }
  .home-account { grid-column: 2; }
  .home-planning { grid-column: 1 / -1; }
  .home-planning .home-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

/* O atributo hidden deve vencer display definido por classes. */
[hidden] { display: none !important; }

/* Estado da sessão (OIDC) e utilitários que substituem estilos inline (CSP style-src 'self'). */
.session-status { margin: 0; padding: var(--space-sm) var(--space-md); font-size: 0.875rem; color: var(--color-text-muted); }
.session-status:empty { display: none; }
.sheet-user-role-row { margin-top: 0.35rem; }
.sheet-user-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.context-select:disabled { opacity: 0.6; cursor: not-allowed; }
.readonly-note { margin: 0 0 var(--space-md); }