/* ============================================================
   UI v2 — design system (escuro + dourado)
   Escopo em .page--v2 para não afetar telas ainda não migradas.
   Componentes globais (.icon, .alert, .iconbtn) valem em qualquer lugar.
   ============================================================ */

/* Ícones (Lucide SVG inline) */
.icon { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }

/* -------- Alertas / caixas informativas -------- */
.alert {
    display: flex; gap: 0.7rem; align-items: flex-start;
    padding: 0.85rem 1rem; border-radius: 10px;
    border: 1px solid var(--line-2); background: var(--ink-2);
    font-size: 0.86rem; line-height: 1.45; color: var(--paper-dim);
}
.alert .icon { margin-top: 0.08rem; }
/* fechar (✕) e ocultar sozinho (usuário 2026-09-20: 9 s) — JS em assets/js/alertas.js (todos os layouts); `.is-saindo` = transição de saída */
.alert { position: relative; padding-right: 2.4rem; }
.alert__x { position: absolute; top: 0.35rem; right: 0.5rem; border: 0; background: transparent; color: inherit; opacity: 0.65; cursor: pointer; font: inherit; font-size: 0.9rem; line-height: 1; padding: 0.2rem 0.35rem; border-radius: 4px; }
.alert__x:hover { opacity: 1; background: rgba(127, 127, 127, 0.15); }
.alert.is-saindo { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: opacity 0.35s, max-height 0.35s, margin 0.35s, padding 0.35s; }
.alert--info    { border-color: var(--info-line); background: var(--info-soft); color: var(--info); }
.alert--success { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.alert--warn    { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.alert--error   { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }

/* Botão de ícone (ações em tabela) */
.iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--line-2); background: transparent;
    color: var(--paper-dim); cursor: pointer; transition: .15s; text-decoration: none;
}
.iconbtn:hover { border-color: var(--brass); color: var(--brass-2); background: var(--brass-soft); }
.iconbtn--danger:hover { border-color: var(--danger-ink); color: var(--danger-ink); background: var(--danger-soft); }
.iconbtn + .iconbtn { margin-left: .3rem; }
/* Ação indisponível (ex.: excluir usuário que já tem histórico): fica visível, com o title explicando. */
.iconbtn:disabled { opacity: .3; cursor: not-allowed; }
.iconbtn:disabled:hover { border-color: var(--line-2); color: var(--paper-dim); background: transparent; }

/* ============ Escopo .page--v2 ============ */
/* Largura TOTAL em tudo, inclusive formulários (2026-09-20: o teto de 1180px que valia só para forms saiu — o usuário
   via a sobra à direita como bug; com o `form--dense` os campos têm largura própria, então o painel pode ir até a borda). */
.page--v2 { max-width: none; }
.page--v2 .page__head { margin-bottom: 1rem; align-items: center; }
.page--v2 .page__title { font-size: 1.5rem; }
.page--v2 .form-card { padding: 1.2rem 1.6rem; border-radius: 14px; }
.page--v2 .form-card + .form-card { margin-top: 1.2rem; }

/* Blocos de formulário */
.form-section { border: 0; padding: 0; margin: 0 0 1.35rem; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section__title {
    font-size: 0.9rem; font-weight: 600; color: var(--paper);
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; margin-bottom: 0.8rem;
}
.form-section__title .icon { color: var(--brass-2); }

/* Campos mais confortáveis */
.page--v2 .field__label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; }
.page--v2 .field__input {
    min-height: 2.5rem; padding: 0.55rem 0.75rem; font-size: 0.9rem; border-radius: 8px;
    border: 1px solid var(--line-2); background: var(--ink); color: var(--paper);
}
.page--v2 .field__input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); outline: 0; }
.page--v2 .field__input[readonly] { background: var(--ink-3); color: var(--paper-dim); }
.field--req .field__label::after { content: " *"; color: var(--brass-2); }

/* Grid de campos */
.page--v2 .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1.4rem; }
@media (max-width: 720px) { .page--v2 .grid2 { grid-template-columns: 1fr; } }
.field--wide { grid-column: 1 / -1; }

/* Variante COMPACTA de formulário (`<form class="form--compact">`) — inputs mais
   baixos e menos espaço entre linhas/seções, pra CRUDs densos caberem em menos
   tela (pedido do usuário 2026-09, aplicado primeiro no Cliente). Opt-in por
   form: os demais seguem no espaçamento "confortável" acima. */
.page--v2 .form--compact .field__label { margin-bottom: 0.2rem; font-size: 0.72rem; }
.page--v2 .form--compact .field__input { min-height: 2rem; padding: 0.3rem 0.55rem; font-size: 0.85rem; }
.page--v2 .form--compact .grid2 { gap: 0.45rem 1rem; }
.page--v2 .form--compact .form-section { margin-bottom: 0.9rem; }
.page--v2 .form--compact .form-section__title { padding-bottom: 0.35rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.page--v2 .form--compact .form-actions { margin-top: 0.8rem; padding-top: 0.7rem; }

/* Variante "label | input" (`<form class="form--compact form--rows">`) — decisão do usuário 2026-09-05
   (cadastro de Cliente; mesmo padrão do painel da aba Clientes): cada .field vira uma linha com o rótulo
   numa coluna de largura fixa (alinha os inputs entre si, inclusive nas 2 colunas do .grid2) e o input
   ao lado; inputs com padding vertical 0.25rem e altura mínima 1.8rem. Nas linhas repetíveis (.rr-grid)
   o rótulo encolhe ao conteúdo, porque as células são estreitas. */
.page--v2 .form--rows .field { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; column-gap: 0.6rem; }
.page--v2 .form--rows .field__label { margin: 0; font-size: 0.78rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page--v2 .form--rows .field__input { min-height: 1.8rem; padding: 0.25rem 0.6rem; }
.page--v2 .form--rows .grid2 { gap: 0.3rem 1.2rem; }
.page--v2 .form--rows .rr-grid .field { grid-template-columns: max-content minmax(0, 1fr); column-gap: 0.4rem; }
.page--v2 .form--rows .rr-grid .field__label { text-align: left; }
.page--v2 .form--rows .field[hidden] { display: none; }
/* campo SEM rótulo (só o input, ex.: textarea de observações): ocupa as 2 colunas da linha — senão caía na coluna do rótulo (8.5rem) */
.page--v2 .form--rows .field > .field__input:only-child { grid-column: 1 / -1; }
/* célula de valor composta (ex.: data + checkbox lado a lado com dica embaixo) — Vigência da prestação */
.field__col { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.field__col > .row { align-items: center; }
.form--rows .field .switch { margin: 0; }

/* Lookups (tabelas simples) em 2 colunas: form à esquerda (sempre aberto), grid à direita — decisão do usuário 2026-09-05 */
.page--v2 .lookup-cols { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); gap: 1.2rem; align-items: start; }
.page--v2 .lookup-cols > .form-card { max-width: none; margin: 0; }
/* Ações flutuantes da linha (`.row-acoes`) — componente genérico (decisão do usuário 2026-09-05; a versão
   original `.oc-acoes` da aba Clientes saiu em 2026-09-26): pílula horizontal em OVERLAY, visível só na linha SELECIONADA (clique na linha;
   a linha em edição já vem `is-selected` do servidor), topo = fim da linha, direita = borda da última coluna.
   Marcação: `<div class="table-wrap table-wrap--acoes"><table class="table table--acoes">` e, na ÚLTIMA célula
   de cada linha, `<span class="row-acoes">…ícones…</span>`. Posição calculada pelo JS global do app.php
   (`--ra-top`/`--ra-right`). O wrap deixa de recortar (overflow:visible) pra pílula da última linha aparecer. */
.table-wrap--acoes { overflow: visible; position: relative; }
.table--acoes tbody tr { cursor: pointer; }
.table--acoes tbody tr.is-selected > td { background: var(--brass-soft, rgba(227,176,75,0.12)); }
.row-acoes { display: none; position: absolute; right: var(--ra-right, 0.5rem); top: var(--ra-top, 0); z-index: 3;
    align-items: center; gap: 0.1rem; padding: 0.15rem 0.25rem; border-radius: 999px;
    background: var(--ink-3); border: 1px solid var(--brass, var(--line)); box-shadow: var(--shadow-2); }
.table--acoes tr.is-selected .row-acoes { display: inline-flex; }
.row-acoes form { display: inline-flex; margin: 0; }

.page--v2 .lookup-cols--wide { grid-template-columns: minmax(380px, 1.15fr) minmax(0, 1fr); } /* form maior (IRRF: faixas) */
/* Invertido: GRID na primeira coluna, form na segunda (decisão do usuário 2026-09-22, telas de
   Obras). Só a ordem VISUAL muda — o DOM segue form → grid, então o `lookup-grid.js`, o `form=`
   do botão Inativar e a ordem de tabulação continuam valendo. No mobile (1 coluna) a lista vem
   antes do form, que é a leitura natural: escolher na lista, depois editar embaixo. */
.page--v2 .lookup-cols--grid1 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.page--v2 .lookup-cols--grid1 > .table-wrap { order: -1; }
/* coluna do grid com BUSCA RÁPIDA acima (usuário 2026-09-24; `[data-lookup-busca]` em lookup-grid.js):
   <div class="lookup-gridcol"><div class="lookup-busca">…</div><div class="table-wrap">…</div></div> */
.page--v2 .lookup-cols--grid1 > .lookup-gridcol { order: -1; }
.lookup-gridcol { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.lookup-busca { display: flex; align-items: center; gap: 0.5rem; color: var(--paper-dim); }
.lookup-busca .field__input { flex: 1; }
/* coluna do FORM com o "+ Novo" ACIMA do quadro, fora da borda (usuário 2026-09-26, Minutas/Rateios) — espelha a
   busca da coluna do grid: <div class="lookup-formcol"><div class="lookup-formcol__topo">+ Novo</div><form …></div>.
   O botão fica fora do fieldset: o lookup-grid.js desabilita o fieldset em leitura e o Novo (.criar) segue ativo. */
.lookup-formcol { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.lookup-formcol > .form-card { max-width: none; margin: 0; min-width: 0; }
.lookup-formcol__topo { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; min-height: 2.4rem; }
@media (max-width: 900px) { .page--v2 .lookup-cols { grid-template-columns: minmax(0, 1fr); } } /* minmax(0,…): texto longo no grid não alarga a página (Minutas, 2026-09-26) */

/* Ações do formulário — canto inferior direito */
.form-actions {
    display: flex; justify-content: flex-end; gap: 0.7rem;
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
}

/* Botões v2 */
.page--v2 .btn { min-height: 2.4rem; padding: 0.55rem 1.1rem; border-radius: 8px; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.page--v2 .btn .icon { margin: 0; }

/* Tabela v2 */
.page--v2 .table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.page--v2 .table td, .page--v2 .table th { padding: 0.56rem 0.9rem; }
.page--v2 .table tbody tr:hover { background: var(--brass-soft); }

/* Busca inline no cabeçalho */
.search-inline { display: flex; gap: 0.5rem; align-items: center; }
.search-inline .field__input { min-width: 15rem; min-height: 2.4rem; }

/* Estado vazio */
.empty-row { text-align: center; color: var(--muted); padding: 1.6rem !important; }

/* -------- Utilitários (substituem estilos inline comuns) -------- */
.row { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.row--baseline { align-items: baseline; }
.row--fields { align-items: flex-end; }   /* linha de campos + botão */
.gap-sm { gap: 0.4rem; }
.mt-1 { margin-top: 0.6rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.35rem; }
.mb-1 { margin-bottom: 0.6rem; }
.w-sm { max-width: 9rem; } .w-md { max-width: 14rem; } .w-lg { max-width: 20rem; }
.grow { flex: 1; } .ta-r { text-align: right; } .ta-c { text-align: center; }
.small { font-size: 0.8rem; } .muted { color: var(--muted); }
/* -------- Modal (confirmação/aviso) — substitui confirm()/alert() nativos -------- */
.modal { border: 0; border-radius: 14px; padding: 0; background: var(--ink-2); color: var(--paper);
    max-width: 440px; width: calc(100% - 2rem); box-shadow: var(--shadow); }
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal__body { padding: 1.4rem 1.5rem 0.4rem; }
.modal__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.55rem; display: flex; align-items: center; gap: 0.5rem; }
.modal__title .icon { color: var(--brass-2); }
.modal__msg { color: var(--paper-dim); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.modal__actions { display: flex; justify-content: flex-end; gap: 0.7rem; padding: 1.1rem 1.5rem 1.3rem; }
/* Campos numéricos BR (assets/js/campos.js): alinhados à direita, tabulares; prefixo R$ / sufixo % fora do valor */
.campo-num { text-align: right; font-variant-numeric: tabular-nums; }
.campo-num__wrap { display: inline-flex; align-items: center; width: 100%; }
.campo-num__wrap .field__input { flex: 1 1 auto; min-width: 0; }
.campo-num__wrap--pre .field__input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.campo-num__wrap--suf .field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.campo-num__pre, .campo-num__suf { flex: none; padding: 0 0.5rem; font-size: 0.78rem; color: var(--muted); background: var(--ink-3); border: 1px solid var(--line); align-self: stretch; display: inline-flex; align-items: center; }
.campo-num__pre { border-right: 0; border-radius: 8px 0 0 8px; }
.campo-num__suf { border-left: 0; border-radius: 0 8px 8px 0; }
.oc-rows .campo-num__wrap { width: auto; }
/* botão pequeno — global (antes só em central.css; usado em lookups, histórico, prestação…) */
.btn--sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.btn--sm[disabled] { opacity: 0.4; cursor: default; }
/* seletor de pessoa (modal reutilizável) */
/* Resultados em grid `table--dbgrid` (usuário 2026-09-27): modal mais largo p/ caber as colunas (width + max-width, ver armadilha do .modal). */
.modal.modal--pessoa { max-width: 860px; width: calc(100% - 2rem); }
.busca-grid-wrap { overflow-x: auto; }
.table.table--dbgrid.busca-grid { width: 100%; }
.busca-grid tbody tr.pessoa-item:hover > td { background: var(--brass-soft); }
/* `.pessoa-item` antigo (botão da lista) era display:flex em coluna — no `<tr>` empilhava as células numa coluna só. */
.busca-grid tbody tr.pessoa-item { display: table-row; cursor: pointer; outline: none; }
.busca-grid tbody tr.pessoa-item:focus-visible > td { background: var(--brass-soft); box-shadow: inset 0 1px 0 var(--brass), inset 0 -1px 0 var(--brass); }
.modal--pessoa .modal__body { padding-bottom: 0.8rem; }
.pessoa-res { margin-top: 0.6rem; max-height: 50vh; overflow: auto; }
.pessoa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
button.pessoa-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.6rem; border-radius: 8px;
    background: transparent; border: 1px solid transparent; color: var(--paper); cursor: pointer; font: inherit; }
button.pessoa-item:hover, button.pessoa-item:focus-visible { background: var(--brass-soft); border-color: var(--brass, var(--line)); outline: none; }
.pessoa-item__nome { font-weight: 500; }
.pessoa-item__meta { font-size: 0.75rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- SINAIS VITAIS: cartões rotulados (.vitais > .vital: __k rótulo, __v valor + <em> detalhe) — GLOBAL desde
   2026-09-27 (morava em atendimento.css; Obras › Relatórios e o acerto não carregam esse CSS e saíam em texto puro) ---- */
.vitais { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.vital { flex: 1 1 150px; min-width: 150px; padding: .5rem .7rem;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vital__k { display: block; font-size: .66rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--muted); margin-bottom: .25rem; }
.vital__v { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .86rem; }
.vital__v em { font-style: normal; color: var(--muted); font-size: .76rem; }
.vital__stars { color: var(--brass-2); letter-spacing: .1em; }

/* Campo + modal de busca (`campo_pessoa()` / `campo_imovel()`, 2026-09-22): substitui o <select>
   com a lista inteira. O texto é só leitura e o clique abre o #busca-modal. */
.busca-campo { display: inline-flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; }
.busca-campo [data-busca-texto] { cursor: pointer; }
.busca-campo [data-busca-texto]:disabled { cursor: default; }
.busca-campo .iconbtn { width: 30px; height: 30px; flex: none; }
.pessoa-hint { padding: 0.4rem 0.2rem; }

.self-end { align-self: end; }         /* toggle/switch alinhado à base da linha */
.span-2 { grid-column: span 2; }       /* campo ocupa 2 colunas do grid */
.card-destaque { border-color: var(--brass); }  /* card com realce dourado */
.reset-box { border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; }  /* fieldset s/ moldura (wrapper de disabled); min-width 0: o min-content padrão do fieldset estourava o form no celular (Minutas 2026-09-26) */
.m-0 { margin: 0; } .no-underline { text-decoration: none; }
.w-xs { max-width: 5.5rem; }
.grow-min { flex: 1; min-width: 15rem; }         /* campo de busca que estica */
.clickable { cursor: pointer; }
/* Números de destaque (tiles/indicadores) */
.num-lg { font-size: 1.8rem; } .num-md { font-size: 1.6rem; } .num-sm { font-size: 1.4rem; }
.txt-danger { color: var(--danger-ink); } .txt-ok { color: var(--ok); }

/* Modal da FATURA/REFERÊNCIA (`#fatura-modal`, templates/app.php) — largo, corpo rolável. Duas classes +
   `[open]` de propósito (mesma lição do `.modal--filtros`): vence o `max-width:440px` da base sem quebrar
   o `dialog:not([open]){display:none}` nativo. */
.modal.modal--fatura[open] { width: min(1180px, 94vw); max-width: none; display: flex; flex-direction: column; max-height: 92vh; }
.modal--fatura .modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 1.2rem; }
.modal--fatura .modal__title { position: relative; padding-right: 1.8rem; }
.modal--fatura .modal__title .badge { margin-left: 0.4rem; }
.modal--fatura .modal__x { position: absolute; right: 0; top: -0.15rem; }
/* composição do repasse item a item (bloco "Repasse ao proprietário" do corpo da fatura) — recolhida por padrão */
.fat-comp { margin: 0.2rem 0 0.6rem; }
.fat-comp > summary { cursor: pointer; color: var(--brass-2); }
.fat-comp__t { width: auto; min-width: 24rem; margin-top: 0.3rem; }
.fat-comp__t td { padding: 0.15rem 0.5rem; font-size: 0.78rem; }
.fat-comp__t tr.muted td { color: var(--muted); }
.fatura-corpo .form-card { margin-bottom: 0.8rem; }
.fatura-corpo .cards { margin-bottom: 0.8rem; }
/* card recolhível (despesa/crédito na referência) */
.form-card--details > summary { cursor: pointer; list-style: none; }
.form-card--details > summary::-webkit-details-marker { display: none; }
.form-card--details > summary::after { content: '+'; float: right; color: var(--brass-2); font-weight: 600; }
.form-card--details[open] > summary::after { content: '−'; }

/* Modal COMPACTO de item (`#item-modal`): só o form de editar/inserir um lançamento */
.modal.modal--item[open] { width: min(680px, 94vw); max-width: none; }
.modal--item .modal__body { padding-bottom: 1rem; }
.modal--item .modal__title { position: relative; padding-right: 1.8rem; }
.modal--item .modal__x { position: absolute; right: 0; top: -0.15rem; }
.modal--item .form-card__title:empty { display: none; }

/* "MOVIMENTO DE ALUGUEL" (topo do corpo da fatura, 2026-09-19): painéis Inquilino × Proprietário lado a lado;
   1 coluna no celular. `.mov-panel--lock` = lado liquidado (só leitura). `.field__input--static` = valor exibido
   no lugar do input (mesma caixa, sem borda de edição). Campos alternados por `hidden` precisam do par [hidden]. */
.mov-aluguel__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: start; }
@media (max-width: 860px) { .mov-aluguel__cols { grid-template-columns: 1fr; } }
.mov-aluguel .form-section { margin: 0; }
.mov-aluguel .form-section__title .badge { margin-left: 0.4rem; }
.mov-panel--lock .field__input:not(.field__input--static) { opacity: 0.6; }
.field__input--static { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; min-height: 2.1rem; border-color: transparent; background: transparent; padding-left: 0.2rem; }
.mov-aluguel .field[hidden], .outros-mov .field[hidden], .outros-mov [data-so][hidden] { display: none; }
.outros-mov .seg { margin-bottom: 0; }
.outros-mov [data-terceiro][hidden] { display: none; }

/* RECEBER ALUGUEL — grid único (u_pagamentoinq, 2026-09-20): linha selecionada em destaque, encargo sem item marcado
   esmaecido, "Liberado" compacto, totais estilo cupom, painéis lado a lado (1 coluna no celular). */
.rec-grid tr[data-fid] { cursor: pointer; }
.rec-grid tr.is-sel td { background: var(--brass-soft); }
.rec-grid tr.rec-pai td.fin-hist { font-weight: 600; }
.rec-grid tr.is-off td { opacity: 0.45; }
.rec-grid .rec-lib { width: 6.5rem; padding: 0.1rem 0.35rem; font-size: 0.78rem; text-align: right; }
.rec-grid .rec-lib:disabled { opacity: 0.35; }
.rec-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; align-items: start; }
@media (max-width: 860px) { .rec-panels { grid-template-columns: 1fr; } }
.rec-tot { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rec-tot td { padding: 0.28rem 0.2rem; border-bottom: 1px dashed var(--line); font-size: 0.86rem; }
.rec-tot tr:last-child td { border-bottom: 0; }
.rec-tot__sub td { border-top: 1px solid var(--line-2); }
.rec-tot__total td { border-top: 2px solid var(--brass-2); font-size: 1rem; padding-top: 0.45rem; }
.rec-tot--vazio { padding: 0.6rem 0.2rem; }
/* Feedback ao RECALCULAR os totais (2026-09-20): o form usa hx-indicator="#rec-totais", então `.htmx-request` cai no card.
   Os valores viram barras em shimmer (esqueleto do mesmo tamanho: sem salto de layout) e o título mostra "recalculando…".
   `prefers-reduced-motion` já zera a animação globalmente (tokens.css). */
.rec-busy { display: none; margin-left: 0.6rem; font-family: var(--body); font-size: 0.72rem; font-weight: 400; color: var(--muted); }
#rec-totais.htmx-request .rec-busy { display: inline; }
#rec-totais .rec-tot td.mono { position: relative; }
#rec-totais.htmx-request .rec-tot td.mono { color: transparent; }
#rec-totais.htmx-request .rec-tot td.mono::after {
    content: ''; position: absolute; right: 0.2rem; top: 50%; width: 5.2rem; height: 0.8em; transform: translateY(-50%); border-radius: 4px;
    background: linear-gradient(90deg, var(--line) 20%, var(--line-2) 50%, var(--line) 80%); background-size: 200% 100%; animation: rec-shimmer 1.1s linear infinite;
}
/* COMBOBOX com busca (assets/js/combo.js + Financeiro/_combo_tipo.php, 2026-09-20): lista suspensa sob a caixa. Todo elemento
   alternado por `hidden` precisa do par `[hidden]{display:none}` porque as classes abaixo definem `display`. */
.combo { position: relative; }
.combo__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px); max-height: 15.5rem; overflow-y: auto; margin: 0; padding: 0.25rem;
    list-style: none; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-2); }
.combo__list[hidden], .combo__opt[hidden], .combo__vazio[hidden] { display: none; }
.combo__opt { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.38rem 0.6rem; border-radius: 7px; cursor: pointer; font-size: 0.85rem; }
.combo__opt:hover, .combo__opt.is-ativa { background: var(--brass-soft); color: var(--brass-2); }
.combo__opt[aria-selected="true"] .combo__nome { font-weight: 600; }
.combo__cod { min-width: 2.1rem; text-align: right; color: var(--muted); font-size: 0.78rem; }
.combo__nota { margin-left: auto; padding-left: 0.6rem; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.combo__opt--off { cursor: not-allowed; opacity: 0.6; }
.combo__opt--off:hover { background: transparent; color: inherit; }
.combo__vazio { padding: 0.55rem 0.6rem; font-size: 0.82rem; color: var(--muted); }
#rec-totais.htmx-request .rec-tot--vazio { opacity: 0.55; }
@keyframes rec-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Seções de formulário LADO A LADO (ex.: Seguros — | fiança | incêndio |): cada .form-section vira uma coluna,
   campos empilhados dentro dela (1 por linha). Cai pra 1 coluna no mobile. */
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
.form-cols > .form-section { margin-bottom: 0.6rem; min-width: 0; }
.form-cols__fields { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
@media (max-width: 860px) { .form-cols { grid-template-columns: 1fr; } }

/* LGPD (0071): dado sigiloso mascarado + botão olho; revelado ganha selo "registrado". GLOBAL: painel da aba
   Clientes, popover de contato, lista /clientes (célula em texto) e cadastro do cliente (campos editáveis). */
.oc-doc { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; }
.oc-doc .field__input { flex: 1 1 auto; min-width: 0; }
.oc-doc .iconbtn { flex: none; width: 26px; height: 26px; }
.oc-doc__selo { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.2rem; color: var(--ok); }
.cep-wrap.oc-doc { display: flex; }
.contato__lgpd { margin: 0.2rem 0 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.tel-mask { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.3rem 0.2rem; border-bottom: 1px dashed var(--line); }

/* ============================================================================================
   Formulário DENSO (`form--dense`) — aprendido do wireframe do usuário (2026-09-20, "cara de
   desenvolvimento humano"): rótulo à ESQUERDA do campo com largura fixa por coluna, campo com a
   largura do CONTEÚDO (código 4rem, valor 9rem, texto longo cresce), grade de 3 colunas de pares
   rótulo|campo, checkbox NATIVO em linha (sem switch), seções separadas por fio + etiqueta mono
   maiúscula ("A · Identificação") dentro de UM painel, grupo destacado tracejado, texto devolvido
   por busca em mono na cor de destaque. Cores só por token (vale nos dois temas). Usa-se junto
   com `form--compact form--rows` (as linhas repetíveis `.rr-grid` continuam no padrão antigo).
   ============================================================================================ */
.page--v2 .form--dense .form-card { padding: 0.9rem 1.3rem; border-radius: 4px; border: 1.5px solid var(--line-2); background: var(--ink-2); animation: none; }
.page--v2 .form--dense .form-card + .form-card { margin-top: 0.9rem; }
.fd-sec { padding: 0.5rem 0 0.6rem; }
.fd-sec + .fd-sec { border-top: 1px solid var(--line); margin-top: 0.25rem; }
.fd-sec__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; min-height: 1.7rem; }
.fd-tag { font-family: ui-monospace, monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0.3rem; }
.fd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.fd-span2 { grid-column: span 2; }
.fd-span3 { grid-column: 1 / -1; }
.fd-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.1rem; min-width: 0; }
.fd-row--top { align-items: flex-start; padding-top: 0.3rem; }
.fd-lbl { flex: 0 0 auto; width: 9.5rem; font-size: 0.8rem; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-lbl--sm { width: 6.5rem; } .fd-lbl--md { width: 8rem; } .fd-lbl--lg { width: 12rem; }
.fd-lbl.is-off { color: var(--muted); }
.page--v2 .form--dense .field__input { width: auto; min-height: 1.75rem; padding: 0.15rem 0.5rem; font-size: 0.82rem; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.page--v2 .form--dense .field__input:focus { box-shadow: 0 0 0 2px var(--brass-soft); border-color: var(--brass); }
.page--v2 .form--dense .field__input:disabled, .page--v2 .form--dense .field__input[readonly] { border-style: dashed; border-color: var(--line-2); background: var(--ink-3); color: var(--muted); }
.page--v2 .form--dense textarea.field__input { width: 100%; min-height: 4.5rem; line-height: 1.4; }
.page--v2 .form--dense .fd-row > .field__input { flex: 0 0 auto; }
.fd-w-3 { width: 4.5rem !important; } .fd-w-4 { width: 5.5rem !important; } .fd-w-6 { width: 7rem !important; } .fd-w-8 { width: 9rem !important; }
.fd-w-10 { width: 11rem !important; } .fd-w-14 { width: 15rem !important; } .fd-w-20 { width: 22rem !important; }
/* 12/16/26/30 eram USADAS nas views mas não existiam (2026-09-27): o campo caía no width:100% do .field__input e cada
   filtro de data virava uma linha (Obras › Relatórios). Escala completa: 3·4·6·8·10·12·14·16·20·26·30. */
.fd-w-12 { width: 13rem !important; } .fd-w-16 { width: 18rem !important; } .fd-w-26 { width: 28rem !important; max-width: 100%; } .fd-w-30 { width: 32rem !important; max-width: 100%; }
.page--v2 .form--dense .fd-row > .fd-grow { flex: 1 1 auto; min-width: 0; }
.page--v2 .form--dense .field__input.mono, .page--v2 .form--dense .campo-num { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--paper); }
.fd-chk { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--paper-dim); cursor: pointer; min-height: 2.1rem; }
.fd-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--brass); flex: 0 0 auto; }
.fd-chk.is-off { color: var(--muted); cursor: default; }
.fd-desc { font-family: ui-monospace, monospace; font-size: 0.76rem; color: var(--brass-2); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--ink-3); color: var(--paper-dim); cursor: pointer; padding: 0; }
.fd-btn:hover { border-color: var(--brass); color: var(--brass-2); }
.fd-group { border: 2px dashed var(--line-2); border-radius: 4px; padding: 0.6rem 1rem 0.7rem; margin-top: 0.6rem; }
.fd-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.3rem; }
.fd-group__title { margin: 0; font-family: var(--body); font-size: 0.9rem; font-weight: 600; color: var(--paper); }
.fd-hint { font-size: 0.76rem; color: var(--muted); margin: 0 0 0.4rem; }
.fd-hint b, .fd-hint strong { color: var(--paper-dim); font-weight: 600; }
.page--v2 .form--dense .form-actions { margin-top: 0.9rem; }
@media (max-width: 900px) { .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fd-grid, .fd-grid--2 { grid-template-columns: minmax(0, 1fr); } .fd-span2 { grid-column: auto; } .fd-lbl { width: 7rem; } }
/* form--dense: linha repetível (`.repeat-row > .rr-grid`: captadores, endereços, telefones, participantes…) vira UMA
   linha flex compacta que quebra quando falta espaço; cada `.field` = rótulo|campo lado a lado. Botão pequeno nas
   cabeças de seção. `.field` que sobrar fora de `.fd-row` continua funcionando (input preenche o `.field`). */
.page--v2 .form--dense .repeat-row { align-items: center; padding: 0.35rem 0.6rem; border-radius: 4px; }
.page--v2 .form--dense .repeat-row > .btn-icon { margin-top: 0; }
.page--v2 .form--dense .rr-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.page--v2 .form--dense .rr-grid .field { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1 1 10rem; }
.page--v2 .form--dense .rr-grid .field--wide { flex: 2 1 18rem; }
.page--v2 .form--dense .rr-grid .field > .field__input, .page--v2 .form--dense .rr-grid .field > .campo-num__wrap { flex: 1 1 auto; min-width: 0; width: auto; }
.page--v2 .form--dense .rr-grid .field__label { margin: 0; font-size: 0.8rem; white-space: nowrap; }
.page--v2 .form--dense .field:not(.fd-row) > .field__input { width: 100%; }
.fd-sec__head .btn { min-height: 0; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
/* grade que se adapta à largura do container (modais, painel lateral do lookup): 1 a 3 colunas conforme couber */
.fd-grid--auto { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); column-gap: 1.5rem; }
.fd-grid--1 { grid-template-columns: minmax(0, 1fr); }
/* form--dense fora de .page--v2 (modais renderizados no layout, painéis HTMX): mesmas regras de campo */
.form--dense .fd-row > .field__input { width: auto; min-height: 1.75rem; padding: 0.15rem 0.5rem; font-size: 0.82rem; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--ink); flex: 0 0 auto; }
.form--dense .fd-row > .fd-grow { flex: 1 1 auto; min-width: 0; }
.form--dense .fd-row > .campo-num__wrap { flex: 0 0 auto; width: 11rem; }
.form--dense .fd-row > .campo-num__wrap > .field__input { flex: 1 1 auto; width: auto !important; min-width: 0; }
.form--dense textarea.field__input { width: 100%; min-height: 4.5rem; line-height: 1.4; }
/* form--dense: campo de dinheiro (campos.js envolve o input em .campo-num__wrap com o prefixo R$) mantém a largura do conteúdo */
.page--v2 .form--dense .fd-row > .campo-num__wrap { flex: 0 0 auto; width: 11rem; }
.page--v2 .form--dense .fd-row > .campo-num__wrap > .field__input { flex: 1 1 auto; width: auto !important; min-width: 0; }
/* form--dense — complementos usados pelos forms do Financeiro/Boleto/DIMOB (lote 2026-09-20): form que É o card
   (lookups), linhas ocultas por JS, segmentado/estático/combobox dentro de `.fd-row`, obrigatório no rótulo. */
.page--v2 form.form-card.form--dense, .form-card.form--dense { padding: 0.9rem 1.3rem; border-radius: 4px; border: 1.5px solid var(--line-2); background: var(--ink-2); animation: none; }
.fd-row[hidden], .fd-chk[hidden], .fd-sec[hidden], .fd-grid[hidden] { display: none; }
.fd-lbl.is-req::after { content: " *"; color: var(--brass-2); }
.fd-row > .seg { margin-bottom: 0; flex: 0 0 auto; }
.fd-row > .btn, .fd-row > .badge { flex: 0 0 auto; }
.fd-row > .fd-hint { margin: 0; }
.form--dense .fd-row > .field__input--static { flex: 1 1 auto; width: auto; min-height: 1.75rem; border-color: transparent; background: transparent; padding-left: 0.2rem; }
.form--dense .combo > .field__input { width: 100%; min-height: 1.75rem; padding: 0.15rem 0.5rem; font-size: 0.82rem; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.form--dense .fd-row > .campo-num__wrap.campo-num__wrap--suf { width: 7rem; }
.form--dense .form-actions { margin-top: 0.8rem; }
.form--dense .fd-sec__head .fd-tag .badge { margin-left: 0.4rem; text-transform: none; letter-spacing: 0; }
/* form--dense: seção como <fieldset> (p/ `disabled` em bloco, ex.: Divulgação sem permissão) sem borda/padding do UA */
.form--dense fieldset.fd-sec { border: 0; margin: 0; min-width: 0; padding-left: 0; padding-right: 0; }
.form--dense fieldset.fd-sec + .fd-sec, .form--dense .fd-sec + fieldset.fd-sec { margin-top: 0.25rem; }
/* form--dense: rótulo da linha repetível nunca encolhe nem corta (era "Base …" no IRRF) */
.page--v2 .form--dense .rr-grid .field__label { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
/* form--dense: dentro da grade o campo pode ENCOLHER quando a coluna é mais estreita que a largura pedida (select
   `fd-w-14` numa coluna de 3) — sem isso o campo invadia a coluna vizinha. */
.form--dense .fd-row > .field__input, .form--dense .fd-row > .campo-num__wrap,
.page--v2 .form--dense .fd-row > .field__input, .page--v2 .form--dense .fd-row > .campo-num__wrap { flex-shrink: 1; min-width: 0; }

/* ==== `.table--dbgrid` — padrão de TODO grid (2026-09-20). Vive AQUI (fim do ui.css) e não em components.css porque
   `.page--v2 .table td` (acima, mesma especificidade 0,2,1) carrega depois do components e ganharia por ordem. ==== */
/* Estilo DBGrid (legado gridImoveis — pedido do usuário 2026-09-18; padrão de TODO grid desde 2026-09-20, por isso vive aqui e não em central.css): linhas compactas, colunas com
   filete vertical (dgColLines/dgRowLines), cabeçalho baixo, uma coisa por célula (lápis · estado ·
   código · disp. · …), números alinhados à direita. Só <table><tr><td> — nada de flex em célula.
   (Os seletores `.table.table--dbgrid` nasceram pra vencer o antigo `theme.css`, que carregava depois
   dos módulos; o theme foi fundido no components.css e a ordem de carga passou a ser "módulo por
   último" em 2026-09-18 — os seletores duplos ficaram, são inofensivos.) */
.table.table--dbgrid { border-collapse: collapse; table-layout: auto; width: auto; min-width: 0; }
/* Largura pelo CONTEÚDO (pedido do usuário 2026-09-18: "Exclusivo" só tem Sim/Não, pode ser estreita):
   a `.table` base força width:100% e reparte a sobra entre as colunas; aqui cada coluna fica do tamanho
   do maior valor ou do título (como um DBGrid) e a sobra fica à direita, dentro do .table-wrap rolável. */
.table.table--dbgrid th, .table.table--dbgrid td {
    padding: 0.14rem 0.4rem; font-size: 0.78rem; line-height: 1.25;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap;
}
.table.table--dbgrid th:last-child, .table.table--dbgrid td:last-child { border-right: 0; }
.table.table--dbgrid tr:last-child td { border-bottom: 1px solid var(--line); }
.table.table--dbgrid th { padding: 0.24rem 0.4rem; font-size: 0.64rem; letter-spacing: 0.02em; text-transform: uppercase; background: var(--ink-2); }
.table.table--dbgrid td.muted { white-space: normal; }
/* Tema CLARO (usuário 2026-09-26): fonte dos grids ~15% maior (0.78 → 0.9rem; cabeçalho 0.64 → 0.74rem) — no fundo
   branco a letra pequena cansava. `:root[data-theme]` sobe a especificidade acima das variantes dos módulos (fin-mov…). */
:root[data-theme="claro"] .table.table--dbgrid td { font-size: 0.9rem; }
:root[data-theme="claro"] .table.table--dbgrid th { font-size: 0.74rem; }
/* células de ÍCONE (lápis · estado · col.1 · disp.): coladas — "|x|i|c|", não "|  x  |  i  |  c  |" */
.table.table--dbgrid .c-edit, .table.table--dbgrid .c-est, .table.table--dbgrid .c-disp { width: 1%; text-align: center; padding: 0.08rem 0.15rem; }
.table.table--dbgrid .c-txt { width: 1%; text-align: center; }
.table.table--dbgrid .c-cod { width: 1%; text-align: right; }
.table.table--dbgrid .c-num { text-align: right; width: 1%; }
.table.table--dbgrid td.mono { font-variant-numeric: tabular-nums; }
.table.table--dbgrid .c-est .gi { width: 1.15rem; height: 1.15rem; border-radius: 4px; }
.table.table--dbgrid .c-est .gi + .gi { margin-left: 1px; }
.table.table--dbgrid .grid-iconbtn { width: 18px; height: 18px; vertical-align: middle; }
.table.table--dbgrid .gi-disp { padding: 0 0.18rem; }
.table.table--dbgrid .badge { padding: 0.05rem 0.4rem; font-size: 0.66rem; }
/* dbgrid genérico (fora do `.fin-mov`): linha vencida/atrasada em vermelho; `td.wrap` para coluna de texto longo que pode quebrar */
.table.table--dbgrid tbody tr.is-atraso > td { color: var(--danger-ink); }
.table.table--dbgrid td.wrap { white-space: normal; }

/* Formulário SOMENTE LEITURA (`form--dense.fd-so-ver`, quem tem só `<mod>.ver`): o fieldset desabilitado deixa tudo
   inerte, mas os campos continuam lendo como DADO (borda sólida, texto normal), não como "campo desligado". */
.fd-so-ver .field__input:disabled, .fd-so-ver .field__input[readonly] { border-style: solid; border-color: var(--line); background: var(--ink-3); color: var(--paper); opacity: 1; }
.fd-so-ver .fd-chk input:disabled { opacity: 0.9; }
.fd-so-ver .fd-chk, .fd-so-ver .chip-dnd { cursor: default; }
.fd-so-ver .fd-sec__head .btn, .fd-so-ver .fd-btn, .fd-so-ver [data-add], .fd-so-ver [data-remove], .fd-so-ver .btn-icon { display: none; }
.fd-so-ver .form-actions .btn:not(.btn--ghost), .fd-so-ver .form-actions button[type="submit"] { display: none; }
/* especificidade: vence `.page--v2 .form--dense .field__input:disabled` (borda tracejada) no modo somente leitura */
.page--v2 .form--dense.fd-so-ver .field__input:disabled, .page--v2 .form--dense.fd-so-ver .field__input[readonly] { border-style: solid; border-color: var(--line); background: var(--ink-3); color: var(--paper); opacity: 1; }

/* Borda dos cartões pelo token `--card-line` (decisão do usuário 2026-09-20: verde brilhante no tema claro, "ficou
   perfeito"; no escuro o token = `--line-2`). Cartão novo deve usar `var(--card-line)` na borda. */
.page--v2 .form-card, .page--v2 .form--dense .form-card, .page--v2 form.form-card.form--dense, .page--v2 .seguro-box, .page--v2 .kpi, .page--v2 .viz-card, .card { border-color: var(--card-line); }

/* Lookup tipo DBGrid (2026-09-20): grid selecionável sem pílula de ações (`.table--select`) e barra de botões dividida
   (`.form-actions--split`: ação destrutiva/estado à esquerda, Novo + Salvar à direita). */
.table--select tbody tr[data-id] { cursor: pointer; outline: none; }
.table--select tbody tr.is-selected > td { background: var(--brass-soft); box-shadow: inset 2px 0 0 var(--brass); font-weight: 600; }
.table--select tbody tr:focus-visible > td { box-shadow: inset 2px 0 0 var(--brass), inset 0 0 0 1px var(--brass); }
.form-actions--split { justify-content: space-between; }
.form-actions__dir { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.page--v2 .btn:disabled, .page--v2 .btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.page--v2 .btn.is-enviando:disabled { opacity: 0.8; cursor: progress; }  /* ocupado (botao-spinner.js) ≠ desligado: o spinner tem de aparecer */

/* Paginador (global desde 2026-09-24; nasceu na Central): | ‹ Anterior · info · Próxima › | */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.7rem; }
.pager__info { font-size: 0.78rem; color: var(--muted); }

/* =====================================================================
   Seletor da COR DE DESTAQUE (templates/_cor_escolha.php, 0126, usuário 2026-09-26) — Minha conta e Empresa.
   Amostras redondas; a marcada ganha anel na cor do destaque. As amostras recebem a cor pelo JS (data-amostra).
   ===================================================================== */
.cor-escolha { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.cor-op { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 4.6rem; cursor: pointer; position: relative; }
.cor-op > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cor-op__amostra { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--ink-2); }
.cor-op__amostra--padrao { background: linear-gradient(135deg, var(--brass) 50%, var(--ink-3) 50%); }
.cor-op__rot { font-size: 0.72rem; color: var(--paper-dim); text-align: center; line-height: 1.15; }
.cor-op > input[type="radio"]:checked ~ .cor-op__amostra,
.cor-op > input[type="radio"]:checked ~ input[type="color"] { outline: 2px solid var(--brass); outline-offset: 2px; }
.cor-op > input[type="radio"]:checked ~ .cor-op__rot { color: var(--brass-2); font-weight: 600; }
.cor-op > input[type="radio"]:focus-visible ~ .cor-op__amostra { outline: 2px dashed var(--brass); outline-offset: 3px; }
.cor-op--livre input[type="color"] { width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: none; cursor: pointer; }
.cor-op--livre input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cor-op--livre input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cor-escolha__dica { margin-top: 0.4rem; }
.fd-row--top { align-items: flex-start; }
.fd-row--top > .fd-lbl { padding-top: 0.35rem; }