/* Financeiro: cores e primitivos vêm do CSS compartilhado; este arquivo só organiza superfícies. */
.demo-banner {
  padding: var(--space-2) var(--page-gutter);
  background: var(--brand-beige);
  color: var(--brand-blue);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
}
.hint {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.loading {
  display: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.htmx-request .loading {
  display: block;
}

.restricted {
  max-width: var(--measure);
  margin: var(--space-5) auto;
  padding: var(--space-5);
  border: 2px solid var(--brand-orange);
  border-radius: var(--radius-md);
  background: var(--brand-white);
}
.eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-height);
  padding: var(--control-padding-y) var(--control-padding-x);
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  color: var(--brand-blue);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--control-transition);
}
.btn-danger {
  border-width: 2px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.btn-secondary:hover,
.btn-danger:hover {
  background: var(--brand-beige);
}

/* Institucional */
header.shell.mkt {
  max-width: var(--container-max);
  margin: auto;
  padding: var(--space-5) var(--page-gutter);
}
header.mkt .logo {
  width: 160px;
  min-width: 160px;
}
header.mkt .brand-word {
  padding-left: var(--space-4);
  border-left: 1px solid var(--brand-beige);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}
header.mkt nav {
  margin-left: auto;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
header.mkt nav a[aria-current] {
  border-bottom-color: var(--brand-orange);
}
header.mkt nav a:nth-last-child(2) {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--brand-orange);
}
.hero-fin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  align-items: center;
  gap: var(--space-10);
  max-width: var(--container-max);
  margin: auto;
  padding: var(--section-space) var(--page-gutter);
}
.hero-fin h1 {
  max-width: 11ch;
  margin: 0;
  font-size: var(--text-display);
  line-height: 1.08;
}
.hero-lead {
  max-width: 35rem;
  margin: var(--space-5) 0 0;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}
.hero-proof {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.product-preview {
  padding: var(--space-6);
  border: 1px solid var(--brand-beige);
  border-radius: var(--radius-md);
  background: var(--brand-white);
}
.preview-heading,
.preview-work {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.preview-heading {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.preview-heading div,
.preview-work div {
  flex: 1;
  min-width: 0;
}
.preview-heading div span,
.preview-work div span,
.preview-values span {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.preview-mark {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  color: var(--brand-white);
  font-weight: 700;
}
.preview-status,
.state-label {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--brand-gray-100);
  color: var(--brand-blue);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.preview-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0;
}
.preview-values strong {
  font-size: var(--text-title);
  letter-spacing: var(--tracking-tight);
}
.preview-values small {
  font-size: var(--text-sm);
}
.preview-bars {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-gray-100);
  font-size: var(--text-xs);
}
.preview-bars div + div {
  margin-top: var(--space-4);
}
.preview-bars b {
  float: right;
}
.preview-bars i {
  display: block;
  height: 6px;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
}
.bar-in,
.chart .bar > span {
  background: var(--brand-orange);
}
.bar-out,
.chart .bar.out > span {
  background: var(--brand-blue);
}
.preview-work {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.work-number {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--brand-gray-100);
  font-size: var(--text-xs);
}
.preview-link,
.feature-grid a,
.table a,
.text-link {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--brand-blue);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.section {
  max-width: var(--container-max);
  margin: auto;
  padding: var(--section-space) var(--page-gutter);
}
.section > h1,
.section > h2 {
  max-width: var(--measure);
  font-size: var(--text-title);
}
.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.feature-grid .card {
  padding: var(--space-5);
}
.feature-number {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.feature-grid h3 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: 1.0625rem;
}
.feature-grid p,
.process-section p,
.faq p {
  font-size: var(--text-sm);
  line-height: 1.6;
}
.value-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--page-gutter);
  background: var(--brand-blue);
  color: var(--brand-white);
  font-size: var(--text-sm);
}
.value-strip strong,
.final-cta .eyebrow {
  color: var(--brand-beige);
}
.value-strip span::before {
  content: "•";
  margin-right: var(--space-3);
  color: var(--brand-orange);
}
.process-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-block: var(--section-space);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--brand-gray-100);
}
.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--brand-beige);
}
.process-list li:last-child {
  border: 0;
}
.process-list span {
  font-size: var(--text-title);
  font-weight: 600;
}
.process-list h3 {
  margin: 0;
  font-size: 1rem;
}
.process-list p {
  margin: var(--space-2) 0 0;
}
.faq {
  max-width: var(--measure);
}
.faq details {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
}
.final-cta {
  max-width: none;
  background: var(--brand-blue);
  color: var(--brand-white);
  text-align: center;
}
footer.shell {
  padding: var(--space-6) var(--page-gutter);
  text-align: center;
  border-top: 1px solid var(--brand-beige);
}
footer.shell p {
  font-size: var(--text-xs);
}

/* Acesso e operação */
.access-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
  min-height: 70vh;
}
.access-intro h1 {
  max-width: 14ch;
  font-size: var(--text-heading);
}
.access-card {
  max-width: 34rem;
  padding: var(--space-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.access-card .btn {
  width: 100%;
}
.access-note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
}
.access-note span {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  color: var(--brand-beige);
  font-size: var(--text-title);
}
.app-layout {
  display: flex;
  min-height: calc(100vh - 100px);
}
.app-sidebar {
  width: 240px;
  flex: 0 0 240px;
  padding: var(--space-6) var(--space-4);
  background: var(--brand-blue);
  color: var(--brand-white);
}
.app-sidebar .logo-neg {
  width: 160px;
  height: auto;
}
.app-sidebar > p:first-child {
  margin: 0 0 var(--space-5);
}
.app-sidebar .hint,
.app-sidebar a {
  color: var(--brand-beige);
}
.app-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-sidebar nav h2 {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--brand-beige);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.app-sidebar li a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--brand-white);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}
.app-sidebar a[aria-current="page"] {
  background: var(--brand-orange);
  color: var(--brand-blue);
}
.app-sidebar .btn-secondary {
  width: 100%;
  margin-top: var(--space-6);
  border-color: var(--brand-beige);
  background: transparent;
  color: var(--brand-white);
}
.app-sidebar :focus-visible,
.nav-mobile :focus-visible {
  outline-color: var(--brand-orange);
}
.app-main {
  min-width: 0;
  flex: 1;
  padding: 0 var(--page-gutter) var(--space-8);
  background: var(--brand-gray-100);
  font-size: var(--text-operational);
  line-height: 1.57;
}
.app-topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--brand-beige);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.app-main .panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--brand-white);
}
.app-main h1 {
  margin-top: 0;
  font-size: var(--text-title);
}
.app-main h2 {
  font-size: 1.25rem;
}
.app-main h3 {
  font-size: 1rem;
}
.app-main form p {
  margin-block: var(--space-4);
}
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-main select,
.app-main textarea {
  width: 100%;
  min-height: var(--control-min-height);
  padding: var(--control-padding-y) var(--control-padding-x);
  font-size: var(--text-operational);
}
.app-main label {
  font-size: var(--text-operational);
  font-weight: 500;
}
form
  p
  > label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100%, 35rem);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.metric {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--brand-white);
}
.metric p {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.metric strong {
  display: block;
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.metric:first-child {
  background: var(--brand-blue);
  color: var(--brand-white);
}
.metric:first-child p,
.metric:first-child .hint {
  color: var(--brand-beige);
}
.metric[data-metric="overdue"] {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-left: 3px solid var(--brand-orange);
}
.metric[data-metric="overdue"] p {
  margin: 0;
}
.metric[data-metric="overdue"] strong {
  font-size: 1rem;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.filters label {
  display: flex;
  flex: 1 1 11rem;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.table-scroll:focus {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: 2px;
}
.table {
  font-size: var(--text-operational);
}
.table th {
  padding: var(--space-3);
  background: var(--brand-gray-100);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.table td {
  padding: var(--space-3);
}
.table .btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}
.card-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.work-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--brand-blue);
  font-size: var(--text-operational);
  text-decoration: none;
}
.work-summary strong,
.work-summary small {
  display: block;
}
.work-summary small {
  margin-top: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.chart {
  display: grid;
  gap: var(--space-2);
  max-width: 36rem;
}
.chart .bar {
  height: 1.1rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--brand-gray-100);
}
.chart .bar > span {
  display: block;
  height: 100%;
}
.chart .bar-row {
  display: grid;
  grid-template-columns: 9rem 1fr 7rem;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* CRM */
.crm-page-heading,
.crm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.crm-toolbar {
  margin: var(--space-5) 0;
}
.crm-toolbar .crm-filters {
  flex: 0 1 30rem;
  margin: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.contact-card,
.proposal-card {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.contact-heading,
.proposal-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.contact-avatar {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--brand-gray-100);
  font-size: var(--text-title);
}
.contact-card h2 {
  margin: var(--space-5) 0;
}
.contact-card h2 a,
.proposal-card h2 a {
  text-decoration: none;
}
.contact-meta {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}
.contact-meta dt,
.proposal-client,
.proposal-next span {
  margin-bottom: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.contact-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.crm-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.crm-summary a {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--brand-blue);
  text-decoration: none;
}
.crm-summary a:first-child {
  background: var(--brand-blue);
  color: var(--brand-white);
}
.crm-summary span {
  font-size: var(--text-xs);
}
.crm-summary strong {
  margin-top: var(--space-2);
  font-size: var(--text-heading);
}
.proposal-list {
  display: grid;
  gap: var(--space-3);
}
.proposal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 10rem;
  align-items: center;
  gap: var(--space-5);
}
.proposal-card h2 {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
}
.proposal-next {
  margin: 0;
  font-size: var(--text-sm);
}
.proposal-value {
  flex-direction: column;
  align-items: flex-start;
}
.proposal-value strong {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.proposal-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-subtle);
}
.proposal-stage label {
  margin: 0;
}
.proposal-stage select {
  margin-top: var(--space-2);
}

@media (max-width: 1100px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .proposal-card {
    grid-template-columns: minmax(0, 1fr) 9rem;
  }
  .proposal-stage {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: end;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
  .proposal-stage label {
    min-width: 10rem;
  }
}
@media (max-width: 768px) {
  header.shell.mkt {
    padding-block: var(--space-4);
  }
  header.mkt nav {
    width: 100%;
    margin-left: 0;
  }
  .hero-fin,
  .access-section,
  .process-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero-fin h1 {
    max-width: 12ch;
  }
  .product-preview {
    max-width: 34rem;
  }
  .process-section {
    margin-inline: var(--page-gutter);
    padding: var(--space-5);
  }
  .app-sidebar {
    display: none;
  }
  .nav-mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--page-gutter);
    background: var(--brand-blue);
    color: var(--brand-white);
  }
  .nav-mobile > p {
    margin: 0;
  }
  .nav-mobile img {
    width: 140px;
    height: auto;
  }
  .nav-mobile details {
    margin-left: auto;
  }
  .nav-mobile summary {
    min-height: 44px;
    padding: var(--space-3);
    color: var(--brand-white);
    cursor: pointer;
  }
  .nav-mobile details[open] {
    width: 100%;
  }
  .nav-mobile nav {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  .nav-mobile nav p {
    margin: 0;
  }
  .nav-mobile nav a {
    display: block;
    padding: var(--space-3);
    color: var(--brand-white);
    text-decoration: none;
  }
  .nav-mobile nav a[aria-current="page"] {
    border-radius: var(--radius-sm);
    background: var(--brand-orange);
    color: var(--brand-blue);
  }
  .app-main {
    padding-inline: var(--page-gutter);
  }
  .app-main .panel {
    padding: var(--space-4);
  }
  .app-topbar {
    margin-bottom: var(--space-4);
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chart .bar-row {
    grid-template-columns: 7rem 1fr 6rem;
  }
  .crm-page-heading,
  .crm-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }
  .crm-toolbar .crm-filters {
    flex: auto;
  }
  .crm-summary {
    grid-template-columns: repeat(3, 1fr);
  }
  .crm-summary a:first-child {
    grid-row: span 2;
    justify-content: center;
  }
  .contact-grid,
  .proposal-card {
    grid-template-columns: 1fr;
  }
  .proposal-value {
    flex-direction: row;
  }
  .proposal-stage {
    flex-wrap: wrap;
  }
  .hide-mobile {
    display: none;
  }
  .show-mobile,
  .card-list {
    display: grid;
    gap: var(--space-3);
  }
}
@media (max-width: 480px) {
  header.mkt .brand-word {
    display: none;
  }
  .hero-fin h1 {
    font-size: clamp(2.25rem, 12vw, 3rem);
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .value-strip {
    justify-content: flex-start;
  }
  .value-strip strong {
    width: 100%;
  }
  .access-card {
    padding: var(--space-5);
  }
  .metric[data-metric="overdue"] {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
  .chart .bar-row {
    grid-template-columns: 1fr 1fr;
  }
  .chart .bar-row > :last-child {
    grid-column: 2;
  }
  .filters label,
  .proposal-stage label {
    flex-basis: 100%;
    min-width: 100%;
  }
}
@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Camada premium — reconcilia o Financeiro com o contrato compartilhado.
   Fica no fim do arquivo para vencer as regras legadas por ordem, sem
   !important. Decisões: docs/ui-premium/CONTRACT.md.
   ========================================================================== */

/* Eyebrow igual à dos outros dois produtos: traço laranja + caixa alta. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.eyebrow::before { content: ""; width: var(--space-5); height: 2px; background: var(--brand-orange); flex: none; }
.final-cta .eyebrow, .hero-fin .eyebrow { color: var(--brand-beige); }
.final-cta .eyebrow::before, .hero-fin .eyebrow::before { background: var(--brand-beige); }

/* --- Superfícies: raio por papel e profundidade discreta ------------------ */
.panel, .metric, .access-card, .contact-card, .proposal-card, .feature-grid .card { border-radius: var(--radius-card); }
.panel, .metric, .access-card { box-shadow: var(--shadow-1); }
.filters, .crm-toolbar { border-radius: var(--radius-card); }
.table-scroll { border-radius: var(--radius-card); }
.flash, .error, .restricted, .demo-banner { border-radius: var(--radius-control); display: flex; align-items: center; gap: var(--space-2); }
.badge, .state-label { border-radius: var(--radius-badge); }

/* --- Cabeçalho operacional: título junto dos controles -------------------- */
.op-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.app-main h1 { font-size: var(--text-op-title); margin-bottom: var(--space-2); }
.op-head .lead { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }

/* --- Navegação lateral ---------------------------------------------------- */
.app-sidebar li a { border-radius: var(--radius-control); transition: background-color var(--dur-state) var(--ease-standard); }
.app-sidebar li a[aria-current] { font-weight: 600; }
.app-topbar { gap: var(--space-4); }
.app-topbar .crumb, .app-topbar .clock { display: inline-flex; align-items: center; gap: var(--space-2); }
.app-topbar .crumb-sep { opacity: 0.5; }

/* --- Linhas de navegação em card ----------------------------------------- */
.work-summary { border-radius: var(--radius-control); transition: background-color var(--dur-state) var(--ease-standard); }
.work-summary .row-go { transition: transform var(--dur-state) var(--ease-standard); }
.work-summary:hover .row-go { transform: translateX(2px); }
.contact-avatar { display: grid; place-items: center; border-radius: var(--radius-pill); }

/* --- Tabelas: números à direita, cabeçalho discreto ----------------------- */
.table td.num, .table th.num, .table .valor { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color var(--dur-state) var(--ease-standard); }

/* --- Filtros: rótulo junto do controle, visível no desktop ---------------- */
.filters label { font-weight: 600; }
.filters .btn { min-height: 44px; }

/* --- Listas que são grades não carregam marcador ------------------------- */
.card-list, .contact-grid, .proposal-list, .metrics, .process-list, .feature-grid { list-style: none; padding-inline-start: 0; }

/* --- Estado vazio --------------------------------------------------------- */
.app-main .empty-state { margin-block: var(--space-5); }

/* --- Mobile: alvo confortável e nada de estouro horizontal ---------------- */
@media (max-width: 767px) {
  .op-head { align-items: stretch; }
  .op-head .btn, .op-head .btn-secondary { width: 100%; }
  .app-topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .filters .btn { width: 100%; }
}

/* --- Valores monetários não quebram no meio ------------------------------
   "R$ 5.000,00" partido em duas linhas ("R$" / "5.000,00") é ilegível e
   sugere um valor diferente do real. A escala cede antes do número quebrar. */
.metric strong {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Seis indicadores cabem em 3 colunas sem deixar buraco na segunda linha. */
.metrics { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
@media (min-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Landing pública — reconstrução de 2026-09-12.
   Mesma gramática do Portfólio (docs/ui-premium/CONTRACT.md): grade
   assimétrica, contraste real de escala, campo de cor da marca e entrada
   coordenada via [data-reveal]. Sem matiz novo: tudo sai de var(--brand-*).
   ========================================================================== */

/* --- Herói ---------------------------------------------------------------- */
.hero-fin {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-9));
  /* Presença de primeira dobra. A dobra anterior terminava em ~330px de uma
     página de 3745px: o produto não chegava a se apresentar. */
  min-height: min(74vh, 680px);
  max-width: none;
  padding-block: var(--density-section);
  padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2));
}
.hero-fin h1 {
  max-width: 13ch;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}
.hero-lead { color: var(--ink-muted); font-size: var(--text-lead); }

/* Prévia do produto: superfície grande, então raio grande e elevação real.
   Continua clara porque representa a interface, que é clara. */
.product-preview {
  border-radius: var(--radius-media);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-3);
  padding: clamp(var(--space-5), 2.2vw, var(--space-7));
}
/* Marca de honestidade: exemplo não é prova comercial. */
.preview-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-caption);
  line-height: 1.45;
}
.preview-note svg { flex: none; margin-top: 2px; }

/* --- Cabeçalho de seção --------------------------------------------------- */
.section-head-fin { margin-bottom: var(--space-7); }
.section-head-fin h2 {
  max-width: 20ch;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}

/* --- Recursos: contraste de escala, não quatro iguais --------------------- */
.feature-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.feature-layout > .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-card);
}
.feature-layout > .card > p { margin: 0; flex: 1; }
/* O recurso que conduz a seção ocupa a faixa inteira e fala mais alto. */
.feature-lead {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--brand-blue);
  color: var(--brand-white);
  border-color: transparent;
}
.feature-lead .lead-id { display: grid; gap: var(--space-3); align-content: center; }
.feature-lead .lead-body { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }
.feature-lead h3 { margin: 0; font-size: var(--text-section); line-height: var(--leading-title); }
.feature-lead .feature-number { color: var(--brand-beige); }
.feature-lead p { margin: 0; color: color-mix(in srgb, var(--brand-white) 82%, var(--brand-blue)); font-size: 1rem; line-height: var(--leading-body); }
.feature-lead a { color: var(--brand-white); }

/* --- Planos: a faixa inteira trabalha ------------------------------------- */
.plans-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
}
.plans-intro h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}
.plans-intro p { max-width: 42ch; color: var(--ink-muted); }
.plans-list { display: grid; margin: 0; padding-inline-start: 0; list-style: none; }
.plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border-strong);
}
.plan-row:last-child { border-bottom: 1px solid var(--border-strong); }
.plan-id h3 { margin: 0 0 var(--space-2); font-size: var(--text-section); font-weight: 600; }
.plan-id p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.plan-price { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-row.is-empty .plan-id h3 { font-size: 1.125rem; }

.link-fin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}
.link-fin svg { transition: transform var(--dur-state) var(--ease-standard); }
.link-fin:hover svg { transform: translateX(3px); }

/* --- FAQ: o <details> deixa de parecer elemento quebrado ------------------ */
.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
}
.faq-intro h2 {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}
.faq { max-width: none; }
.faq details {
  padding: 0;
  border-bottom: 1px solid var(--border-strong);
}
/* O triângulo nativo do navegador era o que lia como "não estilizado". */
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-4);
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex: none;
  color: var(--brand-orange);
  transition: transform var(--dur-overlay) var(--ease-standard);
}
/* O "+" vira "×" ao abrir: o mesmo glifo Hugeicons, girado. */
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > p {
  margin: 0;
  padding-bottom: var(--space-5);
  max-width: 62ch;
  color: var(--ink-muted);
  line-height: var(--leading-body);
}

/* --- CTA final: painel, não faixa sangrada -------------------------------- */
.final-cta {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-block-end: var(--density-section);
  padding: clamp(var(--space-7), 5vw, var(--space-10)) var(--page-gutter);
  border-radius: var(--radius-media);
}
.final-cta h2 {
  margin-inline: auto;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}
.final-cta .eyebrow { justify-content: center; }

@media (max-width: 900px) {
  .feature-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-lead { grid-template-columns: minmax(0, 1fr); }
  .plans-section, .faq-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hero-fin { grid-template-columns: minmax(0, 1fr); padding-inline: var(--page-gutter); min-height: 0; }
  .hero-fin h1 { max-width: 100%; }
  .feature-layout { grid-template-columns: minmax(0, 1fr); }
  .plan-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .final-cta { border-radius: var(--radius-card); }
}

/* --- App e admin: shell operacional ----------------------------------------
   Software operacional, não vitrine: densidade útil, uma ação primária por
   painel, painéis que não esticam. Sem [data-reveal] aqui — nas áreas
   autenticadas o movimento é microinteração (--dur-press / --dur-state /
   --dur-overlay), nunca narrativa de scroll.
   Cor só por var(--brand-*) e derivadas de tokens.css.
   -------------------------------------------------------------------------- */

/* Pilha da página. `minmax(0, 1fr)`, não `auto`: sem isso o min-content de uma
   tabela larga estica a coluna implícita e a página inteira estoura na
   horizontal (aconteceu no fluxo de caixa a 390px). */
.op-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; }

/* Cabeçalho de página: título operacional junto dos controles e UMA ação
   primária à direita. O que era botão solto no rodapé do painel sobe pra cá. */
.op-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  margin-bottom: 0;
}
.op-head-text { min-width: 0; display: grid; gap: var(--space-2); }
.op-head-text .eyebrow { margin: 0; font-size: var(--text-caption); }
.op-head-text h1 { margin: 0; font-weight: 600; letter-spacing: var(--tracking-tight); }
.op-lead { margin: 0; max-width: 68ch; color: var(--ink-muted); font-size: var(--text-sm); }
.op-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Duas colunas reais: a lista trabalha, o resumo acompanha. `align-self:start`
   impede o painel curto de esticar e abrir buraco interno. */
.op-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.op-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-main .panel-start, .app-main .op-aside { align-self: start; }
.app-main .op-page .panel { margin-bottom: 0; }

/* Cabeçalho interno de painel: título + ação terciária na mesma linha. */
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-head .hint { margin: 0; }
.app-main .panel > h2:first-child, .app-main .panel > h3:first-child { margin-top: 0; }
.panel-note { margin: var(--space-4) 0 0; color: var(--ink-muted); font-size: var(--text-xs); }

/* Lista de linhas navegáveis: a última não repete a régua. */
.row-list { display: grid; margin: 0; padding-inline-start: 0; list-style: none; }
.row-list > li:last-child .work-summary { border-bottom: 0; padding-bottom: 0; }
.work-summary { padding-inline: var(--space-3); margin-inline: calc(var(--space-3) * -1); }
.work-summary:hover, .work-summary:focus-visible { background: var(--surface-sunken); }
.row-go { display: inline-flex; color: var(--ink-soft); }

/* Indicadores compactos para painel lateral — texto e número, sem card. */
.stat-list { display: grid; gap: var(--space-4); margin: 0; }
.stat-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.stat-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.stat-list dt { color: var(--ink-muted); font-size: var(--text-sm); }
.stat-list dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* Estado por rótulo + forma, nunca só por cor: o texto continua sendo o nome
   do estado; a superfície apenas reforça. */
.badge, .state-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem var(--space-3);
  background: var(--surface-sunken);
  color: var(--brand-blue);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge[data-state="atrasada"], .state-label[data-state="atrasada"],
.badge[data-state="suspensa"], .state-label[data-state="suspensa"],
.badge[data-state="rejeitada"], .state-label[data-state="rejeitada"],
.badge[data-state="vencido"], .state-label[data-state="vencido"] { background: var(--accent-soft); }
.badge[data-state="trial"], .state-label[data-state="trial"],
.badge[data-state="planejada"], .state-label[data-state="planejada"],
.badge[data-state="rascunho"], .state-label[data-state="rascunho"] { background: var(--surface-warm); }
.badge[data-state="ativa"], .state-label[data-state="ativa"],
.badge[data-state="pago"], .state-label[data-state="pago"],
.badge[data-state="aceita"], .state-label[data-state="aceita"],
.badge[data-state="aprovada"], .state-label[data-state="aprovada"] { background: var(--brand-blue); color: var(--brand-white); }
.badge[data-state="cancelada"], .state-label[data-state="cancelada"] { color: var(--ink-soft); }

/* Barra de ferramentas: filtro à esquerda, contagem à direita. O rótulo fica
   junto do controle, visível — nada escondido atrás de um botão no desktop. */
.op-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.op-toolbar .hint { margin: 0; }
.app-main .filters { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--surface-sunken); }
.filters label { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.filters .btn { flex: 0 0 auto; }
.filters .loading { order: 99; }

/* Formulário: largura de leitura, agrupado por tarefa, rótulo + ajuda, e uma
   faixa de ação que separa o "salvar" do resto. */
.form-panel { max-width: 62rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}
.form-grid > .field { margin-bottom: 0; min-width: 0; }
.app-main .field > label { font-size: var(--text-operational); font-weight: 600; }
.app-main .field .hint { font-size: var(--text-xs); line-height: 1.45; }
.field-group {
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.field-group:last-of-type { margin-bottom: var(--space-5); }
.field-group > legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-operational);
  font-weight: 600;
}
.field-group > .hint { margin: 0 0 var(--space-5); color: var(--ink-muted); font-size: var(--text-xs); }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.form-actions .hint { margin: 0 0 0 auto; }
/* Erro de campo reserva altura: a mensagem não empurra o formulário. */
.app-main .field .field-error:empty { min-height: 1.25rem; }

/* Tabela operacional: cabeçalho discreto e fixo, número à direita, linha que
   responde ao ponteiro e ao teclado. */
.app-main .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.app-main .table td { padding-block: var(--space-4); vertical-align: middle; }
.app-main .table tbody tr:last-child td { border-bottom: 0; }
.app-main .table tbody tr:hover,
.app-main .table tbody tr:focus-within { background: var(--surface-sunken); }
.app-main .table .num, .app-main .table td.num { white-space: nowrap; }
.table-action { display: flex; justify-content: flex-end; }
.app-main .table-action .btn { white-space: nowrap; }
.cell-empty { color: var(--ink-soft); font-size: var(--text-xs); }
.app-main .table .btn-quiet { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.app-main .table-scroll { margin-block: 0; }

/* Estados: vazio, restrito e mensagens de operação com a mesma família. */
.app-main .empty-state { margin: 0; padding: var(--space-7) var(--space-5); }
.app-main .panel > .empty-state { background: var(--surface-sunken); border-radius: var(--radius-control); }
.app-main .flash, .app-main .error, .app-main .restricted {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-operational);
  font-weight: 500;
}
/* O fundo do app já é cinza: um alerta cinza sobre cinza some. Superfície
   branca + filete laranja, e o texto continua dizendo o que aconteceu. */
.app-main .error {
  background: var(--brand-white);
  border-left: 3px solid var(--brand-orange);
  box-shadow: var(--shadow-1);
}
.app-main .error svg { color: var(--brand-orange); }

/* Microinterações. Pressão, estado e overlay — nada que se mova sozinho.
   A pressão de botão já vem de app.css; aqui entram os estados que só existem
   no shell operacional. */
.app-sidebar li a { position: relative; }
/* Marcador da página atual: cresce a partir do topo em --dur-state. */
.app-sidebar li a::before {
  content: "";
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--radius-badge);
  background: var(--brand-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-state) var(--ease-standard);
}
.app-sidebar li a:hover::before { transform: scaleY(1); }
.app-sidebar li a[aria-current="page"]::before { background: var(--brand-blue); transform: scaleY(1); }
.app-sidebar li a:hover { background: color-mix(in srgb, var(--brand-white) 12%, var(--brand-blue)); }
.app-sidebar li a[aria-current="page"]:hover { background: var(--brand-orange); }
/* "Sair" é item terciário: não é uma pílula de largura total. */
.app-sidebar .btn-secondary {
  width: auto;
  min-height: 40px;
  margin-top: var(--space-7);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--brand-beige);
  font-size: var(--text-sm);
  font-weight: 500;
}
.app-sidebar .btn-secondary:hover {
  background: color-mix(in srgb, var(--brand-white) 12%, var(--brand-blue));
  color: var(--brand-white);
}
.app-sidebar > .hint { margin-top: var(--space-4); font-size: var(--text-xs); line-height: 1.6; }
/* Menu móvel: abertura curta em --dur-overlay, e nada invisível sem JS. */
.nav-mobile details[open] nav { animation: op-sheet var(--dur-overlay) var(--ease-standard) both; }
@keyframes op-sheet { from { opacity: 0; transform: translateY(-6px); } }

/* Assinatura e planos internos: comparação legível, uma escolha em destaque. */
.pricing-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); }
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: start;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--brand-white);
}
.pricing-card[data-current="true"] { border-color: var(--brand-blue); border-width: 2px; }
.pricing-card h2, .pricing-card h3 { margin: 0; font-size: var(--text-section); font-weight: 600; }
.pricing-card .pricing-amount {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.pricing-card ul { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: 0; list-style: none; font-size: var(--text-sm); }
.pricing-card li { display: flex; align-items: flex-start; gap: var(--space-2); }
.pricing-card li svg { flex: none; margin-top: 2px; color: var(--brand-orange); }
.pricing-card form, .pricing-card > .btn, .pricing-card > .btn-secondary { margin-top: auto; }
.pricing-card .btn { width: 100%; justify-content: center; }

/* Rótulo só para leitor de tela — cabeçalho de coluna de ação. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Valor em destaque dentro de card. Não quebra no meio do número. */
.card-amount {
  margin: var(--space-2) 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.card-amount span { color: var(--ink-muted); font-size: var(--text-sm); font-weight: 500; }

/* Fila de aprovação: um cartão por despesa, uma ação primária cada. */
.approval-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--space-5); align-items: start; }
.approval-card { align-self: start; padding: var(--space-5); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.approval-card h2 { margin: 0; font-size: 1.0625rem; }
.approval-card .form-actions { padding-top: 0; border-top: 0; }
.reject-box { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.reject-box .field { margin-bottom: var(--space-4); }

/* Histórico e listas curtas sem marcador nem régua pesada. */
.plain-list { gap: var(--space-1); }
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.history-row:last-child { border-bottom: 0; }
.alert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.alert-row:last-child { border-bottom: 0; }
.alert-row span { color: var(--ink-muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding-inline-start: 0; list-style: none; }

/* Indicador de vencidos: o aviso vem com ícone, não só com a cor. */
.metric[data-metric="overdue"] p { display: inline-flex; align-items: center; gap: var(--space-2); }
.metric[data-metric="overdue"] svg { color: var(--brand-orange); }

/* Gráfico do caixa: barras à esquerda, tabela de apoio (alternativa acessível
   do `role="img"`) à direita. A tabela não herda o min-width de 36rem, senão
   rola dentro de uma coluna estreita e corta os valores. */
.cash-figure { margin: 0; display: grid; gap: var(--space-5) var(--space-6); align-items: start; }
.cash-figure .chart { max-width: none; }
.cash-figure .table-scroll .table, .op-aside .table-scroll .table { min-width: 0; }
/* Trilho único: com o trilho de saída em bege e preenchimento 0%, a barra de
   "R$ 0,00" lia como barra cheia. Quem diferencia entrada de saída é o
   preenchimento (laranja × azul) e o rótulo da linha. */
.app-main .chart .bar { background: var(--surface-sunken); }
@media (min-width: 1100px) {
  .cash-figure { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cash-figure figcaption { grid-column: 1 / -1; }
}
/* A legenda fica dentro da moldura rolável: sem respiro lateral ela encosta
   na borda e parece cortada. */
.table-scroll .table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-align: left;
}

/* Ação secundária ao pé de um formulário, separada da faixa principal. */
.panel-aside-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.panel-aside-action .hint { margin: 0; flex: 1 1 14rem; }
.confirm-panel { max-width: 44rem; }

/* Proposta: o rótulo "PRÓXIMA AÇÃO" é uma linha própria, não cola no texto. */
.proposal-next span { display: block; }
.proposal-stage .btn-quiet { justify-content: center; white-space: nowrap; border-color: var(--border-strong); }

/* Etapas do CRM: a etapa aberta fica evidente sem depender só de cor. */
.crm-summary a { transition: border-color var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard); }
.crm-summary a:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
.crm-summary a[aria-current="page"] { border-color: var(--brand-blue); border-width: 2px; background: var(--surface-warm); }
.crm-summary a:first-child:hover { background: var(--brand-blue); }

/* Acesso: campo com respiro e ação de largura total, sem virar vitrine. */
.access-card .field { margin-bottom: var(--space-4); }
.access-card .btn-primary { width: 100%; }
.access-intro .lead { max-width: 34ch; color: var(--ink-muted); }
.access-card .hint a { color: var(--brand-blue); }

/* Planos (página pública interna): cartões comparáveis e tabela de apoio. */
.pricing-page .section-head-fin h1 {
  max-width: 18ch;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}
.pricing-page .section-head-fin .lead { max-width: 56ch; color: var(--ink-muted); }
.pricing-card > p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.pricing-card > .pricing-amount { color: var(--brand-blue); font-size: 1.5rem; }
.plans-compare { margin-top: var(--space-9); max-width: 54rem; }
.plans-compare h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.table.compare th[scope="row"] { background: var(--surface-sunken); }

/* Dedo: links que são a navegação real de um item (título de card, linha de
   lista, atalho do rodapé do acesso) ganham altura de alvo. Não vale para
   link dentro de parágrafo corrido, que continua sendo texto. */
@media (pointer: coarse), (max-width: 767px) {
  .card-list .card > p > a,
  .contact-card h2 a,
  .proposal-card h2 a,
  .history-row a,
  .access-card .hint a,
  .app-sidebar > .hint a,
  .app-main .table td > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .card-list .card .panel-head strong a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mobile: alvo de 44px, coluna única, nada de estouro horizontal. */
@media (max-width: 900px) {
  .op-grid, .op-grid-even { grid-template-columns: minmax(0, 1fr); }
  .approval-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .op-head { align-items: stretch; flex-direction: column; }
  .op-head-actions { width: 100%; }
  .op-head-actions > .btn, .op-head-actions > .btn-secondary, .op-head-actions > a { flex: 1 1 12rem; justify-content: center; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-actions > .btn, .form-actions > .btn-secondary { flex: 1 1 100%; justify-content: center; }
  .form-actions .hint { margin-inline-start: 0; }
  .app-main .table th { position: static; }
  .op-toolbar { align-items: stretch; flex-direction: column; }
  .app-sidebar .btn-secondary, .nav-mobile button { min-height: 44px; }
  /* Sem a linha do lado, a ação secundária precisa de contorno para não ler
     como texto solto. */
  .op-head-actions .btn-ghost { border-color: var(--border-strong); }
  /* "Sair" também é terciário no menu móvel: nada de pílula branca sobre azul. */
  .nav-mobile nav form button {
    width: auto;
    margin-top: var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--brand-beige);
    font-weight: 500;
  }
  .nav-mobile nav form button:hover { background: color-mix(in srgb, var(--brand-white) 12%, var(--brand-blue)); color: var(--brand-white); }
  .pricing-card .btn, .pricing-board .btn { min-height: 44px; }
  /* Dois indicadores por linha: 13rem não cabe em 358px e vira uma coluna só. */
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric[data-metric="overdue"] { grid-column: 1 / -1; }
  .card-list .card .panel-head { align-items: center; }
}

/* O triângulo nativo do <details> ao lado do ícone Hugeicons lia como uma
   seta de texto usada como ícone. O estado aberto continua no aria-expanded
   implícito do summary e no próprio menu aparecendo. */
.nav-mobile summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary::marker { content: ""; }