/*
 * Fundação visual compartilhada do GERENCIAL E FISCAL NET.
 * Mantém as dimensões e a hierarquia existentes; concentra estados globais
 * para que telas operacionais não precisem repetir correções isoladas.
 */
:root {
  --visual-font-body: "DM Sans", Arial, sans-serif;
  --visual-font-heading: Manrope, "DM Sans", Arial, sans-serif;
  --visual-color-ink: #27292c;
  --visual-color-muted: #686864;
  --visual-color-border: #d8d4cc;
  --visual-color-surface: #fff;
  --visual-color-surface-soft: #f4f2ed;
  --visual-color-graphite: #292c30;
  --visual-color-graphite-deep: #1d1f22;
  --visual-color-graphite-soft: #3a3d41;
  --visual-color-gold: #b28a45;
  --visual-color-gold-dark: #856326;
  --visual-color-gold-light: #d5b46c;
  --visual-color-gold-soft: #f4ead8;
  --visual-color-primary: var(--visual-color-graphite);
  --visual-color-primary-hover: var(--visual-color-graphite-soft);
  --visual-color-focus: var(--visual-color-gold-dark);
  --visual-color-focus-ring: rgb(178 138 69 / 25%);
  --visual-color-disabled-bg: #eeece7;
  --visual-color-disabled-text: #777873;
  --visual-radius-control: 9px;
  --visual-motion-fast: 140ms;
}

html {
  color-scheme: light;
  background: var(--visual-color-surface-soft);
}

body {
  color: var(--visual-color-ink);
  background: var(--visual-color-surface-soft);
}

body,
button,
input,
select,
textarea {
  font-family: var(--visual-font-body);
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
summary {
  transition:
    background-color var(--visual-motion-fast) ease,
    border-color var(--visual-motion-fast) ease,
    color var(--visual-motion-fast) ease,
    box-shadow var(--visual-motion-fast) ease;
}

input,
select,
textarea {
  accent-color: var(--visual-color-focus);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--visual-color-focus);
  outline: 0;
  box-shadow: 0 0 0 3px var(--visual-color-focus-ring);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--visual-color-focus);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: #d7e0e5;
  background: var(--visual-color-disabled-bg);
  color: var(--visual-color-disabled-text);
  opacity: 1;
}

button:disabled {
  filter: saturate(0.6);
}

/* Tema institucional: grafite predominante e dourado apenas como acento. */
.login-shell,
.login-panel {
  background: var(--visual-color-surface-soft);
}

.login-hero {
  background: linear-gradient(
    135deg,
    var(--visual-color-graphite-deep),
    #34373b
  );
}

.brand-mark,
.login-environment > span,
.login-benefit-icon {
  background: rgb(213 180 108 / 14%);
  color: var(--visual-color-gold-light);
}

.login-pill {
  background: rgb(213 180 108 / 12%);
  color: var(--visual-color-gold-light);
}

.login-benefits > div {
  border-color: rgb(213 180 108 / 18%);
  background: rgb(255 255 255 / 4%);
}

.login-benefits small,
.hero-foot {
  color: #bdb7aa;
}

.login-card,
.panel,
.stat,
.modal {
  border-color: var(--visual-color-border);
}

.login-card {
  box-shadow: 0 20px 55px rgb(29 31 34 / 13%);
}

.login-environment strong,
.eyebrow,
.link {
  color: var(--visual-color-gold-dark);
}

.login-input:focus-within {
  border-color: var(--visual-color-gold);
  box-shadow: 0 0 0 3px var(--visual-color-focus-ring);
}

.primary {
  background: var(--visual-color-primary);
  color: #fff;
  box-shadow: inset 0 -2px var(--visual-color-gold);
}

.primary:hover:not(:disabled) {
  background: var(--visual-color-primary-hover);
}

.secondary {
  border-color: #c9c3b8;
  color: #3c3d3f;
  background: #fff;
}

.secondary:hover:not(:disabled) {
  border-color: var(--visual-color-gold);
  background: #faf7f0;
}

.sidebar {
  background: linear-gradient(
    180deg,
    var(--visual-color-graphite-deep),
    var(--visual-color-graphite)
  );
  color: #ece8df;
}

.sidebar .brand,
.sidebar-brand {
  color: #fff;
}

.nav-title {
  color: #aaa397;
}

.nav-item {
  color: #d5d1c8;
}

.nav-item:hover {
  background: rgb(255 255 255 / 7%);
}

.nav-item.active {
  color: #fff;
  background: #3a3b3c;
  box-shadow: inset 3px 0 var(--visual-color-gold-light);
}

.sidebar-foot {
  border-color: rgb(213 180 108 / 20%);
  color: #bdb7aa;
}

.topbar,
.desktop-menubar,
.desktop-toolbar,
.desktop-status {
  border-color: #c9c3b8;
}

.topbar {
  box-shadow: inset 0 -1px var(--visual-color-gold-soft);
}

.desktop-home .desktop-menubar {
  border-bottom-color: var(--visual-color-gold);
}

.desktop-menu summary:hover,
.desktop-menu[open] summary,
.desktop-menu-exit:hover,
.desktop-menu-items button:hover {
  background: var(--visual-color-gold-soft);
  color: var(--visual-color-graphite-deep);
}

.desktop-menu[open] summary {
  box-shadow: inset 0 -2px var(--visual-color-gold-dark);
}

.desktop-home .desktop-toolbar-brand,
.desktop-home .desktop-shortcut {
  border-color: #d4d0c8;
}

.desktop-home .desktop-shortcut:hover:not(:disabled) {
  border-color: var(--visual-color-gold);
  background: #f6f0e5;
}

.desktop-home .desktop-shortcut:focus-visible {
  outline-color: var(--visual-color-gold-dark);
}

.content,
.desktop-home,
.desktop-home .desktop-body {
  background-color: var(--visual-color-surface-soft);
}

.panel-head,
.modal-head,
th {
  border-color: #e0dcd4;
  background: #faf9f6;
}

th {
  color: #66625b;
}

td {
  border-color: #ebe8e1;
}

tbody tr:hover {
  background: #faf7f0;
}

.grid-selectable-row.selected,
.product-result-row.selected,
.cash-flow-grid tr[data-cash-row].selected td {
  background: var(--visual-color-gold-soft) !important;
  box-shadow: inset 3px 0 var(--visual-color-gold-dark);
}

.customer-tabs button[aria-selected="true"],
.entry-mode-switch .secondary.active {
  border-color: var(--visual-color-gold-dark);
  color: var(--visual-color-gold-dark);
  background: var(--visual-color-gold-soft);
}

.page-numbers button.active {
  border-color: var(--visual-color-graphite);
  background: var(--visual-color-graphite);
  color: #fff;
  box-shadow: inset 0 -2px var(--visual-color-gold);
}

.modal-backdrop,
.modal-backdrop:has(.presale-billing-form) {
  background: rgb(24 25 27 / 72%);
  backdrop-filter: blur(3px);
}

.notice {
  border-color: #d8c69f;
  background: #faf5e9;
  color: #655537;
}

.system-update-notice {
  border-color: var(--visual-color-gold);
  background: var(--visual-color-graphite);
}

.system-update-notice:hover {
  background: var(--visual-color-graphite-soft);
}

.primary,
.secondary,
.link,
.modal-close,
.nav-item,
.desktop-menu summary,
.desktop-menu-items button,
.desktop-shortcut {
  touch-action: manipulation;
}

.modal-backdrop {
  overscroll-behavior: contain;
}

.modal-head {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--visual-color-surface);
}

.table-scroll,
.paged-grid-scroll,
.cash-flow-grid {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  button,
  input,
  select,
  textarea,
  .panel,
  .modal {
    border: 1px solid CanvasText;
  }

  button:focus-visible,
  a:focus-visible,
  summary:focus-visible {
    outline-color: Highlight;
  }
}