/* =============================================================================================
   Marcenaria — folha única do sistema.
   Tokens e acabamento vindos do padrão da casa:
     - paleta: Protec.SistemaV2/Protec.Modulo.Base/Services/ProtecTema.cs (= SGP TemaSgp.cs)
     - tokens, botões .btn, modal .pm, zebra: Protec.SistemaV2/src/Protec.Recenseamento/wwwroot/css/app.css
     - lateral (item ativo em pílula): PCA/PcaSystem/src/SGP.Web/wwwroot/css/sgp-shell.css
   Copiado e unificado em 23/09/2026 — no SistemaV2 cada módulo tem a sua cópia; aqui é uma só.
   Revisado em 23/09/2026 contra o Recenseamento: valores copiados como estão, e o que diverge
   está comentado no lugar.
   ============================================================================================= */

:root {
    --accent: #2F5FE0;
    --accent-strong: #1E48C7;
    --accent-soft: #EAF0FE;
    --accent-ring: rgba(47, 95, 224, .28);

    --page: #F6F6F4;
    --surface: #FFFFFF;
    --surface-2: #F5F7FB;
    --surface-3: #EEF1F7;

    --border: #E2E6EF;
    --border-strong: #CFD6E4;

    --text: #1A2036;
    --text-2: #4B5468;
    --text-3: #7D8698;

    --ok: #16A34A;
    --ok-soft: #E7F6EC;
    --warn: #D97706;
    --warn-soft: #FBEFDD;
    --bad: #DC2626;
    --bad-soft: #FBE6E6;
    --info: #0E8FA8;

    --shadow: 0 1px 2px rgba(20, 28, 54, .06);
    --shadow-sm: 0 2px 6px -2px rgba(20, 28, 54, .16);
    --shadow-lg: 0 18px 44px -18px rgba(20, 28, 54, .28);

    --radius: 12px;
    --radius-lg: 16px;

    --chrome: 56px;
}

/* O escuro é a classe no MudLayout (MainLayout.razor). */
.dark {
    --accent: #7DA3F5;
    --accent-strong: #9BB8F8;
    --accent-soft: #1A2740;
    --accent-ring: rgba(125, 163, 245, .30);

    --page: #11151D;
    --surface: #171C26;
    --surface-2: #1E2431;
    --surface-3: #252C3B;

    --border: #2A3140;
    --border-strong: #3A4256;

    --text: #EEF1F6;
    --text-2: #AAB3C4;
    --text-3: #7D8698;

    --ok: #22C55E;
    --ok-soft: #12301F;
    --warn: #F59E0B;
    --warn-soft: #33260C;
    --bad: #F87171;
    --bad-soft: #3A1A1A;
    --info: #22B8D0;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .6);
}

/* ⚠️ Sem font-size no html: o MudBlazor mede tudo em rem, e um html de 14px encolhia campos,
   textos e ícones 12,5% em relação ao PCA. A letra própria do sistema (13,5px, a do Recenseamento)
   fica no contêiner. */
html, body { font-family: Roboto, "Segoe UI", system-ui, sans-serif; }
.app, .publico { font-size: 13.5px; line-height: 1.45; }

h1, h2, h3 { font-weight: 600; }

/* ---------------------------------------------------------------------------- Botões da casa */
/* Uma família só, como no Recenseamento (app.css, bloco "EDIÇÃO DA FICHA"): .btn, .btn.primario,
   .btn.perigo. ⚠️ Nada de `font: 600 13px/1.2 inherit` — `inherit` não entra no atalho `font`, a
   declaração inteira é descartada e o botão saía com 14px e peso normal. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); color: var(--accent-strong); }
/* A única diferença para o Recenseamento: o anel de foco de teclado, que lá não existe. */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn:disabled { opacity: .5; cursor: default; }

.btn.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.btn.perigo { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.perigo:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bad) 86%, #000);
    border-color: color-mix(in srgb, var(--bad) 86%, #000);
    color: #fff;
}

.btn.peq { padding: 5px 10px; font-size: 12px; }
.btn.largo { width: 100%; }

.btn .mud-icon-root { width: 16px; height: 16px; font-size: 16px; flex: none; }
.btn.peq .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }

svg.i {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: 0 0 auto;
}

/* Nada em caixa alta: o padrão do Material deixa "ADMINISTRADOR" gritando na barra de cima. */
.mud-button-root, .mud-nav-link { text-transform: none; }

/* ------------------------------------------------------------------------------- Shell */
.topo { border-bottom: 1px solid var(--border); }
.topo-marca { font-weight: 600; }
.topo-usuario-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
    .topo-marca, .topo-trilha { display: none; }
    /* No telefone o nome não cabe ao lado dos ícones: fica só o ícone da conta (como no SGP). */
    .topo-usuario-nome { display: none; }
}

.lateral { border-right: 0; }

.lateral-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--chrome);
    padding: 0 16px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lateral-marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.lateral-marca-nome { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.lateral-marca-sub { font-size: 11px; opacity: .7; }

/* Item do menu em pílula, e o ativo preenchido com a cor da casa — sgp-shell.css ("Itens"). */
.lateral-menu { padding: 6px; }
.lateral .mud-nav-link { border-radius: 8px; margin: 2px 0; }
.lateral .mud-nav-link:hover { background: rgba(255, 255, 255, .06); }
.lateral .mud-nav-link.active {
    background: var(--mud-palette-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.lateral .mud-nav-link.active .mud-icon-root { color: #fff !important; }

.em-breve {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(125, 134, 152, .18);
    color: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: lowercase;
    opacity: .8;
    vertical-align: middle;
}

.conteudo { background: transparent; }

.botao-sair {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* -------------------------------------------------------------------- Cabeçalho das telas */
/* Texto solto, como no PCA (a casca MudBlazor mais próxima deste sistema). */
.pagina-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pagina-cabecalho-texto { display: flex; align-items: center; gap: 12px; }
.pagina-titulo { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.pagina-subtitulo { font-size: 12.5px; color: var(--text-3); }
.pagina-cabecalho-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 599px) {
    .pagina-cabecalho { flex-direction: column; align-items: stretch; }
    .pagina-cabecalho-icone { display: none; }
}

/* ------------------------------------------------------------------------ Telas públicas */
.publico {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    /* O degradê é da marca (a lateral #16223C indo para o azul da casa), não um token de tela. */
    background: linear-gradient(160deg, #16223C 0%, #1E2C4A 45%, #2F5FE0 100%);
}

.publico-cartao {
    width: 100%;
    max-width: 380px;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.publico-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.publico-marca-nome { font-weight: 600; font-size: 15px; color: var(--text); }
.publico-marca-sub { font-size: 12px; color: var(--text-2); }
.publico-titulo { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--text); }
.publico-texto { margin: 0 0 18px; font-size: 13px; color: var(--text-2); }

/* Entrada em duas etapas — o desenho do Autenticador do ProtecV2 (_AuthLayout.cshtml: .user-info,
   .captcha-wrap, .links), com os tokens desta casa. */
.entrada-pessoa { margin-bottom: 20px; text-align: center; }

.entrada-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
}

.entrada-nome { font-size: 15px; font-weight: 600; color: var(--text); }
.entrada-cpf { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* O widget do Turnstile tem 300px: centralizado, e sem estourar o cartão no celular. */
.entrada-captcha { display: flex; justify-content: center; min-height: 65px; margin: 4px 0 16px; overflow: hidden; }
.entrada-aviso { margin: -8px 0 14px; font-size: 12px; color: var(--bad); text-align: center; }

.entrada-rodape { margin: 18px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.entrada-rodape a { color: var(--accent-strong); font-weight: 500; text-decoration: none; }
.entrada-rodape a:hover { text-decoration: underline; }

.entrada-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: entrada-gira .6s linear infinite;
    vertical-align: middle;
}

@keyframes entrada-gira { to { transform: rotate(360deg); } }

.caps-aviso { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--warn); }
.caps-aviso[hidden] { display: none; }

/* ⚠️ O widget do Turnstile tem 300px fixos. Num telefone de 375px, com o respiro normal, sobravam
   295px e a borda dele era cortada (medido em 23/09/2026) — aqui o cartão encolhe o respiro. */
@media (max-width: 400px) {
    .publico { padding: 16px 12px; }
    .publico-cartao { padding: 24px 16px; }
}

/* ---------------------------------------------------------------------------------- Campos */
.campo { display: block; margin-bottom: 14px; }
.campo-rotulo { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.campo-dica { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }

.campo-caixa {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}

.campo-caixa:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.validation-message { display: block; margin-top: 4px; font-size: 11.5px; color: var(--bad); }

/* ------------------------------------------------------------------------- Modal da casa */
/* Anatomia .pm do Recenseamento: flex com teto de altura, faixas de cabeçalho e rodapé fixas e só
   o corpo rolando. A largura vem de --pm-w (nunca `width` inline, senão o celular não alcança).
   ⚠️ z-index 1300 e não os 1400 do Recenseamento: aqui 1400 é o dos menus do MudBlazor
   (TemaMarcenaria.cs), e um seletor aberto dentro do modal tem de ficar POR CIMA dele. */
.pm-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 20, 30, .5);
    z-index: 1300;
}

.pm {
    display: flex;
    flex-direction: column;
    width: min(var(--pm-w, 560px), var(--pm-vw, 94vw));
    max-height: 88vh;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.pm:focus { outline: none; }

.pm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.pm-titulo { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }

.pm-x {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.pm-x:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.pm-x:disabled { opacity: .5; cursor: default; }

.pm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    font-size: 13.5px;
    color: var(--text);
}

.pm-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: none;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------------- Listas e tabelas */
/* ⚠️ O seletor precisa ser mais forte que o do MudBlazor (`.mud-table-dense * .mud-table-row
   .mud-table-cell`, 0,3,0) — com `.mud-table-dense .mud-table-cell` a regra nunca pegava. */
.mud-table.mud-table-dense .mud-table-row .mud-table-cell { padding: 6px 14px; }

/* Cabeçalho da lista como o `.list thead th` do Recenseamento. */
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell {
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mud-table-root .mud-table-head .mud-table-sort-label {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* ZEBRA — a regra da casa (Recenseamento, bloco "ZEBRA STRIPING"): pinta no `td`, e o hover vem
   DEPOIS, no mesmo nível, para vencer. ⚠️ Nenhuma tabela usa `Striped` do MudBlazor: ele pinta as
   ímpares no `tr`, esta regra pinta as pares no `td`, e o resultado era toda linha tingida e o
   hover sumindo nas pares. */
.mud-table-root tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--text) 3.5%, transparent);
}

.mud-table-root tbody tr:hover td { background: var(--surface-2); }

/* ---- selo de situação ---- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.pill .mud-icon-root { width: 12px; height: 12px; font-size: 12px; flex: none; }

.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.aviso { background: var(--warn-soft); color: var(--warn); }
.pill.ruim { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--accent-soft); color: var(--accent); }

/* ------------------------------------------------------------------ Aviso de queda de conexão */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1700;
    padding: 12px 16px;
    background: var(--warn-soft);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

#blazor-error-ui .reload { margin-left: 8px; color: var(--accent-strong); font-weight: 600; }

#blazor-error-ui .dismiss {
    float: right;
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------------------------------- Filtros e listas */
.filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filtros-busca { min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.filtros-campo { min-width: 150px; max-width: 200px; }
.filtros-contagem { margin-left: auto; font-size: 12px; color: var(--text-3); }

@media (max-width: 599px) {
    .filtros-busca, .filtros-campo { max-width: none; width: 100%; }
    .filtros-contagem { margin-left: 0; }
}

.linha-clicavel { cursor: pointer; }

/* Ação destrutiva no menu da linha: vermelha e separada das outras por um divisor. */
.menu-perigo, .menu-perigo .mud-icon-root { color: var(--mud-palette-error) !important; }
.col-acoes { width: 48px; text-align: right; }

/* ⚠️ O ⋮ do MudBlazor tem 48px e mandava na altura da linha: 60px numa tabela "densa" (medido em
   23/09/2026). O MenuLinha da casa é pequeno; aqui fica com 32px no computador e 38px no toque. */
.col-acoes .mud-icon-button { padding: 6px; }
.col-acoes .mud-icon-button .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }

@media (max-width: 760px) {
    .col-acoes .mud-icon-button { padding: 9px; }
}

.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    color: var(--text-3);
    text-align: center;
}

.vazio-titulo { font-size: 14px; font-weight: 600; color: var(--text-2); }
.vazio-mensagem { font-size: 12.5px; }

/* ------------------------------------------------------------------------------ Confirmação */
/* A moldura do Recenseamento (ConfirmacaoModal): âmbar para "atenção", vermelha só para perda de
   dado. A confirmação comum é só o texto, sem ícone. */
.cf-corpo { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cf-corpo b, .cf-perigo b, .cf-atencao b { color: var(--text); }
.cf-detalhe { margin-top: 4px; }

.cf-perigo, .cf-atencao {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
}

.cf-perigo { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.cf-atencao { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }

.cf-perigo-ic, .cf-atencao-ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
}

.cf-perigo-ic { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.cf-atencao-ic { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.cf-perigo-ic .mud-icon-root, .cf-atencao-ic .mud-icon-root { width: 17px; height: 17px; font-size: 17px; }

/* ------------------------------------------------------------------------ Seções de formulário */
.secao { margin-top: 20px; }
.secao:first-of-type { margin-top: 4px; }

.secao-titulo {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-2);
}

.acoes-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

@media (max-width: 599px) {
    .acoes-rodape {
        position: sticky;
        bottom: 0;
        padding: 12px 0;
        background: var(--surface);
    }
}

/* ---------------------------------------------------------------------- Tabelas auxiliares */
/* A lista das tabelas ao lado; no celular (e em tela estreita) ela vira um seletor em cima. */
.aux { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.aux-seletor { display: none; }

.aux-nav {
    position: sticky;
    top: calc(var(--chrome) + 16px);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.aux-nav-grupo {
    padding: 10px 10px 4px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.aux-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13px;
    text-decoration: none;
}

.aux-nav-item .mud-icon-root { width: 18px; height: 18px; font-size: 18px; color: var(--text-3); }
.aux-nav-item:hover { background: var(--surface-2); color: var(--text); }
.aux-nav-item.ativo { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.aux-nav-item.ativo .mud-icon-root { color: var(--accent); }

.aux-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* O botão não encolhe: com a descrição comprida ao lado, "Nova categoria" quebrava em duas linhas. */
.aux-cabecalho > .btn { flex: none; white-space: nowrap; }
.aux-titulo { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.aux-descricao { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.aux-sub { padding-left: 14px; color: var(--text-2); }

@media (max-width: 900px) {
    .aux { grid-template-columns: minmax(0, 1fr); }
    .aux-nav { display: none; }
    .aux-seletor { display: block; }
}

@media (max-width: 599px) {
    .aux-cabecalho { flex-direction: column; align-items: stretch; }
}

/* Parcelas da condição de pagamento: uma linha por parcela. */
.parcelas { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.parcelas-titulo { margin-bottom: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 700; }

.parcela {
    display: grid;
    grid-template-columns: 30px minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: start;
    margin-bottom: 6px;
}

.parcela-numero { padding-top: 10px; color: var(--text-3); font-weight: 700; text-align: right; }
.parcelas-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.parcelas-soma { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.parcelas-soma.ok { color: var(--ok); }
.parcelas-soma.aviso { color: var(--warn); }

@media (max-width: 599px) {
    .parcela { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 32px; }
    .parcela .parcela-quando { grid-column: 2 / 4; }
    .parcela .parcela-dias { grid-column: 2 / 3; }
    .parcela .parcela-percentual { grid-column: 3 / 4; }
    .parcelas-soma { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------------------ Tabela em cartão */
/* No celular e no tablet o MudBlazor vira a linha em cartão com "rótulo … valor" e espalha os
   pedaços da célula (nome, selo, linha de detalhe) com space-between — o nome ia para o meio e o
   código para a direita. Aqui o rótulo empurra o conteúdo para a direita, e a linha de detalhe
   desce inteira embaixo. Vale para todas as listas. */
@media (max-width: 959px) {
    .mud-sm-table .mud-table-body .mud-table-cell { flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 6px; text-align: right; }
    .mud-sm-table .mud-table-body .mud-table-cell::before { flex: 1 0 auto; text-align: left; }
    .mud-sm-table .mud-table-body .mud-table-cell > .linha-secundaria { flex-basis: 100%; text-align: right; }
    .mud-sm-table .mud-table-body .mud-table-cell.vazia { display: none; }
}

@media (max-width: 599px) {
    .mud-xs-table .mud-table-body .mud-table-cell { flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 6px; text-align: right; }
    .mud-xs-table .mud-table-body .mud-table-cell::before { flex: 1 0 auto; text-align: left; }
    .mud-xs-table .mud-table-body .mud-table-cell > .linha-secundaria { flex-basis: 100%; text-align: right; }
}

/* Entre 960 e 1279px a tabela ainda é em colunas, mas com o menu lateral aberto não cabe tudo (as
   contas a pagar pediam 934px e havia 654 — medido em 24/09/2026). As colunas de apoio (.col-apoio)
   saem e o dado delas aparece na linha de detalhe da coluna principal (.so-estreita). No cartão,
   abaixo de 960px, fica igual. */
.so-estreita { display: none; }

@media (max-width: 1279px) {
    .mud-table .col-apoio { display: none !important; }
    .so-estreita { display: block; }
}

/* Na mesma faixa, menos respiro entre as colunas: sobra para a descrição, que é a que quebra linha. */
@media (min-width: 960px) and (max-width: 1279px) {
    .mud-table.mud-table-dense .mud-table-row .mud-table-cell { padding-left: 8px; padding-right: 8px; }
}

/* -------------------------------------------------------------------------------- Estoque */
/* Coluna de número: alinhada à direita, algarismos da mesma largura (a vírgula fica embaixo da vírgula). */
.mud-table-root .mud-table-cell.col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-root .mud-table-head .mud-table-cell.col-num .mud-table-sort-label { flex-direction: row-reverse; }
.estoque-unidade { margin-left: 3px; color: var(--text-3); font-size: 11.5px; }
.estoque-saldo { font-weight: 600; color: var(--text); }
.estoque-saldo.zerado { font-weight: 400; color: var(--text-3); }
.estoque-saldo.negativo { color: var(--bad); }

.estoque-resumo { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }

.estoque-cartao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.estoque-cartao.ativo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.estoque-cartao-rotulo { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.estoque-cartao-valor { color: var(--text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.estoque-cartao-valor small { color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.estoque-cartao-valor.pequeno { font-size: 13.5px; font-weight: 500; }
.estoque-cartao-valor.aviso { color: var(--warn); }
.estoque-cartao-valor.negativo { color: var(--bad); }
.estoque-cartao-dica { color: var(--text-3); font-size: 12px; }
.estoque-cartao-link { font-size: 12.5px; font-weight: 600; color: var(--accent-strong); }
.estoque-cartao .mud-progress-linear { margin-top: 6px; }

.conferencia-ok { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.conferencia-ok > .mud-icon-root { flex: none; color: var(--ok); }
.conferencia-lista { margin: 12px 0 0; padding-left: 18px; }
.conferencia-lista li + li { margin-top: 8px; }

.extrato-cabecalho { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.extrato-filtros { display: flex; gap: 8px; }
.extrato-data { width: 160px; }
.mud-table-root .mud-table-cell.entrada { color: var(--ok); font-weight: 600; }
.mud-table-root .mud-table-cell.saida { color: var(--bad); font-weight: 600; }
.mud-table-root tbody tr.extrato-estornado td { color: var(--text-3); }
/* O risco vai no número, não na célula: no cartão do celular ele riscaria o rótulo junto. */
.mud-table-root tbody tr.extrato-estornado td.entrada,
.mud-table-root tbody tr.extrato-estornado td.saida { color: var(--text-3); }
.mud-table-root tbody tr.extrato-estornado .qtd { text-decoration: line-through; }

.operacao-tipo { font-weight: 600; }
.operacao-tipo.entrada { color: var(--ok); }
.operacao-tipo.saida { color: var(--bad); }
.operacao-cabecalho { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; color: var(--text-2); }
.operacao-total { margin-top: 10px; text-align: right; color: var(--text-2); }

/* Tipo do ajuste: três cartões de escolha (rádio de verdade por baixo, para teclado e leitor de tela). */
.ajuste-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.ajuste-tipo {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.ajuste-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.ajuste-tipo:hover { border-color: var(--border-strong); }
.ajuste-tipo:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }
.ajuste-tipo.ativo { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ajuste-tipo > .mud-icon-root { flex: none; color: var(--text-3); }
.ajuste-tipo.ativo > .mud-icon-root { color: var(--accent); }
.ajuste-tipo-titulo { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.ajuste-tipo.ativo .ajuste-tipo-titulo { color: var(--accent-strong); }
.ajuste-tipo-desc { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; line-height: 1.4; }

.ajuste-itens { margin-top: 16px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }

.ajuste-item {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 36px;
    grid-template-areas: "produto qtd obs obs tirar" "saldo saldo saldo saldo saldo";
    gap: 0 8px;
    align-items: start;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

/* O custo só aparece para produto sem custo; sem ele, a observação ocupa o lugar. */
.ajuste-item.com-custo { grid-template-areas: "produto qtd custo obs tirar" "saldo saldo saldo saldo saldo"; }
.ajuste-item-produto { grid-area: produto; }
.ajuste-item-qtd { grid-area: qtd; }
.ajuste-item-custo { grid-area: custo; }
.ajuste-item-obs { grid-area: obs; }
.ajuste-item-tirar { grid-area: tirar; margin-top: 6px !important; }
.ajuste-item-saldo { grid-area: saldo; margin-top: -2px; color: var(--text-3); font-size: 12px; }
.ajuste-item-saldo.aviso { color: var(--bad); font-weight: 600; }

.seletor-produto { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; }
.seletor-produto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-produto-saldo { flex: none; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.seletor-produto-vazio { padding: 8px 12px; color: var(--text-3); font-size: 12.5px; }

.inventario-dica {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.45;
}

.inventario-dica > .mud-icon-root { flex: none; margin-top: 1px; color: var(--accent); }
.inventario-progresso { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.inventario-progresso .mud-progress-linear { flex: 1; }
.inventario-progresso span { flex: none; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.inventario-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.inventario-busca { flex: 1 1 260px; max-width: 420px; }
.inventario-contado { max-width: 160px; }
.inventario-contado .mud-input-control { margin: 0; }
.inventario-dif { font-weight: 600; font-variant-numeric: tabular-nums; }
.traco { color: var(--text-3); }
.inventario-dif.sobra { color: var(--ok); }
.inventario-dif.falta { color: var(--bad); }
.mud-table-root tbody tr.inventario-pendente td { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
.linha-secundaria.pendente { color: var(--warn); font-weight: 600; }

@media (max-width: 900px) {
    .ajuste-tipos { grid-template-columns: minmax(0, 1fr); }
    .ajuste-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        grid-template-areas: "produto produto tirar" "qtd obs obs" "saldo saldo saldo";
    }
    .ajuste-item.com-custo { grid-template-areas: "produto produto tirar" "qtd custo custo" "obs obs obs" "saldo saldo saldo"; }
}

@media (max-width: 599px) {
    .estoque-cartao { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 10px 12px; }
    .estoque-cartao-valor { font-size: 17px; }
    .extrato-filtros { width: 100%; }
    .extrato-data { flex: 1; width: auto; }
    .inventario-contado { max-width: none; }
    .inventario-busca { max-width: none; }
    .ajuste-item {
        grid-template-columns: minmax(0, 1fr) 32px;
        grid-template-areas: "produto tirar" "qtd qtd" "obs obs" "saldo saldo";
    }
    .ajuste-item.com-custo { grid-template-areas: "produto tirar" "qtd qtd" "custo custo" "obs obs" "saldo saldo"; }
}

/* ------------------------------------------------------------------------------ Financeiro */
.titulo-vencido { color: var(--bad); font-weight: 600; }

.baixa-titulo { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.baixa-titulo-desc { color: var(--text); font-size: 15px; font-weight: 600; }
.baixa-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--text-2);
}
.baixa-total b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }

.rateio { padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rateio-linha {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: start;
    margin-bottom: 6px;
}
.rateio-linha.com-obra { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr) 36px; }

.lancamento-parcela {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-bottom: 6px;
}

.titulo-irmas { display: flex; flex-direction: column; gap: 4px; }
.titulo-irma {
    display: grid;
    grid-template-columns: 56px 110px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-2);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.titulo-irma:hover { background: var(--surface-2); color: var(--text); }
.titulo-irma.atual { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.titulo-irma-num { color: var(--text-3); }
.titulo-irma-valor { text-align: right; }

.fluxo-abas { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.extrato-conta { flex: 1 1 220px; max-width: 320px; }
.mud-table-root tbody tr.fluxo-atual td { background: var(--accent-soft); }
.mud-table-root tbody tr.fluxo-futuro td { color: var(--text-2); }

@media (max-width: 599px) {
    .rateio-linha { grid-template-columns: minmax(0, 1fr) 32px; }
    .rateio-linha .rateio-categoria { grid-column: 1 / 2; }
    .rateio-linha.com-obra { grid-template-columns: minmax(0, 1fr) 32px; }
    .rateio-linha .rateio-centro, .rateio-linha .rateio-obra, .rateio-linha .rateio-valor { grid-column: 1 / 2; }
    .rateio-linha > .mud-icon-button { grid-column: 2; grid-row: 1; }
    .titulo-irma { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .titulo-irma > .mud-chip, .titulo-irma > span:last-child { grid-column: 2 / 4; }
    .extrato-conta { max-width: none; }
}

/* -------------------------------------------------------------------------- Carga inicial */
.carga-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }

.carga-tipo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text-2);
    text-decoration: none;
}

.carga-tipo > .mud-icon-root { flex: none; width: 24px; height: 24px; font-size: 24px; color: var(--text-3); }
.carga-tipo:hover { border-color: var(--border-strong); color: var(--text); }
.carga-tipo.ativo { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.carga-tipo.ativo > .mud-icon-root { color: var(--accent); }
.carga-tipo-titulo { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.carga-tipo.ativo .carga-tipo-titulo { color: var(--accent-strong); }
.carga-tipo-desc { display: block; margin-top: 1px; color: var(--text-3); font-size: 12px; }

.carga-passos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; }
.carga-passo { display: flex; gap: 14px; }
.carga-passo-corpo { flex: 1; min-width: 0; }

.carga-passo-numero {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.carga-passo-titulo { margin: 3px 0 4px; color: var(--text); font-size: 15px; font-weight: 700; }
.carga-passo-texto { margin: 0 0 12px; color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* A área de soltar o arquivo: o campo de arquivo fica por cima, transparente, e recebe o clique. */
.carga-arquivo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    padding: 20px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: center;
    transition: border-color .15s, background-color .15s;
}

.carga-arquivo:hover,
.carga-arquivo.arrastando { border-color: var(--accent); background: var(--accent-soft); }
.carga-arquivo:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }
.carga-arquivo-campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.carga-arquivo.lendo .carga-arquivo-campo { cursor: progress; }
.carga-arquivo-ic { width: 34px; height: 34px; font-size: 34px; color: var(--accent); }
.carga-arquivo-texto { color: var(--text); font-size: 13.5px; }
.carga-arquivo-texto b { color: var(--accent-strong); }
.carga-arquivo-dica { color: var(--text-3); font-size: 12px; }

.carga-erro {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bad-soft);
    color: var(--bad);
    font-size: 13px;
    line-height: 1.45;
}

.carga-erro .mud-icon-root { flex: none; margin-top: 1px; }

.carga-previa-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.carga-previa-arquivo { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-weight: 600; }
.carga-previa-arquivo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carga-previa-arquivo .mud-icon-root { flex: none; color: var(--text-3); }

.carga-contadores { display: flex; flex-wrap: wrap; gap: 8px; }

.carga-contador {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12.5px;
    white-space: nowrap;
}

.carga-contador b { color: var(--text); }
.carga-contador.ok { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.carga-contador.aviso { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.carga-contador.ok b,
.carga-contador.aviso b { color: inherit; }

.carga-avisos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 13px;
}

.carga-avisos .mud-icon-root { flex: none; margin-top: 1px; color: var(--accent); }
.carga-avisos ul { margin: 0; padding-left: 16px; }
.carga-avisos li + li { margin-top: 2px; }

.carga-filtro { max-width: 300px; margin-bottom: 4px; }
.carga-num { color: var(--text-3); font-variant-numeric: tabular-nums; }
.carga-nome { color: var(--text); }
.carga-msg { margin-top: 2px; color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
/* Âmbar puxado para a cor do texto: o --warn puro não dá contraste em letra pequena. */
.carga-msg.problema { color: color-mix(in srgb, var(--warn) 70%, var(--text)); font-weight: 500; }

.carga-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.carga-rodape-texto { margin-right: auto; color: var(--text-3); font-size: 12.5px; }

.carga-resultado { display: flex; gap: 16px; padding: 4px; }

.carga-resultado-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
}

.carga-resultado-ic .mud-icon-root { width: 28px; height: 28px; font-size: 28px; }
.carga-resultado-titulo { margin: 8px 0 8px; color: var(--text); font-size: 18px; font-weight: 700; }
.carga-resultado p { margin: 0 0 6px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.carga-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Abaixo de 960px a tabela vira cartão (rótulo à esquerda, valor à direita): o nome e o motivo
   acompanham o alinhamento dos outros valores. */
@media (max-width: 959px) {
    .carga-nome-bloco { padding-left: 12px; text-align: right; }
}

/* Até 900px o menu lateral ainda fica aberto e sobra pouco espaço: os cartões perdem a descrição. */
@media (max-width: 900px) {
    .carga-passos { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .carga-tipos { gap: 8px; margin-bottom: 12px; }
    .carga-tipo { flex-direction: column; gap: 4px; padding: 10px 6px; text-align: center; }
    .carga-tipo-titulo { font-size: 12.5px; }
    .carga-tipo-desc { display: none; }
}

@media (max-width: 599px) {
    .carga-filtro { max-width: none; }
    .carga-rodape { flex-direction: column; align-items: stretch; }
    .carga-rodape-texto { margin: 0 0 4px; }
    .carga-resultado { flex-direction: column; gap: 8px; }
}

/* --------------------------------------------------------------------------------- Fiscal */
/* Botão "Importar XML": o InputFile fica por cima do botão, invisível — clicar em qualquer parte abre
   o seletor de arquivos, e o teclado chega nele pelo Tab. */
.notas-importar { position: relative; overflow: hidden; cursor: pointer; }
.notas-importar-campo { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.notas-importar.desabilitado { opacity: .5; pointer-events: none; }
.notas-importar:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }

/* Cartão que filtra a lista ao clicar (Em conferência). */
button.estoque-cartao { font: inherit; text-align: left; color: inherit; }
.estoque-cartao.clicavel { cursor: pointer; }
.estoque-cartao.clicavel:hover { border-color: var(--border-strong); }
.estoque-cartao-valor.atencao { color: var(--warn); }

.inventario-dica.atencao { background: var(--warn-soft); }
.inventario-dica.atencao > .mud-icon-root { color: var(--warn); }

.nota-pendente { color: var(--warn); font-weight: 600; }
.qtd.riscado { text-decoration: line-through; color: var(--text-3); }
.dialogo-texto { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

.nota-participante { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: flex-start; }
.nota-participante-nome { color: var(--text); font-size: 15px; font-weight: 700; }
.nota-sem-cadastro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--warn-soft);
    color: var(--text-2);
    font-size: 13px;
}
.nota-fornecedor-campo { max-width: 520px; }

/* Rótulo em cima, valor embaixo: os dados da nota em grade, sem virar formulário. */
.nota-dados { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.nota-dados dt { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.nota-dados dd { margin: 2px 0 0; color: var(--text); font-size: 13.5px; }
.nota-dados-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.nota-dados-grade .nota-chave { grid-column: 1 / -1; }
.nota-chave dd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; word-break: break-word; }
.nota-chegada { max-width: 180px; }

.nota-itens-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Botão no título da seção não herda a caixa alta dele. */
.secao-titulo .btn { text-transform: none; letter-spacing: normal; }
.nota-item-acoes { width: 1%; white-space: nowrap; }
.nota-item-acoes > span { display: inline-flex; align-items: center; gap: 2px; }

/* Totais: coluna estreita à direita, o total em destaque. */
.nota-totais { display: grid; gap: 4px; max-width: 360px; margin: 12px 0 8px auto; }
.nota-totais > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.nota-totais dt { color: var(--text-2); }
.nota-totais dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.nota-totais .nota-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 700; }

.nota-parcela { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 36px; }
.nota-condicao { max-width: 320px; }
.nota-info { margin: 4px 0 10px; white-space: pre-line; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.nota-info-bloco { margin-bottom: 4px; }

/* Diálogo do item */
.item-nota-origem { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.item-nota-descricao { color: var(--text); font-size: 14.5px; font-weight: 600; }
.item-nota-numeros { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; color: var(--text-2); font-size: 13px; }
.item-nota-total { display: flex; flex-direction: column; justify-content: center; }
.item-nota-conversao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.item-nota-fator { max-width: 140px; }
.item-nota-previa { padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text-2); font-size: 13.5px; }
.item-nota-novo { margin-top: 8px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 10px; }

@media (max-width: 599px) {
    .nota-parcela { grid-template-columns: 80px minmax(0, 1fr) 32px; }
    .nota-parcela > :nth-child(3) { grid-column: 1 / 3; }
    .nota-totais { max-width: none; margin-left: 0; }
    .nota-condicao { max-width: none; width: 100%; }
}

/* ------------------------------------------------------------------------------ Comercial */
/* Tipo do orçamento: os mesmos cartões de escolha do ajuste, em dois, e como botão. */
.ajuste-tipos.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
button.ajuste-tipo { font: inherit; text-align: left; color: inherit; }

/* Itens e listas de preço: a lista escolhida em cima da tabela. */
.precos-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.precos-lista-campo { max-width: 320px; }
.precos-lista-dica { flex: 1 1 240px; }

/* Ficha técnica e lista de materiais da linha: material · quantidade · custo · tirar. */
.ficha-linhas { display: grid; gap: 8px; }
.ficha-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 110px 32px;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.ficha-material { display: flex; flex-direction: column; min-width: 0; color: var(--text); font-size: 13.5px; }
.ficha-custo { text-align: right; color: var(--text-2); font-size: 13px; }
.ficha-total { margin-top: 8px; text-align: right; color: var(--text-2); font-size: 13.5px; }
.orc-materiais-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.orc-custo-livre { max-width: 240px; }
.orc-linha-total { color: var(--text); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* O orçamento, por ambiente: um bloco por ambiente, o nome editável e o subtotal à direita. */
.orc-ambiente { margin-top: 12px; padding: 8px 12px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.orc-ambiente-geral { background: var(--surface-2); }
.orc-ambiente-cabeca { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 40px; }
.orc-ambiente-nome { flex: 1 1 220px; max-width: 360px; }
.orc-ambiente-nome .mud-input-control { margin-top: 0; }
.orc-ambiente-titulo { color: var(--text); font-size: 14.5px; font-weight: 700; }
.orc-ambiente-subtotal { margin-left: auto; color: var(--text); font-size: 14px; font-weight: 700; }
.orc-ambiente-rodape { display: flex; justify-content: flex-start; margin-top: 6px; }
.orc-linhas { margin-top: 4px; }
.orc-linhas .mud-table-container { background: transparent; }
.orc-add-ambiente .btn { cursor: pointer; }

.orc-totais-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
.orc-totais-grade .nota-totais { margin: 0; max-width: none; }
.orc-totais-grade .nota-totais dd { min-width: 150px; text-align: right; }
.orc-totais-grade .nota-totais .mud-input-control { margin: 0; }

.orc-aprovacao-lista { margin: 0 0 8px; padding-left: 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.orc-parcelas { margin: 0 0 10px; }
.orc-parcelas .col-num { text-align: right; }

/* A proposta na tela: a folha branca, também no tema escuro (é o que o cliente recebe). */
.proposta-previa {
    max-height: 65vh;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FFFFFF;
}

/* Logotipo da empresa */
.empresa-logo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.empresa-logo-quadro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 90px;
    padding: 8px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: #FFFFFF;
}
.empresa-logo-quadro img { max-width: 100%; max-height: 100%; object-fit: contain; }
.empresa-logo-acoes { display: flex; flex: 1 1 260px; flex-direction: column; gap: 8px; }
.empresa-logo-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 959px) {
    .orc-totais-grade { grid-template-columns: minmax(0, 1fr); }
    .orc-totais-grade .nota-totais { order: -1; }
}

@media (max-width: 599px) {
    .ajuste-tipos.duas { grid-template-columns: minmax(0, 1fr); }
    .precos-lista-campo { max-width: none; width: 100%; }
    .ficha-linha { grid-template-columns: minmax(0, 1fr) 110px 32px; }
    .ficha-linha > .ficha-material { grid-column: 1 / -1; }
    .ficha-custo { text-align: left; }
    .orc-ambiente { padding: 8px; }
    .orc-ambiente-nome { max-width: none; }
    .proposta-previa { padding: 8px; }
}

/* ---------------------------------------------------------------------------------- Obras */
/* As etapas da obra: uma trilha de selos, a atual em destaque; quebra linha em vez de rolar. */
.obra-etapas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.obra-etapa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-3);
    font-size: 12.5px;
}
.obra-etapa.feita { color: var(--text-2); }
.obra-etapa.feita .mud-icon-root { color: var(--ok); font-size: 16px; }
.obra-etapa.atual { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }

.obra-abas .mud-tabs-tabbar { border-bottom: 1px solid var(--border); background: transparent; }
.obra-abas .mud-tabs-tabbar .mud-tab { min-width: 0; padding: 6px 16px; text-transform: none; letter-spacing: normal; font-weight: 600; }

.obra-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.obra-barra-texto { flex: 1 1 280px; color: var(--text-2); font-size: 13.5px; }
.nota-dados-grade .obra-endereco { grid-column: 1 / -1; }
.obra-negativo { color: var(--bad) !important; }
.obra-credito { color: var(--ok); }
.obra-pct { margin-left: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.riscado-texto { text-decoration: line-through; color: var(--text-3); }

/* Retirada: material · quantidade · tirar, e embaixo o saldo do estoque e o previsto. */
.obra-item {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 36px;
    grid-template-areas: "produto qtd tirar" "info info info";
    gap: 0 8px;
    align-items: start;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.obra-item-produto { grid-area: produto; }
.obra-item-qtd { grid-area: qtd; }
.obra-item-tirar { grid-area: tirar; margin-top: 6px !important; }
.obra-item-info { grid-area: info; }

/* Sobra: material · destino · quantidade · tirar; o retalho ganha a linha das medidas. */
.obra-sobra {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1fr) 36px;
    grid-template-areas: "produto destino qtd tirar" "info info info info";
    gap: 0 8px;
    align-items: start;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.obra-sobra.com-medidas { grid-template-areas: "produto destino qtd tirar" "comp larg . ." "info info info info"; }
.obra-sobra-produto { grid-area: produto; }
.obra-sobra-destino { grid-area: destino; }
.obra-sobra-qtd { grid-area: qtd; }
.obra-sobra-tirar { grid-area: tirar; margin-top: 6px !important; }
.obra-sobra-comp { grid-area: comp; }
.obra-sobra-larg { grid-area: larg; }

.obra-calculo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--text-2); font-size: 13.5px; }
.obra-calculo b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Custos: a margem ao lado do quadro por tipo. */
.obra-custos-grade { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.obra-custos-grade > .secao { margin-top: 4px; }
.obra-margem-linhas { max-width: none; margin: 8px 0; }
.obra-previsto { margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.5; }

.obra-ambientes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.obra-ambiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.obra-ambiente-texto { display: flex; flex-direction: column; min-width: 0; padding: 4px 0; }
.obra-ambiente-nome { color: var(--text); font-size: 13.5px; font-weight: 600; }
.obra-ambiente-acoes { display: inline-flex; flex: none; }

.obra-historico { margin: 0 0 0 6px; padding: 0; border-left: 2px solid var(--border); list-style: none; }
.obra-historico-item { position: relative; padding: 0 0 14px 16px; }
.obra-historico-item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -6px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
}
.obra-historico-quando { margin-bottom: 2px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.obra-historico-obs { margin-top: 4px; color: var(--text-2); font-size: 13px; white-space: pre-line; }

/* Anexos: tipo, descrição e o botão; embaixo a galeria (foto em miniatura, arquivo com ícone). */
.obra-anexar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-bottom: 4px; }
.obra-anexar-tipo { flex: 0 0 200px; }
.obra-anexar-desc { flex: 1 1 240px; }
.obra-anexar .btn { margin-top: 5px; }
.obra-anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.obra-anexo { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.obra-anexo-foto, .obra-anexo-arquivo { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.obra-anexo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.obra-anexo-arquivo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); font-size: 12px; font-weight: 700; text-decoration: none; }
.obra-anexo-arquivo .mud-icon-root { font-size: 40px; }
.obra-anexo-foto:focus-visible, .obra-anexo-arquivo:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
.obra-anexo-texto { min-width: 0; padding: 8px 10px 0; }
.obra-anexo-nome { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.obra-anexo-acoes { display: flex; justify-content: flex-end; align-items: center; padding: 0 4px 4px; }
.obra-anexo-baixar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-2); }
.obra-anexo-baixar:hover { background: var(--surface-2); }

/* Abaixo de 1400px (com o menu aberto) o quadro por tipo não cabe ao lado da margem: um embaixo do outro. */
@media (max-width: 1399px) {
    .obra-custos-grade { grid-template-columns: minmax(0, 1fr); }
    .obra-margem { max-width: 560px; }
}

@media (max-width: 900px) {
    .obra-sobra {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
        grid-template-areas: "produto produto tirar" "destino qtd qtd" "info info info";
    }
    .obra-sobra.com-medidas { grid-template-areas: "produto produto tirar" "destino qtd qtd" "comp larg larg" "info info info"; }
}

@media (max-width: 599px) {
    .obra-item {
        grid-template-columns: minmax(0, 1fr) 32px;
        grid-template-areas: "produto tirar" "qtd qtd" "info info";
    }
    .obra-sobra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
    .obra-sobra:not(.com-medidas) { grid-template-areas: "produto produto tirar" "destino destino destino" "qtd qtd qtd" "info info info"; }
    .obra-sobra.com-medidas { grid-template-areas: "produto produto tirar" "destino destino destino" "qtd qtd qtd" "comp larg larg" "info info info"; }
    .obra-anexar-tipo { flex: 1 1 100%; }
    .obra-anexar .btn { width: 100%; justify-content: center; }
    .obra-anexos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .obra-abas .mud-tabs-tabbar .mud-tab { padding: 6px 10px; }
}

/* ---------------------------------------------------------------------- Painel e relatórios */
.painel-secao { margin: 22px 0 10px; color: var(--text-2); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.painel-secao:first-of-type { margin-top: 6px; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }

/* Um cartão: cabeçalho com ícone e título, o número grande, a legenda e o link no pé. */
.painel-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.painel-cartao-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.painel-cartao-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}
.painel-cartao-titulo { flex: 1 1 auto; margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.painel-cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.painel-seletor { width: 160px; }
.painel-seletor .mud-input-control, .painel-intervalo .mud-input-control { margin: 0; }
.painel-cartao-corpo { flex: 1; min-width: 0; }
.painel-cartao-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; margin-top: 12px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.painel-cartao-link:hover { text-decoration: underline; }
.painel-cartao-falha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.painel-cartao-carregando { display: grid; gap: 6px; }

.painel-numero { color: var(--text); font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.painel-numero.medio { font-size: 20px; }
.painel-numero.negativo { color: var(--bad); }
.painel-numero.atencao { color: var(--warn); }
.painel-rotulo { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.painel-legenda { margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.painel-dica { margin-top: 6px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.painel-legenda .painel-dica { margin: 0; }
.painel-alerta { margin-top: 4px; color: var(--bad); font-size: 12.5px; font-weight: 600; }
.painel-alerta-inline { color: var(--bad); font-weight: 600; }
.painel-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.painel-link-pequeno { display: inline-block; margin-top: 4px; color: var(--accent); font-size: 12.5px; }
.painel-intervalo { display: flex; gap: 8px; margin-bottom: 8px; }
.painel-intervalo > * { flex: 1 1 0; min-width: 0; }

.painel-comparacoes { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.painel-comparacao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; }
.painel-comparacao-rotulo { flex: 1 1 180px; color: var(--text-2); }
.painel-comparacao-valor { color: var(--text); font-variant-numeric: tabular-nums; }
.painel-variacao { min-width: 64px; color: var(--text-3); font-size: 12.5px; font-weight: 700; text-align: right; }
.painel-variacao.sobe { color: var(--ok); }
.painel-variacao.desce { color: var(--bad); }

.painel-grafico { display: block; width: 100%; height: 64px; margin: 10px 0 4px; }
.painel-grafico-linha { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.painel-grafico-area { fill: var(--accent-soft); stroke: none; }
.painel-grafico-zero { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

.painel-linhas { display: grid; gap: 4px; margin: 10px 0 0; }
.painel-linhas > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.painel-linhas dt { color: var(--text-2); }
.painel-linhas dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.painel-barra { height: 10px; margin: 10px 0 4px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.painel-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.painel-barra.atencao > span { background: var(--warn); }
.painel-barra.ruim > span { background: var(--bad); }

.painel-barras { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.painel-barras li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.5em; align-items: center; gap: 8px; font-size: 12.5px; }
.painel-barras-rotulo { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.painel-barras-trilho { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.painel-barras-trilho > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.painel-barras-valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.painel-lista { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; }
.painel-lista li { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.painel-lista-nome, .painel-lista li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-lista-valor, .painel-lista .painel-alerta-inline { flex: none; font-variant-numeric: tabular-nums; }

/* O faturamento ocupa duas colunas quando há espaço para três. */
@media (min-width: 1280px) {
    .painel-cartao-largo { grid-column: span 2; }
}

/* Relatórios: a lista por área e a tela de cada um. */
.relatorios-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.relatorio-cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.relatorio-cartao:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.relatorio-cartao:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.relatorio-cartao-titulo { color: var(--text); font-size: 14.5px; font-weight: 700; }
.relatorio-cartao-desc { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }

.relatorio-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.relatorio-filtro { flex: 0 1 230px; min-width: 170px; }
.relatorio-filtro.data { flex-basis: 170px; }
.relatorio-filtro .mud-input-control { margin: 0; }
.relatorio-filtro-caixa { margin: 0; }
.relatorio-descricao { margin-bottom: 10px; color: var(--text-2); font-size: 13px; }
.relatorio-resultado.gerando { opacity: .55; transition: opacity .15s; }
.relatorio-destaques { margin-bottom: 12px; }
.relatorio-tabela tr.relatorio-linha-grupo td { background: var(--surface-2); font-weight: 700 !important; }
.relatorio-tabela tr.relatorio-linha-subtotal td { border-top: 1px solid var(--border-strong); font-weight: 700 !important; }
.relatorio-tabela tr.relatorio-linha-total td { border-top: 2px solid var(--text-2); background: var(--surface-2); font-weight: 700 !important; }
.qtd.negativo { color: var(--bad); }
.relatorio-tabela.mud-table-dense .mud-table-row .mud-table-cell { padding-left: 8px; padding-right: 8px; font-size: 13px; }

/* Relatório largo (o DRE mês a mês) rola de lado dentro da tabela; a primeira coluna fica parada. */
@media (min-width: 600px) {
    .relatorio-tabela .mud-table-head .mud-table-cell:first-child,
    .relatorio-tabela .mud-table-body .mud-table-cell:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 190px;
        background: var(--surface);
        box-shadow: inset -1px 0 0 var(--border);
    }
    .relatorio-tabela tr.relatorio-linha-grupo td:first-child,
    .relatorio-tabela tr.relatorio-linha-total td:first-child { background: var(--surface-2); }
    .relatorio-tabela .mud-table-cell.col-num { white-space: nowrap; }
}

/* Com menos de 1440px, as colunas de apoio dos relatórios saem (continuam no PDF e no Excel). */
@media (max-width: 1439px) {
    .relatorio-tabela .col-apoio { display: none !important; }
}
.relatorio-notas { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.relatorio-notas p { margin: 0 0 4px; }

@media (min-width: 600px) {
    .relatorio-tabela td.relatorio-nivel-1 { padding-left: 28px !important; }
    .relatorio-tabela td.relatorio-nivel-2 { padding-left: 44px !important; }
}

/* Parâmetros: descrição · campo · gravar. */
.parametros { display: grid; }
.parametro {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 8px 16px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}
.parametro:last-child { border-bottom: none; }
.parametro-descricao { color: var(--text); font-size: 13.5px; font-weight: 600; }
.parametro-campo .mud-input-control { margin: 0; }
.parametro-acoes { display: flex; justify-content: flex-end; gap: 6px; min-width: 170px; }

@media (max-width: 767px) {
    .parametro { grid-template-columns: minmax(0, 1fr); }
    .parametro-acoes { justify-content: flex-start; min-width: 0; }
    .parametro-acoes:empty { display: none; }
}

@media (max-width: 599px) {
    .painel-grade { grid-template-columns: minmax(0, 1fr); }
    .painel-numero { font-size: 23px; }
    .painel-numero.medio { font-size: 18px; }
    .painel-seletor { flex: 1 1 130px; width: auto; }
    .relatorio-filtro, .relatorio-filtro.data { flex: 1 1 100%; min-width: 0; }
    /* Na tabela em cartões, célula vazia não vira "Rótulo:" sozinho. */
    .relatorio-tabela td.relatorio-vazia { display: none; }
}

/* --------------------------------------------------------------------- Matriz de permissões */
.permissoes-grupo { margin-bottom: 14px; }

.permissoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
}

.permissoes-itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px 14px;
    padding: 8px 4px 0;
}

.linha-secundaria { font-size: 11.5px; color: var(--text-3); }
.icone-nota { color: var(--text-3); vertical-align: middle; }

/* ------------------------------------------------------------------------------- Telefone */
/* Mesmo bloco de 760px do Recenseamento: alvo de toque e modal que sobe de baixo. */
@media (max-width: 760px) {
    .btn { min-height: 38px; }

    .pm-overlay { align-items: flex-end; padding: 0; }
    .pm { width: 100%; max-width: none; max-height: 92dvh; border-radius: var(--radius) var(--radius) 0 0; }
    .pm-foot { flex-wrap: wrap; }
    .pm-foot .btn { flex: 1 1 auto; }
}