/* Configurações do Quill */
.ql-size-small {
    font-size: 10px; /* Tamanho pequeno */
}

.ql-size-large {
    font-size: 24px; /* Tamanho grande */
}

.ql-size-huge {
    font-size: 36px; /* Tamanho enorme */
}

/* Thumbnails de Imagens */
#thumbnailsContainer img {
    width: 100px;
    height: auto;
    padding: 5px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

#thumbnailsContainer img:hover {
    transform: scale(1.1);
}

/* Estilo para múltiplos itens na tela de fe */
.blocos-itens-fatura {
    animation: slideDown 0.3s ease-out;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Espaço entre os blocos */
    padding: 5px;
}

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

/* Estilo para múltiplos itens na tela de FE */
.blocos-itens {
    animation: slideDown 0.3s ease-out;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Espaço entre os blocos */
    padding: 5px;
}

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

/* ============================================================================
   TEMA ESCURO — overrides de componentes que o SO/bibliotecas renderizam fora
   do controle do Bootstrap (o grosso do dark/light vem do tabler.css beta20).
   data-bs-theme fica no <html> (anti-flash inline) e no <body> (demo-theme.js),
   por isso as regras cobrem ambos. Paleta slate.
   ============================================================================ */

/* <select>/<option> — o <option> é pintado pelo SO e ignora o tema Bootstrap,
   por isso precisa de regra explícita + !important em ambos os temas. */
[data-bs-theme=light] select option,
[data-bs-theme=light] .form-select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) .form-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
[data-bs-theme=dark] select,
[data-bs-theme=dark] .form-select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-bs-theme=dark] select option,
[data-bs-theme=dark] .form-select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] select option:checked,
[data-bs-theme=dark] select option:hover {
    background-color: #273548 !important;
    color: #e2e8f0 !important;
}

/* Tom Select (dropdown custom em <div>) — não é alcançado pelas regras de <option> */
[data-bs-theme=dark] .ts-wrapper .ts-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
[data-bs-theme=dark] .ts-dropdown .active {
    background-color: #334155 !important;
    color: #fff !important;
}

/* Grupos do select (<optgroup> → Tom Select): o cabeçalho do grupo é uma
   etiqueta de seção — pequena, em caixa alta e no tom secundário — sobre o
   MESMO fundo da lista, sem faixa e sem linha separadora. Opção desabilitada
   (imóvel já alugado) fica apagada, sem cursor de clique.

   Este arquivo carrega ANTES do tabler-vendors.css (que traz o CSS do Tom
   Select), então as regras precisam de especificidade maior que as dele:
   por isso o `.ts-dropdown-content` no seletor. Sem ele, o vendor pinta o
   cabeçalho com --tblr-bg-surface (faixa branca no tema escuro) e desenha um
   separador com margem entre os grupos (as linhas vazias). */
.ts-dropdown .ts-dropdown-content .optgroup:before {
    display: none;
}
.ts-dropdown .ts-dropdown-content .optgroup-header {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-secondary);
    background: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}
.ts-dropdown .ts-dropdown-content .optgroup + .optgroup .optgroup-header {
    margin-top: 0.25rem;
}
.ts-dropdown .ts-dropdown-content .option[aria-disabled="true"] {
    color: var(--tblr-secondary);
    opacity: 0.55;
    cursor: not-allowed;
}
[data-bs-theme=dark] .ts-dropdown .ts-dropdown-content .optgroup-header {
    color: #94a3b8 !important;
    background: transparent !important;
}
[data-bs-theme=dark] .ts-dropdown .ts-dropdown-content .option[aria-disabled="true"] {
    color: #94a3b8 !important;
}

/* ============================================================================
   MATRIZ DE PERMISSÕES (Cargos e Permissões)
   ============================================================================ */
.tabela-permissoes tr.linha-categoria > td {
    background-color: #f1f5f9;
    border-top: 2px solid #cbd5e1;
    padding-top: 10px; padding-bottom: 8px;
}
.tabela-permissoes tr.linha-categoria strong { letter-spacing: .04em; }
.tabela-permissoes tr.linha-categoria .btn-marcar-categoria { padding: 1px 10px; font-size: .7rem; font-weight: 500; }
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria { color: #64748b; line-height: 1; text-decoration: none; }
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria:hover { color: #1e293b; }
.tabela-permissoes tr.linha-categoria .icon-chevron { transition: transform .18s ease; }
.tabela-permissoes tr.linha-categoria.collapsed .icon-chevron { transform: rotate(-90deg); }
.tabela-permissoes tr.linha-categoria .categoria-titulo-clicavel { cursor: pointer; user-select: none; }
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria > td { background-color: #1e293b; border-top-color: #334155; }
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria .btn-toggle-categoria { color: #94a3b8; }

/* Aumenta tamanho da tabela */
.tabela-maior table {
    min-width: 1920px; /* Ajuste este valor conforme necessário */
}
/* ============================================================================
   TELA DE LOGIN — o painel do produto (coluna direita)
   Sempre escuro (independe do tema do sistema). O texto vem da view; o fundo
   traz as fachadas (`images/login/fachadas.svg`).
   ============================================================================ */
.login-aside {
    background-color: #070b14;
    position: relative;
    overflow: hidden;
}

/* Textura noise (ruído) para acabamento matte premium */
.login-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Padrão de grade (grid) moderno sutil */
.login-aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 1;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

/* Esferas de luz (glow / mesh gradient animado) */
.login-glow-1,
.login-glow-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    animation: login-float 12s ease-in-out infinite alternate;
}
.login-glow-1 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    top: -15%;
    right: -10%;
}
.login-glow-2 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
    bottom: -15%;
    left: -10%;
    animation-delay: -6s;
}
@keyframes login-float {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    100% { transform: translate(-3%, 3%) scale(1.1); opacity: 1; }
}

/* Fachadas de imóveis em traço fino, na linha do chão do painel. É textura
   de fundo (opacidade baixa, atrás do texto): situa a tela no nicho sem
   competir com a promessa escrita. Some quando o painel some (< lg). */
.login-fachadas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(46vh, 520px);
    background-image: url("../images/login/fachadas.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 100%;
    opacity: .22;
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent 0%, black 45%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 45%);
}

.aside-content {
    position: relative;
    z-index: 4; /* acima do noise, luzes, fachadas e grid */
}

/* Cursor do efeito de digitação */
.typing-cursor {
    display: inline-block;
    width: 4px;
    height: 1em;
    background-color: #3b82f6;
    vertical-align: middle;
    margin-left: 5px;
    animation: login-blink 1s step-end infinite;
}
@keyframes login-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
.typed-text-wrapper {
    color: #3b82f6;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Coluna do formulário de login: força inputs claros mesmo com o sistema no tema
   escuro (o painel direito continua escuro; o formulário fica sempre claro). */
.login-form-col .form-control,
.login-form-col .input-group-text {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #dbe0e5 !important;
}
.login-form-col .form-control::placeholder {
    color: #9aa4b2 !important;
    opacity: 1;
}
.login-form-col .input-group-text .link-secondary {
    color: #64748b !important;
}

/* "Esqueci minha senha", abaixo do botão de entrar: link discreto com o glifo do
   WhatsApp, porque o canal é a conversa com o suporte — e o glifo diz isso antes
   do texto. Discreto de propósito: é a saída de quem travou, não a ação
   principal da tela. A coluna do login é clara por definição (`data-bs-theme`
   fixo no HTML), então não há variante de tema escuro aqui. */
.login-recuperar-senha {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.login-recuperar-senha .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--tblr-green);
}
.login-recuperar-senha:hover,
.login-recuperar-senha:focus-visible {
    color: var(--tblr-green);
    text-decoration: underline;
}

/* ── Tipografia no celular ──────────────────────────────────────────── */

/* Uma escala de títulos menor abaixo de `md`. O tema foi desenhado para telas
   largas: 24px de h1 e 20px de h2 (que é o `.page-title`) ocupam meia largura de
   um celular e empurram o conteúdo para baixo. Aqui a escala desce um degrau —
   o corpo do texto (`--tblr-body-font-size`, 14px) NÃO muda: 14px é o tamanho
   confortável de leitura no celular, e encolher isso seria trocar estética por
   legibilidade.

   Mexer nas variáveis do tema, e não em cada `h1`/`h2`/`.h3` espalhado, é o que
   faz a escala valer para o sistema inteiro — inclusive para `.page-title`,
   `.card-title` e para os números em `class="h2"`/`class="h3"` das fichas.

   `:root:root` (duas vezes) é proposital: este arquivo é carregado ANTES do
   `tabler.css` e o tema declara as mesmas variáveis em `:root` — com um `:root`
   só, a ordem dos arquivos decidiria e o tema venceria. */
@media (max-width: 767.98px) {
    :root:root {
        --tblr-font-size-h1: 1.25rem;
        --tblr-font-size-h2: 1.125rem;
        --tblr-font-size-h3: 0.9375rem;
        --tblr-font-size-h4: 0.8125rem;
        --tblr-line-height-h1: 1.625rem;
        --tblr-line-height-h2: 1.5rem;
        --tblr-line-height-h3: 1.375rem;
        --tblr-line-height-h4: 1.125rem;
    }

    /* O estado vazio ("Nenhum recebimento encontrado") tem tamanho próprio no
       tema, fora das variáveis — 20px de aviso competindo com o título da
       página. */
    .empty-title {
        font-size: 1.0625rem;
        line-height: 1.5rem;
    }
}

/* Tabela que vira cartão no celular (< 768px, .table-mobile-md). O tema empilha
   os campos em UMA coluna e a linha fica altíssima — seis campos viram seis
   blocos. Aqui cada registro vira um grid de DUAS colunas de pares
   rótulo/valor, o mesmo desenho do corpo do accordion (`datagrid-listagem`).

   O seletor precisa de `.table` junto: este arquivo é carregado antes do
   `tabler.css` e as regras do tema (`.table-mobile-md tr`, `… td`) empatariam em
   especificidade e venceriam pela ordem. O `!important` do padding também é do
   tema — só outro `!important` o alcança. */
@media (max-width: 767.98px) {
    .table.table-mobile-md tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.25rem 0.5rem 0.5rem;
    }
    .table.table-mobile-md tbody td {
        min-width: 0;
        padding: 0.5rem 0.5rem 0 !important;
        overflow-wrap: anywhere;
    }

    /* O tema força `.table-mobile-md .btn { display: block }`, e o ícone do
       `.btn-icon` (posicionado com margem negativa) escapa do botão quadrado.
       Aqui o botão volta a ser inline-flex e o ícone fica centralizado. */
    .table-mobile-md td .acoes-registro .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Listagem no celular (macro `lista_registros` e os accordions da Gestão de
   Pagamentos, da Visão Geral, dos Reajustes e dos Relatórios): cada registro é
   um CARTÃO fechado, com respiro entre um e o outro. No "flush" original os
   registros eram linhas coladas e o dedo não achava onde um terminava — abrir o
   registro errado era fácil demais. Separação clara aqui é usabilidade.

   Os seletores levam `.accordion` junto (três classes) de propósito: este
   arquivo é carregado ANTES do `tabler.css`, e o `.accordion-flush
   .accordion-item` do tema tem duas classes — sem a terceira, o tema venceria na
   cascata e devolveria as bordas retas e coladas. */
.accordion.accordion-listagem {
    padding: 0.75rem;
}
.accordion.accordion-listagem .accordion-item {
    margin-bottom: 0.625rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.5rem;
    background-color: var(--tblr-bg-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.accordion.accordion-listagem .accordion-item:last-child {
    margin-bottom: 0;
}

/* O cabeçalho inteiro é o alvo do toque: altura confortável para o dedo e
   resposta visual no toque e no ponteiro. */
.accordion.accordion-listagem .accordion-button {
    min-height: 3.25rem;
    padding: 0.875rem 1rem;
    gap: 0.75rem;
    border-radius: 0;
    transition: background-color 0.15s ease;
}
.accordion.accordion-listagem .accordion-button:hover {
    background-color: var(--tblr-bg-surface-secondary);
}
.accordion.accordion-listagem .accordion-button:active {
    background-color: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary));
}

/* Registro aberto: cabeçalho com fundo e cartão contornado — de relance se vê
   qual registro está expandido. Sem o azul chapado padrão do tema, que
   competiria com o conteúdo. O contorno é `box-shadow`, e não `border-color`:
   a faixa lateral de situação (`linha-situacao`, do financeiro) é a borda
   esquerda do cartão e não pode perder a cor ao abrir o registro. */
.accordion.accordion-listagem .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: var(--tblr-bg-surface-secondary);
    box-shadow: none;
    border-bottom: 1px solid var(--tblr-border-color);
}
.accordion.accordion-listagem .accordion-item:has(.accordion-button:not(.collapsed)) {
    box-shadow: 0 0 0 1px var(--tblr-primary), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

/* A seta ganha alvo próprio, redondo: é o que diz "isto abre". */
.accordion.accordion-listagem .accordion-button::after {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background-position: center;
    background-size: 0.875rem;
    border-radius: 50%;
    background-color: var(--tblr-bg-surface-secondary);
}
.accordion.accordion-listagem .accordion-button:not(.collapsed)::after {
    background-color: var(--tblr-primary-lt);
}

/* Teclado enxerga o foco; o toque não deixa anel sobrando depois do clique. */
.accordion.accordion-listagem .accordion-button:focus:not(:focus-visible) {
    box-shadow: none;
}
.accordion.accordion-listagem .accordion-button:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
    box-shadow: none;
}

.accordion.accordion-listagem .accordion-body {
    padding: 0.875rem 1rem 1rem;
}

/* Campos do registro dentro do accordion: pares rótulo/valor empilhados, em
   DUAS colunas. Rótulo pequeno em cima e valor embaixo leem muito melhor no
   celular do que a lista de duas colunas espremidas.

   O seletor precisa das duas classes: este arquivo é carregado ANTES do
   `tabler.css`, então `.datagrid-listagem` sozinho tem a mesma especificidade
   de `.datagrid` e perde na cascata — a `--tblr-datagrid-item-width` do tema
   (15rem) prevalecia, o grid caía numa coluna só e metade da largura da tela
   ficava em branco. Com `.datagrid.datagrid-listagem` a regra vence a ordem dos
   arquivos, e as colunas são declaradas aqui em vez de depender da variável. */
.datagrid.datagrid-listagem {
    --tblr-datagrid-padding: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 0.625rem 0.75rem;
}
.datagrid-listagem .datagrid-campo {
    min-width: 0;
    overflow-wrap: anywhere;
}
.datagrid-listagem .datagrid-title {
    margin-bottom: 0.125rem;
}
/* Quando há campos no corpo, uma linha sutil separa deles as ações. */
.accordion-listagem .datagrid-listagem + .btn-list {
    border-top: 1px solid var(--tblr-border-color);
    padding-top: 0.75rem;
}

/* ── Abas das telas de configuração (macro `nav_abas` + `abas.js`) ───────
   Variáveis de Sistema e Configurações › Sistema. Cada aba ocupa a mesma
   largura (nav-fill) e o painel tem altura mínima para a tela não "pular" ao
   trocar de aba. */
.nav-tabs.abas-configuracao .nav-item {
    display: flex;
}
.nav-tabs.abas-configuracao .nav-item .nav-link {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-weight: 500;
}
/* Aba selecionada: tinta na cor do produto, um filete embaixo e um fundo
   leve — de relance se vê em qual aba se está. O hover das demais antecipa o
   destaque sem competir com ele. `--tblr-primary` já troca de tom no tema
   escuro (DOC_TEMA_ESCURO). */
.nav-tabs.abas-configuracao .nav-item .nav-link {
    color: var(--tblr-secondary);
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-tabs.abas-configuracao .nav-item .nav-link:hover {
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-surface-secondary);
}
.nav-tabs.abas-configuracao .nav-item .nav-link.active {
    color: var(--tblr-primary);
    font-weight: 600;
    background-color: rgba(var(--tblr-primary-rgb), 0.06);
    box-shadow: inset 0 -2px 0 var(--tblr-primary);
}
.tab-content-configs > .tab-pane {
    padding: 0.5rem 0.25rem;
    min-height: 220px;
}

/* ── Total do aluguel no formulário do contrato ───────────────────────
   O número grande do bloco Valores Adicionais: aluguel + adicionais, somado
   em tela. É um destaque de leitura, não um campo. */
.total-aluguel {
    padding: 1rem 1.25rem;
    border: 1px solid var(--tblr-border-color);
    border-left: 4px solid var(--tblr-primary);
    border-radius: 0.5rem;
    background-color: var(--tblr-bg-surface-secondary);
}
.total-aluguel-rotulo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
}
.total-aluguel-valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tblr-primary);
    font-variant-numeric: tabular-nums;
}
.total-aluguel-ajuda {
    font-size: 0.8125rem;
}
@media (max-width: 767.98px) {
    .total-aluguel-valor {
        font-size: 1.5rem;
    }
}

/* ── Lista de marcadores dos textos de WhatsApp (modelos_whatsapp.js) ──
   Abre encostada embaixo do textarea ao digitar "[": cada item é o marcador
   em código e o que ele vira. O contêiner do campo é o referencial. */
.campo-com-marcadores .mb-3 {
    position: relative;
}
.lista-marcadores {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1030;
    max-height: 15rem;
    overflow-y: auto;
    margin-top: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.375rem;
    background-color: var(--tblr-bg-surface);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}
.lista-marcadores-item {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--tblr-body-color);
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
}
.lista-marcadores-item code {
    flex-shrink: 0;
    color: var(--tblr-primary);
}
.lista-marcadores-item span {
    color: var(--tblr-secondary);
    min-width: 0;
}
.lista-marcadores-item:hover,
.lista-marcadores-item.ativo {
    background-color: var(--tblr-primary-lt);
    color: var(--tblr-body-color);
}

/* Ícone "?" de ajuda ao lado de um rótulo (macro `icone_ajuda`): cursor de
   ajuda e realce no hover, para ficar claro que há explicação ali. */
.icone-ajuda {
    cursor: help;
}
.icone-ajuda:hover,
.icone-ajuda:focus {
    color: var(--tblr-primary) !important;
}

/* ── Ficha em modal (Visualizar registro) ───────────────────────────────
   Os blocos vão lado a lado: empilhados em coluna única a ficha fica comprida e
   exige rolagem para ler o que cabia na tela. Cada bloco é um assunto fechado,
   então quebrar em duas colunas não separa nada que devesse estar junto.
   No celular volta a ser uma coluna só. */
.ficha-blocos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ficha-blocos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
  }

  /* Tabela não divide bem em meia largura: ocupa a linha inteira. */
  .ficha-bloco-largo {
    grid-column: 1 / -1;
  }
}

.ficha-bloco-titulo {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tblr-border-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tblr-primary);
}

/* ── Quadro de imagem da parametrização (logomarca, favicon) ────────────
   Sem arquivo enviado o quadro mostra a DIMENSÃO esperada, não um `<img>` sem
   src: imagem vazia (ou apontando para arquivo que sumiu) vira o ícone de
   "imagem quebrada" do navegador, que parece defeito do sistema. */
.quadro-imagem-config {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, transparent);
}

.quadro-imagem-config img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quadro-imagem-config-vazio {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

/* O quadro no tamanho da logomarca (150 × 60): o mesmo do menu lateral e dos
   documentos, para o assinante ver como a imagem vai caber. */
.quadro-imagem-config-logomarca {
  width: 150px;
  height: 60px;
}

/* ── Botões de página (Anterior / Próxima) ────────────────────────────
   O conteúdo fica centralizado de verdade: `inline-flex` com
   `justify-content: center` e um `gap` no lugar das margens que o tema dá ao
   ícone — as dele assumem ícone à esquerda e empurravam o texto de "Próxima"
   para o canto. A largura mínima igual nos dois mantém a régua no lugar
   quando um deles desabilita na ponta da lista. */
.btn-pagina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 8.25rem;
}

.btn-pagina .icon,
.btn-pagina .icon-right {
  margin: 0;
}

/* ── Azul do tema escuro ──────────────────────────────────────────────
   O azul do tema (o `--azul-cheio` abaixo) foi desenhado para fundo claro:
   sobre o escuro rende 2,1:1 de contraste e some — é o que deixava badge ("A vencer"),
   ícone de ação, link e barra de gráfico apagados. Aqui ele é trocado por um
   tom mais claro, que rende 5,1:1 sobre o card e 5,9:1 sobre o fundo da
   página. Vale SÓ no tema escuro (`:root[data-bs-theme=dark]`, mais
   específico que o seletor do tema, que carrega depois deste arquivo) — o
   claro continua igual.

   Uma exceção deliberada: onde o azul é FUNDO de texto branco (botão
   primário, opção marcada do seletor de tema, página atual), o tom CHEIO
   continua, porque branco sobre o azul claro cairia para 3,1:1. Assim a tinta
   fica legível e os botões mantêm o contraste que já tinham (7,4:1). */
:root[data-bs-theme=dark] {
  --azul-tinta: #4d96e8;              /* texto, borda, ícone, gráfico */
  --azul-tinta-rgb: 77, 150, 232;
  --azul-cheio: #0054a6;              /* fundo de texto branco */
  --azul-cheio-rgb: 0, 84, 166;

  --tblr-primary: var(--azul-tinta);
  --tblr-primary-rgb: var(--azul-tinta-rgb);
  --tblr-blue: var(--azul-tinta);
  --tblr-blue-rgb: var(--azul-tinta-rgb);
}

/* Botão primário e opção marcada: fundo no tom cheio, texto branco. */
:root[data-bs-theme=dark] .btn-primary,
:root[data-bs-theme=dark] .btn-check:checked + .btn-outline-primary {
  --tblr-btn-bg: var(--azul-cheio);
  --tblr-btn-border-color: var(--azul-cheio);
  --tblr-btn-hover-bg: rgba(var(--azul-cheio-rgb), 0.85);
  --tblr-btn-hover-border-color: var(--azul-cheio);
  --tblr-btn-active-bg: var(--azul-cheio);
  --tblr-btn-active-border-color: var(--azul-cheio);
  --tblr-btn-disabled-bg: var(--azul-cheio);
  --tblr-btn-disabled-border-color: var(--azul-cheio);
}

/* A página atual da paginação, pelo mesmo motivo. */
:root[data-bs-theme=dark] .paginacao-posicao {
  background-color: var(--azul-cheio) !important;
}

/* ── Modal de notificações (mensagens_flash.html) ─────────────────────
   Ícone grande no tom da mensagem e, quando há mais de uma, a lista alinhada
   à esquerda dentro do corpo centralizado. */
.notificacao-icone {
  display: inline-flex;
}

.notificacao-lista {
  text-align: left;
  margin: 0 auto;
  padding-left: 1.25rem;
  max-width: 22rem;
}

.notificacao-lista li + li {
  margin-top: 0.5rem;
}

/* Alerta de notificação no corpo da página (tela de login): o ícone alinha
   com a primeira linha do título, não com o meio do bloco. */
.notificacao-inline-icone {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

/* Barra do fechamento automático: mostra o tempo que resta, para o modal não
   simplesmente sumir. Some para quem pediu menos animação — aí o modal ainda
   se fecha no tempo, só sem a barra correndo. */
.notificacao-progresso {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tblr-border-color);
}

.notificacao-progresso-barra {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation-name: notificacao-esvaziar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes notificacao-esvaziar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .notificacao-progresso {
    display: none;
  }
}

/* Seletor de tema em botões: três opções lado a lado não cabem na largura do
   celular (o último rótulo era cortado), então abaixo de `md` os botões
   empilham, cada um com o próprio contorno. */
@media (max-width: 767.98px) {
  .seletor-tema {
    flex-direction: column;
    align-items: stretch;
  }

  .seletor-tema > .btn {
    margin-left: 0;
    border-radius: var(--tblr-border-radius) !important;
  }

  .seletor-tema > .btn + .btn-check + .btn {
    margin-top: 0.5rem;
  }
}

/* ── Sugestão de município (campo Cidade - UF) ──────────────────────────
   A lista nasce colada ao campo: como o campo pode estar dentro de uma coluna
   estreita, posicionar pelo pai (`position: relative` no contêiner do campo)
   evita a lista escapar para o canto da tela. */
.campo-com-sugestao {
  position: relative;
}

.sugestoes-municipio {
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
}

/* Sugestão sob o cursor OU sob a seta do teclado: o mesmo destaque, para quem
   navega pelo teclado enxergar onde está. */
.sugestoes-municipio .dropdown-item.active {
  background-color: var(--tblr-primary);
  color: #fff;
}

/* ── Seleção em massa (listagens) ─────────────────────────────────────
   A barra aparece acima da lista quando há linha marcada (`selecao_massa.js`).
   No celular o checkbox vai no canto do cartão do accordion, FORA do botão que
   abre o item: dentro dele seria HTML inválido e o toque abriria o cartão. O
   cabeçalho do cartão ganha recuo à esquerda para o checkbox não cobrir o
   nome. */
.barra-selecao-massa {
  position: sticky;
  top: 0.5rem;
  z-index: 3;
  box-shadow: 0 0.375rem 1rem rgba(24, 36, 51, 0.12);
}

.selecao-massa-cartao {
  position: relative;
}

.selecao-massa-cartao-check {
  position: absolute;
  top: 1rem;
  left: 0.875rem;
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.selecao-massa-cartao-check .form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
}

.selecao-massa-cartao > .accordion-header .accordion-button {
  padding-left: 2.75rem;
}

/* ── Seletor "Cadastro por" (CPF ou CNPJ) ─────────────────────────────
   Dois cartões lado a lado, na altura de um campo do formulário: ícone, a
   sigla em destaque e o tipo por extenso embaixo. O escolhido fica cheio na
   cor do produto — em qualquer tema, o fundo sólido azul é do `.btn-check`. */
.seletor-tipo-pessoa {
  gap: 0.5rem;
  container: tipo-pessoa / inline-size;
}

.seletor-tipo-pessoa > .seletor-tipo-pessoa-opcao {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  padding: 0.3125rem 0.5rem;
  /* A mesma altura dos campos ao lado, com ou sem a linha do tipo por extenso. */
  min-height: 2.5rem;
  border-radius: var(--tblr-border-radius) !important;
  margin-left: 0 !important;
  text-align: left;
  line-height: 1.15;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.seletor-tipo-pessoa .seletor-tipo-pessoa-opcao .icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

.seletor-tipo-pessoa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.seletor-tipo-pessoa-sigla {
  font-weight: 700;
  font-size: 0.875rem;
}

.seletor-tipo-pessoa-detalhe {
  font-size: 0.6875rem;
  font-weight: 500;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seletor estreito (coluna de ~245px no computador): "Pessoa física" não
   cabe inteiro ao lado do ícone. Em vez de cortar em "Pessoa físi…", fica o
   essencial — ícone e sigla, centralizados; o tipo por extenso volta quando há
   espaço (celular, coluna larga). */
@container tipo-pessoa (max-width: 18rem) {
  .seletor-tipo-pessoa-detalhe {
    display: none;
  }

  .seletor-tipo-pessoa > .seletor-tipo-pessoa-opcao {
    justify-content: center;
  }
}

.btn-check:checked + .seletor-tipo-pessoa-opcao {
  box-shadow: 0 0.25rem 0.75rem rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.25);
}

.btn-check:disabled + .seletor-tipo-pessoa-opcao {
  opacity: 0.75;
}


/* ── Select que depende de um cadastro que ainda não existe ──────────────
   (`campo_select(pendencia=...)`: "Nenhum proprietário cadastrado"). O campo
   fica desabilitado com a borda em tom de aviso, e o cartão logo abaixo diz o
   que fazer, com o botão de cadastrar. Mesmas cores nos dois temas: o amarelo
   de aviso do Tabler já é legível no claro e no escuro. */
.form-select.campo-pendente,
.form-select.campo-pendente:disabled {
  border-color: rgba(var(--tblr-warning-rgb), 0.55);
  color: var(--tblr-warning);
  opacity: 1;
}

.pendencia-campo {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(var(--tblr-warning-rgb), 0.3);
  border-radius: var(--tblr-border-radius);
  background: rgba(var(--tblr-warning-rgb), 0.08);
}

.pendencia-campo-icone {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--tblr-warning);
}

.pendencia-campo-corpo {
  min-width: 0;
}

.pendencia-campo-explicacao {
  font-size: 0.8125rem;
  line-height: 1.35;
}