/*
 * Contrato cromático público.
 *
 * Os 14 nomes editáveis não devem ser renomeados: temas personalizados os
 * armazenam como chaves JSON no banco. --warning é interno e vem do tema-base.
 * --taxes é derivado (mesma cor de --benefit) e não é editável por si.
 * Cores suaves são derivadas com color-mix() no ponto de uso, evitando dezenas
 * de tokens duplicados por tema.
 *
 * Fonte única das paletas padrão (17/10/2026): o script do primeiro quadro
 * (base.html) só aplica a classe, e o editor de temas (settings.js) lê os
 * valores daqui por um elemento com [data-theme-palette]. Para mudar uma cor
 * de tema padrão, basta mudar aqui. Temas personalizados continuam gravando as
 * próprias cores no <html>, por cima da classe do tema-base.
 */
:root,
[data-theme-palette="light"] {
    color-scheme: light;
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-muted: #f1f4f8;
    --line: #d9dee7;
    --ink: #0d1424;
    --muted: #677386;
    --accent-2: #2f6fcd;
    --chart-primary: #111111;
    --contribution: #2f6fcd;
    --conclusion-bg: #111111;
    --conclusion-ink: #ffffff;
    --danger: #d9333f;
    --success: #157a56;
    --warning: #c47c12;
    --benefit: #7c3aed;
    --taxes: var(--benefit);
}

html.theme-dark,
body.theme-dark,
[data-theme-palette="dark"] {
    color-scheme: dark;
    --bg: #10141d;
    --surface: #171d29;
    --surface-muted: #262c38;
    --line: #3a404b;
    --ink: #f4f7fb;
    --muted: #a7b0c0;
    --accent-2: #75a7ff;
    --chart-primary: #b7bfcc;
    --contribution: #75a7ff;
    --conclusion-bg: #f4f7fb;
    --conclusion-ink: #07111f;
    --danger: #ff7a85;
    --success: #4cc38a;
    --warning: #e0a64a;
    --benefit: #b99cff;
    --taxes: var(--benefit);
}

html.theme-modern-light,
body.theme-modern-light,
[data-theme-palette="modern-light"] {
    color-scheme: light;
    --bg: #e2f5f8;
    --surface: #fbfeff;
    --surface-muted: #d3ecef;
    --line: #a8d2da;
    --ink: #071924;
    --muted: #486f7a;
    --accent-2: #00a6a6;
    --chart-primary: #073b4c;
    --contribution: #00a6a6;
    --conclusion-bg: #073b4c;
    --conclusion-ink: #ffffff;
    --danger: #d7263d;
    --success: #118c68;
    --warning: #b86b00;
    --benefit: #6842b8;
    --taxes: var(--benefit);
}

html.theme-vintage,
body.theme-vintage,
[data-theme-palette="vintage"] {
    color-scheme: light;
    --bg: #efe4cf;
    --surface: #fff7e8;
    --surface-muted: #ead9b8;
    --line: #d4bd91;
    --ink: #241a12;
    --muted: #705f49;
    --accent-2: #a45f2a;
    --chart-primary: #2b2118;
    --contribution: #2f6588;
    --conclusion-bg: #3a2718;
    --conclusion-ink: #fff7e8;
    --danger: #9b2f2f;
    --success: #3f6b45;
    --warning: #9b5a21;
    --benefit: #73508a;
    --taxes: var(--benefit);
}

html.theme-dark-black,
body.theme-dark-black,
[data-theme-palette="dark-black"] {
    color-scheme: dark;
    --bg: #050505;
    --surface: #0b0b0d;
    --surface-muted: #1b1b1d;
    --line: #303032;
    --ink: #f5f5f5;
    --muted: #a3a3a3;
    --accent-2: #d4af37;
    --chart-primary: #e7e7e7;
    --contribution: #d4af37;
    --conclusion-bg: #f5f5f5;
    --conclusion-ink: #050505;
    --danger: #ff5c5c;
    --success: #42d392;
    --warning: #d4af37;
    --benefit: #b78cff;
    --taxes: var(--benefit);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); overflow-x: hidden; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
/* Trava de rolagem das modais. A trava fica SO no <html>: e o overflow do
   elemento raiz que vale para a viewport, e e isso que impede a pagina de
   rolar por tras da modal.

   O body precisa continuar com overflow visivel de proposito. Quando o <html>
   deixa de ser "visible", o overflow do body para de ser propagado para a
   viewport e o body vira um scroll container proprio. A sidebar e
   position: sticky, e sticky se ancora no scroll container mais proximo:
   ela passava a grudar no topo do body — que, com a pagina rolada, esta acima
   da tela — e aparecia deslocada para cima e cortada enquanto qualquer modal
   estava aberta.

   Os scripts nao sao uniformes: auth-modal, quick-create e simulador marcam
   html e body; feedback, tax-calculator, settings e apoio-impostos marcam so o
   body. O :has() cobre os dois casos sem tocar em seis arquivos JS — a trava
   sobe para o <html> sempre que o body estiver marcado.

   O recuo ocupa o lugar da barra de rolagem que a trava esconde (04/10/2026):
   no Windows a barra tem ~17 px e a pagina por tras pulava ao abrir e fechar
   qualquer modal. motion.js mede a barra e so preenche a variavel quando a
   pagina rolava; no celular a barra flutua e o recuo fica zero. */
html.is-modal-locked,
html:has(> body.is-modal-locked) { overflow: hidden; padding-inline-end: var(--scrollbar-compensation, 0px); }
body.is-modal-locked { overflow: visible; }
body.is-mobile-nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
/* Foco único da plataforma (revisão de UI de 01/10/2026): 2 px na cor de destaque,
   afastado 2 px. Abas e itens de lista densa recuam o contorno para dentro. */
:where(a, button, [role="button"], [role="tab"], summary):focus-visible {
    outline-width: calc(var(--border-width) * 2);
    outline-style: solid;
    outline-color: var(--accent-2);
    outline-offset: calc(var(--border-width) * 2);
}
.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--layer-modal);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-md);
    color: var(--conclusion-ink);
    background: var(--conclusion-bg);
    transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus { transform: none; }
[data-icon] { display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 1; }
[data-icon] svg { display: block; width: 1em; height: 1em; }
/* Ícones de preenchimento (Material) herdam a cor do texto. Ícones de traço
   declaram fill="none" no <svg> e ficam fora da regra: pintados, viravam
   manchas (olho e documento cheios nos botões do orçamento). */
[data-icon] svg:not([fill="none"]),
[data-icon] svg:not([fill="none"]) path { fill: currentColor; }
[data-icon]:empty::before { content: ""; display: block; width: 1em; height: 1em; }
.icon-button[data-icon]:empty::before,
.theme-button[data-icon]:empty::before { width: var(--icon-lg); height: var(--icon-lg); }
.sosomar-brand-mark { display: inline-grid; place-items: center; color: currentColor; background: transparent; box-shadow: none; line-height: 1; }
.sosomar-brand-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sosomar-brand-mark svg path { fill: currentColor; }
.app-shell,
.sidebar,
.topbar,
.mobile-bar,
.nav-item,
.tool-card,
.tool-card__button,
.panel,
.summary-card,
.search-box,
.suggestion-card,
.account-button,
.account-menu,
.primary-button,
.ghost-button,
.icon-button,
.theme-button,
input,
select,
textarea {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--motion-fast);
    transition-timing-function: ease;
}
.ghost-button, .primary-button {align-content: center;}

/* Shell principal: a primeira coluna acompanha a largura real da sidebar para
   evitar que o menu expandido cubra o conteudo. */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    /* O body tambem e .app-shell. Preservar somente a transicao do grid aqui
       sobrescrevia as cores declaradas em body e fazia o fundo trocar de uma
       vez enquanto os demais componentes ainda animavam o tema. */
    transition:
        grid-template-columns var(--motion-normal) ease,
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}
.app-shell:has(.sidebar.is-collapsed) { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: var(--layer-sidebar); width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 22px var(--space-4); border-right: var(--border-width) solid var(--line); background: var(--surface); overflow-y: auto; overflow-x: hidden; box-shadow: none; }
.sidebar__brand { display: grid; grid-template-columns: 3rem 1fr 2.125rem; align-items: center; gap: 10px; min-height: 3.25rem; }
.sidebar__logo { display: grid; place-items: center; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
.sidebar__mark, .auth-modal__logo { width: 2.875rem; height: 2.875rem; object-fit: contain; }
.sidebar__mark { width: 2.125rem; height: 2.125rem; }
.sidebar__name, .mobile-brand { min-width: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barra do celular: a marca vem antes do nome, como na barra lateral. */
.mobile-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.mobile-brand__mark { flex: 0 0 auto; width: var(--icon-xl); height: var(--icon-xl); }
.mobile-brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* .icon-button (mais abaixo) define largura pelo token de controle e vencia por ordem, deixando o
   botao 6px maior que a faixa de 34px do grid da marca. */
.sidebar .sidebar__toggle { width: var(--control-sm); min-width: var(--control-sm); min-height: var(--control-sm); }
button.sidebar__close { display: none; }
.sidebar__nav { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nav-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.nav-group__title { margin: 0; min-width: 0; padding: 0 10px; color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.nav-group__title[data-nav-group-toggle] { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.nav-group__title[data-nav-group-toggle] > span:not(.nav-group__icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group__icon { flex: 0 0 var(--icon-lg); display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); min-width: var(--icon-lg); margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; color: inherit; background: inherit; box-shadow: none; line-height: 1; }
.nav-group__icon svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.nav-group__icon svg path { fill: currentColor; }
.nav-group.is-nav-collapsed > .nav-item { display: none; }
/* A entrada só é acionada pelo controle do grupo, nunca ao restaurar a página. */
.nav-group[data-nav-opening]:not(.is-nav-collapsed) > .nav-item { animation: settingsItemIn var(--motion-fast) ease; }
/* O estado salvo é aplicado no <html> antes do CSS carregar. Estas regras
   mantêm o primeiro frame igual ao estado que o JavaScript irá hidratar. */
html[data-expanded-nav-groups~="financeiras"] [data-nav-group="financeiras"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="empresariais"] [data-nav-group="empresariais"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="uteis"] [data-nav-group="uteis"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="reforma-tributaria"] [data-nav-group="reforma-tributaria"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="membros"] [data-nav-group="membros"].is-nav-collapsed > .nav-item { display: flex; }
.nav-item { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--control-sm); padding: 9px 10px; border-radius: var(--radius-md); color: color-mix(in srgb, var(--ink) 78%, var(--muted)); background: transparent; overflow: hidden; text-align: left; line-height: 1.2; font-size: var(--font-size-md); font-weight: 500; }
.nav-item:focus-visible { outline-offset: calc(var(--border-width) * -2); }
.nav-item__icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: currentColor; }
.nav-item__icon svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
/* Rotulos longos ficam em uma linha com reticencias em vez de quebrar o menu. */
.nav-item__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-tag { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 1px 7px; border-radius: var(--radius-pill); color: var(--surface); background: var(--accent-2); font-family: var(--font-sans); font-weight: 700; font-size: 0.625rem; line-height: 1; letter-spacing: 0.04rem; vertical-align: middle; white-space: nowrap; }
.page-title-with-tag { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.page-title-with-tag h1 { margin: 0; }
.nav-item > .beta-tag { flex: 0 0 auto; margin-left: auto; }
.nav-item--child { min-height: var(--control-sm); padding-left: 18px; font-size: var(--font-size-md); }
.nav-item--group { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-sm); letter-spacing: 0.04rem; }
/* Hover neutro; ativo tonal com fio de 2 px — os dois deixam de ser iguais. */
.nav-item:hover { color: var(--ink); background: var(--surface-muted); }
.nav-item:is(.is-active, [aria-current="page"]) { color: var(--ink); background: color-mix(in srgb, var(--accent-2) 11%, var(--surface)); box-shadow: inset 2px 0 0 var(--accent-2); font-weight: 600; }
.nav-item:is(.is-active, [aria-current="page"]) [data-icon] { color: var(--accent-2); }
.nav-item--button { width: 100%; }
.sidebar__footer { margin-top: auto; display: grid; gap: 10px; }
.sidebar__mobile-actions { display: none; }
.sidebar__site { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); color: var(--muted); text-decoration: none; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
/* Mesmo hover dos itens de navegacao (.nav-item): tinta e fundo suave. Vale para
   os tres links do rodape da sidebar, para que Planos nao seja o unico com resposta. */
.sidebar__site:hover, .sidebar__site:focus-visible { color: var(--ink); background: var(--surface-muted); }
.sidebar__site-icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: currentColor; }
.sidebar__site-icon svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.sidebar.is-collapsed { width: var(--sidebar-collapsed); align-items: center; padding-inline: 10px; box-shadow: none; }
.sidebar.is-collapsed .sidebar__brand { grid-template-columns: 1fr; justify-items: center; }
.sidebar.is-collapsed .sidebar__name,
.sidebar.is-collapsed .nav-group__title,
.sidebar.is-collapsed .nav-item__label,
.sidebar.is-collapsed .sidebar__footer { display: none; }
.sidebar.is-collapsed .sidebar__toggle { display: inline-grid; margin-top: var(--space-2); }
.sidebar.is-collapsed .sidebar__logo::after { display: none; }
.sidebar.is-collapsed .sidebar__logo { cursor: pointer; }
.sidebar.is-collapsed .nav-group { width: 100%; height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-muted); }
.sidebar.is-collapsed .nav-item { display: none; }

.mobile-bar { display: none; }

/* Expandir/recolher da sidebar. A largura da barra e a coluna do grid usam a
   mesma duracao e curva, entao o conteudo acompanha o movimento em vez de
   saltar quando a animacao termina. */
@media (min-width: 47.5625rem) {
    .sidebar { transition: width var(--motion-normal) ease, padding var(--motion-normal) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
    .sidebar__brand { transition: grid-template-columns var(--motion-normal) ease; }
    .sidebar__mark { transition: width var(--motion-normal) ease, height var(--motion-normal) ease; }
    .sidebar__nav,
    .sidebar__footer { transition: opacity var(--motion-fast) ease; }
    .sidebar.is-collapsed .sidebar__nav { opacity: 0.85; }
    .nav-group { transition: height var(--motion-normal) ease, background-color var(--motion-normal) ease; }
    .nav-item { transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
}

.app-main { min-width: 0; width: 100%; }
.topbar { position: sticky; top: 0; z-index: var(--layer-header); display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: var(--topbar-height); padding: var(--space-3) clamp(18px, 3vw, 36px); border-bottom: var(--border-width) solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
.search-area { position: relative; width: min(38.75rem, 100%); transition: margin-left var(--motion-normal) ease; }
.search-box { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.5rem; padding: 0 14px; border: var(--border-width) solid transparent; border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); }
.search-box:focus-within { border-color: var(--accent-2); background: var(--surface); box-shadow: var(--ring); }
.search-box span { font-size: var(--font-size-md); }
.search-box > span[data-icon] { display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); flex: 0 0 var(--icon-lg); }
.search-box > span[data-icon] svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-suggestions { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: calc(var(--layer-dropdown) - 5); display: grid; gap: var(--space-2); max-height: min(70vh, 26.875rem); overflow: auto; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.search-suggestions[hidden] { display: none; }
.search-suggestions:not([hidden]) { animation: accountMenuIn var(--motion-fast) ease; }
.suggestion-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); text-align: left; }
.suggestion-card:hover,
.suggestion-card.is-active { border-color: var(--accent-2); background: var(--surface); box-shadow: var(--ring); }
.suggestion-card__content { display: grid; gap: var(--space-1); min-width: 0; }
.suggestion-card small { color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; }
.suggestion-card strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.suggestion-card__content .beta-tag { min-height: 1.125rem; color: var(--surface); font-size: 0.5625rem; }
.suggestion-card__content span { color: var(--muted); font-size: var(--font-size-md); line-height: 1.35; }
.suggestion-card__action { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.suggestion-empty { margin: 0; padding: var(--space-3); color: var(--muted); }
.topbar__actions { display: flex; gap: 10px; align-items: center; }
/* Ponteiro na classe, não só no <button> (12/10/2026): <summary> e <label> com cara de botão ficavam com a seta. */
.primary-button, .ghost-button, .icon-button, .theme-button { cursor: pointer; min-height: var(--control-md); border-radius: var(--radius-md); padding: 0 var(--space-4); transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.theme-button { width: var(--control-md); padding: 0; display: inline-grid; place-items: center; color: var(--ink); }
/* Botões — direção A · Tonal (revisão de UI de 01/10/2026): principal na cor de conclusão,
   secundário em tom suave da cor de destaque sem borda, ícone em fundo neutro; sem sombra. */
.primary-button, .ghost-button, .icon-button { font-weight: 600; font-size: var(--font-size-md); }
.primary-button { color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: none; }
.ghost-button { color: var(--accent-text); background: color-mix(in srgb, var(--accent-2) 11%, var(--surface)); border: var(--border-width) solid transparent; }
.icon-button { background: var(--surface-muted); border: var(--border-width) solid transparent; }
.theme-button { background: var(--surface-muted); border: var(--border-width) solid var(--line); }
.account-menu-wrap { position: relative; }
.account-button { width: var(--control-md); height: var(--control-md); min-height: var(--control-md); display: inline-grid; place-items: center; place-content: center; padding: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface-muted); box-shadow: none; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.account-button[aria-expanded="true"] { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface-muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
/* Avatar: caixa quadrada unica que centraliza icone, iniciais ou foto do usuario. */
.account-avatar,
.account-menu__avatar { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: transparent; font-family: var(--font-sans); font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; }
.account-avatar { width: 1.625rem; height: 1.625rem; color: currentColor; font-size: var(--font-size-xs); }
/* Qualquer conteudo do avatar ocupa a mesma celula, entao fica sempre centralizado. */
.account-avatar > *,
.account-menu__avatar > * { grid-area: 1 / 1; place-self: center; max-width: 100%; }
.account-avatar svg,
.account-menu__avatar svg { display: block; margin: 0; fill: currentColor; transform: none; }
.account-avatar svg { width: var(--icon-md); height: var(--icon-md); }
/* Foto do usuario: preenche o circulo inteiro sem distorcer nem vazar. */
.account-avatar img,
.account-menu__avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; }
.account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: calc(var(--layer-modal) - 30); width: min(20rem, 88vw); overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-md); transform-origin: top right; animation: accountMenuIn var(--motion-fast) ease both; }
.account-menu[hidden] { display: none; }
.account-menu__header { display: grid; grid-template-columns: 3rem 1fr; gap: 14px; align-items: center; padding: 18px var(--space-4) 20px; border-bottom: var(--border-width) solid var(--line); background: var(--surface-muted); }
.account-menu__header strong,
.account-menu__header > div span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__header > div span { color: var(--muted); font-size: var(--font-size-sm); }
.account-menu__avatar { width: 3rem; height: var(--control-lg); border: var(--border-width) solid var(--line); color: var(--ink); background: var(--surface); font-size: var(--font-size-base); }
.account-menu__avatar svg { width: var(--icon-lg); height: var(--icon-lg); }
/* Os itens do menu podem ser <button> (ações) ou <a role="menuitem"> (links
   como Gestão e Ver planos). O seletor cobre os dois para que um link não
   fique sem recuo, ícone e hover só por ser navegação em vez de ação. */
.account-menu button,
.account-menu [role="menuitem"] { width: 100%; min-height: var(--control-md); display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); border-bottom: var(--border-width) solid var(--line); color: var(--ink); background: var(--surface); text-align: left; text-decoration: none; font: inherit; }
.account-menu button > [data-icon],
.account-menu [role="menuitem"] > [data-icon] { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); color: currentColor; }
.account-menu button > [data-icon] svg,
.account-menu [role="menuitem"] > [data-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.account-menu button:last-child,
.account-menu [role="menuitem"]:last-child { border-bottom: 0; }
.account-menu button:hover,
.account-menu [role="menuitem"]:hover { background: var(--surface-muted); }
.account-menu .account-menu__close { display: none; }
.account-menu__handle { display: none; }
.account-menu__value { margin-left: auto; padding-left: var(--space-2); color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; }
.account-menu .account-menu__logout { color: var(--danger); }
.mobile-bar__actions { display: flex; align-items: center; gap: var(--space-2); }
/* Iniciais no botão quadrado da barra do celular: sem o recorte redondo do avatar.
   Com largura automática, o border-radius 50% virava uma elipse justa ao texto e
   cortava as pontas do "MM" (02/10/2026); quem dá a forma é o próprio botão. */
.account-avatar.account-avatar--initials { width: auto; height: auto; overflow: visible; border-radius: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); letter-spacing: .02em; }
.platform-toast-stack { position: fixed; top: 18px; right: 18px; z-index: calc(var(--layer-modal) + 20); display: grid; gap: 10px; width: min(22.5rem, calc(100vw - 2rem)); pointer-events: none; }
.platform-toast { padding: 14px var(--space-4); border: var(--border-width) solid var(--line); border-left: 4px solid var(--success); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 600; animation: toastIn var(--motion-normal) ease both; }
.platform-toast--error { border-left-color: var(--danger); }
.platform-toast--warning { border-left-color: var(--warning); }
.platform-toast.is-leaving { animation: toastOut var(--motion-normal) ease both; }
.sidebar__mobile-actions .account-menu-wrap { flex: 1; min-width: 0; }
.sidebar__mobile-actions .account-button { width: 100%; justify-content: center; }
.sidebar__mobile-actions .account-menu { left: 0; right: auto; bottom: calc(100% + 10px); top: auto; width: min(16.25rem, 72vw); transform-origin: bottom left; }
.tool-card:hover .tool-card__button,
.suggestion-card:hover .suggestion-card__action { transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* Sem "levantar" no hover: a cor muda; ao pressionar, o botão desce 1 px. */
.primary-button:hover { background: color-mix(in srgb, var(--conclusion-bg) 85%, var(--surface)); }
.ghost-button:hover { background: color-mix(in srgb, var(--accent-2) 18%, var(--surface)); }
.icon-button:hover { background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
.theme-button:hover { border-color: var(--accent-2); background: var(--surface); color: var(--ink); }
:is(.primary-button, .ghost-button, .icon-button):active { transform: translateY(1px); }
:is(.primary-button, .ghost-button, .icon-button):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: var(--opacity-disabled); transform: none; }
.primary-button:is(:disabled, [aria-disabled="true"]):hover { background: var(--conclusion-bg); }
.ghost-button:is(:disabled, [aria-disabled="true"]):hover { background: color-mix(in srgb, var(--accent-2) 11%, var(--surface)); }
/* Discreto (direção A): só texto em --muted, para ações de baixa ênfase ("Voltar", "Ver todas", "Desfazer"). */
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius-md); color: var(--muted); background: transparent; font-size: var(--font-size-md); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.text-button:hover { color: var(--ink); background: var(--surface-muted); }
.text-button:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: var(--opacity-disabled); }

/* LINKS DE NAVEGAÇÃO (17/10/2026, A1 + B2 da revisão de UI). Botão faz uma ação; link leva
   a outro lugar e se reconhece parado (o celular não tem hover) pelo ícone na cor de destaque.
   .nav-link: atalho para outra área ("Conversas do WhatsApp"), ícone do destino + texto 600,
   os dois em --accent-text (a cor do texto do ghost-button).
   .record-link: código de um registro (ORC, PV, SV...), ícone do tipo + cor de destaque; um
   <template data-record-peek> logo depois dele vira a prévia flutuante (record-peek.js). */
.nav-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--accent-text); font-size: var(--font-size-md); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.nav-link [data-icon] { display: inline-grid; flex: 0 0 var(--icon-md); width: var(--icon-md); height: var(--icon-md); color: inherit; }
.nav-link [data-icon] svg { width: 100%; height: 100%; }
.nav-link:hover { color: var(--accent-text); background: var(--surface-muted); }
/* Compacto: dentro de cards, indicadores e avisos (36 px, texto sm, ícone de 16 px). Sem
   ícone de destino próprio, o atalho usa a corrente (data-icon="link-line"). */
.nav-link--sm { min-height: var(--control-sm); padding-inline: var(--space-2); font-size: var(--font-size-sm); }
.nav-link--sm [data-icon] { flex-basis: var(--icon-sm); width: var(--icon-sm); height: var(--icon-sm); }
.record-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-height: 2rem; margin-inline: -6px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--accent-2); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.record-link [data-icon] { display: inline-grid; flex: 0 0 var(--icon-sm); width: var(--icon-sm); height: var(--icon-sm); }
.record-link [data-icon] svg { width: 100%; height: 100%; }
.record-link:hover { color: color-mix(in srgb, var(--accent-2) 75%, var(--ink)); background: color-mix(in srgb, var(--accent-2) 9%, transparent); }
/* Em tabela, só o código em destaque (sem ícone, pedido do Mike em 17/10/2026) e sem quebrar no meio. */
table .record-link { white-space: nowrap; overflow-wrap: normal; }
table .record-link [data-icon] { display: none; }
/* Prévia: uma camada só, presa à tela (position: fixed), para não ser cortada pelo corpo
   rolável das modais. Não recebe o ponteiro; quem clica é sempre o link. */
.record-peek-layer { position: fixed; z-index: calc(var(--layer-modal) + 5); width: min(17rem, calc(100vw - 2 * var(--space-4))); display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-md); font-size: var(--font-size-sm); line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease; }
.record-peek-layer[data-open] { opacity: 1; transform: none; }
.record-peek-layer[data-side="top"] { transform: translateY(4px); }
.record-peek-layer[data-side="top"][data-open] { transform: none; }
.record-peek-layer header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.record-peek-layer header strong { font-size: var(--font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.record-peek-layer > p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.record-peek-layer dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.record-peek-layer dt { color: var(--muted); }
.record-peek-layer dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.record-peek-layer small { color: var(--muted); font-size: var(--font-size-xs); }
@media (prefers-reduced-motion: reduce) { .record-peek-layer { transition: none; } }
/* Ações do topo discretas: tema e ícones transparentes, opinião só em texto, conta redonda. */
.topbar :is(.theme-button, .icon-button) { color: var(--muted); background: transparent; border-color: transparent; }
.topbar :is(.theme-button, .icon-button):hover { color: var(--ink); background: var(--surface-muted); border-color: transparent; }
.topbar .ghost-button.icon-text-button { color: var(--ink); background: transparent; }
.topbar .ghost-button.icon-text-button:hover { background: var(--surface-muted); }
.topbar .account-button { border-radius: var(--radius-pill); }
.icon-text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.icon-text-button [data-icon] { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); }
.icon-text-button svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.icon-button { width: var(--control-md); padding: 0; display: inline-grid; place-items: center; }
.icon-button svg,
.theme-button svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; }
.icon-button svg path,
.theme-button svg path { fill: currentColor; }
.sidebar__toggle svg,
[data-mobile-menu] svg { transition: transform var(--motion-fast) ease; }
.sidebar__toggle.is-collapsed svg { transform: rotate(180deg); }
.content { width: min(var(--content-max), 100%); margin: 0 auto; padding: 30px clamp(18px, 3vw, 42px) var(--space-8); }
.page-header { margin-bottom: var(--space-5); }
.page-header h1 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-3xl), 3.4vw, var(--font-size-display)); letter-spacing: 0; }
/* Cabeçalho das telas de produto (OA, Simulador, Eu no Controle): título 2xl/600, sem
   título de exibição; o eyebrow é rótulo pequeno em caixa alta. */
.page-header.business-header h1 { font-size: var(--font-size-2xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.page-header.business-header p { font-size: var(--font-size-md); }
.page-header .eyebrow { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.page-header h1 .home-title-full,
.page-header h1 .home-title-mobile { font-family: var(--font-sans); font-weight: 600; }
/* Frase da home menor (08/10/2026, pedido do Mike): no tamanho de exibição ela ocupava quatro
   linhas de 50 px ao lado da prévia. Fica entre 24 e 32 px, e 20 px no celular. */
.page-header .home-header__copy > h1 { font-size: clamp(var(--font-size-2xl), 2.2vw, var(--font-size-3xl)); line-height: 1.15; }
.page-header p { max-width: 47.5rem; margin: 0; color: var(--muted); font-size: var(--font-size-base); line-height: 1.55; }
.page-header .form-tip { margin-top: var(--space-3); font-size: var(--font-size-sm); line-height: 1.45; }
/* Home de calculadoras: grupos empilhados e cards responsivos por breakpoint. */
.tool-groups { display: grid; gap: 30px; max-width: 100%; }
.tool-section h2 { margin: 0 0 14px; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); text-transform: uppercase; color: var(--muted); }
.tool-section__header { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; margin-bottom: 14px; }
.tool-section__header h2 { margin: 0; }
.tool-scroll-controls { display: flex; gap: var(--space-2); align-items: center; }
.tool-scroll-controls .icon-button { min-height: var(--control-sm); width: var(--control-sm); padding: 0; font-family: var(--font-sans); font-weight: 600; }
.tool-grid { display: flex; flex-wrap: wrap; gap: 18px; max-width: 100%; overflow: visible; padding: 2px 2px 14px; scroll-snap-type: none; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: auto; user-select: none; }
.tool-grid::-webkit-scrollbar { display: none; }
.tool-grid .tool-card { user-select: none; }
.tool-card { flex: 1 1 calc((100% - 3.375rem) / 4); max-width: calc((100% - 3.375rem) / 4); min-height: 11rem; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; align-items: start; padding: 20px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; text-align: left; scroll-snap-align: start; }
.tool-card__icon,
.tool-card__forward,
.tool-card__desc-mobile,
.home-intro-mobile,
.home-title-mobile { display: none; }
/* Acoes da apresentacao da home. Ficam dentro do page-header, abaixo da
   frase, e usam os mesmos botoes do resto da plataforma. */
/* Primeira tela da home (06/10/2026): a frase à esquerda e, para quem ainda não assina, a Visão geral de
   Orçamentos reduzida à direita, com dados de exemplo. Só tokens: vale nos cinco temas e nos 320 px. */
.home-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.home-header__copy { min-width: 0; }
.home-preview { min-width: 0; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--font-size-sm); line-height: 1.35; }
.home-preview__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--line); background: var(--surface-muted); }
.home-preview__bar span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--line); }
.home-preview__bar em { margin-left: auto; color: var(--muted); font-style: normal; font-size: var(--font-size-xs); }
.home-preview__tabs { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4) 0; overflow: hidden; border-bottom: var(--border-width) solid var(--line); color: var(--muted); white-space: nowrap; }
.home-preview__tabs span { padding-bottom: var(--space-2); }
.home-preview__tabs span[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-2); font-weight: 600; }
.home-preview__body { padding: var(--space-2) var(--space-4) var(--space-3); }
.home-preview__heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: var(--space-3) 0 var(--space-1); }
.home-preview__heading strong { font-family: var(--font-sans); font-weight: 600; }
.home-preview__heading small { color: var(--muted); font-size: var(--font-size-xs); }
.home-preview__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.home-preview__rows > div, .home-preview__rows > li { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-2) 0; border-top: var(--border-width) solid var(--line); }
.home-preview__rows dt, .home-preview__rows li > span:not(.home-preview__dot) { flex: 1 1 auto; min-width: 0; }
.home-preview__rows small { display: block; color: var(--muted); font-size: var(--font-size-xs); }
.home-preview__rows dd, .home-preview__rows li > em { margin: 0; flex: 0 0 auto; color: var(--ink); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-preview__dot { flex: 0 0 auto; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--accent-2); }
.home-preview__dot[data-tone="success"] { background: var(--success); }
.home-preview__dot[data-tone="warning"] { background: var(--warning); }
.home-preview__dot[data-tone="danger"] { background: var(--danger); }
/* Duas colunas só quando sobra espaço ao lado do menu lateral; antes disso a prévia desce para baixo do texto. */
@media (min-width: 75rem) {
    .home-header { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
/* Convite de ativacao do WhatsApp, para quem ainda nao ligou o numero. */
.home-activation { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.home-activation p { margin: 0; }
.home-intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.tool-card__icon svg,
.tool-card__forward svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.tool-card h3 { margin: 0; padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--line); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-xl);}
.tool-card p { margin: 0; padding-bottom: 14px; border-bottom: var(--border-width) solid var(--line); color: var(--muted); line-height: 1.45; }
.tool-card__button { justify-self: start; display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 14px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.tool-card.is-locked { opacity: 0.88; }

/* Layout padrao das calculadoras: formulario de um lado e resumo do outro em desktop. */
.calculator-layout { display: grid; grid-template-columns: minmax(35rem, 1.25fr) minmax(22.5rem, .75fr); gap: var(--space-5); align-items: start; }
.calculator-layout--wide { grid-template-columns: minmax(27.5rem, .85fr) minmax(38.75rem, 1.15fr); }
/* 60% para o formulario e 40% para o resumo. */
.calculator-layout--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.calculator-layout--comparison { grid-template-columns: minmax(31.25rem, 1fr) minmax(31.25rem, 1fr); max-width: none; margin-inline: 0; }
.calculator-layout > *,
.panel,
.panel__body,
.calculator-form,
.form-grid,
.form-grid > label,
.form-subsection,
.dynamic-section,
.dynamic-list,
.dynamic-row,
.summary-card,
.result-list { min-width: 0; }
.panel { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; }
.panel__body { padding: var(--space-5); }
.calculator-form { display: grid; gap: 20px; }
[data-simple-tax] .form-grid > label { align-content: start; }
[data-simple-tax] [data-tax-summary-explanation] { margin: 0 var(--space-4) var(--space-3); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.45; }
[data-simple-tax] [data-tax-breakdown] { padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
[data-simple-tax] [data-tax-breakdown] summary { cursor: pointer; color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
[data-simple-tax] [data-tax-breakdown] dl { display: grid; gap: 6px; margin: 10px 0 0; }
[data-simple-tax] [data-tax-breakdown] dl div { display: flex; justify-content: space-between; gap: var(--space-3); }
[data-simple-tax] [data-tax-breakdown] dt { color: var(--muted); }
[data-simple-tax] [data-tax-breakdown] dd { margin: 0; text-align: right; }
[data-simple-tax] [data-tax-breakdown] p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Campo logo abaixo do rotulo: com o alinhamento padrao (stretch) a sobra de altura de
   uma coluna vizinha mais alta (descricao, rotulo em duas linhas) era repartida entre
   as faixas do label, e o campo descia e crescia — "Outros beneficios" do comparador
   CLT x PJ ficava mais alto e fora de linha com o select ao lado (09/10/2026). */
.form-grid:not(.form-grid--aligned):not(.form-grid--field-aligned) > label { align-content: start; }
.form-subsection { display: grid; gap: 14px; padding-top: var(--space-1); margin-top: var(--space-4);}
.form-subsection > strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
label { display: grid; gap: var(--space-2); color: var(--ink); font-family: var(--font-sans); font-weight: 600; }
.field-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.field-description { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
input, select, textarea { width: 100%; min-height: var(--control-lg); padding: 0 var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); outline: none; }
textarea { min-height: 7.875rem; padding-block: var(--space-3); resize: vertical; line-height: 1.45; }
/* O Chrome da a data/hora uma largura minima propria (~ 190 px no datetime-local) que
   ignora a coluna: em 768-1024 px "Inicio/Fim da vigencia" dos Reajustes passavam da
   grade de tres colunas (09/10/2026). Sem o piso o campo acompanha a coluna. */
input:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { min-width: 0; }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: var(--opacity-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
/* Campos (revisão de UI de 01/10/2026): 44 px nos formulários, hover que escurece a borda,
   foco com anel e erro pelo aria-invalid que o validator.js já aplica. */
:is(.business-form, .oa-field, .calculator-form, .oa-filters) :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select) { min-height: var(--control-md); }
:is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):hover:not(:focus, :disabled) { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); }
:is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus { border-color: var(--accent-2); box-shadow: var(--ring); outline: none; }
:is(.search-box, .money-field, .suffix-field) input:focus { box-shadow: none; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: var(--ring-danger); }

/* Seleção compartilhada (select-dropdown.js): o <select> nativo fica invisível dentro
   de .oa-lookup e o campo [data-registry-select] + .oa-lookup-list fazem a interface.
   Tokens do tema em tudo; a lista sobe para a top layer via popover. */
.oa-lookup { position: relative; min-width: 0; }
/* O <select> nativo aparecia cru no primeiro desenho e trocava de forma quando
   select-dropdown.js o convertia — um piscar visível ao abrir um registro em
   máquina ou rede mais lenta. Enquanto o guarda inicial do tema está no <html>
   (ele sai depois do DOMContentLoaded, e o conversor roda antes disso), o campo
   guarda o espaço sem se mostrar. Sem JavaScript a classe nunca é aplicada e os
   selects seguem nativos e visíveis; os opt-out do conversor ficam de fora. */
html.is-theme-bootstrapping select:not([data-select-enhanced]):not([multiple]):not([data-native-select]):not([data-customer-lookup]):not([data-catalog-lookup]):not([size]) { visibility: hidden; }
select[data-select-enhanced] { position: absolute; inset: 0; width: 100%; height: var(--control-lg); min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
[data-registry-select] { cursor: pointer; padding-right: calc(var(--icon-md) + var(--space-4)); text-overflow: ellipsis; }
[data-registry-select].is-placeholder { color: var(--muted); }
[data-registry-select]:disabled { cursor: not-allowed; }
.oa-lookup > [data-registry-icon] { position: absolute; right: var(--space-2); top: calc(var(--control-lg) / 2); transform: translateY(-50%); pointer-events: none; color: var(--muted); width: var(--icon-md); height: var(--icon-md); }
.oa-lookup:has([data-registry-select]:disabled) > [data-registry-icon] { opacity: var(--opacity-muted); }
.oa-lookup-list { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(var(--control-md) * 5); overflow: auto; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); z-index: var(--layer-dropdown); box-shadow: var(--shadow-md); overscroll-behavior: contain; }
.oa-lookup-list[popover] { position: fixed; inset: auto; margin: 0; padding: 0; box-sizing: border-box; color: var(--ink); scroll-behavior: auto; }
.oa-lookup-list [role="option"] { display: block; padding: var(--space-3); height: var(--control-md); box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; font-size: var(--font-size-sm); font-weight: 400; transition: background-color 120ms ease, color 120ms ease; }
.oa-lookup-group { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04rem; text-transform: uppercase; }
/* Passar o mouse realça como a seta do teclado; a opção escolhida ganha o tom de acento por cima. */
.oa-lookup-list [aria-selected="true"] { background: var(--surface-muted); color: var(--accent-2); }
.oa-lookup-list [role="option"]:hover { color: var(--ink); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.oa-lookup-list [aria-selected="true"]:hover { color: var(--accent-2); }
.oa-lookup-list .ghost-button:hover { background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.oa-lookup-status { color: var(--muted); font-size: var(--font-size-sm); font-weight: 400; }
.oa-lookup-status[role="alert"]:not([hidden]) { display: block; margin-top: var(--space-1); color: var(--danger); }
.form-grid--aligned > label > .oa-lookup { align-self: stretch; }
.form-grid--aligned > label > .oa-lookup > [data-registry-select] { height: 100%; }
.form-grid--field-aligned > label > .oa-lookup { align-self: start; }
.calculated-field { display: flex; align-items: center; width: 100%; min-height: var(--control-lg); padding: 0 var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--accent-2); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; }
.calculated-field.is-negative { color: var(--danger); }
.money-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-width: 0; min-height: var(--control-lg); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.money-field span { padding: 0 var(--space-3); color: var(--muted); border-right: var(--border-width) solid var(--line); }
.money-field input { min-width: 0; border: 0; border-radius: 0; }
.money-field:focus-within { border-color: var(--accent-2); box-shadow: var(--ring); }
.suffix-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; min-height: var(--control-lg); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.suffix-field input { min-width: 0; border: 0; border-radius: 0; }
.suffix-field span { padding: 0 var(--space-3); color: var(--muted); border-left: var(--border-width) solid var(--line); }
.suffix-field input:placeholder-shown + span { display: none; }
.suffix-field:focus-within { border-color: var(--accent-2); box-shadow: var(--ring); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-1); }
.form-actions--center { justify-content: center; }
.form-actions--split { justify-content: space-between; }
.form-actions > button { min-width: 0; }
.form-hint { color: var(--muted); font-size: var(--font-size-md); line-height: 1.4; }
.form-hint[data-error-for],
.form-hint[data-validation-summary] { color: var(--danger); }
.estimate-note { margin: var(--space-2) 0 0; padding: 10px var(--space-3); border: var(--border-width) solid color-mix(in srgb, var(--accent-2) 32%, var(--line)); border-radius: var(--radius-md); color: var(--muted); background: color-mix(in srgb, var(--accent-2) 7%, var(--surface)); font-size: var(--font-size-sm); line-height: 1.45; }
.dynamic-section { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
.dynamic-list { display: grid; gap: 10px; }
.dynamic-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.dynamic-row label { gap: 6px; font-size: var(--font-size-md); }
.dynamic-row .money-field { min-height: var(--control-md); }
.dynamic-row input { min-height: var(--control-md); }
.dynamic-row button { min-width: 6.5rem; min-height: var(--control-md); }
.summary-card { padding: var(--space-5); }
.summary-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.summary-card h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; }
.result-list { display: grid; gap: 10px; }
.result-row { display: grid; grid-template-columns: minmax(6.875rem, auto) 1fr auto; gap: var(--space-3); align-items: center; min-height: 2.625rem; padding: 0 10px; border: var(--border-width) solid var(--line); border-left: 4px solid var(--row-accent, var(--line)); border-radius: var(--radius-md); background: var(--row-bg, var(--surface)); }
.result-row strong { min-width: 0; font-family: var(--font-sans); font-weight: 600; overflow-wrap: anywhere; }
.result-row strong:last-child,
.chart-metric strong,
.chart-legend__item span:last-child { overflow-wrap: anywhere; }
.result-row strong:last-child { text-align: right; white-space: nowrap; overflow-wrap: normal; }
.result-row.is-total { --row-bg: var(--conclusion-bg); --row-accent: var(--conclusion-bg); min-height: 3.875rem; font-size: var(--font-size-lg); color: var(--conclusion-ink); border-color: var(--conclusion-bg); }
/* Mesmo peso do total, sem preenchimento: contorno e texto na cor do tema. */
.result-row.is-outlined { --row-bg: transparent; --row-accent: var(--ink); min-height: 2.8rem; font-size: var(--font-size-base); color: var(--ink); border-color: var(--ink); }
.result-row.is-outlined span:nth-child(2) { border-bottom-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.result-row.is-danger { --row-bg: color-mix(in srgb, var(--danger) 12%, var(--surface)); --row-accent: var(--danger); color: var(--danger); }
.result-row.is-success { --row-bg: color-mix(in srgb, var(--success) 12%, var(--surface)); --row-accent: var(--success); color: var(--success); }
.result-row.is-benefit { --row-bg: color-mix(in srgb, var(--benefit) 12%, var(--surface)); --row-accent: var(--benefit); color: var(--benefit); }
.result-row.is-contribution { --row-bg: color-mix(in srgb, var(--contribution) 12%, var(--surface)); --row-accent: var(--contribution); color: var(--contribution); }
.result-row.is-total span:nth-child(2) { border-bottom-color: color-mix(in srgb, var(--conclusion-ink) 38%, transparent); }
.result-row span:nth-child(2) { border-bottom: var(--border-width) dotted var(--line); }

/* Linha de apoio logo abaixo de um result-row, explicando como o valor saiu. */
.result-detail { margin: calc(var(--space-1) * -1) 0 0; padding: 0 var(--space-3); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.result-detail[hidden] { display: none; }
.comparison-summary { width: 100%; max-width: none; justify-self: stretch; padding: 20px; }
.comparison-groups { display: grid; gap: 14px; }
/* Comparador CLT/PJ: o bloco Empresa x PJ vem depois dos grupos. */
.comparison-summary > .comparison-groups + .summary-card__header { margin-top: var(--space-5); }
/* Resumo com grupos (Comparador, Rescisao, Custo do Funcionario): lista
   hierarquica. Um cartao por grupo; subgrupos sao linhas separadas por fio;
   a seta fica a esquerda (direita = fechado, baixo = aberto); o cracha escuro
   so no total do grupo. O conteudo aberto ganha um fio de destaque. */
.comparison-group { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.comparison-group summary { list-style: none; cursor: pointer; }
.comparison-group summary::-webkit-details-marker { display: none; }
.comparison-group__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-2) var(--space-3); align-items: center; padding: 14px; }
.comparison-toggle { order: -1; display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); color: var(--muted); transform: rotate(-90deg); transition: transform var(--motion-fast) ease, color var(--motion-fast) ease; }
.comparison-toggle svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.comparison-group summary:hover > .comparison-toggle { color: var(--ink); }
.comparison-group[open] > .comparison-group__header { border-bottom: var(--border-width) solid var(--line); }
.comparison-group[open] > .comparison-group__header > .comparison-toggle,
.comparison-subgroup[open] > summary > .comparison-toggle { transform: none; color: var(--group-accent, var(--ink)); }
/* Tom do grupo = o tom das linhas dele, como na definicao original
   (is-success, is-benefit, is-contribution, is-danger). Lista mista, como
   Encargos (salario neutro + encargos), fica com o tom que nao e neutro;
   o perigo vem por ultimo e prevalece. Sem tom: cinza no fio, tinta na seta. */
:is(.comparison-group, .comparison-subgroup):has(> .result-list .result-row.is-success) { --group-accent: var(--success); }
:is(.comparison-group, .comparison-subgroup):has(> .result-list .result-row.is-benefit) { --group-accent: var(--benefit); }
:is(.comparison-group, .comparison-subgroup):has(> .result-list .result-row.is-contribution) { --group-accent: var(--contribution); }
:is(.comparison-group, .comparison-subgroup):has(> .result-list .result-row.is-danger) { --group-accent: var(--danger); }
.comparison-group__header h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.comparison-group__header strong { padding: var(--space-2) 10px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.comparison-subgroup { --group-accent: initial; border-top: var(--border-width) solid var(--line); }
.comparison-group__header + .comparison-subgroup { border-top: 0; }
.comparison-subgroup summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) 10px; padding: 11px 14px; }
.comparison-subgroup summary:hover { background: var(--surface-muted); }
.comparison-subgroup summary strong { color: var(--ink); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.comparison-subgroup h4 { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 500; font-size: var(--font-size-md); }
.comparison-subgroup[open] > summary h4 { font-weight: 700; }
/* Etiqueta neutra: quantos itens o grupo fechado guarda e o "nao se aplica". */
.comparison-chip { padding: 1px var(--space-2); border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 500; font-size: var(--font-size-xs); white-space: nowrap; }
details[open] > summary > .comparison-chip { display: none; }
.comparison-group > .result-list,
.comparison-subgroup > .result-list { gap: 2px; margin: var(--space-2) 14px var(--space-3) calc(14px + (var(--icon-md) / 2) - 1px); padding-left: var(--space-3); border-left: 2px solid var(--group-accent, var(--line)); border-radius: 0; }
/* Linhas sem caixa: a cor do tom fica so no valor; zerada fica apagada. */
.comparison-group .result-row { --row-bg: transparent; min-height: 2.25rem; grid-template-columns: minmax(0, auto) 1fr auto; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--font-size-md); }
.comparison-group .result-row > strong:first-child { font-weight: 500; }
.comparison-group .result-row.is-danger > strong:last-child { color: var(--danger); }
.comparison-group .result-row.is-success > strong:last-child { color: var(--success); }
.comparison-group .result-row.is-benefit > strong:last-child { color: var(--benefit); }
.comparison-group .result-row.is-contribution > strong:last-child { color: var(--contribution); }
.comparison-group .result-row.is-zero,
.comparison-group .result-row.is-zero > strong:last-child { color: var(--muted); }
.comparison-group .result-row .comparison-chip { margin-left: var(--space-2); }
/* Linha com memoria de calculo: icone de informacao no fim, para nao se
   confundir com o cabecalho que expande o grupo. */
.comparison-group .result-row.calculation-details__toggle { grid-template-columns: minmax(0, auto) 1fr auto auto; }
.comparison-group .result-row.calculation-details__toggle::after { content: ""; width: 1rem; height: 1rem; background-color: var(--muted); -webkit-mask: var(--icon-info-circle) center / contain no-repeat; mask: var(--icon-info-circle) center / contain no-repeat; }
.comparison-group .calculation-details__item:has(> .calculation-details__detail:empty) > .result-row::after { visibility: hidden; }
.comparison-group .calculation-details__toggle:hover { background: var(--surface-muted); filter: none; }
.comparison-group .calculation-details__toggle[aria-expanded="true"] { border-radius: var(--radius-sm); box-shadow: none; background: var(--surface-muted); }
.comparison-group .calculation-details__toggle[aria-expanded="true"]::after { background-color: var(--row-accent, var(--ink)); }
.comparison-group .calculation-details__detail { margin: 2px 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); }
:root { --icon-info-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.1'/%3E%3C/svg%3E"); }
/* Abrir e fechar com altura animada onde o navegador ja anima details. */
.comparison-groups { interpolate-size: allow-keywords; }
.comparison-group::details-content,
.comparison-subgroup::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-normal) ease, content-visibility var(--motion-normal) allow-discrete; }
.comparison-group[open]::details-content,
.comparison-subgroup[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .comparison-group::details-content,
    .comparison-subgroup::details-content { transition: none; }
}
/* Total fora dos grupos recolhiveis: fica sempre visivel no rodape do resumo. */
.result-list--footer { margin-top: 14px; }
.comparison-chart-panel { margin-top: var(--space-5); }
.comparison-chart-grid { display: grid; gap: 18px; }
.comparison-donut { grid-template-columns: minmax(11.875rem, 15rem) minmax(0, 1fr); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.comparison-notes { margin-top: var(--space-5); }
.disclosure-list { display: grid; gap: 10px; }
.disclosure-item { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); overflow: hidden; }
.disclosure-item summary { cursor: pointer; padding: 14px var(--space-4); font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.disclosure-item p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--muted); line-height: 1.55; }

.break-even-page { display: grid; gap: 28px; }
.break-even-page .page-header { margin-bottom: 0; }
.break-even-page .calculator-layout { margin-bottom: var(--space-2); }
.break-even-page .calculator-form { gap: 26px; }
.break-even-page .form-subsection { gap: var(--space-4); margin-top: 0; padding-top: 0; }
.break-even-page .form-subsection + .form-subsection { padding-top: 22px; border-top: var(--border-width) solid var(--line); }
.break-even-page input,
.break-even-page select,
.break-even-page .money-field { height: var(--control-lg); min-height: var(--control-lg); }
.break-even-page .money-field input { height: 100%; min-height: 0; }
.break-even-page .estimate-note { margin-top: 2px; }
.break-even-page .calculator-form > .form-actions { margin-top: 2px; }

.history-panel { margin-top: var(--space-5); }
.history-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.history-list { display: grid; gap: 10px; margin-top: 14px; }
.history-item { display: grid; grid-template-columns: minmax(13.75rem, 1fr) auto auto auto; gap: var(--space-2); align-items: center; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.history-item small { color: var(--muted); }
.history-item button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.empty-state { color: var(--muted); padding: 14px; border: var(--border-width) dashed var(--line); border-radius: var(--radius-md); }

.chart-panel { margin-top: var(--space-5); }
.chart-stack { display: grid; gap: 22px; }
.chart-layout { display: grid; grid-template-columns: minmax(13.75rem, 18.75rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.donut-chart { position: relative; width: min(17.5rem, 100%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--chart-gradient, conic-gradient(var(--line) 0% 100%)); box-shadow: inset 0 0 0 1px var(--line); }
/* Realce no hover do donut (charts.js, bindDonutTooltip): --donut-fade clareia
   as fatias fora do foco. Registrada para a transicao animar o gradiente. */
@property --donut-fade { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.chart-layout { --donut-fade: 0%; transition: --donut-fade var(--motion-normal) ease; }
.chart-layout.is-donut-focus { --donut-fade: 55%; }
.donut-chart { transition: transform var(--motion-normal) ease; }
.chart-layout.is-donut-focus .donut-chart { transform: scale(1.02); }
.chart-legend__item { transition: opacity var(--motion-normal) ease, border-color var(--motion-normal) ease; }
.chart-layout.is-donut-focus .chart-legend__item:not(.is-active) { opacity: 0.5; }
.chart-legend__item.is-active { border-color: var(--segment-color, var(--accent-2)); }
.donut-chart .line-tooltip:not([hidden]) { animation: donut-tooltip-in var(--motion-fast) ease-out; }
@keyframes donut-tooltip-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .chart-layout, .donut-chart, .chart-legend__item { transition: none; }
    .chart-layout.is-donut-focus .donut-chart { transform: none; }
    .donut-chart .line-tooltip:not([hidden]) { animation: none; }
}
.donut-chart__center { width: 54%; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: var(--space-1); border-radius: 50%; background: var(--surface); text-align: center; box-shadow: 0 0 0 1px var(--line); }
.donut-chart__center span { color: var(--muted); font-size: var(--font-size-sm); }
.donut-chart__center strong { max-width: 100%; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: clamp(var(--font-size-md), 1.7vw, var(--font-size-xl)); overflow-wrap: anywhere; }
.chart-details { display: grid; gap: var(--space-4); min-width: 0; }
.chart-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.chart-legend__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); align-items: center; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.chart-swatch { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.chart-legend__item strong { font-family: var(--font-sans); font-weight: 600; }
.chart-legend__item span:last-child { grid-column: 2; color: var(--muted); font-size: var(--font-size-md); }
.chart-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 10px; }
.chart-metric { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius-md); background: var(--surface-muted); }
.chart-metric span { color: var(--muted); font-size: var(--font-size-sm); }
.chart-metric strong { font-family: var(--font-sans); font-weight: 600; }
.chart-table-wrap { margin-top: calc(18px + var(--space-5)); overflow-x: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.chart-table { width: 100%; min-width: 32.5rem; border-collapse: collapse; }
.chart-table th, .chart-table td { padding: var(--space-3) 14px; border-bottom: var(--border-width) solid var(--line); text-align: left; }
.chart-table th { color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); letter-spacing: 0; text-transform: none; }
.chart-table tr:last-child td { border-bottom: 0; }
.chart-table td:nth-child(2), .chart-table td:nth-child(3) { font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.line-chart { position: relative; display: grid; gap: var(--space-3); min-width: 0; }
.line-chart svg { width: 100%; min-height: 16.25rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
#fgtsLineChart svg { min-height: 20rem; }
.line-grid { stroke: var(--line); stroke-width: 1; }
.line-axis { fill: var(--muted); font: 12px var(--font-sans); }
.line-path { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-point { fill: var(--surface); stroke: var(--accent-2); stroke-width: 3; pointer-events: none; }
.line-hit { fill: transparent; stroke: transparent; cursor: crosshair; pointer-events: all; }
.line-hit:focus { outline: none; stroke: var(--accent-2); stroke-width: 2; }
.line-tooltip { position: absolute; z-index: 2; width: max-content; padding: var(--space-2) 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); line-height: 1.3; pointer-events: none; white-space: nowrap; }

/* ============================================================
   Precificacao de produtos/servicos
   ============================================================ */

/* Grid alinhado: rotulo, campo e descricao de cada coluna compartilham as
   mesmas tres faixas do grid pai, entao os campos ficam na mesma linha mesmo
   com textos de tamanhos diferentes. */
.form-grid--aligned > label { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-2); min-width: 0; }
.form-grid--aligned > label > .field-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.form-grid--aligned > label > .money-field,
.form-grid--aligned > label > input,
.form-grid--aligned > label > output,
.form-grid--aligned > label > select { align-self: stretch; height: 100%; }
.form-grid--aligned > label > .field-description { align-self: start; }
.form-grid--field-aligned > label { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-2); min-width: 0; }
.form-grid--field-aligned > label > .money-field,
.form-grid--field-aligned > label > .suffix-field,
.form-grid--field-aligned > label > input,
.form-grid--field-aligned > label > select { align-self: start; height: var(--control-lg); min-height: var(--control-lg); }
.form-grid--field-aligned > label > .field-description { align-self: start; }

/* Sem suporte a subgrid o layout volta ao empilhamento simples. */
@supports not (grid-template-rows: subgrid) {
    .form-grid--aligned > label { grid-row: auto; grid-template-rows: none; }
    .form-grid--field-aligned > label { grid-row: auto; grid-template-rows: none; }
}

/* Tooltip de campo: bolha revelada no hover/foco, sem depender de JS. */
.label-row { display: inline-flex; align-items: center; gap: 6px; }
.field-tip { position: relative; display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); border: var(--border-width) solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); line-height: 1; cursor: help; }
.field-tip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* display: none em vez de visibility: hidden. A bolha e mais larga que o campo
   e, mesmo invisivel, continuava no layout inflando o scrollWidth dos pais -
   o que gerava rolagem horizontal na pagina em telas intermediarias. */
.field-tip::after { content: attr(data-tip); display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: calc(var(--layer-sidebar) + 5); width: max-content; max-width: 15.625rem; padding: 9px 11px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; text-align: left; white-space: normal; transform: translateX(-50%); }
.field-tip:hover::after,
.field-tip:focus::after,
.field-tip:focus-visible::after { display: block; }

/* Dica da secao de dados do produto/venda. */
.form-tip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px var(--space-3); border: var(--border-width) solid color-mix(in srgb, var(--accent-2) 32%, var(--line)); border-radius: var(--radius-md); color: var(--muted); background: color-mix(in srgb, var(--accent-2) 7%, var(--surface)); font-size: var(--font-size-sm); line-height: 1.45; }
.form-tip__icon { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: var(--accent-2); }
.form-tip__icon svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }

/* Alteracao de custo: so aparece o campo quando o usuario marca a opcao. */
.cost-change { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.cost-change:has(#alterarCusto:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent); background: var(--surface); }
.cost-change__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.cost-change__head input[type="checkbox"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.cost-change__text { display: grid; gap: var(--space-1); min-width: 0; }
.cost-change__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.cost-change__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.cost-change__field { gap: var(--space-2); max-width: 20rem; font-size: var(--font-size-md); }
.cost-change__field[hidden] { display: none; }

/* Campo que o regime nao usa: continua visivel, mas sem competir por atencao. */
label.is-muted { opacity: 0.6; }

/* Checkbox a esquerda do rotulo do campo. */
.field-label--check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.payroll-check { width: var(--icon-sm); height: var(--icon-sm); min-height: var(--icon-sm); flex: 0 0 var(--icon-sm); margin: 0; padding: 0; accent-color: var(--accent-2); cursor: pointer; }

/* Plano de aportes variaveis (juros compostos). */
.contribution-plan { display: grid; gap: 14px; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.contribution-plan .summary-card__header { margin-bottom: 0; }
.contribution-plan .summary-card__header h2 { font-size: var(--font-size-base); }
.contribution-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8.25rem auto; background: var(--surface); }
.contribution-row.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.contribution-row input[readonly] { background: var(--surface-muted); cursor: default; }
.contribution-row__info { align-self: end; padding-bottom: var(--space-3); color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; }
.contribution-row.is-invalid .contribution-row__info { color: var(--danger); }
.form-hint[data-contribution-error] { color: var(--danger); }
.contribution-row__actions { align-self: end; display: flex; gap: 6px; padding-bottom: 6px; }
.contribution-row__actions .icon-button { width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; display: inline-grid; place-items: center; }
.contribution-row__actions .icon-button svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.contribution-row.is-editing .contribution-row__actions [data-edit-contribution] { color: var(--accent-2); border-color: var(--accent-2); }
.contribution-remaining { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }

/* Detalhe dos aportes no resumo: uma faixa por linha, valor alinhado a direita. */
.result-detail--list { display: grid; gap: 6px; margin-top: 6px; padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.result-detail--list > strong { color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.result-detail--list ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.result-detail--list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.result-detail--list li strong { color: var(--ink); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }

/* Opcao booleana em bloco destacado, reaproveitada por outras calculadoras. */
.payroll-discount { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); margin-top: var(--space-4);}
.payroll-discount:has(input[type="checkbox"]:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent); background: var(--surface); }
.payroll-discount__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.payroll-discount__head input[type="checkbox"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.payroll-discount__text { display: grid; gap: var(--space-1); min-width: 0; }
.payroll-discount__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.payroll-discount__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }

/* Abas compartilhadas: todas as opcoes continuam visiveis em telas estreitas. */
.business-workspace { min-width: 0; overflow: visible; }
.business-tabs-wrap { min-width: 0; overflow-x: auto; border-bottom: var(--border-width) solid var(--line); scrollbar-width: none; }
.business-tabs-wrap::-webkit-scrollbar { display: none; }
.business-tabs { display: flex; min-width: max-content; padding-inline: var(--space-3); }
.business-tabs :is(button, a) { position: relative; flex: 0 0 auto; min-height: 2.875rem; padding-inline: var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); background: transparent; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); white-space: nowrap; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.business-tabs :is(button, a)::after { content: ""; position: absolute; right: var(--space-3); bottom: 0; left: var(--space-3); height: calc(var(--border-width) * 2); border-radius: calc(var(--border-width) * 2); background: var(--accent-2); opacity: 0; transform: scaleX(.65); transition: opacity var(--motion-normal) ease, transform var(--motion-normal) ease; }
.business-tabs :is(button, a):hover { color: var(--ink); background: var(--surface-muted); }
/* Sub-navbar (revisão de UI de 01/10/2026): 46 px, uma linha, ativo em tinta com fio de 2 px na cor de destaque. */
.business-tabs :is([aria-selected="true"], [aria-current="page"]) { color: var(--ink); }
.business-tabs :is([aria-selected="true"], [aria-current="page"])::after { opacity: 1; transform: scaleX(1); }
.business-tabs :is(button, a):focus-visible { outline: 2px solid var(--accent-2); outline-offset: calc(2px * -1); }
.business-workspace__body { padding: var(--space-5); }
.business-workspace__body > [role="tabpanel"]:not([hidden]),
.business-tabs-wrap + [role="tabpanel"]:not([hidden]),
.calculator-form > [role="tabpanel"]:not([hidden]),
.business-result-view:not([hidden]) { animation: settingsPaneIn var(--motion-normal) ease; }

/* Objetivo: cartoes de radio com o campo do alvo embutido. */
.goal-options { display: grid; gap: var(--space-3); }
.goal-option { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.goal-option.is-active { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent); background: var(--surface); }
.goal-option__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.goal-option__head input[type="radio"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.goal-option__text { display: grid; gap: var(--space-1); min-width: 0; }
.goal-option__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.goal-option__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.goal-option__field { gap: var(--space-2); max-width: 20rem; font-size: var(--font-size-md); }
.goal-option:not(.is-active) .goal-option__field { opacity: 0.6; }

/* Resumo: destaque do preco sugerido e cartoes de margem/markup. */
.price-highlight { display: grid; gap: 6px; margin-bottom: 18px; padding: var(--space-4); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); }
.price-highlight span { font-size: var(--font-size-md); opacity: 0.85; }
.price-highlight strong { font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl)); line-height: 1.15; overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); margin-top: 18px; }
/* KPI único (revisão de UI de 01/10/2026): fundo neutro sem borda, rótulo 12 px, valor 22 px/600 tabular. */
.metric-card { display: grid; gap: 2px; align-content: start; padding: 14px; border: var(--border-width) solid transparent; border-radius: var(--radius-md); background: var(--surface-muted); justify-items: center; text-align: center; }
.metric-card span { color: var(--muted); font-size: var(--font-size-sm); }
.metric-card > span:first-child { font-size: var(--font-size-xs); }
.metric-card strong { font-family: var(--font-sans); font-weight: 600; font-size: 1.375rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.metric-card small { color: var(--muted); font-size: var(--font-size-xs); }

/* Tabela Atual x Simulacao. */
.scenario-panel { margin-top: var(--space-5); }
.chart-table-wrap--tight { margin-top: var(--space-4); }
.scenario-table td:nth-child(4) { white-space: nowrap; }
.scenario-variation { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-weight: 600; }
.scenario-variation.is-up { color: var(--success); }
.scenario-variation.is-down { color: var(--danger); }
.scenario-variation__icon { display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); }
.scenario-variation__icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }

.split-payment-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "form summary" "scenarios scenarios" "guidance guidance" "history history"; gap: var(--space-5); align-items: start; }
.split-payment-form-panel { grid-area: form; }
.split-payment-summary-panel { grid-area: summary; }
.split-payment-scenarios-panel { grid-area: scenarios; margin-top: 0; }
.split-guidance-panel { grid-area: guidance; margin-top: 0; }
.split-payment-history-panel { grid-area: history; margin-top: 0; }
.split-custom-fields { display: grid; gap: var(--space-3); }
.split-payment-summary-panel .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-payment-applied-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: var(--space-1); align-items: center; justify-items: stretch; text-align: left; }
.split-payment-applied-card span { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.split-payment-applied-card small { grid-column: 1; grid-row: 2; min-width: 0; align-self: start; }
.split-payment-applied-card strong { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: center; justify-self: end; text-align: right; overflow-wrap: anywhere; }
.split-toggle { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 400; line-height: 1.45; }
.split-toggle input { flex: 0 0 auto; width: 1.125rem; min-height: 1.125rem; margin-top: 2px; }
.split-guidance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); gap: var(--space-3); }
.split-guidance-card { display: grid; gap: 7px; padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.split-guidance-card strong { font-family: var(--font-sans); font-weight: 600; }
.split-guidance-card p { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.scenario-table td.is-danger { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "form summary" "table table" "alerts alerts" "history history"; gap: var(--space-5); align-items: start; }
.sales-conditions-form-panel { grid-area: form; }
.sales-conditions-summary-panel { grid-area: summary; }
.sales-conditions-table-panel { grid-area: table; margin-top: 0; }
.sales-conditions-alert-panel { grid-area: alerts; margin-top: 0; }
.sales-conditions-history-panel { grid-area: history; margin-top: 0; }
.sales-condition-list { display: grid; gap: 14px; }
.sales-condition-card { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.sales-condition-card h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.sales-condition-card .form-grid { gap: 14px; }
.sales-conditions-table { min-width: 57.5rem; }
.sales-conditions-table td:first-child strong { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-table tr.is-loss { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.sales-conditions-table tr.is-low-margin:not(.is-loss) { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.sales-conditions-table td.is-danger { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-table td.is-warning { color: var(--warning); font-family: var(--font-sans); font-weight: 600; }
.condition-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.condition-badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); line-height: 1; white-space: nowrap; }
.condition-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.condition-alert { display: grid; gap: 7px; padding: 14px; border: var(--border-width) solid var(--line); border-left-width: 0.25rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.condition-alert strong { font-family: var(--font-sans); font-weight: 600; }
.condition-alert p { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.condition-alert.is-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.condition-alert.is-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.condition-alert.is-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }

.is-calculation-feedback { animation: calculationFeedback var(--motion-slow) ease; }

@keyframes calculationFeedback {
    0% { transform: translateY(var(--space-2)); opacity: .86; box-shadow: 0 0 0 0 transparent; }
    50% { transform: translateY(0); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 14%, transparent); }
    100% { transform: translateY(0); opacity: 1; box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .primary-button, .ghost-button, .icon-button, .theme-button,
    .is-calculation-feedback { transition: none; animation: none; }
    .comparison-toggle { transition: none; }
    .business-tabs :is(button, a) { transition: none; }
    .business-tabs :is(button, a)::after { transition: none; }
    .business-workspace__body > [role="tabpanel"],
    .business-tabs-wrap + [role="tabpanel"],
    .calculator-form > [role="tabpanel"],
    .business-result-view,
    .search-suggestions,
    .nav-group[data-nav-opening]:not(.is-nav-collapsed) > .nav-item { animation: none; }
    .app-shell,
    .sidebar,
    .topbar,
    .mobile-bar,
    .nav-item,
    .tool-card,
    .tool-card__button,
    .panel,
    .summary-card,
    .search-box,
    .suggestion-card,
    .account-button,
    .account-menu,
    input,
    select,
    textarea { transition: none; }
    .app-shell, .sidebar, .sidebar__brand, .sidebar__mark,
    .sidebar__nav, .sidebar__footer, .nav-group { transition: none; }
}

.modal-backdrop { position: fixed; inset: 0; z-index: var(--layer-modal); display: grid; place-items: center; padding: 18px; background: var(--overlay); }
.modal-backdrop[hidden] { display: none; }
.auth-modal { position: relative; width: min(42.5rem, 100%); min-height: min(26.875rem, calc(100vh - 2.375rem)); max-height: min(92vh, 51.25rem); overflow: auto; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-backdrop[data-auth-active="register"] .auth-modal { width: min(57.5rem, calc(100vw - 2.25rem)); max-height: calc(100vh - 2.25rem); overflow: visible; }
.auth-modal__close { position: absolute; top: 16px; right: 16px; }
.auth-modal__header { display: flex; gap: var(--space-4); align-items: center; padding-right: 44px; margin-bottom: 20px; }
.auth-modal__logo { flex: 0 0 2.875rem; color: var(--ink); }
.auth-modal__header h2 { margin: 0 0 var(--space-1); font-family: var(--font-sans); font-weight: 700; }
.auth-modal__header p { margin: 0; color: var(--muted); }
.auth-page-brand__mark { width: 2.25rem; height: var(--control-sm); color: var(--ink); }
.auth-form { display: none; gap: var(--space-4); }
.auth-form.is-active { display: grid; animation: authFormIn var(--motion-normal) ease both; }
.auth-form .form-grid > label:not(.checkbox-field) { align-content: start; grid-template-rows: auto auto 1.25rem; }
.auth-form[data-auth-form="register"] { gap: var(--space-3); }
.auth-form[data-auth-form="register"] .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) 14px; }
.auth-form[data-auth-form="register"] .form-grid > label:not(.checkbox-field) { gap: 6px; grid-template-rows: auto auto 1.25rem; }
.auth-form[data-auth-form="register"] input { min-height: var(--control-md); }
.auth-form[data-auth-form="register"] .password-field button { width: var(--control-md); }
.auth-message { min-height: 1.375rem; margin: 0 0 10px; color: var(--danger); }
.auth-message.is-success { color: var(--success); }
.auth-message:not(:empty) { animation: validationMessageIn var(--motion-normal) ease both; }
.auth-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.auth-links button { padding: 0; color: var(--accent-2); background: transparent; }
.auth-code-field { gap: 10px; }
.auth-code-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); }
.auth-code-grid input { width: 100%; min-width: 0; height: 4.5rem; padding: 0; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1; }
.auth-reset-page { min-height: calc(100vh - var(--topbar-height)); display: grid; place-items: center; padding: var(--space-6) 18px; }
.auth-reset-panel { width: min(32.5rem, 100%); display: grid; gap: 18px; padding: 26px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-reset-panel__header { display: grid; gap: var(--space-2); }
.auth-reset-panel__header h1 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); line-height: 1.15; }
.auth-reset-panel__header p { margin: 0; color: var(--muted); line-height: 1.45; }

/* A verificação usa um documento isolado, sem HTML da plataforma no fundo.
   Reutiliza as classes de modal; ajustes locais não criam classes novas. */
html[data-navigation-document], body[data-navigation-document] { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-navigation-document] { background: var(--bg); }
body[data-navigation-document] { background: transparent; }
[data-navigation-overlay] { background: transparent; }
[data-navigation-overlay] > .auth-modal { width: min(35rem, 100%); min-height: 0; max-height: calc(100dvh - 36px); overscroll-behavior: contain; }
[data-navigation-challenge] { gap: var(--space-3); }
[data-navigation-challenge]:focus { outline: none; }
[data-navigation-challenge] .auth-reset-panel__header { text-align: center; }
[data-navigation-logo] { display: block; width: 3rem; height: 3rem; margin: 0 auto var(--space-2); flex: none; }
[data-navigation-challenge] [data-hold-button] { width: 6rem; height: 6rem; padding: var(--space-1); margin: var(--space-1) auto; color: var(--accent-2); background: transparent; border: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-navigation-challenge] [data-hold-button] svg { width: 100%; height: 100%; }
[data-deadline-line], [data-verification-message], [data-navigation-account-links] { text-align: center; }
[data-navigation-login] { color: var(--accent-2); }
[data-navigation-register] { color: var(--muted); }
[data-navigation-account-links] a:hover { text-decoration: underline; }
[data-navigation-challenge] [data-verification-continue] { text-align: center; }
[data-navigation-challenge] [data-refuse-verification] { text-align: center; }
.password-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.password-rule { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--danger); font-size: var(--font-size-sm); line-height: 1.25; }
.password-rule [data-rule-icon] { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); align-self: center; color: currentColor; }
.password-rule [data-rule-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.password-rule.is-met { color: var(--success); }
.password-field { display: grid; grid-template-columns: 1fr auto; align-items: center; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.password-field input { border: 0; border-radius: 0; }
.password-field button { align-self: stretch; width: var(--control-lg); padding: 0; display: grid; place-items: center; background: var(--surface-muted); border-left: var(--border-width) solid var(--line); color: var(--muted); }
.password-field button svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; transition: transform var(--motion-fast) ease; }
.password-field button:active svg { transform: scale(.9); }
.checkbox-field { grid-column: 1 / -1; display: grid; grid-template-columns: var(--icon-md) 1fr; gap: var(--space-2); align-items: center; padding: 9px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.3; }
.checkbox-field input { width: var(--icon-sm); min-height: var(--icon-sm); margin: 0; accent-color: var(--accent-2); }
.checkbox-field span:not(.field-error) { min-width: 0; }
.checkbox-field .field-error { grid-column: 1 / -1; }
.has-error input,
.has-error select,
.has-error textarea,
.has-error .password-field,
.has-error .money-field,
.has-error .suffix-field,
.has-error.checkbox-field { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }
.has-success input,
.has-success .password-field,
.has-success .suffix-field { border-color: var(--success); }
.is-validation-feedback input,
.is-validation-feedback select,
.is-validation-feedback textarea,
.is-validation-feedback .password-field,
.is-validation-feedback .suffix-field,
.is-validation-feedback.checkbox-field { animation: validationFieldPulse var(--motion-slow) ease both; }
.is-validation-feedback .field-error:not(:empty) { animation: validationMessageIn var(--motion-normal) ease both; }
.field-error { display: block; min-height: 1.125rem; color: var(--danger); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.field-error:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); margin-right: 6px; border-radius: 50%; color: var(--surface); background: var(--danger); font-size: var(--font-size-xs); font-family: var(--font-sans); font-weight: 600; }
/* Casca da Opinião (09/10/2026), como as modais do OA: só o corpo rola e o
   rodapé com Cancelar e Enviar fica sempre à vista. */
.feedback-modal { display: flex; flex-direction: column; width: min(38.75rem, 100%); min-height: 0; max-height: min(92vh, 51.25rem); padding: 0; overflow: hidden; }
.feedback-modal .auth-modal__header { flex: 0 0 auto; margin: 0; padding: var(--space-5) calc(var(--space-5) + var(--control-sm)) 0 var(--space-5); }
.feedback-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.feedback-form__body { display: grid; flex: 1 1 auto; gap: var(--space-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-5); }
.feedback-form__footer { flex: 0 0 auto; justify-content: flex-end; margin: 0; padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--line); }
.feedback-form .form-grid { gap: 14px; }
.feedback-form textarea { height: 11.625rem; min-height: 11.625rem; max-height: 11.625rem; resize: none; color: var(--ink); background: var(--surface); }
.feedback-backdrop.is-success .feedback-modal { display: none; }
.modal-backdrop.is-success > .auth-modal { display: none; }
.feedback-success-modal { width: min(32.5rem, 92vw); padding: 5rem 5rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; animation: modalEnter var(--motion-normal) ease both; }
.feedback-success-modal[hidden] { display: none; }
.feedback-success-icon { display: inline-grid; place-items: center; width: 4.875rem; height: 4.875rem; margin: 0 auto 18px; border: var(--border-width) solid var(--line); border-radius: 50%; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.feedback-success-icon svg { width: 3.25rem; height: 3.25rem; overflow: visible; }
.feedback-success-icon svg path { fill: transparent; stroke: currentColor; stroke-width: 72; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.feedback-success-modal.is-drawn .feedback-success-icon svg path { animation: checkedDraw 700ms ease forwards, checkedFill var(--motion-fast) ease 700ms forwards; }
.feedback-success-modal h2 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.feedback-success-modal p { margin: 0; color: var(--muted); line-height: 1.45; }
.feedback-note { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.feedback-message { min-height: 1.375rem; margin: 0; color: var(--muted); font-family: var(--font-sans); font-weight: 600; }
.feedback-message.is-error { color: var(--danger); }
.feedback-message.is-success { color: var(--success); animation: feedbackSuccess var(--motion-slow) ease both; }
.feedback-form.is-sent { animation: calculationFeedback var(--motion-slow) ease; }
.primary-button.is-loading { position: relative; color: transparent; pointer-events: none; }
.primary-button.is-loading::after { content: ""; position: absolute; inset: 0; width: 1.125rem; height: 1.125rem; margin: auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--conclusion-ink); animation: buttonSpin 650ms linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .primary-button.is-loading { color: var(--conclusion-ink); }
    .primary-button.is-loading::after { display: none; }
}
/* Configuracoes (01/10/2026). O modal e uma coluna flexivel com altura travada:
   cabecalho fixo e corpo que encolhe (min-height: 0), entao nenhum conteudo
   empurra o modal para fora da tela - quem rola e so .settings-content ou a
   lista de secoes. No celular (ver @media 47.5rem) ele ocupa a tela inteira. */
.settings-backdrop { padding: 20px; }
/* Desfoque leve da pagina por tras do modal. So o backdrop recebe o filtro: o
   modal fica nitido e, como o backdrop e fixed em inset 0, os elementos fixed
   de dentro (seletor de cor, listas de select) continuam com as mesmas
   coordenadas da tela. Sem suporte, fica o veu escuro de sempre. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .settings-backdrop,
    .settings-auth-backdrop,
    .unsaved-theme-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
.settings-modal { position: relative; display: flex; flex-direction: column; width: min(61.25rem, 96vw); height: min(88vh, 44rem); max-height: min(88vh, 44rem); overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.settings-modal__header { flex: 0 0 auto; min-height: 3.875rem; display: flex; align-items: center; gap: var(--space-3); padding: 10px 18px 10px var(--space-5); border-bottom: var(--border-width) solid var(--line); background: var(--surface-muted); }
.settings-modal:not(.is-mobile-detail) .settings-back,
.settings-back { display: none; }
.settings-close { flex: 0 0 auto; margin-left: auto; }
.settings-modal__heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.settings-modal__section { display: none; }
.settings-identity,
.settings-tabs__identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.settings-identity { flex: 1 1 auto; }
.settings-identity__avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--border-width) solid color-mix(in srgb, var(--accent-2) 30%, var(--line)); border-radius: 50%; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); line-height: 1; }
.settings-identity__text { display: grid; gap: 1px; min-width: 0; }
.settings-identity__text strong { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-sans); font-weight: 600; }
.settings-identity__text strong > span:first-child,
.settings-identity__text > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-identity__text > span { color: var(--muted); font-size: var(--font-size-sm); }
.settings-plan-badge { flex: 0 0 auto; padding: 2px var(--space-2); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; white-space: nowrap; }
.settings-plan-badge[hidden] { display: none; }
.settings-modal__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 14.375rem minmax(0, 1fr); }
.settings-tabs { display: flex; flex-direction: column; min-height: 0; padding: var(--space-2) 0 var(--space-4); overflow: auto; overscroll-behavior: contain; border-right: var(--border-width) solid var(--line); background: var(--surface-muted); }
.settings-tabs__identity { display: none; }
.settings-tabs__group { margin: var(--space-4) var(--space-4) var(--space-1); color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); letter-spacing: .04rem; text-transform: uppercase; }
.settings-tabs__group:first-of-type { margin-top: var(--space-2); }
.settings-tabs > :is(button, a) { position: relative; flex: 0 0 auto; min-height: var(--control-md); display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); border: 0; color: var(--ink); background: transparent; font: inherit; font-size: var(--font-size-md); text-align: left; text-decoration: none; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.settings-tabs > :is(button, a):hover { background: var(--surface); }
.settings-tabs > :is(button, a):focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.settings-tabs > button[aria-current="true"] { color: var(--accent-2); background: var(--surface); font-family: var(--font-sans); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-2); }
.settings-tabs__icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.settings-tabs > button[aria-current="true"] .settings-tabs__icon { color: currentColor; }
.settings-tabs__icon svg,
.settings-tabs__chevron svg { display: block; width: 100%; height: 100%; }
.settings-tabs__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-tabs__value,
.settings-tabs__chevron { display: none; }
.settings-tabs__count { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 6px; border-radius: var(--radius-pill); color: var(--surface); background: var(--danger); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); }
/* Ponto de novidade (05/10/2026): acende no avatar, no item do menu e na seção das Configurações enquanto
   houver entrada de finhub/novidades.py mais nova que a última vista neste aparelho. Discreto: sem número. */
.account-button { position: relative; }
.account-button__dot, .account-menu__dot, .settings-tabs__dot { flex: 0 0 auto; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--accent-2); }
.account-button__dot { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); box-shadow: 0 0 0 2px var(--surface); }
.account-menu__dot { margin-left: auto; }
:is(.account-button__dot, .account-menu__dot, .settings-tabs__dot)[hidden] { display: none; }
.settings-content { --settings-gutter: 28px; position: relative; min-height: 0; padding: 0 var(--settings-gutter); overflow: auto; overscroll-behavior: contain; }
/* O respiro vertical fica no painel, nao na area rolavel: assim rodape e previa
   com position: sticky grudam na borda visivel em qualquer navegador. */
.settings-content.is-picker-open { overflow: hidden; }
.settings-subnav { display: grid; gap: var(--space-2); max-width: 47.5rem; padding-top: var(--settings-gutter); }
.settings-subnav[hidden] { display: none; }
.settings-subnav h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); }
.settings-subnav .business-tabs { padding-inline: 0; }
.settings-subnav .business-tabs button { min-height: var(--control-lg); padding-inline: var(--space-4); }
.settings-pane { display: none; max-width: 47.5rem; }
.settings-pane.is-active { display: grid; gap: 18px; padding: var(--settings-gutter) 0; animation: settingsPaneIn var(--motion-normal) ease both; }
.settings-subnav:not([hidden]) ~ .settings-pane.is-active { padding-top: var(--space-4); }
.settings-pane.is-active > * { animation: settingsItemIn var(--motion-normal) ease both; }
.settings-pane.is-active > *:nth-child(2) { animation-delay: 25ms; }
.settings-pane.is-active > *:nth-child(3) { animation-delay: 50ms; }
.settings-pane.is-active > *:nth-child(4) { animation-delay: 75ms; }
.settings-pane.is-active > *:nth-child(n+5) { animation-delay: 100ms; }
/* Rodape e previa grudam na area rolavel: nao podem herdar o transform da
   entrada, que cria um novo contexto e desliga o sticky durante a animacao. */
.settings-pane.is-active > .settings-actionbar,
.settings-pane.is-active > .theme-live-preview { animation: none; }
.settings-pane h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); }
.settings-pane h4 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.settings-muted { margin: 0; color: var(--muted); line-height: 1.5; }
/* Mensagem vazia sem caixa (nem o vao do grid), mas ainda no DOM como regiao
   aria-live: display: contents mantem o elemento na arvore de acessibilidade. */
.settings-content .settings-message:empty { display: contents; }
.settings-content .field-error:empty { min-height: 0; }
.settings-form,
.settings-form.account-form { margin: 0; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.settings-fields > label { min-width: 0; }
.settings-fields__wide { grid-column: 1 / -1; }
/* Rodape de acao: gruda no fim da area rolavel enquanto o formulario estiver
   na tela e so aparece quando ha algo a salvar (o JS tira o hidden). */
.settings-actionbar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); margin: var(--space-1) calc(-1 * var(--settings-gutter)) 0; padding: var(--space-3) var(--settings-gutter); border-top: var(--border-width) solid var(--line); background: var(--surface); }
.settings-actionbar[hidden] { display: none; }
.settings-actionbar__note { margin-right: auto; color: var(--warning); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.settings-readonly { display: grid; margin: 0; border-top: var(--border-width) solid var(--line); }
.settings-readonly > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--line); }
.settings-readonly dt { display: grid; gap: 2px; min-width: 0; font-family: var(--font-sans); font-weight: 600; }
.settings-readonly dt small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.4; }
.settings-readonly dd { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; max-width: 22rem; margin: 0; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.settings-readonly dd > span:first-child { min-width: 0; }
.settings-readonly__lock { flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
.settings-novidades { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--line); }
.settings-novidades li { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--line); }
.settings-novidades time { color: var(--muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.settings-novidades strong { font-family: var(--font-sans); font-weight: 600; }
.settings-novidades p { margin: 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.5; }
.settings-novidades .ghost-button { margin-top: var(--space-2); }
.beta-tag[data-tone="new"] { background: var(--success); }
.settings-readonly__lock svg { display: block; width: 100%; height: 100%; }
/* WhatsApp dentro das Configuracoes: cartao de estado com selo colorido. */
.settings-whatsapp { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.settings-whatsapp[hidden] { display: none; }
.settings-whatsapp__status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.settings-whatsapp__icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.settings-whatsapp__icon svg { width: var(--icon-md); height: var(--icon-md); }
.settings-whatsapp__title { display: grid; min-width: 0; }
.settings-whatsapp__title strong { font-family: var(--font-sans); font-weight: 600; }
.settings-whatsapp__title span { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.settings-tone-badge { padding: 3px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); font-size: var(--font-size-xs); white-space: nowrap; }
.settings-whatsapp .settings-readonly { border-top-color: color-mix(in srgb, var(--line) 80%, transparent); }
.settings-whatsapp__message { margin: 0; padding: var(--space-3); border-left: 3px solid var(--line); border-radius: 0; color: var(--ink); background: var(--surface); line-height: 1.5; }
.settings-whatsapp__message[data-tone="notice"] { border-left-color: var(--success); }
.settings-whatsapp__message[data-tone="alert"] { border-left-color: var(--warning); }
.settings-whatsapp__help { display: grid; gap: var(--space-1); margin: 0; padding: 0; color: var(--muted); font-size: var(--font-size-sm); list-style: none; }
.settings-whatsapp__help:empty,
.settings-whatsapp [data-whatsapp-actions]:empty { display: none; }
/* Número do WhatsApp próprio (14/10/2026): formulário curto dentro do cartão do vínculo. */
.settings-whatsapp-phone { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid color-mix(in srgb, var(--line) 80%, transparent); }
.settings-whatsapp-phone[hidden] { display: none; }
/* "O que da para fazer" do WhatsApp (10/10/2026): um cartao por produto, com o
   que ele faz e uma mensagem de exemplo em balao. Usado na secao WhatsApp das
   Configuracoes e na pagina /vincular/, que tambem carrega este arquivo. */
.wa-guide { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wa-guide[hidden] { display: none; }
.wa-guide__product { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.wa-guide__product.is-origin { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.wa-guide__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.wa-guide__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.wa-guide__icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.wa-guide__title { display: grid; gap: 2px; min-width: 0; }
.wa-guide__title strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.wa-guide__title span { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.wa-guide__abilities { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); line-height: 1.45; }
.wa-guide__abilities li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.wa-guide__abilities [data-icon] { display: inline-grid; place-items: center; width: var(--icon-sm); height: 1.45em; color: var(--success); }
.wa-guide__abilities [data-icon] svg { width: var(--icon-sm); height: var(--icon-sm); }
.wa-guide__example { display: grid; gap: var(--space-1); justify-items: start; margin: 0; padding-top: var(--space-3); border-top: var(--border-width) dashed var(--line); }
.wa-guide__example span { color: var(--muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wa-guide__example q { max-width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px; color: var(--ink); background: color-mix(in srgb, var(--success) 14%, var(--surface)); font-size: var(--font-size-sm); line-height: 1.4; overflow-wrap: anywhere; quotes: "\201C" "\201D"; }
/* Botoes da secao WhatsApp numa linha so: o rotulo quebrado deixava o icone
   solto na ponta e o botao alto demais (10/10/2026). */
[data-settings-pane="whatsapp"] .icon-text-button { gap: var(--space-2); padding-inline: var(--space-4); white-space: nowrap; }
[data-settings-pane="whatsapp"] .settings-link-row .icon-text-button [data-icon] { margin-left: 0; }
/* "Prefere comecar voce mesmo?": cartao com o texto e o botao lado a lado. */
.settings-whatsapp-self { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.settings-whatsapp-self p { margin: 0; line-height: 1.5; }
.settings-whatsapp-self .ghost-button { justify-self: end; }
/* Empresa (conta PJ, 12/10/2026): o cartao da empresa e o mesmo do WhatsApp
   (.settings-whatsapp), com o icone no tom de destaque; conta pessoal mostra
   um estado vazio com a acao; "Onde a empresa e usada" em tres cartoes. */
.settings-company__icon { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); }
.settings-company .settings-link-row { justify-content: flex-start; }
.settings-company-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4); border: var(--border-width) dashed color-mix(in srgb, var(--line) 70%, var(--muted)); border-radius: var(--radius-md); background: var(--surface-muted); }
.settings-company-empty strong { display: block; margin-bottom: 2px; font-family: var(--font-sans); font-weight: 600; }
.settings-company-form { display: grid; gap: var(--space-3); }
.settings-company-form h4 { margin: 0; }
.settings-company__lookup { margin: calc(-1 * var(--space-2)) 0 0; }
.settings-company__lookup:empty { display: none; }
.settings-company-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.settings-company-uses li { display: grid; align-content: start; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.settings-company-uses strong { font-family: var(--font-sans); font-weight: 600; }
.settings-company-uses span { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.45; }
.settings-whatsapp__page { margin: 0; font-size: var(--font-size-sm); }
.settings-whatsapp__page a { color: var(--accent-2); }
.settings-link-row .icon-text-button [data-icon] { display: inline-grid; width: var(--icon-sm); height: var(--icon-sm); margin-left: var(--space-2); }
.settings-link-row .icon-text-button [data-icon] svg { width: 100%; height: 100%; }
.settings-danger-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; }
.settings-danger-link strong { display: block; margin-bottom: 2px; font-family: var(--font-sans); font-weight: 600; }
.settings-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.settings-option strong { display: block; margin-bottom: var(--space-1); }
.settings-option p { margin: 0; color: var(--muted); line-height: 1.4; }
.settings-option__action { display: inline-flex; align-items: center; justify-content: center; min-width: 6.25rem; text-decoration: none; }
.settings-link-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.settings-link-row > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-md); text-decoration: none; }
.settings-license-login { margin: 0; }
.settings-license-login[hidden] { display: none; }
.settings-license-login a { display: inline-flex; align-items: center; min-height: var(--control-md); text-decoration: none; }
/* Senha: as regras comecam neutras e so ganham cor quando cumpridas. Antes as
   quatro apareciam em vermelho antes de a pessoa digitar qualquer coisa. */
.password-strength { height: 0.25rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.password-strength > span { display: block; width: 0; height: 100%; background: var(--danger); transition: width var(--motion-normal) ease, background-color var(--motion-normal) ease; }
.password-strength[data-level="1"] > span { width: 25%; }
.password-strength[data-level="2"] > span { width: 50%; }
.password-strength[data-level="3"] > span { width: 75%; background: var(--warning); }
.password-strength[data-level="4"] > span { width: 100%; background: var(--success); }
.settings-password-rules .password-rule:not(.is-met) { color: var(--muted); }
.settings-block { display: grid; gap: var(--space-3); }
.settings-sessions { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--line); }
.settings-sessions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 3.5rem; padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--line); }
.settings-sessions li > [data-icon] { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.settings-sessions li > [data-icon] svg { width: 100%; height: 100%; }
.settings-sessions strong { display: block; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-sans); font-weight: 600; }
.settings-sessions small { color: var(--muted); font-size: var(--font-size-sm); }
.settings-sessions .ghost-button { min-height: var(--control-sm); }
.settings-session-current { padding: 2px var(--space-2); border-radius: var(--radius-pill); color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); white-space: nowrap; }
.settings-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.settings-confirm[hidden] { display: none; }
.settings-confirm p { margin: 0; font-family: var(--font-sans); font-weight: 600; }
.settings-confirm .settings-field { display: grid; gap: 6px; }
.settings-confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.settings-block__foot { display: flex; justify-content: flex-end; }
.settings-license-card { padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); min-width: 0; }
.settings-license-card__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.settings-license-card h4, .settings-license-history h4 { margin: 0; font-size: var(--font-size-base); overflow-wrap: anywhere; }
.settings-license-status { padding: 5px 9px; border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
/* Cor do status (licenca, plano no cabecalho, WhatsApp): data-tone vem do JS.
   Ativa --success, expirada --danger, pendencia --warning, demais --muted. */
:is(.settings-license-status, .settings-plan-badge, .settings-tone-badge)[data-tone] { --status-tone: var(--muted); color: var(--status-tone); border-color: color-mix(in srgb, var(--status-tone) 40%, var(--line)); background: color-mix(in srgb, var(--status-tone) 12%, var(--surface)); font-family: var(--font-sans); font-weight: 600; }
:is(.settings-license-status, .settings-plan-badge, .settings-tone-badge)[data-tone="success"] { --status-tone: var(--success); }
:is(.settings-license-status, .settings-plan-badge, .settings-tone-badge)[data-tone="warning"] { --status-tone: var(--warning); }
:is(.settings-license-status, .settings-plan-badge, .settings-tone-badge)[data-tone="danger"] { --status-tone: var(--danger); }
.settings-license-history__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.settings-license-history__heading .settings-license-status { padding: 2px var(--space-2); font-size: var(--font-size-xs); }
.settings-license-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-4); margin: 18px 0 0; }
.settings-license-details > div { min-width: 0; }
.settings-license-details dt { margin-bottom: 5px; color: var(--muted); font-size: var(--font-size-sm); }
.settings-license-details dd { margin: 0; overflow-wrap: anywhere; }
.settings-license-history { display: grid; gap: var(--space-3); min-width: 0; }
.settings-license-history__list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.settings-license-history__list li { display: grid; gap: 6px; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.settings-license-history__list p { margin: 0; color: var(--muted); line-height: 1.5; font-size: var(--font-size-sm); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 10px; }
.theme-cycle-manager { display: grid; gap: 14px; }
.theme-cycle-box { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.theme-cycle-box h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.theme-choice-grid button { min-height: 3.625rem; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--space-1) 9px; align-items: center; justify-items: start; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); font-family: var(--font-sans); font-weight: 600; text-align: left; transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.theme-choice-grid button span[data-icon] { display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); }
.theme-choice-grid button svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.theme-choice-grid button strong { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-choice-grid button small { grid-column: 2; color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-xs); }
.theme-choice-grid button:hover,
.theme-choice-grid button.is-active { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, var(--surface)); }
.theme-choice-grid button:hover { transform: translateY(-1px); }
.theme-choice-grid button.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.theme-active-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-active-item { min-height: 3.375rem; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: var(--space-2) 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); text-align: left; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.theme-active-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-2) 48%, var(--line)); }
.theme-active-item > span { grid-row: span 2; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.theme-active-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; }
.theme-active-item small { color: var(--muted); font-size: var(--font-size-xs); }
.theme-active-item.is-current { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.theme-active-item.is-selected { background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.custom-theme-panel { display: grid; gap: 14px; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.custom-theme-panel__header { display: grid; grid-template-columns: 2.625rem 1fr; gap: var(--space-3); align-items: center; }
.custom-theme-panel__header > span { display: inline-grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: var(--radius-md); color: var(--accent-2); background: transparent; }
.custom-theme-panel__header svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; }
.custom-theme-panel__header strong { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-weight: 600; }
.custom-theme-panel__header p { margin: 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
/* Faixa com as cores do tema dentro do cartao: da para comparar os temas sem
   aplicar cada um. As cores chegam pelo JS (style.background via CSSOM). */
.theme-choice__swatches { grid-column: 1 / -1; display: flex; width: 100%; height: 0.5rem; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); }
.theme-choice__swatches i { flex: 1 1 0; }
/* Previa do tema em edicao: fica presa no topo enquanto as cores rolam abaixo.
   Usa as mesmas variaveis da pagina, que o editor aplica em tempo real. */
.theme-live-preview { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin: 0 calc(-1 * var(--settings-gutter)); padding: var(--space-3) var(--settings-gutter); border-bottom: var(--border-width) solid var(--line); background: var(--bg); }
.theme-live-preview__card { display: grid; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
.theme-live-preview__eyebrow { color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; }
.theme-live-preview__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); }
.theme-live-preview__row em { color: var(--muted); font-style: normal; }
.theme-live-preview__row b { font-family: var(--font-sans); font-weight: 600; }
.theme-live-preview__row .is-success { color: var(--success); }
.theme-live-preview__row .is-danger { color: var(--danger); }
.theme-live-preview__row .is-contribution { color: var(--contribution); }
.theme-live-preview__button { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 14px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.custom-theme-form { display: grid; gap: var(--space-3); }
.custom-theme-form label { display: grid; gap: 6px; min-width: 0; }
.custom-theme-form__basics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* Cores agrupadas por finalidade em secoes que abrem e fecham: so a primeira
   vem aberta, e o formulario deixa de ser uma coluna de catorze campos. */
.custom-theme-section { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.custom-theme-section > summary { min-height: var(--control-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); font-family: var(--font-sans); font-weight: 600; cursor: pointer; list-style: none; }
.custom-theme-section > summary::-webkit-details-marker { display: none; }
.custom-theme-section__chevron { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); color: var(--muted); transition: transform var(--motion-fast) ease; }
.custom-theme-section__chevron svg { display: block; width: 100%; height: 100%; }
.custom-theme-section[open] .custom-theme-section__chevron { transform: rotate(180deg); }
.custom-theme-section > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; border-radius: var(--radius-md); }
.custom-theme-section__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.custom-theme-section__grid label { font-size: var(--font-size-sm); }
/* O input nativo continua no formulario, invisivel. O seletor carrega o tipo para
   vencer regras genericas como ".business-form input { width: 100% }": sem isso o
   campo escondido ficava com 320px, estourava a borda direita e forcava o layout
   viewport do celular a 378px - o suficiente para o toque cair no elemento errado. */
input[type="color"].native-color-input { position: absolute; width: 1px; max-width: 1px; height: 1px; max-height: 1px; min-width: 0; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.color-control { position: relative; min-width: 0; }
.color-control__trigger { width: 100%; min-height: var(--control-lg); display: grid; grid-template-columns: var(--control-sm) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); text-align: left; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.color-control__trigger:hover,
.color-control__trigger:focus-visible { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent); outline: 0; }
.color-control__trigger strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.color-control__swatch,
.color-picker__swatch { display: inline-block; width: var(--icon-xl); height: var(--icon-xl); border: var(--border-width) solid color-mix(in srgb, var(--line) 70%, var(--ink)); border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 58%, transparent); }
/* Ancorado acima do campo que esta sendo editado (o JS calcula top/left a
   partir do gatilho e vira para baixo quando nao ha espaco em cima). */
.color-picker { position: fixed; top: 0; left: 0; z-index: var(--layer-popover); width: min(26.25rem, calc(100vw - 2rem)); display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .32); user-select: none; }
.color-picker[hidden] { display: none; }
.color-picker__area { position: relative; height: 11.875rem; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--picker-hue, 180), 100%, 50%); cursor: crosshair; touch-action: none; }
.color-picker__area:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-2) 24%, transparent); outline-offset: 2px; }
.color-picker__thumb { position: absolute; width: var(--icon-sm); height: var(--icon-sm); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .22); transform: translate(-50%, -50%); pointer-events: none; }
.color-picker__hue { width: 100%; min-height: var(--icon-md); padding: 0; border: 0; border-radius: var(--radius-pill); background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 65%, transparent); cursor: pointer; appearance: none; }
.color-picker__hue::-webkit-slider-thumb { width: var(--icon-md); height: var(--icon-md); border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .22); appearance: none; }
.color-picker__hue::-moz-range-thumb { width: var(--icon-sm); height: var(--icon-sm); border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .22); }
/* Rodape em duas linhas: amostra + valor + formato em cima; acoes embaixo.
   O valor fica com toda a largura que sobra - antes o select de formato e os
   botoes disputavam a mesma linha e o codigo HEX aparecia cortado (#F7F). */
.color-picker__footer { display: grid; grid-template-columns: auto minmax(0, 1fr) 6.25rem; gap: 10px; align-items: center; }
.color-picker__value { min-width: 0; min-height: var(--control-md); padding: 0 var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); letter-spacing: .02em; text-transform: uppercase; user-select: text; }
.color-picker__format { min-height: var(--control-md); padding: 0 var(--space-2); }
/* select-dropdown.js troca o <select> por .oa-lookup: a celula do grid passa a ser o wrapper. */
.color-picker__footer > .oa-lookup { min-width: 0; }
.color-picker__actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.color-picker__cancel,
.color-picker__confirm { border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 600; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
/* Cancelar e a acao secundaria: menor, sem preenchimento, so o necessario para ser clicavel. */
.color-picker__cancel { min-height: var(--control-sm); padding: 0 14px; border: var(--border-width) solid var(--line); color: var(--muted); background: transparent; font-size: var(--font-size-sm); }
.color-picker__cancel:hover,
.color-picker__cancel:focus-visible { border-color: var(--accent-2); color: var(--ink); background: var(--surface-muted); }
/* Confirmar e a acao principal: ocupa o resto da linha com o mesmo destaque do botao primario da plataforma. */
.color-picker__confirm { min-height: var(--control-md); padding: 0 var(--space-4); border: var(--border-width) solid transparent; color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: 0 10px 20px rgba(6, 23, 51, .16); }
.color-picker__confirm:hover,
.color-picker__confirm:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(6, 23, 51, .22); }
.settings-message { min-height: 1.25rem; margin: 0; color: var(--success); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }
.settings-message.is-error { color: var(--danger); }
.my-themes-list { display: grid; gap: var(--space-3); }
.theme-history-card { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.theme-history-card:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent-2) 4%, var(--surface-muted)); }
.theme-history-card.is-visible-in-presets { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.theme-history-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); align-items: center; }
.theme-history-card__header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; }
.theme-history-card .icon-button.is-active { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.theme-history-card__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.theme-color-chip { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 7px; align-items: center; min-height: 1.875rem; color: var(--muted); font-size: var(--font-size-sm); }
.theme-color-chip i { width: var(--icon-md); height: var(--icon-md); border: var(--border-width) solid var(--line); border-radius: 50%; }
.theme-color-chip strong { display: block; color: var(--ink); font-size: var(--font-size-sm); }
.theme-empty { margin: 0; padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); }
.unsaved-theme-modal { position: relative; width: min(26.875rem, 92vw); display: grid; gap: var(--space-4); padding: 26px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.unsaved-theme-modal h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.unsaved-theme-modal p { margin: 0; color: var(--muted); line-height: 1.45; }

/* Pop-up de confirmação compartilhado (templates/includes/confirm_dialog.html).
   Tom por data-tone: warning (padrão), danger, info, question, success. O
   ícone e o botão de confirmação seguem a cor do tom; o resto é neutro para o
   texto da pergunta ser o protagonista. */
/* Centralizado na tela em qualquer página, mesmo onde .modal-backdrop é sobrescrito. */
.confirm-backdrop { position: fixed; inset: 0; z-index: calc(var(--layer-modal) + 1); display: grid; place-items: center; align-content: center; justify-content: center; padding: 18px; box-sizing: border-box; }
.confirm-backdrop[hidden] { display: none; }
.confirm-dialog { --confirm-tone: var(--warning); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon body" "actions actions"; gap: var(--space-4) var(--space-4); width: min(28.75rem, 100%); max-height: calc(100dvh - 2.25rem); overflow: auto; padding: 26px; border: var(--border-width) solid var(--line); border-top: 4px solid var(--confirm-tone); border-radius: var(--radius-lg); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.confirm-dialog[data-tone="danger"] { --confirm-tone: var(--danger); }
.confirm-dialog[data-tone="info"] { --confirm-tone: var(--accent-2); }
.confirm-dialog[data-tone="question"] { --confirm-tone: var(--accent-2); }
.confirm-dialog[data-tone="success"] { --confirm-tone: var(--success); }
.confirm-dialog__icon { grid-area: icon; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--confirm-tone); background: color-mix(in srgb, var(--confirm-tone) 14%, var(--surface)); }
.confirm-dialog__icon svg { width: 1.5rem; height: 1.5rem; }
.confirm-dialog__body { grid-area: body; display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.confirm-dialog__eyebrow { color: var(--confirm-tone); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); letter-spacing: 0.04rem; text-transform: uppercase; }
.confirm-dialog__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1.2; overflow-wrap: anywhere; }
.confirm-dialog__message { margin: 0; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.confirm-dialog__message strong { color: var(--ink); }
.confirm-dialog__detail { display: grid; gap: 6px; margin-top: var(--space-1); padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.confirm-dialog__detail ul { margin: 0; padding-left: 18px; }
.confirm-dialog__detail li { list-style: disc outside; }
.confirm-dialog__field { display: grid; gap: 6px; margin-top: var(--space-2); color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.confirm-dialog__field textarea { width: 100%; min-height: 4.25rem; box-sizing: border-box; padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; font-weight: 400; font-size: var(--font-size-md); line-height: 1.4; resize: none; }
.confirm-dialog__field textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--confirm-tone) 60%, transparent); outline-offset: 1px; border-color: var(--confirm-tone); }
.confirm-dialog__ack { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); color: var(--ink); font-family: var(--font-sans); font-weight: 500; font-size: var(--font-size-sm); cursor: pointer; }
.confirm-dialog__ack input { width: var(--icon-md); height: var(--icon-md); min-height: 0; margin: 0; accent-color: var(--confirm-tone); }
.confirm-dialog__actions { grid-area: actions; margin: 0; padding-top: var(--space-2); border-top: var(--border-width) solid var(--line); }
.confirm-dialog__actions .primary-button { background: var(--confirm-tone); border-color: var(--confirm-tone); color: var(--surface); }
.confirm-dialog__actions .primary-button:hover:not(:disabled) { filter: brightness(0.92); }
.confirm-dialog__actions .primary-button:disabled, .confirm-dialog__actions .ghost-button:disabled { opacity: 0.6; cursor: wait; }
.confirm-dialog.is-busy .confirm-dialog__actions .primary-button::after { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-left: var(--space-2); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: confirmSpin 0.8s linear infinite; vertical-align: -1px; }
@keyframes confirmSpin { to { transform: rotate(360deg); } }
@media (max-width: 35rem) {
    .confirm-dialog { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "body" "actions"; padding: 20px; }
    .confirm-dialog__icon { width: 2.5rem; height: 2.5rem; }
    .confirm-dialog__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .confirm-dialog__actions .primary-button { order: -1; }
    .confirm-dialog__actions button { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .confirm-backdrop.is-open .confirm-dialog { animation: none; }
    .confirm-dialog.is-busy .confirm-dialog__actions .primary-button::after { animation: none; }
}
/* Acesso restrito: o aviso tem três linhas curtas. Com a altura mínima de
   .auth-modal, a grade esticava cada linha para preencher 430 px e o botão
   "Entrar agora" crescia junto, ficando quase quadrado. */
.settings-auth-modal { display: grid; align-content: start; gap: var(--space-4); min-height: 0; }
.is-color-picking { overflow: hidden; }

@media (max-width: 47.5rem) {
    /* Configuracoes no celular: tela inteira em duas etapas. A lista de secoes
       e o detalhe nunca aparecem juntos (.is-mobile-detail troca um pelo
       outro). O modal mede exatamente a area do backdrop fixo (inset: 0), e so
       a lista ou o conteudo rolam - nada empurra o modal para fora da tela. */
    .settings-backdrop { padding: 0; place-items: stretch; }
    .settings-modal { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
    .settings-modal__header { min-height: 3.5rem; gap: var(--space-2); padding: 6px 6px 6px var(--space-4); }
    .settings-modal__header .icon-button { width: var(--control-md); height: var(--control-md); min-height: var(--control-md); padding: 0; display: inline-grid; place-items: center; }
    .settings-modal__header .icon-button svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    .settings-identity { display: none; }
    .settings-modal__heading { position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); text-overflow: ellipsis; }
    .settings-modal.is-mobile-detail .settings-back { display: inline-grid; margin-left: -10px; }
    .settings-modal.is-mobile-detail .settings-modal__heading { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); }
    .settings-modal.is-mobile-detail .settings-modal__section { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); text-overflow: ellipsis; white-space: nowrap; }
    .settings-modal__body { display: block; position: relative; overflow: hidden; }
    .settings-tabs { height: 100%; padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-right: 0; background: var(--surface); }
    .settings-tabs__identity { display: flex; padding: var(--space-4); border-bottom: var(--border-width) solid var(--line); }
    .settings-tabs__group { margin: var(--space-5) var(--space-4) var(--space-2); }
    .settings-tabs > :is(button, a) { min-height: 3.25rem; padding: 0 var(--space-4); border-bottom: var(--border-width) solid var(--line); font-size: var(--font-size-base); }
    .settings-tabs > button[aria-current="true"] { color: var(--ink); background: transparent; font-weight: 400; box-shadow: none; }
    .settings-tabs > button[aria-current="true"] .settings-tabs__icon { color: var(--muted); }
    .settings-tabs__value { display: block; flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; color: var(--muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
    .settings-tabs__chevron { display: inline-grid; flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
    .settings-content { --settings-gutter: var(--space-4); display: none; height: 100%; font-size: var(--font-size-md); }
    .settings-modal.is-mobile-detail .settings-tabs { display: none; }
    .settings-modal.is-mobile-detail .settings-content { display: block; }
    .settings-pane.is-active { gap: var(--space-4); padding-bottom: calc(var(--settings-gutter) + env(safe-area-inset-bottom, 0px)); }
    /* O titulo da secao ja esta no cabecalho do celular. */
    .settings-pane > h3,
    .settings-subnav h3 { display: none; }
    .settings-subnav { padding-top: var(--space-2); }
    .settings-subnav .business-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .settings-subnav .business-tabs button { min-height: var(--control-md); padding-inline: var(--space-1); }
    .settings-subnav .business-tabs button::after { right: 8px; left: 8px; }
    .settings-pane h4 { font-size: var(--font-size-base); }
    .settings-muted { font-size: var(--font-size-sm); line-height: 1.4; }
    .settings-fields,
    .custom-theme-form__basics { grid-template-columns: 1fr; }
    .settings-actionbar { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
    .settings-actionbar > button { flex: 1 1 0; min-width: 0; min-height: var(--control-md); justify-content: center; }
    .settings-actionbar__note { flex-basis: 100%; margin-right: 0; }
    .settings-readonly > div,
    .settings-danger-link,
    .settings-option { grid-template-columns: 1fr; gap: var(--space-2); }
    .settings-readonly dd { max-width: none; justify-content: flex-start; text-align: left; }
    .settings-whatsapp { padding: var(--space-3); }
    .settings-whatsapp__status { grid-template-columns: auto minmax(0, 1fr); }
    .settings-whatsapp__status .settings-tone-badge { grid-column: 2; justify-self: start; }
    .settings-whatsapp [data-whatsapp-actions] > * { flex: 1 1 100%; }
    .settings-whatsapp-self { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
    .settings-whatsapp-self .ghost-button { justify-self: stretch; }
    .settings-company-empty { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-3); }
    .settings-company-empty .primary-button { grid-column: 1 / -1; justify-content: center; min-height: var(--control-md); }
    .settings-company .settings-link-row > button { flex: 1 1 100%; justify-content: center; min-height: var(--control-md); }
    .settings-company-uses { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .settings-danger-link .ghost-button,
    .settings-option__action { justify-self: start; min-height: var(--control-md); }
    .settings-link-row > a { flex: 1 1 10rem; }
    .settings-sessions li { grid-template-columns: auto minmax(0, 1fr); }
    .settings-sessions li > :last-child { grid-column: 2; justify-self: start; }
    .settings-sessions .ghost-button { min-height: var(--control-md); }
    /* Confirmacao de encerrar sessao: no celular gruda no rodape como uma
       folha, perto do polegar, com o campo de senha e as duas acoes. */
    .settings-confirm { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--settings-gutter)); padding: var(--space-4) var(--settings-gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-width: var(--border-width) 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 32px rgb(0 0 0 / .14); }
    .settings-confirm__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .settings-confirm__actions button { min-height: var(--control-md); justify-content: center; }
    .settings-block__foot .ghost-button { width: 100%; min-height: var(--control-md); justify-content: center; }
    .theme-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-active-list { grid-template-columns: 1fr; }
    .theme-cycle-box { padding: var(--space-3); }
    .theme-cycle-box .primary-button { min-height: var(--control-md); justify-content: center; }
    .custom-theme-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--space-3) var(--space-3); gap: var(--space-2); }
    .custom-theme-section > summary { padding: 0 var(--space-3); }
    .custom-theme-section__grid .color-control__trigger { grid-template-columns: var(--icon-xl) minmax(0, 1fr); gap: var(--space-2); padding: 6px var(--space-2); }
    .color-picker__footer { grid-template-columns: auto minmax(0, 1fr); }
    .color-picker__format,
    .color-picker__footer > .oa-lookup { grid-column: 1 / -1; }
    .color-picker__area { height: 13.75rem; }
    .theme-history-card__colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(70vh, 27.5rem); overflow: auto; }
    /* Menu aberto pelo avatar da barra do celular: folha inferior de borda a
       borda, ao alcance do polegar, com a alca de arrastar como pista visual. */
    .account-menu-wrap--bar .account-menu { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: min(85vh, 36rem); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: auto; overscroll-behavior: contain; border-width: var(--border-width) 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -16px 40px rgb(0 0 0 / .22); transform-origin: bottom center; animation: accountSheetIn var(--motion-normal) ease both; }
    .account-menu-wrap--bar .account-menu__handle { display: block; width: 2.25rem; height: 0.25rem; margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--line); }
    .account-menu-wrap--bar .account-menu :is(button, [role="menuitem"]) { min-height: 3.25rem; font-size: var(--font-size-base); }
    .account-menu-wrap--bar .account-menu__header { padding-top: var(--space-3); }
    .auth-modal .auth-modal__close { width: var(--control-sm); min-width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; display: inline-grid; place-items: center; }
    .auth-modal .auth-modal__close svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: 0; }
    /* Itens 6, 7 e 8: no mobile o fechar fica sozinho na primeira linha e o
       cabecalho desce para baixo dele, ocupando a mesma largura dos textos e
       botoes seguintes em vez de dividir a linha com o botao. */
    .auth-modal:not(.feedback-modal) { padding-top: calc(var(--space-3) + var(--control-sm) + var(--space-3)); }
    .auth-modal:not(.feedback-modal) .auth-modal__close { top: var(--space-3); right: var(--space-3); }
    .auth-modal:not(.feedback-modal) .auth-modal__header { padding-right: 0; }
    /* Acesso restrito: o botao acompanha a largura do texto acima dele. */
    .settings-auth-modal .form-actions .primary-button { flex: 1 0 100%; min-height: var(--control-lg); }
    /* Codigo de confirmacao: oito caixas em uma linha so viravam alvos de toque
       estreitos demais. Duas linhas de quatro cabem com largura confortavel. */
    .auth-code-grid { grid-template-columns: repeat(4, 2.5rem); justify-content: center; }
    .auth-code-grid input { width: 2.5rem; height: var(--control-lg); }
    .auth-form[data-auth-form="register-code"] .form-actions .primary-button,
    .auth-form[data-auth-form="reset-code"] .form-actions .primary-button { flex: 1 0 100%; min-height: var(--control-lg); }
    .feedback-modal .auth-modal__close { display: flex; align-items: center; justify-content: center; line-height: 0; }
    .feedback-modal .auth-modal__close [data-icon],
    .feedback-modal .auth-modal__close svg { display: block; flex: 0 0 auto; }
    .feedback-modal .auth-modal__header { gap: 10px; padding: var(--space-4) calc(var(--space-4) + var(--control-sm)) 0 var(--space-4); }
    .feedback-modal .auth-modal__logo { width: 2.125rem; height: 2.125rem; flex-basis: 2.125rem; }
    .feedback-modal h2 { font-size: var(--font-size-base); }
    .feedback-modal .auth-modal__header p { font-size: var(--font-size-sm); line-height: 1.25; }
    .feedback-form { font-size: var(--font-size-sm); }
    .feedback-form__body { gap: 9px; padding: var(--space-3) var(--space-4); }
    .feedback-form__footer { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
    .feedback-form .form-grid { gap: 9px; }
    .feedback-form input,
    .feedback-form select { min-height: var(--control-sm); font-size: var(--font-size-sm); }
    .feedback-form textarea { height: 5.75rem; min-height: 5.75rem; max-height: 5.75rem; font-size: var(--font-size-sm); }
    .feedback-note { font-size: var(--font-size-xs); line-height: 1.25; }
    .feedback-message { min-height: 1.125rem; font-size: var(--font-size-xs); }
    .feedback-form .primary-button { min-width: 9.375rem; min-height: var(--control-md); justify-content: center; font-size: var(--font-size-sm); }
    .feedback-success-modal { width: min(100%, calc(100vw - 1.25rem)); padding: var(--space-6) 1.25rem; }
}

/* Entrada do painel depois do deslize, continuando o sentido do dedo. Fica em
   animacao, e nao em transicao dirigida por relogio: o ultimo quadro e o estado
   de repouso e o fill forwards o mantem, entao a chegada correta nao depende de
   nenhum temporizador. Uma aba que va para segundo plano no meio da troca pausa
   a animacao onde ela estava e a retoma ao voltar - e a pausa acontece
   justamente enquanto ninguem esta olhando. */
@keyframes swipeEnterRight {
    from { opacity: 0; transform: translateX(25%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes swipeEnterLeft {
    from { opacity: 0; transform: translateX(-25%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes modalEnter {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes accountSheetIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes accountMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mobileNavBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes settingsPaneIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes settingsItemIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes feedbackSuccess {
    from { opacity: 0.4; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes authFormIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes validationFieldPulse {
    0% { transform: translateX(0); }
    30% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes validationMessageIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes checkedDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes checkedFill {
    to { fill: currentColor; }
}

@keyframes buttonSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .settings-modal,
    .settings-pane.is-active,
    .settings-pane.is-active > *,
    .settings-tabs > :is(button, a),
    .settings-option,
    .custom-theme-section__chevron,
    .password-strength > span,
    .theme-choice-grid button,
    .theme-active-item,
    .theme-history-card,
    .account-menu,
    .account-menu-wrap--bar .account-menu,
    .platform-toast,
    .auth-form.is-active,
    .feedback-form.is-sent,
    .auth-message:not(:empty),
    .is-validation-feedback input,
    .is-validation-feedback select,
    .is-validation-feedback textarea,
    .is-validation-feedback .password-field,
    .is-validation-feedback.checkbox-field,
    .is-validation-feedback .field-error:not(:empty),
    body.is-mobile-nav-open .app-main::before {
        animation: none !important;
        transition: none !important;
    }

    .settings-tabs button:hover,
    .settings-option:hover,
    .theme-choice-grid button:hover,
    .theme-active-item:hover,
    .theme-history-card:hover {
        transform: none;
    }
}
.locked-panel { display: grid; gap: var(--space-2); padding: 18px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); }

.construction-panel { overflow: hidden; }
.construction-panel__body { display: grid; grid-template-columns: minmax(11.25rem, 20rem) minmax(0, 1fr); gap: clamp(18px, 4vw, 42px); align-items: center; min-height: 22.5rem; }
.construction-panel__gif { width: min(20rem, 100%); justify-self: center; }
html.theme-dark .construction-panel__gif,
body.theme-dark .construction-panel__gif { filter: brightness(1.08); }
.construction-panel__content { display: grid; gap: var(--space-3); max-width: 35rem; }
.construction-panel__content h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display)); line-height: 1.05; }
.construction-panel__content p { margin: 0; color: var(--muted); font-size: var(--font-size-base); line-height: 1.55; }

/* Breakpoint intermediario: mantem sidebar no fluxo da pagina, reduz conteudo
   e reorganiza cards para evitar sobreposicao entre menu e calculadoras. */
@media (min-width: 47.5625rem) and (max-width: 82.5rem) {
    .sidebar { max-height: 100vh; gap: var(--space-4); padding: var(--space-4) var(--space-3); overflow: hidden; box-shadow: none; }
    .sidebar__brand { grid-template-columns: var(--control-md) minmax(0, 1fr) var(--control-md); gap: var(--space-2); min-height: var(--control-md); }
    .sidebar .sidebar__toggle { width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); }
    .sidebar__mark { width: var(--icon-xl); height: var(--icon-xl); }
    .sidebar__name { font-size: var(--font-size-lg); }
    .sidebar__nav { flex: 1 1 auto; min-height: 0; gap: var(--space-5); overflow-y: auto; overflow-x: hidden; }
    .sidebar__footer { flex: 0 0 auto; }
    .nav-group { gap: var(--space-1); }
    .nav-group__title { min-height: var(--control-md); padding: 0 var(--space-2); font-size: var(--font-size-xs); }
    .nav-group__icon { flex-basis: var(--icon-md); width: var(--icon-md); height: var(--icon-md); min-width: var(--icon-md); }
    .nav-group__icon svg { width: var(--icon-sm); height: var(--icon-sm); }
    .nav-item { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-md); }
    .nav-item--child { min-height: var(--control-md); padding-left: var(--space-4); font-size: var(--font-size-md); }
    .sidebar__site { padding: var(--space-2); font-size: var(--font-size-md); }
    .mobile-bar { display: none; }
    .topbar { padding: var(--space-3) var(--space-5); flex-wrap: nowrap; }
    .search-area { flex: 1; width: auto; min-width: 0; }
    .topbar__actions { display: flex; margin-left: auto; }
    .topbar__actions .theme-button,
    .topbar__actions .account-menu-wrap { display: none; }
    .topbar__actions .ghost-button[data-feedback-open] { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5rem; margin-right: 10px; padding: 0 18px; line-height: 1; }
    .sidebar__mobile-actions { display: flex; gap: 10px; align-items: center; padding: 10px var(--space-2) 0; border-top: var(--border-width) solid var(--line); }
    .sidebar__mobile-actions .ghost-button[data-feedback-open] { display: none; }
    .sidebar__mobile-actions .theme-button { flex: 0 0 var(--control-md); width: var(--control-md); }
    .sidebar__mobile-actions .account-button { height: var(--control-md); min-height: var(--control-md); }
    .sidebar__mobile-actions .primary-button { flex: 1; min-width: 0; }
    .sidebar__mobile-actions .account-menu { position: fixed; left: calc(var(--sidebar-width) - 32px); right: auto; bottom: 64px; top: auto; width: min(17.5rem, calc(100vw - var(--sidebar-width) - 1.5rem)); max-height: min(70vh, 27.5rem); overflow: auto; z-index: var(--layer-modal); }
    .content { padding-inline: var(--space-5); font-size: var(--font-size-md); }
    .page-header h1 { font-size: clamp(var(--font-size-3xl), 4.2vw, var(--font-size-display)); }
    .page-header p { font-size: var(--font-size-md); }
    .tool-section h2 { font-size: var(--font-size-md); }
    .tool-card { flex: 1 1 calc((100% - 2.25rem) / 3); max-width: calc((100% - 2.25rem) / 3); }
    .tool-card h3 { font-size: var(--font-size-xl); letter-spacing: 0.025rem;}
    .tool-card p { font-size: var(--font-size-md); line-height: 1.38; }
    .tool-card__button { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .summary-card h2,
    .summary-card__header h2 { font-size: var(--font-size-lg); }
    label { font-size: var(--font-size-md); }
    input,
    select,
    textarea { min-height: var(--control-md); font-size: var(--font-size-base); }
    .money-field { min-height: var(--control-md); }
    .money-field span { font-size: var(--font-size-sm); }
    .primary-button,
    .ghost-button,
    .icon-button,
    .theme-button { min-height: var(--control-md); font-size: var(--font-size-sm); }
    .calculator-layout .form-actions .primary-button { min-width: calc(var(--control-lg) * 4); justify-content: center; }
    .result-row { min-height: var(--control-md); font-size: var(--font-size-sm); }
    .result-row.is-total { min-height: var(--control-lg); font-size: var(--font-size-base); }
    .chart-table th,
    .chart-table td { font-size: var(--font-size-sm); }
    .chart-metric span,
    .chart-legend__item span { font-size: var(--font-size-sm); }
    .calculator-layout { grid-template-columns: 1fr; }
    .calculator-layout--wide { grid-template-columns: 1fr; }
    .calculator-layout--split { grid-template-columns: 1fr; }
    .calculator-layout--comparison { grid-template-columns: 1fr; max-width: none; }
    .split-payment-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .split-payment-summary-panel .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
    .split-payment-applied-card { grid-column: auto; }
    .comparison-summary { max-width: none; justify-self: stretch; }
}

@media (min-width: 47.5625rem) and (max-width: 61.25rem) {
    .panel__body,
    .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .calculator-form > .form-subsection { gap: var(--space-3); margin-top: 0; padding-top: 0; }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .form-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-form > .form-actions { margin-top: 0; }
    .summary-card__header { gap: var(--space-3); margin-bottom: var(--space-3); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-sm); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .result-row.is-total { min-height: var(--control-md); font-size: var(--font-size-base); }
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-detail,
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-row:has(#v-salLiq),
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-row.is-total { grid-column: 1 / -1; }
    .dynamic-row { grid-template-columns: 1fr; }
    .dynamic-row button { justify-self: end; }
    .split-payment-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .chart-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); justify-items: stretch; }
    .chart-details { width: 100%; }
    .history-item { grid-template-columns: 1fr; }
    /* Catálogo da home no tablet (16/10/2026): o card de desktop esticado em duas colunas
       media 206 px e o catálogo passava de 2.900 px. Aqui ele vira a linha do celular
       (ícone, nome, descrição curta e seta, com a linha inteira clicável), com borda e em
       duas colunas. O hero e o resto da página continuam como estão. */
    .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0 0 var(--space-2); }
    .tool-card { position: relative; grid-template-columns: var(--control-sm) minmax(0, 1fr) var(--icon-sm); grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 2px; align-items: center; width: 100%; max-width: none; min-height: 4.25rem; padding: var(--space-3); transition: border-color var(--motion-fast) ease; }
    .tool-card:hover { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
    .tool-card:has(.tool-card__button:focus-visible) { border-color: var(--accent-2); outline: 2px solid var(--accent-2); outline-offset: 2px; }
    .tool-card__icon { display: inline-grid; grid-column: 1; grid-row: 1 / span 2; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink); }
    .tool-card__icon svg { width: var(--icon-md); height: var(--icon-md); }
    .tool-card__forward { display: inline-grid; grid-column: 3; grid-row: 1 / span 2; place-items: center; justify-self: end; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
    .tool-card h3 { grid-column: 2; grid-row: 1; padding: 0; border: 0; font-size: var(--font-size-base); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
    .tool-card p { grid-column: 2; grid-row: 2; display: block; min-height: 0; padding: 0; border: 0; overflow: hidden; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
    .tool-card__desc-full { display: none; }
    .tool-card__desc-mobile { display: inline; }
    .tool-card__button,
    .tool-card:hover .tool-card__button { position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none; opacity: 0; overflow: hidden; text-indent: -999px; transform: none; }
    .tool-card.is-locked { opacity: 1; }
}

/* Notebook: maior densidade e uso horizontal quando a sidebar esta recolhida. */
@media (min-width: 61.3125rem) and (max-width: 82.5rem) {
    .content { font-size: var(--font-size-base); }
    .page-header p,
    label { font-size: var(--font-size-base); }
    .panel__body,
    .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .calculator-form > .form-subsection { gap: var(--space-3); margin-top: 0; padding-top: 0; }
    .form-grid,
    .form-grid--three { gap: var(--space-4); }
    .calculator-form > .form-actions { margin-top: 0; }
    .summary-card__header { gap: var(--space-3); margin-bottom: var(--space-3); }
    .primary-button,
    .ghost-button,
    .icon-button,
    .theme-button { font-size: var(--font-size-md); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-sm); padding-inline: var(--space-3); font-size: var(--font-size-base); }
    .result-row.is-total { min-height: var(--control-md); font-size: var(--font-size-lg); }
    .chart-panel,
    .history-panel { margin-top: var(--space-4); }
    .chart-stack { gap: var(--space-4); }
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-detail,
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-row:has(#v-salLiq),
    .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-row.is-total { grid-column: 1 / -1; }
    .app-shell:has(.sidebar.is-collapsed) .calculator-layout:not(.calculator-layout--wide):not(.calculator-layout--split):not(.calculator-layout--comparison):not(.split-payment-layout):not(.sales-conditions-layout):has(> .summary-card:not([hidden])) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .app-shell:has(.sidebar.is-collapsed) .calculator-layout:not(.calculator-layout--comparison):has(#salarioBruto) > .summary-card > .result-list { grid-template-columns: 1fr; }
}

/* 981-1100 px com o menu lateral no fluxo: tres cartoes por linha ficavam com ~200 px
   (titulo em tres linhas), mais apertados que os dois do tablet. Dois por linha. */
@media (min-width: 61.3125rem) and (max-width: 68.75rem) {
    .app-shell:not(:has(.sidebar.is-collapsed)) .tool-card { flex-basis: calc((100% - 1.125rem) / 2); max-width: calc((100% - 1.125rem) / 2); }
    /* Mesmo aperto nas grades de tres campos (Objetivo de precificacao do Split): como no tablet, duas colunas. */
    .form-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Rosca e detalhes em 2:3, como no tablet: com a rosca em ate 300 px sobravam
       ~320 px para legenda e indicadores, e os valores quebravam em duas linhas. */
    .chart-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); justify-items: stretch; }
    .chart-details { width: 100%; }
}

/* Quatro indicadores do resumo (Ponto de equilibrio) em 2 x 2 ate 1100 px: o auto-fit
   punha quatro em 768 px (o valor quebrava e passava 4 px do cartao) e 3 + 1 em 1024 px. */
@media (min-width: 47.5625rem) and (max-width: 68.75rem) {
    .metric-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Indicadores abaixo da legenda dos graficos (09/10/2026): com o auto-fit de 150 px,
   tres ou cinco cartoes deixavam um sozinho na ultima linha ("Valor de juros",
   "Markup"). Entre o celular e o desktop ficam em duas colunas e o impar fecha a linha. */
/* Em uma coluna (celular, tablet e notebook) as areas ocultas (resultado, cenarios,
   alertas) seguiam somando o gap da grade: ~70 px vazios entre o formulario e o
   historico. O espaco passa para a margem de quem esta visivel. */
@media (max-width: 82.5rem) {
    .split-payment-layout,
    .sales-conditions-layout { row-gap: 0; }
    .split-payment-layout > :not(:first-child),
    .sales-conditions-layout > :not(:first-child) { margin-top: var(--space-5); }
}

@media (min-width: 47.5625rem) and (max-width: 82.5rem) {
    /* Legenda do grafico em duas colunas tambem em 1024 px: com o minimo de 190 px a
       coluna de ~320 px ao lado da rosca so cabia um item por linha. */
    .chart-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-legend > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .chart-metrics[data-chart-metrics] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-metrics[data-chart-metrics] > .chart-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Mobile e tablet estreito: sidebar vira drawer off-canvas. */
@media (max-width: 61.25rem) {
    /* align-content padrao (normal) distribui a sobra de 100vh entre as linhas
       do grid. Em paginas de conteudo curto isso inflava a barra mobile, que
       chegava ao dobro da altura. Com start as linhas ficam do tamanho do
       conteudo e o fundo do proprio shell cobre o resto da tela. */
    .app-shell { grid-template-columns: 1fr; align-content: start; }
    .app-shell:has(.sidebar.is-collapsed) { grid-template-columns: 1fr; }
    body.is-mobile-nav-open .app-main::before { content: ""; position: fixed; inset: 0; z-index: var(--layer-sidebar); background: color-mix(in srgb, var(--bg) 32%, rgba(13, 20, 36, .34)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: mobileNavBackdropIn var(--motion-fast) ease both; }
    .sidebar { position: fixed; z-index: var(--layer-dropdown); width: var(--sidebar-width); max-width: 100vw; height: 100dvh; overflow: hidden; transform: translateX(-100%); transition: transform var(--motion-normal) ease; box-shadow: none; }
    /* A sombra só existe com a gaveta aberta: fechada, ela vazava 18 px na borda esquerda. */
    .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar.is-collapsed { align-items: stretch; padding-inline: var(--space-4); }
    .sidebar__brand,
    .sidebar.is-collapsed .sidebar__brand { grid-template-columns: var(--control-lg) minmax(0, 1fr) var(--control-md); justify-items: stretch; }
    .sidebar .sidebar__toggle,
    .sidebar.is-collapsed .sidebar__toggle { display: none; }
    button.sidebar__close { display: inline-grid; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    .sidebar.is-collapsed .sidebar__name,
    .sidebar.is-collapsed .nav-group__title,
    .sidebar.is-collapsed .nav-item__label,
    .sidebar.is-collapsed .sidebar__footer { display: grid; }
    .sidebar.is-collapsed .nav-group { height: auto; background: transparent; }
    .sidebar.is-collapsed .nav-item { display: flex; }
    .sidebar.is-collapsed .sidebar__logo::after { display: none; }
    .sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
    .sidebar__footer { flex: 0 0 auto; }
    .mobile-bar { position: sticky; top: 0; z-index: var(--layer-mobile-bar); display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--line); background: var(--surface); }
    [data-mobile-menu] { display: inline-grid; place-items: center; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    [data-mobile-menu] svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    /* Barra única no celular e no tablet (revisão de UI de 01/10/2026): só a barra da marca fica
       presa no topo; a busca rola com a página em vez de sumir embaixo dela. */
    .topbar { position: static; padding: var(--space-3) var(--space-4); flex-wrap: nowrap; }
    .topbar__actions { display: none; }
    .sidebar__mobile-actions { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-2) 0; border-top: var(--border-width) solid var(--line); }
    .sidebar__mobile-actions > button,
    .sidebar__mobile-actions .account-button { display: inline-grid; place-items: center; align-items: center; justify-content: center; min-height: var(--control-md); line-height: 1; }
    .sidebar__mobile-actions [data-icon] { display: inline-grid; place-items: center; }
    .sidebar__mobile-actions svg { display: block; margin: auto; }
    .sidebar__mobile-actions .ghost-button[data-feedback-open] { display: inline-flex; }
    .sidebar__mobile-actions .theme-button { flex: 0 0 var(--control-md); width: var(--control-md); }
    .sidebar__mobile-actions .primary-button { flex: 1; min-width: 0; }
    .sidebar__mobile-actions .account-menu { position: fixed; left: 12px; right: 12px; bottom: 74px; top: auto; width: auto; max-height: min(62vh, 26.25rem); overflow: auto; z-index: var(--layer-modal); }
    /* [avatar] [nome/e-mail] [fechar], com o fechar centralizado na altura
       da faixa inteira e sem fundo, para nao competir com o avatar. */
    .account-menu__header { grid-template-columns: 3rem minmax(0, 1fr) var(--icon-lg); }
    .account-menu .account-menu__close { display: inline-grid; place-items: center; align-self: center; width: var(--icon-lg); min-width: var(--icon-lg); height: var(--icon-lg); min-height: var(--icon-lg); padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; }
    .account-menu .account-menu__close:hover { color: var(--ink); background: transparent; }
    .account-menu .account-menu__close svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
    .search-box input { font-size: var(--font-size-base); }
    .calculator-layout { grid-template-columns: 1fr; }
    .calculator-layout--wide { grid-template-columns: 1fr; }
    .calculator-layout--split { grid-template-columns: 1fr; }
    .calculator-layout--comparison { grid-template-columns: 1fr; max-width: none; }
    .split-payment-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .comparison-summary { max-width: none; justify-self: stretch; }
}

@media (max-width: 47.5rem) {
    .content { width: 100%; padding: var(--space-5) var(--space-3) var(--space-7); overflow-x: hidden; }
    .page-header { margin-bottom: var(--space-4); }
    .page-header h1 { font-size: var(--font-size-2xl); line-height: 1.08; }
    .page-header .home-header__copy > h1 { font-size: var(--font-size-xl); line-height: 1.2; }
    .page-header p { font-size: var(--font-size-md); line-height: 1.45; }
    .panel__body, .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .form-grid, .form-grid--three { gap: var(--space-4); }
    label { gap: var(--space-2); font-size: var(--font-size-md); }
    .field-description { font-size: var(--font-size-sm); }
    input, select, textarea { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-base); }
    .oa-lookup > [data-registry-icon] { top: calc(var(--control-md) / 2); }
    select[data-select-enhanced] { height: var(--control-md); }
    .money-field { min-height: var(--control-md); }
    .money-field span { padding-inline: var(--space-3); font-size: var(--font-size-sm); }
    .form-hint { font-size: var(--font-size-sm); line-height: 1.34; }
    .estimate-note { padding: var(--space-2) 10px; font-size: var(--font-size-xs); line-height: 1.32; }
    .form-actions { gap: var(--space-3); }
    .calculator-form > .form-actions .primary-button,
    .calculator-layout .form-actions .primary-button { width: 100%; min-height: var(--control-lg); }
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) { min-height: var(--control-md); align-content: center; }
    .break-even-page { gap: 20px; }
    .break-even-page .calculator-form { gap: 20px; }
    .break-even-page .form-subsection + .form-subsection { padding-top: 18px; }
    .break-even-page input,
    .break-even-page select,
    .break-even-page .money-field { height: var(--control-md); min-height: var(--control-md); }
    .primary-button, .ghost-button, .icon-button, .theme-button { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .summary-card h2, .summary-card__header h2 { font-size: var(--font-size-lg); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-md); gap: var(--space-2); padding-inline: var(--space-2); font-size: var(--font-size-sm); }
    .result-row.is-total { min-height: var(--control-lg); font-size: var(--font-size-md); }
    .history-panel, .chart-panel { margin-top: 20px; }
    .business-tabs { padding-inline: var(--space-1); }
    .business-tabs :is(button, a) { min-height: 2.875rem; padding-inline: var(--space-3); font-size: var(--font-size-sm); }
    .business-workspace__body { padding: var(--space-4); }
    .history-item, .empty-state { font-size: var(--font-size-sm); }
    .dynamic-section { gap: 10px; }
    .dynamic-row { gap: 9px; padding: 10px; }
    .dynamic-row label { font-size: var(--font-size-sm); }
    .dynamic-row input,
    .dynamic-row .money-field,
    .dynamic-row button { min-height: var(--control-md); }
    .chart-table th,
    .chart-table td { padding: 10px 11px; font-size: var(--font-size-sm); }
    .chart-legend__item,
    .chart-metric { padding: 9px; }
    .chart-legend__item span,
    .chart-metric span { font-size: var(--font-size-sm); }
    .line-axis { font-size: var(--font-size-xs); }
    .comparison-group__header { padding: 11px; }
    .comparison-group__header h3 { font-size: var(--font-size-base); }
    .comparison-subgroup summary { padding: 9px 11px; }
    .comparison-subgroup h4 { font-size: var(--font-size-sm); }
    .comparison-group > .result-list,
    .comparison-subgroup > .result-list { margin-right: 11px; margin-left: calc(11px + (var(--icon-md) / 2) - 1px); padding-left: var(--space-2); }
    .comparison-group .result-row { min-height: 2.125rem; font-size: var(--font-size-sm); }
    .disclosure-item summary { padding: 11px var(--space-3); font-size: var(--font-size-sm); }
    .disclosure-item p { padding: 0 var(--space-3) var(--space-3); font-size: var(--font-size-sm); }
    .construction-panel__body { min-height: 18.75rem; }
    .construction-panel__content h2 { font-size: var(--font-size-3xl); }
    .construction-panel__content p { font-size: var(--font-size-md); }
    .home-title-full,
    .home-intro-full,
    .tool-card__desc-full { display: none; }
    .home-title-mobile,
    .home-intro-mobile,
    .tool-card__desc-mobile { display: inline; }
    .home-intro-actions { margin-top: var(--space-3); }
    .home-intro-actions .primary-button,
    .home-intro-actions .ghost-button { flex: 1 1 10rem; justify-content: center; text-align: center; }
    .tool-groups { gap: var(--space-5); }
    .tool-section h2 { margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--line); color: var(--muted); font-size: var(--font-size-sm); letter-spacing: .08em; }
    .tool-section__header { margin-bottom: 10px; }
    .tool-scroll-controls { display: none; }
    .tool-section { min-width: 0; overflow: visible; }
    .tool-grid { display: grid; width: 100%; min-height: 0; gap: 0; padding: 0; overflow: visible; touch-action: auto; }
    .tool-card { position: relative; grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem; grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 2px; align-items: center; width: 100%; max-width: none; min-height: 4.25rem; padding: 11px 0; border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: 0; background: transparent; }
    .tool-card__icon { display: inline-grid; grid-column: 1; grid-row: 1 / span 2; place-items: center; width: var(--icon-lg); height: var(--icon-lg); color: var(--ink); }
    .tool-card__forward { display: inline-grid; grid-column: 3; grid-row: 1 / span 2; place-items: center; justify-self: end; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
    .tool-card h3 { grid-column: 2; grid-row: 1; padding: 0; border: 0; font-size: var(--font-size-md); line-height: 1.16; }
    .tool-card p { grid-column: 2; grid-row: 2; display: block; min-height: 0; padding: 0; border: 0; overflow: hidden; color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; text-overflow: ellipsis; }
    .tool-card__button { position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; text-indent: -999px; }
    .tool-card.is-locked { opacity: 1; }
    .mobile-bar { padding: var(--space-3); }
    .mobile-brand { font-size: var(--font-size-base); }
    [data-mobile-menu] { display: inline-grid; place-items: center; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    [data-mobile-menu] svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    .sidebar { gap: var(--space-4); padding: var(--space-4) var(--space-3); }
    .sidebar__brand { grid-template-columns: var(--control-lg) minmax(0, 1fr) var(--control-md); min-height: var(--control-md); gap: var(--space-2); }
    .sidebar__mark { width: var(--icon-xl); height: var(--icon-xl); }
    .sidebar__name { font-size: var(--font-size-base); }
    .sidebar__nav { gap: var(--space-2); }
    .nav-group { gap: var(--space-1); }
    .nav-group__title { min-height: var(--control-md); padding-inline: var(--space-2); font-size: var(--font-size-xs); }
    .nav-item { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-md); }
    .nav-item--child { min-height: var(--control-md); padding-left: var(--space-4); font-size: var(--font-size-sm); }
    .sidebar__site { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-sm); }
    .search-area, .search-box { width: 100%; }
    .search-box { min-height: 2.5rem; gap: var(--space-2); padding-inline: var(--space-3); }
    .search-box input { font-size: var(--font-size-base); }
    .search-box > span[data-icon] { width: var(--icon-md); height: var(--icon-md); flex-basis: var(--icon-md); }
    .search-box > span[data-icon] svg { width: var(--icon-md); height: var(--icon-md); }
    .form-grid, .form-grid--three { grid-template-columns: 1fr; }
    .modal-backdrop[data-auth-active="register"] .auth-modal { width: 100%; max-height: min(92vh, 51.25rem); overflow: auto; }
    .auth-form[data-auth-form="register"] .form-grid { grid-template-columns: 1fr; }
    .password-rules { grid-template-columns: 1fr; }
    .dynamic-row { grid-template-columns: 1fr; }
    .history-item { grid-template-columns: 1fr; }
    .chart-layout { grid-template-columns: 1fr; justify-items: center; }
    .chart-layout,
    .chart-stack,
    .line-chart { width: 100%; }
    .donut-chart { width: min(15.625rem, 78vw); min-width: 13.125rem; }
    .donut-chart__center strong { font-size: var(--font-size-md); }
    .line-chart svg,
    #fgtsLineChart svg { height: 18.75rem; min-height: 18.75rem; }
    .chart-table-wrap { margin-top: var(--space-5); border-radius: var(--radius-sm); scrollbar-width: thin; overscroll-behavior-inline: contain; }
    .chart-table { table-layout: auto; }
    .chart-table th,
    .chart-table td { padding: var(--space-2); font-size: var(--font-size-sm); }
    .chart-table th { font-size: var(--font-size-sm); letter-spacing: 0; }
    .chart-table td:nth-child(2),
    .chart-table td:nth-child(3) { white-space: normal; }
    .comparison-donut { grid-template-columns: 1fr; }
    .field-tip::after { left: auto; right: 0; max-width: min(15.625rem, calc(100vw - 3.75rem)); transform: none; }
    /* No celular a dica se ancora no rotulo inteiro: presa ao "?", ela vazava
       pela borda e alargava a pagina. */
    .form-grid > label { position: relative; }
    .form-grid > label .field-tip { position: static; }
    .form-grid > label .field-tip::after { left: 0; right: 0; width: auto; max-width: none; transform: none; }
    .goal-option { padding: var(--space-3); }
    .goal-option__field { max-width: none; }
    .cost-change { padding: var(--space-3); }
    .payroll-discount { padding: var(--space-3); }
    .contribution-plan { padding: var(--space-3); }
    /* Empilhado: com duas colunas o campo de valor esmagava o de meses. */
    .contribution-row { grid-template-columns: 1fr; }
    .contribution-row__info { align-self: start; padding-bottom: 0; white-space: normal; }
    .contribution-row__actions { align-self: start; justify-content: flex-end; padding-bottom: 0; }
    .cost-change__field { max-width: none; }
    .price-highlight { padding: 13px; }
    .metric-card strong { font-size: var(--font-size-lg); }
    .scenario-table td:nth-child(4) { white-space: normal; }
    .chart-details { width: 100%; }
    .result-row { grid-template-columns: 1fr auto; }
    .comparison-group .result-row { grid-template-columns: minmax(0, 1fr) auto; }
    .comparison-group .result-row.calculation-details__toggle { grid-template-columns: minmax(0, 1fr) auto auto; }
    /* Seta e nome na primeira linha; etiqueta e valor embaixo, alinhados ao nome. */
    .comparison-group__header,
    .comparison-subgroup summary { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .comparison-group__header > .comparison-toggle,
    .comparison-subgroup summary > .comparison-toggle { grid-column: 1; grid-row: 1; }
    .comparison-group__header > h3,
    .comparison-subgroup summary > h4 { grid-column: 2 / -1; grid-row: 1; }
    .comparison-group__header > .comparison-chip,
    .comparison-subgroup summary > .comparison-chip { grid-column: 2; grid-row: 2; justify-self: start; }
    .comparison-group__header > strong,
    .comparison-subgroup summary > strong { grid-column: 3; grid-row: 2; justify-self: end; }
    .result-row span:nth-child(2) { display: none; }
    .construction-panel__body { grid-template-columns: 1fr; text-align: center; }
}

/* =============================================================================
   CONTA E SEGURANCA (achados A1 e B10)

   As abas Conta e Seguranca eram placeholders "em construcao". Estes estilos
   sustentam os formularios que passaram a existir: dados cadastrais, troca de
   senha, encerramento de outras sessoes e exclusao de conta.
   ============================================================================= */
.account-form { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.account-form h4 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.account-form label { display: grid; gap: 6px; }
.account-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: var(--space-3); }
.account-form .field-error { min-height: 1.125rem; color: var(--danger); font-size: var(--font-size-sm); line-height: 1.3; }
.account-form .password-rules { margin: 0; }

/* Excluir conta (14/10/2026): modal na casca da Opinião (.feedback-modal),
   mais estreita, com o aviso em lista; o "sim" final é a confirmação danger. */
.account-delete-modal { width: min(32.5rem, 100%); }
.account-delete-modal__notice ul { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); list-style: disc; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.account-delete-modal__notice li { list-style: inherit; }
/* O rótulo do e-mail vem num <span> para não quebrar em três linhas no grid do
   label; o reset zera o peso de cada elemento, então ele repete o do rótulo. */
.account-delete-modal__label { font-weight: 600; }
.account-delete-modal__label strong { font-weight: 700; overflow-wrap: anywhere; }
/* Perigo tonal: tom da cor de perigo a 10 %, sem borda; o sólido fica só no diálogo de confirmação. */
.ghost-button:is(.is-danger, [data-tone="danger"]) { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: transparent; }
.ghost-button:is(.is-danger, [data-tone="danger"]):hover:not(:disabled) { color: var(--danger); background: color-mix(in srgb, var(--danger) 17%, var(--surface)); border-color: transparent; }

/* =============================================================================
   PAGINAS LEGAIS (achado B5)

   O cadastro pedia aceite de documentos que nao existiam. Estas sao as paginas
   de termos de uso e politica de privacidade.
   ============================================================================= */
.legal-page { max-width: 48rem; margin: 0 auto; padding: var(--space-5) 0 var(--space-6); }
.legal-page__header { padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink); }
.legal-page__eyebrow { margin: 0 0 var(--space-2); color: var(--muted); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.legal-page__header h1 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.legal-page__summary { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--font-size-lg); line-height: 1.5; }
.legal-page__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.legal-page__meta > div { display: grid; gap: 2px; }
.legal-page__meta dt { color: var(--muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .06em; }
.legal-page__meta dd { margin: 0; font-family: var(--font-sans); font-weight: 600; }
.legal-page__toc { margin: var(--space-5) 0; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.legal-page__toc ol { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); }
.legal-page__body { display: grid; gap: var(--space-5); }
.legal-page__body section { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--legal-header-height, var(--topbar-height)) + var(--space-5)); }
.legal-page__body h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1.25; scroll-margin-top: var(--space-5); }
.legal-page__body p { margin: 0; line-height: 1.7; }
.legal-page__body ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); line-height: 1.6; }
.legal-page__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--line); color: var(--muted); }
.legal-page__footer p { margin: 0 0 var(--space-2); }
.legal-page__crosslink { font-family: var(--font-sans); font-weight: 600; }

/* Convite ao produto correspondente ao perfil da calculadora aberta. Usa os
   mesmos tokens dos cartoes de ferramenta para nao introduzir uma linguagem
   visual nova em 17 paginas de uma vez. */
.next-step { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-top: var(--space-5); padding: 20px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.next-step__body { display: grid; gap: 6px; flex: 1 1 20rem; }
.next-step__title { margin: 0; font-size: 1.05rem; }
.next-step__text { margin: 0; color: var(--muted); line-height: 1.6; }
.next-step__action { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 14px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.next-step__action:hover { transform: translateY(-1px); }

/* Botão de ícone é quadrado e de largura fixa (02/10/2026). As regras de
   densidade do celular, do tablet e do notebook dão respiro lateral aos botões
   de texto e, como incluíam .icon-button, empurravam o ícone 7 px para a
   direita (o olho dos Recibos, o + e − do Caixa). Fica por último para vencer
   essas regras pela ordem; ajustes mais específicos continuam valendo. */
.icon-button { padding-inline: 0; }

/* =============================================================================
   MODAL DE AUTENTICACAO EM PAINEL DIVIDIDO (03/10/2026)

   templates/includes/auth_modal.html + static/js/sosomar/auth-modal.js.
   A esquerda, o contexto (o que a pessoa tentava abrir, textos de
   user/auth_contexts.py); a direita, as abas Entrar / Criar conta e as etapas.

   Padrao das modais da plataforma: centralizada no desktop, folha inferior no
   celular (ate 47.5rem), veu de sempre com o desfoque leve das Configuracoes,
   clique fora NAO fecha.

   TAMANHO UNICO: a caixa tem a mesma largura e altura em todas as etapas
   (login, cadastro, codigos, senha nova, sucesso). A altura e a do cadastro, a
   etapa mais longa, medida no navegador (03/10/2026, 1440x900: cadastro com
   789px de conteudo com as regras da senha em lista -> 49.5rem); quem rola quando a tela e baixa e so o corpo da
   direita (.auth-split__body), nunca a caixa. Mudou o cadastro? Medir de novo.

   .auth-modal e reaproveitada por outras modais (feedback, Acesso restrito,
   OA). Tudo aqui fica preso a .auth-split, e os seletores tem especificidade
   para vencer as regras antigas da modal de autenticacao (largura de 57.5rem
   no cadastro, padding-top do X no celular) sem tocar nelas.
   ============================================================================= */
/* Altura unica medida para o cadastro caber inteiro: 49.5rem ate 12/10/2026;
   52rem desde 13/10, quando o "Para quem e a conta?" entrou (37px a mais). */
.modal-backdrop.auth-backdrop { --auth-split-width: 56rem; --auth-split-height: 52rem; --auth-split-aside: 17.5rem; }
.modal-backdrop.auth-backdrop:not([hidden]) { animation: authBackdropIn var(--motion-normal) ease both; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-backdrop.auth-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
.modal-backdrop.auth-backdrop .auth-modal.auth-split { display: grid; grid-template-columns: var(--auth-split-aside) minmax(0, 1fr); width: min(var(--auth-split-width), 100%); height: min(var(--auth-split-height), calc(100dvh - 2.25rem)); min-height: 0; max-height: none; padding: 0; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); animation: modalEnter var(--motion-normal) ease both; }
.modal-backdrop.auth-backdrop.is-closing { animation: authBackdropOut 180ms ease both; }
.modal-backdrop.auth-backdrop.is-closing .auth-modal.auth-split { animation: authDialogOut 180ms ease both; }
.auth-split .auth-modal__close { z-index: 2; top: var(--space-4); right: var(--space-4); }

/* Painel de contexto */
.auth-split__context { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; padding: var(--space-6) var(--space-5); border-right: var(--border-width) solid var(--line); background: var(--surface-muted); overflow: hidden; }
.auth-split__context .auth-modal__logo { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
.auth-split__context-body { display: grid; gap: var(--space-2); align-content: start; }
.auth-split__context-body.is-entering { animation: authContextIn var(--motion-slow) ease both; }
.auth-split__kicker { margin: 0; color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.auth-split__title { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1.25; }
.auth-split__lead { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.5; }
.auth-split__benefits { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.auth-split__benefits[hidden] { display: none; }
.auth-split__benefits li { display: grid; grid-template-columns: var(--icon-sm) minmax(0, 1fr); gap: var(--space-2); align-items: start; color: var(--ink); font-size: var(--font-size-md); line-height: 1.4; }
.auth-split__benefits [data-icon] { width: var(--icon-sm); height: var(--icon-sm); margin-top: 0.125rem; color: var(--success); }
.auth-split__benefits [data-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.auth-split__trust { display: flex; gap: var(--space-2); align-items: center; margin: auto 0 0; color: var(--muted); font-size: var(--font-size-xs); line-height: 1.4; }
.auth-split__trust [data-icon] { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); }
.auth-split__trust [data-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }

/* Coluna do formulario: cabecalho fixo e corpo que rola */
.auth-split__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--space-5) var(--space-6) 0; }
.auth-split__switch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; width: min(18rem, calc(100% - var(--control-sm) - var(--space-4))); margin-bottom: var(--space-3); padding: 0.1875rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-muted); }
.auth-split__switch::before { content: ""; position: absolute; top: 0.1875rem; bottom: 0.1875rem; left: 0.1875rem; width: calc(50% - 0.1875rem); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--motion-normal) ease; }
[data-auth-active="register"] .auth-split__switch::before { transform: translateX(100%); }
.auth-split__switch button { position: relative; z-index: 1; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--muted); background: transparent; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); transition: color var(--motion-normal) ease; }
.auth-split__switch button[aria-selected="true"] { color: var(--ink); }
.auth-split__switch button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.modal-backdrop.auth-backdrop:not([data-auth-active="login"]):not([data-auth-active="register"]) .auth-split__switch { display: none; }
.auth-split .auth-modal__header { display: block; flex: 0 0 auto; margin: 0 0 var(--space-2); padding: 0; }
.modal-backdrop.auth-backdrop:not([data-auth-active="login"]):not([data-auth-active="register"]) .auth-split .auth-modal__header { padding-right: calc(var(--control-sm) + var(--space-4)); }
.auth-split .auth-modal__header h2 { font-size: var(--font-size-xl); line-height: 1.25; }
.auth-split .auth-modal__header p { margin-top: var(--space-1); font-size: var(--font-size-md); line-height: 1.45; }
.auth-split .auth-message { flex: 0 0 auto; margin: 0 0 var(--space-1); font-size: var(--font-size-md); }
/* Sem mensagem, sem espaco (13/10/2026): os 22px reservados empurravam o
   "Criar conta" para baixo da dobra. Continua no DOM como regiao aria-live. */
.auth-split .auth-message:empty { min-height: 0; margin: 0; }
.auth-split__body { --auth-fade: 1.5rem; flex: 1 1 auto; min-height: 0; margin: 0 calc(var(--space-1) * -1); padding: var(--space-1) var(--space-1) var(--space-5); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-padding-block: var(--auth-fade); }
/* Rolagem sem barra aparente (12/10/2026, pedido do Mike): o corpo continua
   rolando com roda, toque e Tab, so a barra some (mesmo recurso das faixas de
   abas). auth-modal.js marca data-scroll-more (down, up, both). Em cima, o
   que ficou para tras esmaece; embaixo, desde 13/10, quem avisa que ha mais
   e o rodape fixo do cadastro (.auth-split__actions), que nao pode esmaecer.
   O scroll-padding tira o campo focado de baixo do esmaecido. */
.auth-split__body::-webkit-scrollbar { display: none; }
.auth-split__body:is([data-scroll-more="up"], [data-scroll-more="both"]) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--auth-fade)); mask-image: linear-gradient(to bottom, transparent, #000 var(--auth-fade)); }

/* Etapas: avancar entra pela direita, voltar pela esquerda */
.auth-split .auth-form { gap: var(--space-3); }
.auth-split .auth-form.is-active { animation: authStepForward var(--motion-normal) ease both; }
.auth-split[data-auth-direction="back"] .auth-form.is-active { animation-name: authStepBack; }
.auth-split .auth-form > label:not(.checkbox-field):not(.auth-code-field) { gap: 6px; }
.auth-split .auth-form[data-auth-form="register"] { gap: var(--space-3); }
.auth-split .auth-form[data-auth-form="register"] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
/* Compactacao do cadastro para caber na altura unica: a linha do erro continua
   reservada (o campo nao pula quando a mensagem aparece), so um pouco menor; o
   erro vazio do aceite dos termos nao ocupa espaco; as regras da senha cabem
   numa linha. */
.auth-split .auth-form .form-grid > label:not(.checkbox-field) { gap: var(--space-1); grid-template-rows: auto auto minmax(1.125rem, auto); }
.auth-split .checkbox-field .field-error:empty { display: none; }
/* A altura minima dos campos do cadastro (control-md) pegava tambem a caixa
   do aceite, que crescia para 64px com o texto numa linha so. */
.auth-split .auth-form .checkbox-field input { min-height: var(--icon-sm); height: var(--icon-sm); }
/* Regras da senha (03/10/2026, referencia enviada pelo Mike): lista de checks
   que acendem conforme a senha cumpre cada regra. Enquanto digita, nada fica
   vermelho; .is-invalid (saiu do campo ou tentou enviar) pinta so o que falta.
   Apenas tokens de tema - o quadro segue claro, escuro, vintage e os
   personalizados sem cor fixa. */
.auth-split .password-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3); }
.auth-split .password-rule { gap: var(--space-2); color: var(--muted); font-size: var(--font-size-md); transition: color var(--motion-normal) ease; }
.auth-split .password-rule [data-rule-icon] { width: var(--icon-md); height: var(--icon-md); flex-basis: var(--icon-md); color: color-mix(in srgb, var(--muted) 45%, transparent); transition: color var(--motion-normal) ease; }
.auth-split .password-rule [data-rule-icon] svg { width: var(--icon-md); height: var(--icon-md); }
.auth-split .password-rule.is-met { color: var(--ink); }
/* O verde do tema escuro (#157a56) some no fundo escuro; misturar com --ink
   clareia no escuro e escurece no claro, sem cor fixa por tema. */
.auth-split .password-rule.is-met [data-rule-icon] { color: color-mix(in srgb, var(--success) 78%, var(--ink)); animation: authRulePop var(--motion-slow) ease both; }
.auth-split .password-rules.is-invalid .password-rule:not(.is-met),
.auth-split .password-rules.is-invalid .password-rule:not(.is-met) [data-rule-icon] { color: var(--danger); }
/* Conta PJ (12/10/2026): "Para quem e a conta?" no mesmo desenho de pilula das
   abas Entrar/Criar conta; o bloco da empresa fica acima dos dados da pessoa.
   O radio cobre a opcao inteira (invisivel), entao clique, teclado e leitor de
   tela seguem os do proprio input. */
.auth-account-kind { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.auth-account-kind legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }
.auth-account-kind__options { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.1875rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-muted); }
.auth-account-kind__options label { position: relative; display: grid; place-items: center; min-width: 0; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--font-size-md); text-align: center; cursor: pointer; transition: color var(--motion-normal) ease, background-color var(--motion-normal) ease, box-shadow var(--motion-normal) ease; }
.auth-account-kind__options input { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.auth-account-kind__options label:has(input:checked) { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.auth-account-kind__options label:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.auth-company { display: grid; gap: var(--space-2); min-width: 0; }
.auth-company[hidden] { display: none; }
.auth-company__title { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-md); }
.auth-split .auth-company .form-grid > .auth-company__wide { grid-column: 1 / -1; }
.auth-company__status { margin: calc(-1 * var(--space-1)) 0 var(--space-1); }
.auth-company__status:empty { display: none; }
.auth-split .auth-code-grid input { height: 3.5rem; }
.auth-split__submit { width: 100%; min-height: var(--control-lg); }
/* Rodape de acao do cadastro (13/10/2026): em notebook o "Criar conta" ficava
   abaixo da dobra. Aceite e botao continuam empilhados como no desenho
   aprovado, mas grudam no pe da caixa enquanto houver campos para rolar; so
   entao ganham o respiro de cima e a linha divisoria. Quando tudo cabe, a
   tela fica identica a antes (o respiro de baixo, que era do corpo, passa a
   ser do rodape). O layout em 3 colunas tentado no mesmo dia foi reprovado. */
.auth-split__actions { position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--space-3); margin: 0 calc(var(--space-1) * -1); padding: 0 var(--space-1) var(--space-5); border-top: var(--border-width) solid transparent; background: var(--surface); }
.auth-split__body:is([data-scroll-more="down"], [data-scroll-more="both"]) .auth-split__actions { padding-top: var(--space-3); border-top-color: var(--line); box-shadow: 0 -0.75rem 1.25rem -1rem color-mix(in srgb, var(--ink) 40%, transparent); }
.modal-backdrop.auth-backdrop[data-auth-active="register"] .auth-split__body { padding-bottom: 0; scroll-padding-bottom: calc(var(--auth-fade) + 6rem); }
.auth-split .auth-links { align-items: center; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }
.auth-split .auth-links button { min-height: var(--control-sm); }
.auth-split .auth-links button:disabled { color: var(--muted); }
.auth-split .auth-links--end { justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); }
.auth-split__alt { margin: 0; color: var(--muted); font-size: var(--font-size-md); text-align: center; }
.auth-split__alt .auth-links { display: inline-flex; }

/* Sucesso do cadastro, dentro da mesma caixa */
.auth-split.is-success .auth-split__switch,
.auth-split.is-success .auth-modal__header,
.auth-split.is-success .auth-message,
.auth-split.is-success .auth-form.is-active { display: none; }
.auth-split__success { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 100%; text-align: center; animation: modalEnter var(--motion-normal) ease both; }
.auth-split__success[hidden] { display: none; }
.auth-split__success .feedback-success-icon { margin: 0 0 var(--space-2); }
.auth-split__success.is-drawn .feedback-success-icon svg path { animation: checkedDraw 700ms ease forwards, checkedFill var(--motion-fast) ease 700ms forwards; }
.auth-split__success h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.auth-split__success p { margin: 0; color: var(--muted); line-height: 1.45; }
.auth-split__progress { display: block; width: min(12rem, 100%); height: 0.25rem; margin: var(--space-2) 0; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.auth-split__progress > span { display: block; height: 100%; border-radius: inherit; background: var(--success); transform-origin: left center; }
.auth-split__success:not([hidden]) .auth-split__progress > span { animation: authProgress 2600ms linear both; }
.auth-split__success .auth-split__submit { width: min(16rem, 100%); }

/* Ative seu WhatsApp (14/10/2026): etapa entre a confirmacao do e-mail e o
   "Conta criada". Tres passos numerados ligados por uma linha, um so em
   destaque por vez (is-current) e os cumpridos com check (is-done); a acao
   principal fica no mesmo rodape preso ao pe da caixa do cadastro. */
.modal-backdrop.auth-backdrop[data-auth-active="register-whatsapp"] .auth-split__body { padding-bottom: 0; scroll-padding-bottom: calc(var(--auth-fade) + 8rem); }
.auth-whatsapp__done { display: flex; gap: var(--space-2); align-items: center; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: color-mix(in srgb, var(--success) 78%, var(--ink)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); line-height: 1.4; }
.auth-whatsapp__done [data-icon] { display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); }
.auth-whatsapp__done svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.auth-whatsapp__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.auth-whatsapp__step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-5); }
.auth-whatsapp__step:last-child { padding-bottom: 0; }
.auth-whatsapp__step:not(:last-child)::before { content: ""; position: absolute; top: 2.375rem; bottom: var(--space-1); left: calc(1rem - 1px); width: 2px; border-radius: var(--radius-pill); background: var(--line); }
.auth-whatsapp__step.is-done:not(:last-child)::before { background: color-mix(in srgb, var(--success) 55%, var(--line)); }
.auth-whatsapp__index { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-md); transition: color var(--motion-normal) ease, border-color var(--motion-normal) ease, background-color var(--motion-normal) ease; }
.auth-whatsapp__index > [data-icon] { display: none; width: var(--icon-sm); height: var(--icon-sm); }
.auth-whatsapp__index svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.auth-whatsapp__step.is-current .auth-whatsapp__index { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.auth-whatsapp__step.is-done .auth-whatsapp__index { border-color: transparent; color: color-mix(in srgb, var(--success) 78%, var(--ink)); background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
.auth-whatsapp__step.is-done .auth-whatsapp__index > span:first-child { display: none; }
.auth-whatsapp__step.is-done .auth-whatsapp__index > [data-icon] { display: inline-grid; place-items: center; }
.auth-whatsapp__content { display: grid; gap: var(--space-2); min-width: 0; padding-top: 0.3125rem; }
.auth-whatsapp__label { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-md); line-height: 1.35; }
.auth-whatsapp__step:not(.is-current):not(.is-done) .auth-whatsapp__label { color: var(--muted); }
.auth-whatsapp__text { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.5; }
.auth-whatsapp__number { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.auth-whatsapp__number-text { display: grid; gap: 2px; min-width: 0; }
.auth-whatsapp__number-text strong { color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); line-height: 1.3; overflow-wrap: anywhere; }
.auth-whatsapp__number-text small { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.auth-split .auth-whatsapp__change { justify-content: flex-start; margin-top: calc(-1 * var(--space-1)); }
.auth-whatsapp__editor { display: grid; gap: var(--space-2); }
.auth-whatsapp__editor .form-hint { margin: 0; }
.auth-whatsapp__editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.auth-whatsapp__editor-step { display: grid; gap: var(--space-2); }
.auth-whatsapp__editor-step[hidden] { display: none; }
.auth-whatsapp__editor input[name="whatsapp_code"] { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.auth-whatsapp__bubble { padding-top: 0; border-top: 0; }
.auth-whatsapp__wait { display: flex; gap: var(--space-2); align-items: center; margin: 0; color: var(--ink); font-size: var(--font-size-sm); font-weight: 600; }
.auth-whatsapp__pulse { width: 0.625rem; height: 0.625rem; flex: 0 0 auto; border-radius: 50%; background: var(--success); animation: authWaPulse 1.6s ease-in-out infinite; }
.auth-whatsapp__connected { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; text-align: center; animation: modalEnter var(--motion-normal) ease both; }
.auth-whatsapp__connected .feedback-success-icon { margin: 0 0 var(--space-1); }
.auth-whatsapp__connected.is-drawn .feedback-success-icon svg path { animation: checkedDraw 700ms ease forwards, checkedFill var(--motion-fast) ease 700ms forwards; }
.auth-whatsapp__connected h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.auth-whatsapp__connected > p:not(.wa-guide__example) { margin: 0; color: var(--muted); line-height: 1.45; }
.auth-whatsapp__connected .wa-guide__example { justify-items: center; }
.auth-split .auth-whatsapp__links { justify-content: center; gap: var(--space-5); }
.auth-whatsapp__later { margin: calc(-1 * var(--space-2)) 0 0; text-align: center; }

@keyframes authBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes authDialogOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes authSheetOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes authStepForward { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes authStepBack { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes authContextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes authRulePop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes authWaPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Tablet: painel de contexto mais estreito para o cadastro caber na mesma altura
   do desktop (medido em 768x1024: 781px de conteudo, cabe nos 49.5rem). */
@media (min-width: 47.5625rem) and (max-width: 61.25rem) {
    .modal-backdrop.auth-backdrop { --auth-split-aside: 14.5rem; }
    .auth-split__context { padding-inline: var(--space-4); }
    .auth-split__main { padding-inline: var(--space-5); }
}

/* Celular: folha inferior de altura unica, contexto resumido no topo */
@media (max-width: 47.5rem) {
    .modal-backdrop.auth-backdrop { place-items: end stretch; padding: 0; }
    .modal-backdrop.auth-backdrop .auth-modal.auth-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: min(92dvh, 46rem); padding: 0 0 env(safe-area-inset-bottom, 0px); border-width: var(--border-width) 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: accountSheetIn var(--motion-normal) ease both; }
    .modal-backdrop.auth-backdrop.is-closing .auth-modal.auth-split { animation: authSheetOut 180ms ease both; }
    .auth-split::before { content: ""; position: absolute; top: var(--space-2); left: 50%; z-index: 2; width: 2.25rem; height: 0.25rem; margin-left: -1.125rem; border-radius: var(--radius-pill); background: var(--line); }
    .auth-split .auth-modal__close { top: var(--space-4); right: var(--space-3); }
    .auth-split__context { flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) calc(var(--control-sm) + var(--space-4)) var(--space-3) var(--space-4); border-right: 0; border-bottom: var(--border-width) solid var(--line); }
    .auth-split__context .auth-modal__logo { width: 2rem; height: 2rem; }
    .auth-split__context-body { gap: var(--space-1); }
    .auth-split__title { font-size: var(--font-size-base); }
    .auth-split__lead { display: -webkit-box; overflow: hidden; font-size: var(--font-size-sm); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .auth-split__benefits,
    .auth-split__trust { display: none; }
    .auth-split__main { padding: var(--space-4) var(--space-4) 0; }
    .auth-split__switch { width: 100%; }
    .modal-backdrop.auth-backdrop:not([data-auth-active="login"]):not([data-auth-active="register"]) .auth-split .auth-modal__header { padding-right: 0; }
    .auth-split .auth-form[data-auth-form="register"] .form-grid { grid-template-columns: minmax(0, 1fr); }
    .auth-split .password-rules { grid-template-columns: minmax(0, 1fr); }
    .auth-split .auth-code-grid input { height: var(--control-lg); }
    .auth-split__body { padding-bottom: var(--space-5); }
    .modal-backdrop.auth-backdrop[data-auth-active="register"] .auth-split__body { scroll-padding-bottom: calc(var(--auth-fade) + 9.5rem); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.auth-backdrop:not([hidden]),
    .modal-backdrop.auth-backdrop .auth-modal.auth-split,
    .auth-split .auth-form.is-active,
    .auth-split__context-body.is-entering,
    .auth-split .password-rule.is-met [data-rule-icon],
    .auth-split__success,
    .auth-split__success:not([hidden]) .auth-split__progress > span,
    .auth-whatsapp__pulse,
    .auth-whatsapp__connected { animation: none; }
    .auth-split__switch::before,
    .auth-split__switch button,
    .auth-account-kind__options label,
    .auth-split .password-rule,
    .auth-split .password-rule [data-rule-icon],
    .auth-whatsapp__index { transition: none; }
}

/* =============================================================================
   MOVIMENTO DE MODAIS E ABAS (04/10/2026)

   Modais. Entram e saem por transicao, nao por animacao, e a diferenca aparece
   no carregamento: html.is-theme-bootstrapping (base.html) zera transicoes e
   animacoes ate a pagina terminar de montar, e uma animacao aplicada a algo ja
   visivel recomeca quando a trava sai - a modal aberta pelo endereco
   (#configuracoes/...) pintava pronta e, ~100 ms depois, sumia e entrava de
   novo. Transicao nao recomeca: so anda quando um valor muda depois que ela
   existe.

   Os scripts continuam so alternando [hidden]. A entrada vem de
   @starting-style (o estilo do primeiro quadro em que a modal aparece) e a
   saida da propria regra [hidden]: transition-behavior: allow-discrete segura o
   display ate o veu sumir. O [hidden] { display: none !important } global nao
   impede, porque a transicao fica acima de !important na cascata. Navegador
   sem suporte abre e fecha na hora, como antes. Quem esmaece e o veu, com a
   caixa junto; a caixa so desliza.

   Ficam de fora as modais que ja tem saida propria em JS: a de autenticacao
   (.auth-backdrop, is-closing), a memoria de calculo do Analista e a tela de
   verificacao de navegacao, que nasce aberta em documento proprio.
   ============================================================================= */
.modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]) {
    --modal-from: translateY(0.625rem) scale(.98);
    transition: opacity var(--motion-normal) cubic-bezier(.2, .8, .2, 1), display var(--motion-normal) allow-discrete;
}
.modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]) > :is(.auth-modal, .settings-modal, .confirm-dialog, .unsaved-theme-modal) {
    transition: transform var(--motion-normal) cubic-bezier(.2, .8, .2, 1);
}
/* Saida mais curta e acelerando; o clique ja atravessa o veu que some. */
.modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay])[hidden] {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--motion-fast);
    transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}
.modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay])[hidden] > :is(.auth-modal, .settings-modal, .confirm-dialog, .unsaved-theme-modal) {
    transform: var(--modal-from);
    transition-duration: var(--motion-fast);
    transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}
@starting-style {
    .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]):not([hidden]) { opacity: 0; }
    .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]):not([hidden]) > :is(.auth-modal, .settings-modal, .confirm-dialog, .unsaved-theme-modal) { transform: var(--modal-from); }
}
@media (max-width: 47.5rem) {
    /* Folha inferior e tela cheia sobem da borda de baixo, como o menu da conta. */
    .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]) { --modal-from: translateY(1.5rem); }
}

/* Abas dentro da pagina. motion.js marca o painel que entra com
   data-tab-entering so quando a troca vem de toque ou tecla; no carregamento
   nada e marcado e o painel aparece pronto. No desktop o painel chega pelo lado
   da aba escolhida; no celular sobe um pouco, porque um deslize lateral passaria
   da borda e alargaria a tela por um instante (e o arrastar do dedo ja tem a
   propria animacao, tab-swipe.js). */
[data-tab-entering] { animation: tabPanelIn var(--motion-normal) cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 47.5625rem) {
    [data-tab-entering="next"] { animation-name: tabPanelNext; }
    [data-tab-entering="prev"] { animation-name: tabPanelPrev; }
}
@keyframes tabPanelIn { from { opacity: 0; transform: translateY(var(--space-2)); } }
@keyframes tabPanelNext { from { opacity: 0; transform: translateX(var(--space-4)); } }
@keyframes tabPanelPrev { from { opacity: 0; transform: translateX(calc(-1 * var(--space-4))); } }

/* Abas que trocam de pagina (barra do Orcamentos Autonomos, subabas, menu
   lateral). O navegador guarda a tela atual e dissolve para a nova assim que
   ela pode ser desenhada - que ja espera o fim do conteudo principal
   (rel="expect" no base.html). Na dissolucao padrao o que e igual nas duas
   telas (menu, cabecalho, barra de abas) fica parado e so o conteudo troca.
   Navegador sem suporte troca na hora, como antes; voltar/avancar nao dissolve
   (motion.js), para nao somar ao gesto de voltar do celular. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--motion-normal); }

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]),
    .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, [data-navigation-overlay]) > :is(.auth-modal, .settings-modal, .confirm-dialog, .unsaved-theme-modal) { transition: none; }
    [data-tab-entering] { animation: none; }
}

/* =============================================================================
   PADRÃO VISUAL DAS MODAIS (09/10/2026)

   Desfoque: toda modal tem o véu com a página levemente desfocada atrás
   ("leve transparência abaixo"). A do Analista também, e só enquanto aparece:
   escondida, a modal sai do desenho e o filtro junto.

   Celular: até 47.5rem a modal vira folha inferior - presa embaixo, de borda a
   borda, cantos arredondados só em cima e no máximo 92dvh - como as do OA. O
   :root dá à regra peso para vencer as larguras próprias de cada módulo
   (calc(100vw - 2.25rem) etc.). Ficam de fora: Configurações (tela cheia), a
   autenticação (folha própria), o Analista (comportamento próprio), os avisos de
   sucesso, que somem sozinhos, e a verificação de navegação.
   ============================================================================= */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-backdrop:not([data-navigation-overlay]) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
@media (max-width: 47.5rem) {
    :root .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, .settings-backdrop, .is-success, [data-navigation-overlay]) { place-content: stretch; place-items: end stretch; padding: 0; overflow: hidden; }
    :root .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, .settings-backdrop, .is-success, [data-navigation-overlay]) > :is(.auth-modal, .confirm-dialog, .unsaved-theme-modal) { width: 100%; max-width: 100%; max-height: 92dvh; margin: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    :root .modal-backdrop:not(.auth-backdrop, .analista-modal-backdrop, .settings-backdrop, .is-success, [data-navigation-overlay]) > :is(.confirm-dialog, .unsaved-theme-modal) { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
}
/* X da "não salvas" (09/10/2026): o título não passa por baixo dele. */
.unsaved-theme-modal > h2 { padding-right: calc(var(--control-sm) + var(--space-2)); }

/* =============================================================================
   TABELA PADRÃO DA PLATAFORMA (10/10/2026) — modelo da aba Ord. Serviço

   O Mike escolheu a tabela das Ordens de serviço (operations/orders.css) como o
   modelo de todas as ferramentas. Aqui ficam só as decisões que a definem; cada
   família continua dona do resto (larguras de coluna, valores à direita, a
   coluna fixa do Simulador, as cores da situação):

   Desktop: sem moldura em volta da tabela, texto em tamanho pequeno, cabeçalho
   ainda menor e sem caixa alta, células com o mesmo respiro, nota (small) em
   linha própria e tom de apoio, link do registro na cor de destaque e linhas
   alternadas.

   Celular (até 47.5rem, ou caixa da tabela com menos de 40rem nas telas que a
   declaram como contêiner): tabela não é tabela. Cada linha vira um registro em
   duas colunas, a primeira célula ocupa a linha inteira e as demais levam o nome
   da coluna em cima (data-label, preenchido por table-labels.js a partir do
   cabeçalho quando o template não traz). É a regra do Mike para o celular: a
   largura não comporta colunas; o formato antigo de cartões do OA saiu.

   Ficam de fora: a grade da Agenda técnica, o DRE do Simulador (matriz de meses
   lido na horizontal, com coluna fixa) e a comparação de planos. Filtro dentro
   do cabeçalho (Feedbacks na Gestão) continua no cabeçalho; no celular o
   cabeçalho vira uma barra só com os filtros, acima dos registros.

   As famílias entram por :is() e herdam o peso do seletor mais forte da lista,
   o que basta para vencer as regras-base de cada arquivo sem !important.
   ============================================================================= */

/* --- Desktop -------------------------------------------------------------- */
:root :is(.oa-crm .oa-table-wrap, .control-report-table-wrap, .business-table-wrap, .chart-table-wrap, .tax-calculator .table-scroll) {
    border: 0;
    border-radius: 0;
}
:root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table, .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) {
    font-size: var(--font-size-sm);
}
:root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table, .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > thead th {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
:root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) :is(th, td) {
    padding: var(--space-3) var(--space-2);
}
:root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table, .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) td small {
    display: block;
    margin-top: var(--space-1);
    color: var(--muted);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    white-space: normal;
}
/* Link do registro, como o número da OS e o do pedido: destaque, não botão. */
:root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table, .admin-table, .chart-table, .comparator-table, .beta-components) td > a:not([class*="button"], .oa-badge) {
    color: var(--accent-2);
    font-weight: 600;
}
/* Linhas alternadas nas famílias que não tinham (OA e Eu no Controle já têm,
   com o ajuste próprio do escuro). Linha marcada ou de resumo mantém a cor dela. */
:root :is(.business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .beta-components, .tax-calculator .table-scroll > table) {
    --table-row-alt: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
}
:root:is(.theme-dark, .theme-dark-black) :is(.business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .beta-components, .tax-calculator .table-scroll > table) {
    --table-row-alt: var(--surface-muted);
}
@media (min-width: 47.5625rem) {
    :root :is(.business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .beta-components, .tax-calculator .table-scroll > table) > tbody > tr:nth-child(even):not(.is-selected, .is-informational, .is-result, .is-group) > td {
        background: var(--table-row-alt);
    }
}

/* --- Celular: registro em duas colunas ------------------------------------ */
@media (max-width: 47.5rem) {
    :root :is(.oa-crm .oa-table-wrap, .control-report-table-wrap, .business-table-wrap:not(.business-table-wrap--dre), .chart-table-wrap, .admin-table-scroll, .tax-calculator .table-scroll):has(> table) { overflow: visible; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table),
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > :is(tbody, tfoot) { display: block; width: 100%; min-width: 0; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > thead { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) 0; border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: 0; background: transparent; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > :is(tbody, tfoot) > tr > :is(td, th) { position: static; display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; background: transparent; text-align: left; white-space: normal; overflow-wrap: anywhere; box-shadow: none; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > :is(tbody, tfoot) > tr > :is(td, th):is(:first-child, [colspan]) { grid-column: 1 / -1; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table, .business-table:not(.business-table--dre), .admin-table, .chart-table, .comparator-table, .comparator-decision-table, .beta-components, .tax-calculator .table-scroll > table) > :is(tbody, tfoot) > tr > :is(td, th)[data-label]:not([colspan], [data-cell="title"]):not(tr:not(:has(> [data-cell="title"])) > :first-child)::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-size-xs); font-weight: 400; }
    /* Linha com célula de título marcada (data-cell="title", OA e Eu no Controle):
       ela abre o registro na linha inteira, e a primeira coluna vira campo comum. */
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > :is(tbody, tfoot) > tr:has(> [data-cell="title"]) > :is(td, th):first-child:not([data-cell="title"], [colspan]) { grid-column: auto; }
    :root :is(.oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > :is(tbody, tfoot) > tr > [data-cell="title"] { grid-column: 1 / -1; order: -1; }
    /* Filtro no cabeçalho continua visível: o cabeçalho vira a barra de filtros. */
    :root :is(.admin-table, .oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > thead:has(th :is(select, input)) { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
    :root :is(.admin-table, .oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > thead:has(th :is(select, input)) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: 0 0 var(--space-3); border-bottom: var(--border-width) solid var(--line); background: transparent; }
    :root :is(.admin-table, .oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > thead:has(th :is(select, input)) > tr > th { display: grid; gap: var(--space-1); min-width: 0; padding: 0; border: 0; background: transparent; white-space: normal; }
    :root :is(.admin-table, .oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > thead:has(th :is(select, input)) > tr > th:not(:has(select, input)) { display: none; }
    :root :is(.admin-table, .oa-crm .oa-table:not([data-agenda-grid]), .control-report-table) > thead:has(th :is(select, input)) > tr > th :is(.admin-column-filter, .admin-column-filter--wide) { min-width: 0; width: 100%; }
    /* Na Gestão a tabela fica dentro do cartão: o registro e a barra de filtros
       ganham o respiro dele. O :not(.oa-table) empata a especificidade com as
       regras gerais acima (que zeram o padding lateral) e vence por vir depois;
       sem isso o registro encostava na borda do cartão (10/10/2026). */
    :root .admin-table-card .admin-table:not(.oa-table) > :is(tbody, tfoot) > tr { padding-inline: var(--space-4); }
    :root .admin-table-card .admin-table:not(.oa-table) > thead:has(th :is(select, input)) > tr { padding: var(--space-3) var(--space-4); }
}
/* Mesma troca quando a caixa da tabela é estreita (painel lateral, notebook com
   a barra aberta) nas telas que declaram a caixa como contêiner. No Simulador
   isso evita a rolagem lateral de 1024 px, onde a caixa tem 611 px e a tabela
   pede 680 px de largura mínima. */
@container (max-width: 40rem) {
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) { overflow: visible; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table,
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) { display: block; width: 100%; min-width: 0; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > thead { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) 0; border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: 0; background: transparent; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr > :is(td, th) { position: static; display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; background: transparent; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr > :is(td, th):is(:first-child, [colspan]) { grid-column: 1 / -1; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr > :is(td, th)[data-label]:not([colspan], [data-cell="title"]):not(tr:not(:has(> [data-cell="title"])) > :first-child)::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-size-xs); font-weight: 400; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr:has(> [data-cell="title"]) > :is(td, th):first-child:not([data-cell="title"], [colspan]) { grid-column: auto; }
    :root :is(.oa-crm .oa-table-wrap[data-table-cards], .control-report-table-wrap[data-table-cards], .business-table-wrap[data-table-cards]) > table > :is(tbody, tfoot) > tr > [data-cell="title"] { grid-column: 1 / -1; order: -1; }
}

/* =============================================================================
   Tabelas do Simulador Empresarial (mesma variação fluida das calculadoras).

   A regra unificada deixa a tabela em 13 px, bom para a grade densa do OA e do
   backoffice. No Simulador a tabela mora num painel largo com seis colunas
   curtas: em 919 px o texto ficava miúdo. Aqui fonte e espaçamento acompanham
   a largura da própria caixa (cqi), presos aos tokens — com mais corpo, o
   conteúdo ocupa a largura e a distribuição proporcional da tabela deixa de
   parecer vazia. A DRE fica de fora: ela tem a lista por competência no
   celular e colunas fixas no desktop.
   ============================================================================= */
@media (min-width: 47.5625rem) {
    :root [data-business-simulator] .business-table-wrap:not(.business-table-wrap--dre) {
        container-type: inline-size;
    }
    :root [data-business-simulator] .business-table:not(.business-table--dre) {
        font-size: clamp(var(--font-size-sm), 0.35rem + 1cqi, var(--font-size-base));
    }
    :root [data-business-simulator] .business-table:not(.business-table--dre) > thead th {
        font-size: clamp(var(--font-size-xs), 0.3rem + 0.85cqi, var(--font-size-md));
    }
    :root [data-business-simulator] .business-table:not(.business-table--dre) :is(th, td) {
        padding: clamp(var(--space-2), 0.45rem + 0.6cqi, var(--space-4)) clamp(var(--space-2), 0.35rem + 0.7cqi, var(--space-4));
        font-size: inherit;
    }
    /* Muitas colunas: a fonte cresce menos, para não criar rolagem lateral. */
    :root [data-business-simulator] .business-table:not(.business-table--dre):has(> thead th:nth-child(6)) {
        font-size: clamp(var(--font-size-sm), 0.4rem + 0.95cqi, var(--font-size-base));
    }
}

/* No modo cartão a faixa alternada precisa ser do registro inteiro: pintando
   célula a célula, o cartão fica retalhado de cinza. */
@container (max-width: 40rem) {
    :root [data-business-simulator] .business-table-wrap[data-table-cards] > table > tbody > tr:nth-child(even) > td {
        background: transparent;
    }
    :root [data-business-simulator] .business-table-wrap[data-table-cards] > table > tbody > tr:nth-child(even) {
        background: var(--table-row-alt);
    }
}

/* =============================================================================
   Tabelas das calculadoras (variação da família unificada acima).

   A regra unificada usa fonte pequena e padding curto, pensados para tabelas
   densas (OA, Eu no Controle, backoffice). Nas calculadoras a tabela ocupa o
   painel inteiro com poucas colunas, e o texto ficava miúdo. Aqui, só onde há
   uma calculadora na página, fonte e espaçamento acompanham a largura da
   tabela (cqi do .chart-table-wrap), presos aos tokens. O celular segue o
   layout em cartões da regra unificada.
   ============================================================================= */
@media (min-width: 47.5625rem) {
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table-wrap {
        container-type: inline-size;
    }
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table {
        font-size: clamp(var(--font-size-md), 0.6rem + 0.9cqi, var(--font-size-lg));
    }
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table > thead th {
        font-size: clamp(var(--font-size-sm), 0.55rem + 0.65cqi, var(--font-size-base));
    }
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table :is(th, td) {
        padding: clamp(var(--space-3), 0.45rem + 0.7cqi, var(--space-4)) clamp(var(--space-3), 0.5rem + 1cqi, var(--space-5));
        /* As regras antigas por largura fixavam o td em sm; aqui ele segue a tabela. */
        font-size: inherit;
    }
    /* Quanto mais colunas, menos a fonte cresce: a tabela larga (cenarios,
       condicoes de venda) nao pode ganhar rolagem lateral por causa dela. */
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table:has(> thead th:nth-child(5)) {
        font-size: clamp(var(--font-size-md), 0.6rem + 0.8cqi, var(--font-size-base));
    }
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table:has(> thead th:nth-child(7)) {
        font-size: var(--font-size-md);
    }
    :root .content:has(.calculator-layout, .split-payment-layout) .chart-table:has(> thead th:nth-child(7)) :is(th, td) {
        padding-inline: clamp(var(--space-2), 0.3rem + 0.5cqi, var(--space-3));
    }
}

/* >>> COMPARADOR-UI-2026-10-12: resumo do Comparador CLT ou PJ em blocos
   (resposta, o que sobra, regua de negociacao, lado da empresa, detalhamento,
   fora do numero). Reaproveita .price-highlight, .metric-card, .result-row e
   .comparison-chip; o que esta aqui e so a composicao. Removido por
   tmp/regressao/comparador-ui-2026-10-12/restaurar.py. */
.cmp-form-section:first-child { margin-top: 0; padding-top: 0; }
.cmp-verdict { margin-bottom: 0; border-left: 4px solid var(--cmp-tone, var(--conclusion-bg)); }
.cmp-verdict[data-tone="pj"] { --cmp-tone: var(--success); }
.cmp-verdict[data-tone="clt"] { --cmp-tone: var(--danger); }
.cmp-verdict small { font-size: var(--font-size-sm); line-height: 1.4; opacity: 0.85; }
.cmp-block { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.cmp-block__title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.cmp-block__hint { margin: calc(var(--space-2) * -1) 0 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.cmp-block .metric-grid { margin-top: 0; }
/* Cartoes da mesma linha com a mesma altura: cada item da memoria de calculo
   ocupa duas linhas do grid (cartao e explicacao) em subgrid. A linha dos
   cartoes iguala a altura; abrir a explicacao de um nao estica os vizinhos. */
.cmp-block .metric-grid { row-gap: 0; }
.cmp-block .metric-grid > .calculation-details__item { grid-row: span 2; grid-template-rows: subgrid; align-self: stretch; margin-bottom: var(--space-3); }
/* A margem do ultimo cartao ja separa o bloco seguinte: ele desconta. */
.cmp-block:has(> .metric-grid:last-child) + .cmp-block { margin-top: calc(var(--space-5) - var(--space-3)); }
.cmp-block .metric-grid > .calculation-details__item > .metric-card { align-content: center; }
.cmp-receive__card { justify-items: start; text-align: left; }
.cmp-receive__card.is-better strong { color: var(--success); }
.cmp-bar { position: relative; display: block; width: 100%; height: 0.375rem; margin: var(--space-1) 0; border-radius: var(--radius-sm); background: var(--line); overflow: hidden; }
.cmp-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--cmp-share, 0%); border-radius: inherit; background: var(--muted); transition: width var(--motion-normal) ease; }
.cmp-receive__card.is-better .cmp-bar::after { background: var(--success); }
.cmp-negotiation .metric-card strong { font-size: var(--font-size-lg); }
/* Regua: faixa ate o empate (CLT compensa) e depois dele (PJ compensa); o
   empate fica marcado acima da faixa e a proposta, abaixo. */
.cmp-ruler { position: relative; height: 4.25rem; margin: var(--space-1) 2.5rem 0; }
.cmp-ruler__track { position: absolute; top: 1.5rem; left: 0; right: 0; height: 0.5rem; border-radius: var(--radius-sm); background: linear-gradient(to right, color-mix(in srgb, var(--danger) 24%, var(--surface)) var(--cmp-empate, 50%), color-mix(in srgb, var(--success) 24%, var(--surface)) var(--cmp-empate, 50%)); }
.cmp-ruler__mark { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); white-space: nowrap; }
.cmp-ruler__mark small { color: var(--muted); font-size: var(--font-size-xs); }
.cmp-ruler__mark--empate { top: 0; left: var(--cmp-empate, 50%); }
.cmp-ruler__mark--empate::after { content: ""; width: 2px; height: 1.25rem; background: var(--muted); }
.cmp-ruler__mark--proposta { top: 1.25rem; left: var(--cmp-proposta, 50%); }
.cmp-ruler__mark--proposta::before { content: ""; order: -1; width: 1rem; height: 1rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--cmp-tone, var(--ink)); }
.cmp-ruler[data-tone="pj"] { --cmp-tone: var(--success); }
.cmp-ruler[data-tone="clt"] { --cmp-tone: var(--danger); }
.cmp-ruler__mark--proposta small { color: var(--cmp-tone, var(--ink)); font-weight: 600; }
.cmp-ruler__scale { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0 2.5rem; color: var(--muted); font-size: var(--font-size-xs); }
.cmp-outside { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 47.5rem) {
    .cmp-ruler, .cmp-ruler__scale { margin-inline: var(--space-6); }
    .cmp-ruler__scale > :nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-bar::after { transition: none; }
}
/* <<< COMPARADOR-UI-2026-10-12 */