/* Identidades 0.3: a cor pertence ao negócio, nunca ao estado financeiro. */
:root { --area-accent: #216b53; --area-soft: #edf4ef; }
.nav-item[data-area] { gap: 10px; padding-top: 7px; padding-bottom: 7px; position: relative; }
.nav-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0; background: var(--area-soft); }
.nav-item[data-area] .nav-area-icon .icon { width: 16px; height: 16px; color: var(--area-accent); }
.nav-item[data-area].active, .nav-item[data-area]:hover { background: var(--area-soft); color: var(--area-accent); }
.nav-item[data-area].active::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; background: var(--area-accent); border-radius: 3px; }
.nav-item[data-area].active .nav-area-icon { background: var(--area-accent); }
.nav-item[data-area].active .nav-area-icon .icon { color: white; }
.area-breadcrumb { display: inline-flex; gap: 8px; align-items: center; color: var(--area-accent); }
.area-breadcrumb .icon { flex-shrink: 0; width: 15px; height: 15px; }
.page-heading.area-heading { padding: 0 0 23px; border-bottom: 1px solid var(--line); margin-bottom: 18px; align-items: center; }
.area-identity { display: flex; align-items: center; gap: 18px; }
.area-identity>div { min-width: 0; }
.area-emblem { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; flex-shrink: 0; border-radius: 16px; background: var(--area-soft); color: var(--area-accent); box-shadow: inset 0 -3px 0 var(--area-accent); }
.area-emblem .icon { width: 29px; height: 29px; stroke-width: 1.5; }
.area-kicker { color: var(--area-accent); text-transform: uppercase; font-size: 10px; font-weight: 650; letter-spacing: 1.5px; margin-bottom: 7px; }
.area-kicker span { margin: 0 6px; }
.area-heading h1 { font-size: 31px; letter-spacing: -.9px; }
.area-heading p { margin-top: 16px; max-width: 730px; }
html:not([data-area="neutral"]) #main .subnav button.active { color: var(--area-accent); border-color: var(--area-accent); }
html:not([data-area="neutral"]) #main .btn.primary,
.modal[data-area]:not([data-area="neutral"]) .btn.primary { background: var(--area-accent); border-color: var(--area-accent); color: white; }
html:not([data-area="neutral"]) #main .btn.primary:hover,
.modal[data-area]:not([data-area="neutral"]) .btn.primary:hover { filter: brightness(.91); }
html:not([data-area="neutral"]) #main .text-btn,
html:not([data-area="neutral"]) #main .eyebrow { color: var(--area-accent); }
html:not([data-area="neutral"]) #main .scope-select>.icon { color: var(--area-accent); }
.business-card[data-area] { grid-template-columns: 50px minmax(0,1fr) 16px; gap: 16px; padding: 24px 9px; }
.business-card[data-area]:hover { background: var(--area-soft); border-color: var(--area-accent); }
.business-card[data-area] .business-icon { width: 48px; height: 62px; border-radius: 11px; flex-direction: column; gap: 8px; background: var(--area-soft); color: var(--area-accent); }
.business-card .business-icon .icon { width: 21px; height: 21px; }
.business-code { font-size: 9px; letter-spacing: 1px; line-height: 1; font-weight: 700; }
.business-card[data-area] .arrow { color: var(--area-accent); }
.controls-line button[data-area] { color: var(--area-accent); }
.controls-line button[data-area] .icon { box-sizing: content-box; padding: 7px; border-radius: 7px; background: var(--area-soft); }
.area-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; width: fit-content; background: var(--area-soft); color: var(--area-accent); border-radius: 5px; padding: 4px 7px; font-size: 10px; font-weight: 550; line-height: 1.5; vertical-align: middle; text-align: left; }
.area-badge .icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--area-accent); }
.area-badge>span { min-width: 0; }
.transaction-origin { margin-top: 6px; }
.transaction-origin .area-badge { max-width: 190px; }
.finance-card-foot { flex-wrap: wrap; }
.finance-card-foot .area-badge { max-width: 65%; font-size: 10px; }
.finance-card-foot>.tag { flex-shrink: 0; }
.entity-card .tags .area-badge { margin: 0 0 2px; }
.modal-origin:empty { display: none; }
.modal-origin { margin-bottom: 12px; }
.modal-origin .area-badge { font-size: 11px; padding: 5px 8px; }
.modal[data-area]:not([data-area="neutral"]) { border-top: 3px solid var(--area-accent); }
.modal-header>div { min-width: 0; }
.search-area .business-icon { background: var(--area-soft); color: var(--area-accent); flex-shrink: 0; }
.search-area:hover { background: var(--area-soft); }
.todo-icon.area-todo { background: var(--area-soft); color: var(--area-accent); }

@media (min-width: 701px) and (max-height: 820px) {
  .nav-item[data-area] { padding-top: 4px; padding-bottom: 4px; }
  .nav-area-icon { width: 26px; height: 26px; }
}
@media (max-width: 1250px) {
  .area-heading h1 { font-size: 29px; }
  .area-emblem { width: 60px; height: 60px; }
  .area-heading>.btn { flex-shrink: 0; }
}
@media (max-width: 700px) {
  .nav-item[data-area] { min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
  .nav-area-icon { width: 30px; height: 30px; }
  .area-identity { gap: 13px; align-items: flex-start; }
  .area-emblem { width: 53px; height: 59px; border-radius: 12px; }
  .area-emblem .icon { width: 26px; height: 26px; }
  .area-kicker { font-size: 9px; letter-spacing: 1.2px; margin: 1px 0 6px; }
  .area-heading h1 { font-size: 27px; letter-spacing: -.75px; line-height: 1.22; }
  .area-heading p { font-size: 13px; margin-top: 16px; }
  .business-card[data-area] { padding: 23px 4px; grid-template-columns: 50px minmax(0,1fr) 16px; }
  .business-card[data-area] .business-icon { width: 48px; height: 62px; }
  .area-breadcrumb .icon { display: none; }
}