/* =============================================================================
   Painel — acabamento sobre o AdminLTE 3 (Bootstrap 4).

   Este arquivo é carregado pelos DOIS painéis, o da imobiliária e o de quem
   opera o SaaS. Ele tem três partes, e a ordem entre elas importa:

     1. TOKENS      as variáveis; quem as redeclara é o `App\Support\Tema`,
                    injetado DEPOIS deste arquivo (mesmo `:root`, o último vence)
     2. CAMADA VISUAL COMPARTILHADA
                    agarra o que o AdminLTE já desenha (`.card`, `.table`,
                    `.badge`, `.form-control`) — é o que faz **tela nova nascer
                    no padrão sem ninguém lembrar de nada**
     3. COMPONENTES o vocabulário do domínio: quadro de número, cascata de
                    descontos, faixa de atraso, cartão de plano

   ⚠️ **A regra ao mexer na camada compartilhada: não mudar a marcação das
   views.** Se para acertar uma tela você precisou de uma classe nova, ela é
   *daquela* tela e vai para a seção de componentes, não para a camada.

   ⚠️ **Os nomes das variáveis são genéricos de propósito** (`--marca`, e não
   `--azul`): a paleta é editável em /plataforma/configuracoes › Aparência, e uma
   variável chamada `--azul` passaria a mentir em todo arquivo que a lê no dia em
   que alguém escolher verde.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* A marca. O tom base é o mesmo `--accent-color` do LuxEstate (#0075c0),
       para que o painel e a vitrine pública da mesma casa não pareçam dois
       produtos diferentes. */
    --marca:         #0075c0;
    --marca-escura:  #08375a;
    --marca-clara:   #3fa3e8;

    /* ⚠️ Estes NÃO são editáveis, e é decisão: são semáforo, não paleta.
       "Pago" continua verde e "vencido" continua vermelho em qualquer tema —
       editáveis, dariam uma tela inteira de avisos que não avisam nada. */
    --positivo:      #12805c;
    --positivo-veu:  #e7f6f0;
    --negativo:      #c02626;
    --negativo-veu:  #fdeaea;
    --atencao:       #a16207;
    --atencao-veu:   #fdf4e3;
    --neutro:        #475569;

    /* Tinta e superfície. O painel não usa o preto do Bootstrap: #101828 sobre
       branco dá contraste de sobra e cansa menos numa tela que fica aberta o
       dia inteiro. */
    --tinta-forte:   #101828;
    --tinta:         #344054;
    --tinta-suave:   #667085;
    --borda:         #e4e7ec;
    --borda-suave:   #f1f3f7;
    --fundo:         #f5f6f8;
    --superficie:    #ffffff;

    /* Derivados que o `Tema` recalcula. Os valores aqui são a versão de fábrica
       e precisam bater EXATAMENTE com o que `Tema::css()` devolve para a paleta
       padrão — divergindo, a tela mudaria de tom ao gravar a mesma paleta que
       já estava valendo. */
    --marca-texto:   #ffffff;
    --marca-fraca:   #e6f1f9;
    --marca-tenue:   #f4f9fd;

    --sidebar-texto:       #ffffff;
    --sidebar-texto-suave: rgba(255,255,255,.78);
    --sidebar-veu:         rgba(255,255,255,.12);
    --sidebar-veu-fraco:   rgba(255,255,255,.08);

    --barra-fundo:       #ffffff;
    --barra-texto:       var(--tinta);
    --barra-texto-forte: var(--tinta-forte);
    --barra-borda:       var(--borda);
    --barra-hover:       rgba(16,24,40,.05);
    --barra-sombra:      rgba(16,24,40,.04);

    --login-topo:  #041d31;
    --login-base:  #0b4a2f;
    --destaque:    #f0a202;
    --destaque-veu: rgba(240,162,2,.22);

    --raio:        .5rem;
    --raio-pequeno: .375rem;
    --sombra:      0 1px 2px rgba(16,24,40,.05);
    --sombra-media: 0 4px 12px rgba(16,24,40,.08);

    --fonte-texto:  'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-titulo: 'Poppins', var(--fonte-texto);

    /* Apelidos herdados. Mantidos porque o `Tema` os emite e porque há regra
       abaixo que ainda os lê. */
    --terra:        var(--marca);
    --terra-escuro: var(--marca-escura);
    --dende:        var(--destaque);
    --folha:        var(--positivo);
}

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

body, .wrapper { background-color: var(--fundo); }

body {
    font-family: var(--fonte-texto);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--tinta-forte);
    letter-spacing: -.01em;
}

a { color: var(--marca); }
a:hover { color: var(--marca-escura); }

/* ⚠️ `label` em 600 NÃO vale para rótulo de switch nem de checkbox: ali o
   rótulo é uma frase inteira, e em negrito a tela de Configurações vira uma
   parede. */
label { font-weight: 600; color: var(--tinta-forte); font-size: .875rem; }
.custom-control-label, .form-check-label { font-weight: 400; color: var(--tinta); }

.text-muted { color: var(--tinta-suave) !important; }

/* -----------------------------------------------------------------------------
   3. SIDEBAR
   -------------------------------------------------------------------------- */

.main-sidebar { background-color: var(--marca-escura) !important; }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--sidebar-veu);
    color: var(--sidebar-texto);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--marca-clara);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: var(--sidebar-veu-fraco);
    color: var(--sidebar-texto);
}

.nav-sidebar .nav-link { color: var(--sidebar-texto-suave); border-radius: var(--raio-pequeno); }
.nav-sidebar .nav-treeview .nav-link { font-size: .9rem; padding-left: 2.5rem; }
.nav-sidebar .nav-icon { opacity: .9; }

/* Nome da imobiliária longo não pode vazar os 250px da sidebar. */
.brand-link {
    border-bottom: 1px solid var(--sidebar-veu-fraco);
    display: flex;
    align-items: center;
    padding: .9rem 1rem;
}

/* ⚠️ `.brand-text` NÃO entra na regra dos títulos acima.
   Encostá-lo ali para pegar a FONTE trouxe junto a COR — quase-preto sobre a
   sidebar escura, 1,26:1 de contraste, no elemento que aparece em todas as
   páginas. A cor aqui sai de `--sidebar-texto`, que o `Tema` calcula a partir
   da cor do menu.

   ⚠️ E não devolva `font-weight-light` ao markup: o utilitário do Bootstrap é
   `!important` e vence este peso — um wordmark em 300 sobre fundo escuro some. */
.brand-text {
    font-family: var(--fonte-titulo);
    color: var(--sidebar-texto);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-subtexto {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--sidebar-texto-suave);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   4. BARRA SUPERIOR

   ⚠️ **O texto daqui NUNCA é `text-muted`.** O utilitário do Bootstrap é
   `!important`, então num tema de barra escura ele venceria a cor clara e o nome
   de quem está logado sumiria no fundo. Quem manda é `--barra-texto`.

   A especificidade é de propósito: `.navbar-light .navbar-nav .nav-link` do
   AdminLTE tem três classes e pinta o link de `rgba(0,0,0,.5)`; os seletores
   abaixo têm quatro e vencem SEM `!important`.
   -------------------------------------------------------------------------- */

.main-header.navbar {
    background-color: var(--barra-fundo);
    border-bottom: 1px solid var(--barra-borda);
    box-shadow: 0 1px 2px var(--barra-sombra);
}

.main-header.navbar .navbar-nav .nav-link,
.main-header.navbar.navbar-light .navbar-nav .nav-link { color: var(--barra-texto); }

.main-header.navbar .navbar-nav .nav-link:hover,
.main-header.navbar.navbar-light .navbar-nav .nav-link:hover {
    color: var(--barra-texto-forte);
    background-color: var(--barra-hover);
    border-radius: var(--raio-pequeno);
}

.barra-usuario {
    color: var(--barra-texto-forte);
    font-weight: 500;
    font-size: .875rem;
}

.barra-usuario small { color: var(--barra-texto); font-weight: 400; }

/* -----------------------------------------------------------------------------
   5. CABEÇALHO DA PÁGINA
   -------------------------------------------------------------------------- */

.content-header { padding: 1.25rem .5rem .25rem; }

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
}

.cabecalho-texto { flex: 1 1 320px; min-width: 0; }

.cabecalho-pagina h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.cabecalho-subtitulo {
    color: var(--tinta-suave);
    font-size: .875rem;
    margin: .25rem 0 0;
    max-width: 72ch;
}

.cabecalho-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* -----------------------------------------------------------------------------
   6. CAMADA VISUAL COMPARTILHADA

   A partir daqui é o que dá o padrão às telas dos dois painéis sem que nenhuma
   delas precise declarar nada.
   -------------------------------------------------------------------------- */

/* ----- Cards -------------------------------------------------------------- */

.card {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
}

/* ⚠️ `.card-header` continua sendo BLOCO. Virá-lo em flex quebra
   /admin/configuracoes, que põe a barra de abas dentro de um
   `.card-header p-0 pt-1 border-bottom-0` — como filho flex, a `ul` das abas
   perde a largura. O `.card-tools` vai para a direita por `float`, e o AdminLTE
   já traz o clearfix. */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--borda-suave);
    padding: .9rem 1.15rem;
}

.card-header .card-title {
    font-family: var(--fonte-titulo);
    font-size: .95rem;
    font-weight: 600;
    color: var(--tinta-forte);
    margin: 0;
}

.card-body { padding: 1.15rem; }

.card-footer {
    background-color: var(--borda-suave);
    border-top: 1px solid var(--borda-suave);
    padding: .75rem 1.15rem;
}

.card-outline { border-top: 3px solid var(--borda); }
.card-outline.card-primary { border-top-color: var(--marca); }
.card-outline.card-success { border-top-color: var(--positivo); }
.card-outline.card-danger  { border-top-color: var(--negativo); }
.card-outline.card-warning { border-top-color: var(--atencao); }

/* ----- Tabelas ------------------------------------------------------------ */

.table { color: var(--tinta); margin-bottom: 0; }

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--borda);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    padding: .65rem 1.15rem;
    white-space: nowrap;
}

.table tbody td { padding: .8rem 1.15rem; border-top: 1px solid var(--borda-suave); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr:hover { background-color: var(--marca-tenue); }

.table tfoot th {
    border-top: 2px solid var(--borda);
    padding: .75rem 1.15rem;
    font-size: .875rem;
    color: var(--tinta-forte);
}

/* Dinheiro em coluna: alinhar pelo dígito, não pela largura da fonte. Sem isto
   o "1" ocupa menos que o "8" e a coluna de valores fica com a vírgula
   dançando. */
.coluna-dinheiro {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

/* ⚠️ A célula de ações precisa dos DOIS: `width: 1%` é "o mínimo que couber"
   numa tabela que já ocupa 100%, e `nowrap` impede que esse mínimo seja a
   largura de UM botão — que é justamente o pedido de empilhar. Sozinho, o
   `width: 1%` empilha o lápis sobre a lixeira em toda lista apertada. */
.celula-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.celula-acoes .btn { padding: .2rem .45rem; }

/* ----- Selos -------------------------------------------------------------- */

/* ⚠️ Escopado em `.content-wrapper`: o contador de chamados na sidebar da
   plataforma é `badge-danger` sobre fundo escuro e precisa continuar CHEIO —
   ali o vermelho é alarme, não etiqueta. */
.content-wrapper .badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .3em .6em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.content-wrapper .badge-success   { background-color: var(--positivo-veu); color: var(--positivo); }
.content-wrapper .badge-danger    { background-color: var(--negativo-veu); color: var(--negativo); }
.content-wrapper .badge-warning   { background-color: var(--atencao-veu);  color: var(--atencao); }
.content-wrapper .badge-info      { background-color: #e8f1fd;             color: #1d4ed8; }
.content-wrapper .badge-secondary { background-color: var(--borda-suave);  color: var(--neutro); }
.content-wrapper .badge-primary   { background-color: var(--marca-fraca);  color: var(--marca-escura); }

/* ----- Botões ------------------------------------------------------------- */

.btn {
    border-radius: var(--raio-pequeno);
    font-weight: 500;
    font-size: .875rem;
}

.btn-primary {
    background-color: var(--marca);
    border-color: var(--marca);
    color: var(--marca-texto);
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--marca-escura);
    border-color: var(--marca-escura);
    color: var(--marca-texto);
}

.btn-outline-primary { color: var(--marca); border-color: var(--marca); }
.btn-outline-primary:hover { background-color: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

.btn-outline-secondary { color: var(--tinta); border-color: var(--borda); }
.btn-outline-secondary:hover { background-color: var(--borda-suave); border-color: var(--borda); color: var(--tinta-forte); }

.btn-marca-contorno {
    color: var(--marca);
    border: 1px solid var(--marca);
    background: transparent;
}
.btn-marca-contorno:hover { background-color: var(--marca); color: var(--marca-texto); }

.text-primary { color: var(--marca) !important; }
.bg-primary   { background-color: var(--marca) !important; color: var(--marca-texto) !important; }

/* ----- Formulários -------------------------------------------------------- */

.form-control, .custom-select {
    border-color: var(--borda);
    border-radius: var(--raio-pequeno);
    color: var(--tinta-forte);
    font-size: .9rem;
}

.form-control:focus, .custom-select:focus {
    border-color: var(--marca-clara);
    box-shadow: 0 0 0 3px var(--marca-fraca);
}

.form-control::placeholder { color: #98a2b3; }
.input-group-text { background-color: var(--borda-suave); border-color: var(--borda); color: var(--tinta-suave); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--marca);
    border-color: var(--marca);
}

/* O select2 não herda nada do Bootstrap; sem isto ele fica 2px mais alto que
   os campos ao lado e a linha do formulário desalinha. */
.select2-container--bootstrap4 .select2-selection { border-color: var(--borda); }

/* ----- Abas --------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--borda); }

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--tinta-suave);
    font-weight: 500;
    padding: .65rem 1rem;
}

.nav-tabs .nav-link:hover { border-bottom-color: var(--borda); color: var(--tinta-forte); }

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--marca);
    color: var(--marca);
    font-weight: 600;
}

/* ----- Alertas e caixas de apoio ------------------------------------------ */

.alert { border: 0; border-radius: var(--raio); font-size: .9rem; }
.alert-success { background-color: var(--positivo-veu); color: var(--positivo); }
.alert-danger  { background-color: var(--negativo-veu); color: var(--negativo); }
.alert-warning { background-color: var(--atencao-veu);  color: var(--atencao); }
.alert-info    { background-color: var(--marca-tenue);  color: var(--marca-escura); }

.caixa-ajuda {
    background-color: var(--marca-tenue);
    border-left: 3px solid var(--marca-clara);
    border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
    padding: .75rem .9rem;
    font-size: .85rem;
    color: var(--tinta);
    margin-bottom: 1rem;
}

.bg-warning-suave { background-color: var(--atencao-veu); color: var(--atencao); }

/* ----- Estado vazio ------------------------------------------------------- */

/* Toda lista sem registro mostra o mesmo bloco: um ícone e uma frase que diz
   **o que apareceria ali** — não um "Nenhum registro" solto no branco. */
.vazio-suave {
    text-align: center;
    padding: 2.75rem 1.5rem;
    color: var(--tinta-suave);
}

.vazio-suave i {
    font-size: 1.75rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: .65rem;
}

.vazio-suave p { margin-bottom: .25rem; }
.vazio-suave .small { font-size: .8rem; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* -----------------------------------------------------------------------------
   7. ⚠️ SHIM DO BOOTSTRAP 5

   O painel roda no Bootstrap **4** (é o que o AdminLTE 3 traz), mas o site
   público roda no **5** (LuxEstate). Quem escreve as duas coisas no mesmo dia
   leva os utilitários do 5 para as telas do painel — e ali eles simplesmente
   **não existem**: `gap-2` e `g-3` não dão erro, não avisam nada, e o
   espaçamento some. Foi assim em 23 telas.

   A escolha aqui é declarar o punhado que de fato aparece, em vez de corrigir a
   marcação uma a uma: assim a próxima tela escrita com hábito de Bootstrap 5
   nasce certa, em vez de repetir o defeito. **Só entram utilitários que já
   estão em uso** — este bloco não é um port do Bootstrap 5.
   -------------------------------------------------------------------------- */

.g-0 { gap: 0; }
.g-1, .gap-1 { gap: .25rem; }
.g-2, .gap-2 { gap: .5rem; }
.g-3, .gap-3 { gap: 1rem; }
.g-4, .gap-4 { gap: 1.5rem; }

/* `g-*` no Bootstrap 5 é gutter de grid, não `gap` de flex. Numa `.row` do
   Bootstrap 4 o gutter já vem do padding das colunas, então aplicar `gap`
   somaria espaço duas vezes — daí o `g-*` só valer fora da row. */
.row.g-0, .row.g-1, .row.g-2, .row.g-3, .row.g-4 { gap: 0; }

.ms-1 { margin-left: .25rem; }  .me-1 { margin-right: .25rem; }
.ms-2 { margin-left: .5rem; }   .me-2 { margin-right: .5rem; }
.ms-3 { margin-left: 1rem; }    .me-3 { margin-right: 1rem; }
.ms-4 { margin-left: 1.5rem; }  .me-4 { margin-right: 1.5rem; }
.ms-auto { margin-left: auto; } .me-auto { margin-right: auto; }

.ps-2 { padding-left: .5rem; }  .pe-2 { padding-right: .5rem; }
.ps-3 { padding-left: 1rem; }   .pe-3 { padding-right: 1rem; }

.fs-1 { font-size: 2.25rem; }  .fs-2 { font-size: 1.75rem; }
.fs-3 { font-size: 1.5rem; }   .fs-4 { font-size: 1.25rem; }
.fs-5 { font-size: 1.1rem; }   .fs-6 { font-size: .9rem; }

.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }

.top-0 { top: 0; } .start-0 { left: 0; } .end-0 { right: 0; } .bottom-0 { bottom: 0; }

/* ⚠️ **`text-end` é o pior deles**, e foi o mais fácil de não perceber: são 78
   ocorrências no painel, quase todas em coluna de dinheiro. Sem esta linha,
   TODO valor em real do painel ficava alinhado à esquerda, com a vírgula
   dançando de linha em linha — e nada no código dizia por quê. */
.text-end   { text-align: right !important; }
.text-start { text-align: left !important; }

/* ⚠️ **`badge bg-danger` não é `badge-danger`.** No Bootstrap 5 o selo perdeu as
   variantes próprias e passou a se pintar com os utilitários de fundo; no 4,
   `bg-danger` põe o fundo vermelho e **não mexe na cor do texto**, que fica
   escuro em cima dele. O resultado é um selo ilegível — e ele aparece
   justamente onde a informação é urgente (dias de atraso, contrato vencendo).

   Aqui a dupla é redirecionada para o mesmo tom suave dos selos normais, em vez
   de só consertar o contraste: dois selos com a mesma função e desenhos
   diferentes na mesma tela é o defeito seguinte. */
.content-wrapper .badge.bg-success   { background-color: var(--positivo-veu) !important; color: var(--positivo) !important; }
.content-wrapper .badge.bg-danger    { background-color: var(--negativo-veu) !important; color: var(--negativo) !important; }
.content-wrapper .badge.bg-warning   { background-color: var(--atencao-veu)  !important; color: var(--atencao)  !important; }
.content-wrapper .badge.bg-info      { background-color: #e8f1fd             !important; color: #1d4ed8         !important; }
.content-wrapper .badge.bg-secondary { background-color: var(--borda-suave)  !important; color: var(--neutro)   !important; }
.content-wrapper .badge.bg-primary   { background-color: var(--marca-fraca)  !important; color: var(--marca-escura) !important; }
.content-wrapper .badge.bg-light     { background-color: var(--borda-suave)  !important; color: var(--tinta)    !important; }
.content-wrapper .badge.bg-dark      { background-color: #e2e5ea             !important; color: var(--tinta-forte) !important; }

/* -----------------------------------------------------------------------------
   8. COMPONENTES DO DOMÍNIO
   -------------------------------------------------------------------------- */

/* ----- Quadro de número ---------------------------------------------------
   Substitui o `.small-box` do AdminLTE nas telas novas. O do tema pinta o
   cartão inteiro de uma cor sólida; quatro deles lado a lado no topo de uma
   tela competem entre si e nenhum é lido. Aqui a cor fica numa barra fina à
   esquerda, e o número é a única coisa grande.                              */

.quadro {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--neutro);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 92px;
    justify-content: center;
}

.quadro-rotulo {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
}

.quadro-valor {
    font-family: var(--fonte-titulo);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--tinta-forte);
    line-height: 1.25;
    margin-top: .15rem;
    /* Valor em real é largo: sem isto, "R$ 128.450,00" quebra em duas linhas
       num quadro e em uma no vizinho, e a fileira perde o alinhamento. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quadro-nota { font-size: .78rem; color: var(--tinta-suave); margin-top: .1rem; }

/* O quadro inteiro é o alvo do clique, e não um link dentro dele: num painel
   que se lê de relance, o dedo não deve ter de procurar onde clicar. */
.quadro-link { display: block; color: inherit; }
.quadro-link:hover { text-decoration: none; color: inherit; }
.quadro-link:hover .quadro { border-color: var(--marca-clara); box-shadow: var(--sombra-media); }

.quadro-marca    { border-left-color: var(--marca); }
.quadro-marca    .quadro-valor { color: var(--marca-escura); }
.quadro-positivo { border-left-color: var(--positivo); }
.quadro-positivo .quadro-valor { color: var(--positivo); }
.quadro-negativo { border-left-color: var(--negativo); }
.quadro-negativo .quadro-valor { color: var(--negativo); }
.quadro-atencao  { border-left-color: var(--atencao); }
.quadro-atencao  .quadro-valor { color: var(--atencao); }
.quadro-neutro   { border-left-color: var(--borda); }

/* ----- Cartões de número do AdminLTE (telas antigas) ---------------------- */

.small-box h3 { font-size: 1.6rem; font-weight: 600; }
.small-box .icon > i { opacity: .22; }
.small-box.caixa-marca { background: var(--marca); color: var(--marca-texto); }
.small-box.caixa-marca .icon > i { color: var(--marca-texto); }

/* ⚠️ O `bg-warning` do AdminLTE é amarelo com texto ESCURO. Trocar só o fundo
   deixaria o número escuro sobre fundo escuro — daí repintar os filhos. */
.small-box.bg-warning, .small-box.bg-warning > .inner h3,
.small-box.bg-warning > .inner p, .small-box.bg-warning .icon > i {
    color: #fff;
}
.small-box.bg-warning { background-color: var(--atencao) !important; }

/* ----- Gráficos ----------------------------------------------------------- */

/* Chart.js com `maintainAspectRatio: false` mede o elemento-pai; sem altura
   declarada ele mede zero e o gráfico não aparece. */
.caixa-grafico { position: relative; height: 260px; }
.caixa-grafico-baixa { height: 180px; }

/* ----- Lista de barras de proporção --------------------------------------- */

.lista-barras { padding: .35rem 0; }

.linha-barra { padding: .55rem 1.15rem; }
.linha-barra + .linha-barra { border-top: 1px solid var(--borda-suave); }

.linha-barra-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .875rem;
    margin-bottom: .3rem;
}

.linha-barra-topo strong { color: var(--tinta-forte); font-variant-numeric: tabular-nums; }

.progress { background-color: var(--borda-suave); border-radius: 999px; }
.progress-xs { height: 6px; }
.progress-bar { border-radius: 999px; }
.progress-bar.bg-primary { background-color: var(--marca) !important; }

/* ----- Cascata de descontos ------------------------------------------------
   Bruto → tarifa → comissão → líquido. É a forma de mostrar que os DOIS
   descontos existem e de quem é cada um — o que uma linha só de "taxas"
   esconderia.                                                               */

.cascata { font-size: .925rem; }

.cascata-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--borda-suave);
}

.cascata-linha strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cascata-linha em { color: var(--tinta-suave); font-style: normal; font-size: .8rem; }
.cascata-desconto { color: var(--tinta-suave); }
.cascata-desconto strong { color: var(--negativo); }

.cascata-total {
    border-bottom: 0;
    border-top: 2px solid var(--borda);
    margin-top: .25rem;
    padding-top: .75rem;
    font-weight: 600;
    color: var(--tinta-forte);
}

.cascata-total strong { font-size: 1.15rem; color: var(--positivo); }

/* ----- Listas de valores e de itens marcados ------------------------------ */

.lista-valores { margin: 0; font-size: .9rem; }
.lista-valores > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.lista-valores > div + div { border-top: 1px solid var(--borda-suave); }
.lista-valores dt { font-weight: 400; color: var(--tinta-suave); margin: 0; }
.lista-valores dd { margin: 0; font-weight: 600; color: var(--tinta-forte); font-variant-numeric: tabular-nums; }

.lista-marcada { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .875rem; }
.lista-marcada li { display: flex; gap: .6rem; padding: .45rem 0; align-items: flex-start; }
.lista-marcada li i { margin-top: .2rem; flex: 0 0 auto; }

/* ----- Barra de relatórios ------------------------------------------------- */

.barra-relatorios {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .6rem .75rem;
    margin-bottom: 1rem;
}

.atalhos-relatorio { display: flex; flex-wrap: wrap; gap: .35rem; }

.atalho {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: var(--raio-pequeno);
    font-size: .85rem;
    font-weight: 500;
    color: var(--tinta);
    white-space: nowrap;
}

.atalho:hover { background: var(--borda-suave); color: var(--tinta-forte); text-decoration: none; }
.atalho i { color: var(--tinta-suave); font-size: .8rem; }

.atalho-ativo, .atalho-ativo:hover {
    background: var(--marca-fraca);
    color: var(--marca-escura);
    font-weight: 600;
}
.atalho-ativo i { color: var(--marca); }

.filtro-periodo { display: flex; align-items: center; gap: .4rem; }
.filtro-periodo .form-control { width: auto; }
.filtro-periodo .ate { color: var(--tinta-suave); font-size: .85rem; }

/* ----- Faixas de atraso ---------------------------------------------------- */

.faixas-atraso { display: flex; flex-wrap: wrap; }

.faixa { flex: 1 1 130px; padding: .5rem .75rem; text-align: center; }
.faixa + .faixa { border-left: 1px solid var(--borda-suave); }
.faixa-rotulo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.faixa-valor  { display: block; font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 600; color: var(--tinta-forte); }
.faixa-nota   { display: block; font-size: .75rem; color: var(--tinta-suave); }
.faixa-vazia  { opacity: .45; }

/* ⚠️ Três níveis, e não uma cor só: um atraso de 90 dias exige providência
   diferente de um de 3, e a lista precisa dizer isso sem que ninguém conte os
   dias de cabeça. */
.selo-atraso {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--atencao-veu);
    color: var(--atencao);
    white-space: nowrap;
}

.selo-atraso-medio { background: #fde9d7; color: #9a3412; }
.selo-atraso-grave { background: var(--negativo-veu); color: var(--negativo); }

/* ----- Código do imóvel / contrato ---------------------------------------- */

/* Referência que a imobiliária dita ao telefone: monoespaçada para o "0" não se
   confundir com o "O" na hora de ler em voz alta. */
.codigo-imovel, .codigo-contrato {
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--borda-suave);
    color: var(--tinta-forte);
    padding: .12rem .4rem;
    border-radius: var(--raio-pequeno);
    white-space: nowrap;
}

/* ----- Vitrine de planos --------------------------------------------------
   ⚠️ **Sem `.row`/`.col-*`.** O número de planos é editável em
   /plataforma/planos, e qualquer número fixo de colunas volta a quebrar no dia
   em que alguém cadastrar mais um — o quarto plano cai sozinho na linha de
   baixo, centralizado, parecendo de outra categoria. As colunas saem da largura
   mínima do cartão, sem nenhum `if` no PHP contando planos.                  */

.planos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem;
}

.plano-caixa {
    position: relative;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    background: var(--superficie);
}

.plano-caixa-atual { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-fraca); }

/* Posicionado SOBRE a borda: em fluxo normal ele empurraria o conteúdo do
   cartão destacado para baixo, e os preços — a única linha que se compara
   correndo o olho na horizontal — deixariam de ficar na mesma altura. */
.plano-selo {
    position: absolute;
    top: -.6rem;
    left: 1rem;
    background: var(--marca);
    color: var(--marca-texto);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .5rem;
    border-radius: 999px;
}

.plano-nome  { font-size: 1rem; margin: 0 0 .4rem; }
.plano-preco { margin-bottom: .1rem; }
.plano-preco .h4 { font-family: var(--fonte-titulo); font-weight: 600; color: var(--tinta-forte); }
.plano-taxa  { font-size: .8rem; color: var(--tinta-suave); margin-bottom: .75rem; }

.plano-limites { font-size: .82rem; margin: 0 0 1rem; flex: 1 1 auto; }
.plano-linha   { display: flex; justify-content: space-between; padding: .25rem 0; }
.plano-linha dt { font-weight: 400; color: var(--tinta-suave); margin: 0; }
.plano-linha dd { margin: 0; font-weight: 600; color: var(--tinta-forte); }

/* Preço de tabela que o cliente NÃO paga. */
.valor-riscado { text-decoration: line-through; color: var(--tinta-suave); font-size: .9rem; }

/* ----- Consumo do plano ---------------------------------------------------- */

.barras-consumo { margin-top: .5rem; }
.linha-consumo + .linha-consumo { margin-top: .6rem; }

.economia-total {
    font-family: var(--fonte-titulo);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--positivo);
    line-height: 1.1;
}

/* ----- Escolha de paleta e prévia do tema ---------------------------------- */

.paleta-pronta { cursor: pointer; background: var(--superficie); }
.paleta-pronta:hover { border-color: var(--marca-clara); }
.paleta-pronta .amostras { display: flex; gap: .25rem; }
.paleta-pronta .amostras i { width: 1.5rem; height: 1.5rem; border-radius: var(--raio-pequeno); display: block; }

/* ⚠️ A prévia usa variáveis PRÓPRIAS (`--p-*`), e não as reais. Com as reais,
   arrastar o seletor de cor repintaria o painel por baixo de quem está mexendo
   — a sidebar em que ele está inclusive — e sair sem salvar deixaria a tela
   mentindo sobre o que está gravado. Quem grava é o servidor. */
.previa-tema {
    --p-principal: #0075c0; --p-sidebar: #08375a;
    --p-destaque: #f0a202;  --p-apoio: #12805c; --p-barra: #ffffff;

    display: flex;
    height: 190px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.previa-sidebar {
    width: 34%;
    background: var(--p-sidebar);
    padding: .6rem .5rem;
}

.previa-marca {
    display: block;
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: .6rem;
    text-align: center;
}

.previa-item { display: block; height: .55rem; border-radius: 3px; background: rgba(255,255,255,.16); margin-bottom: .35rem; }
.previa-item-ativo { background: rgba(255,255,255,.34); box-shadow: inset 2px 0 0 var(--p-destaque); }

.previa-corpo { flex: 1; background: var(--fundo); }
.previa-barra { height: 2rem; background: var(--p-barra); border-bottom: 1px solid rgba(0,0,0,.08); }
.previa-conteudo { padding: .75rem; display: flex; gap: .5rem; align-items: center; }

.previa-botao {
    background: var(--p-principal);
    color: #fff;
    font-size: .7rem;
    padding: .25rem .6rem;
    border-radius: var(--raio-pequeno);
}

.previa-selo { width: 2.2rem; height: .9rem; border-radius: 999px; background: var(--p-apoio); opacity: .35; }

/* ----- Trilha de eventos --------------------------------------------------- */

.evento-item { position: relative; padding: 0 0 1rem 1.35rem; font-size: .875rem; }
.evento-item:last-child { padding-bottom: 0; }

/* A linha vertical liga um evento ao seguinte; no último ela pararia no meio do
   nada, daí o `:last-child` cortá-la. */
.evento-item::before {
    content: '';
    position: absolute;
    left: .3rem;
    top: 1.1rem;
    bottom: 0;
    width: 1px;
    background: var(--borda);
}
.evento-item:last-child::before { display: none; }

/* Alinhada com a primeira LINHA do texto, e não com o bloco todo: com o
   `top: 50%` de um flex, um evento de três linhas deixaria a bolinha no meio. */
.evento-marca {
    position: absolute;
    left: 0;
    top: .35rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-fraca);
}

.evento-quando { font-size: .75rem; color: var(--tinta-suave); }

/* ----- Miniatura de imóvel ------------------------------------------------- */

/* A coluna da foto: o mínimo que couber, sem o `text-align: right` da célula de
   ações — ali a miniatura ficaria colada na coluna seguinte. */
.coluna-miniatura { width: 1%; white-space: nowrap; }

.miniatura-imovel {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--raio-pequeno);
    background: var(--borda-suave);
    flex: 0 0 auto;
}

.miniatura-vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: .9rem;
}

/* -----------------------------------------------------------------------------
   9. LOGIN
   -------------------------------------------------------------------------- */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 20% 20%, var(--destaque-veu), transparent 45%),
        linear-gradient(160deg, var(--login-topo), var(--login-base));
}

.caixa-login {
    width: 100%;
    max-width: 400px;
    background: var(--superficie);
    border-radius: .75rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    overflow: hidden;
}

.caixa-login .topo { padding: 1.75rem 1.75rem 1rem; text-align: center; }
.caixa-login .topo h1 { font-size: 1.35rem; margin-bottom: .25rem; }
.caixa-login .corpo { padding: 0 1.75rem 1.75rem; }

/* -----------------------------------------------------------------------------
   10. MODAIS DE CADASTRO
   -------------------------------------------------------------------------- */

.modal-content { border: 0; border-radius: var(--raio); box-shadow: var(--sombra-media); }
.modal-header { background: var(--marca-tenue); border-bottom: 1px solid var(--borda); padding: 1rem 1.25rem; }
.modal-title { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 600; }
.modal-subtitulo { font-size: .8rem; color: var(--tinta-suave); margin: .15rem 0 0; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--borda-suave); padding: .85rem 1.25rem; }

.form-secao + .form-secao { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--borda-suave); }
/* Em aba, a própria aba já separa: o traço e o respiro de cima sobram. */
.tab-pane > .form-secao:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.form-secao-titulo {
    font-family: var(--fonte-titulo);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    margin-bottom: .75rem;
}

.form-secao-ajuda { font-size: .8rem; color: var(--tinta-suave); margin: -.4rem 0 .75rem; }
.rotulo-opcional { font-weight: 400; color: var(--tinta-suave); font-size: .75rem; }

.titulo-secao {
    font-family: var(--fonte-titulo);
    font-size: .95rem;
    font-weight: 600;
    color: var(--tinta-forte);
    margin-bottom: .75rem;
}

.linha-switch { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem 0; }
.linha-switch + .linha-switch { border-top: 1px solid var(--borda-suave); }

/* Aviso dentro do modal — menos pesado que um `.alert` do Bootstrap. */
.aviso-modal {
    background: var(--atencao-veu);
    color: var(--atencao);
    border-radius: var(--raio-pequeno);
    padding: .6rem .75rem;
    font-size: .82rem;
    margin-bottom: 1rem;
}

.previa-imagem {
    border: 1px dashed var(--borda);
    border-radius: var(--raio-pequeno);
    padding: .5rem;
    text-align: center;
    background: var(--borda-suave);
}
.previa-imagem img { max-height: 140px; max-width: 100%; border-radius: var(--raio-pequeno); }

/* -----------------------------------------------------------------------------
   11. IMPRESSÃO

   Relatório é feito para ser impresso no fim do mês, e o que o papel não pode
   levar é justamente a navegação: sidebar, barra superior, botões e filtros.
   -------------------------------------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .main-footer,
    .d-print-none, .nao-imprimir, .cabecalho-acoes { display: none !important; }

    .content-wrapper { margin-left: 0 !important; background: #fff !important; }
    .card { box-shadow: none !important; border-color: #ddd !important; break-inside: avoid; }
    .quadro { box-shadow: none !important; break-inside: avoid; }
    body { background: #fff !important; }
    a { text-decoration: none !important; color: #000 !important; }
}

/* -----------------------------------------------------------------------------
   12. PRÉ-VISUALIZAÇÃO DA PÁGINA DE CONTEÚDO (/plataforma/site/paginas)

   O painel não carrega o `tema.css` do site, então a prévia precisa de um
   mínimo aqui — senão ela mostraria títulos do mesmo tamanho do texto e
   enganaria justamente sobre o que existe para mostrar.
   -------------------------------------------------------------------------- */

.pagina-conteudo h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.pagina-conteudo h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.pagina-conteudo > :first-child { margin-top: 0; }
.pagina-conteudo p, .pagina-conteudo li { line-height: 1.7; }

.pagina-conteudo blockquote {
    border-left: 3px solid var(--marca-clara);
    background: var(--marca-tenue);
    padding: .5rem 0 .5rem 1rem;
    margin: 0 0 1rem;
    font-size: .95rem;
}

/* -----------------------------------------------------------------------------
   13. RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .card-body, .card-header, .card-footer { padding-left: .9rem; padding-right: .9rem; }
    .table thead th, .table tbody td { padding-left: .9rem; padding-right: .9rem; }
    .cabecalho-pagina h1 { font-size: 1.25rem; }
    .quadro { min-height: 78px; padding: .75rem .9rem; }
    .quadro-valor { font-size: 1.25rem; }
    .barra-relatorios { flex-direction: column; align-items: stretch; }
    .filtro-periodo { justify-content: space-between; }

    /* Tabela larga rola dentro do próprio card em vez de esticar a página — sem
       isto o corpo inteiro ganha rolagem horizontal e a sidebar sai do lugar. */
    .card-body.p-0 > .table { display: block; overflow-x: auto; white-space: nowrap; }
}