/* ---------------------------------------------------------------------------
   AureaBuy — utilitários CSS extraídos de inline styles repetidos.
   Adicione novas classes aqui antes de espalhar style="..." em templates.
   --------------------------------------------------------------------------- */

/* Empty state — ícone gigante semi-transparente (telas vazias de listas) */
.aurea-empty-icon {
    font-size: 48px;
    opacity: 0.2;
}

/* Controle de 42px de altura — o padrão para alinhar campo e botão na mesma
   linha (barra de filtro, rodapé de formulário). O nome antigo era
   `aurea-input-search`, mas o MESMO valor era usado em botão de Salvar: nome
   que descreve onde se usa vira mentira no primeiro reúso, então este descreve
   a regra. Os aliases antigos ficam por compatibilidade. */
.aurea-controle-42,
.aurea-input-search {
    min-width: 200px;
    height: 42px;
}

/* Igual, mais estreito (campo de data em filtro de período). */
.aurea-controle-42-estreito,
.aurea-input-date {
    min-width: 140px;
    height: 42px;
}

/* Texto compacto de tabela — 0.82rem, o tamanho usado em 53 pontos do sistema
   para dado secundário em célula (CNPJ, contato, e-mail, unidade). Estava
   sempre inline, então mudar a densidade das tabelas exigiria 53 edições. */
.aurea-td-compacto {
    font-size: 0.82rem;
}
.aurea-td-compacto-forte {
    font-size: 0.82rem;
    font-weight: 600;
}
.aurea-td-compacto-medio {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Descrição longa em coluna estreita: sem a quebra, nome de insumo ou código
   sem espaço estica a coluna e empurra a tabela pra fora da tela. */
.aurea-td-descricao {
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

/* Texto cinza muito claro centralizado (linhas zero em tabelas) */
.aurea-text-muted-center {
    text-align: center;
    color: #94a3b8;
}

/* Visual padrão Bootstrap para TODOS os checkbox/radio — inclusive bare
   <input type="checkbox"> sem classe .form-check-input. theme.min.css
   sobrescreve o padrão do Bootstrap; aqui forçamos com !important. */
input[type="checkbox"],
input[type="radio"],
.form-check-input,
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
    width: 1em !important;
    height: 1em !important;
    margin-top: .25em !important;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, .25) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    print-color-adjust: exact !important;
}
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    border-radius: .25em !important;
}
input[type="radio"],
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked,
.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
input[type="checkbox"]:checked,
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
input[type="radio"]:checked,
.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus,
.form-check-input:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}
input[type="checkbox"]:indeterminate,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}

/* Preserva o padrão Bootstrap dos switches depois da regra global acima. */
.form-switch .form-check-input {
    width: 2em !important;
    margin-left: -2.5em !important;
    background-position: left center !important;
    border-radius: 2em !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
    transition: background-position .15s ease-in-out !important;
}

.form-switch .form-check-input:checked {
    background-position: right center !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* ---------------------------------------------------------------------------
   Larguras de coluna em tabelas de lançamento
   ---------------------------------------------------------------------------
   Tabelas onde a pessoa digita linha a linha (orçamento, parcelas) precisam de
   colunas estreitas e estáveis, senão o campo de valor estica e a descrição
   espreme. Ficam aqui, e não em `style=` na célula nem em `<style>` no
   template: as duas coisas são dívida que a catraca cobra, e foi assim que o
   CSS da sidebar chegou a sete camadas.
   -------------------------------------------------------------------------- */
.table th.col-dias,
.table td.col-dias { width: 120px; }

.table th.col-valor,
.table td.col-valor { width: 170px; }

.table th.col-data,
.table td.col-data { width: 200px; }

.table th.col-acao,
.table td.col-acao { width: 80px; }

/* Coluna de classificação financeira na Prestação de Contas: o seletor precisa
   caber o nome da conta sem quebrar em duas linhas. */
.table th.col-classificacao,
.table td.col-classificacao { min-width: 200px; }

/* Diário de Obra — ao CRIAR, o cabeçalho ocupa a tela toda.
   Sem esta regra os campos ficavam empilhados em uma coluna só, com metade da
   tela em branco à direita: o grid interno foi desenhado para a coluna estreita
   da tela de edição, onde o formulário divide espaço com os painéis de
   lançamento. Relatado pelo usuário em 04/08/2026. */
@media (min-width: 992px) {
    #bloco-cabecalho-diario.col-12 .card-body > .row > [class*="col-md-12"] {
        flex: 0 0 auto;
        width: 50%;
    }
    #bloco-cabecalho-diario.col-12 .card-body > .row > [class*="col-md-8"],
    #bloco-cabecalho-diario.col-12 .card-body > .row > [class*="col-md-6"] {
        flex: 0 0 auto;
        width: 25%;
    }
    #bloco-cabecalho-diario.col-12 .card-body > .row > [class*="col-md-4"] {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

/* ---------------------------------------------------------------------------
   Botão Voltar (componente components/_botao_voltar.html)
   ---------------------------------------------------------------------------
   O usuário pediu destaque em 06/08/2026: como `btn-light`, ele sumia na faixa
   do título — cinza claro sobre fundo claro, do lado de uma trilha que também é
   cinza.

   O destaque é em NAVY, não no dourado: o dourado é da ação principal da tela
   ("Finalizar e Gerar Lançamento", "Lançar NF"), e um Voltar dourado competiria
   com ela. Navy é a cor da navegação do sistema — a mesma da barra lateral.

   A seta anda para a esquerda ao passar o mouse: reforça o sentido sem precisar
   de mais texto. */
.btn-voltar {
    --as-voltar-tinta: var(--as-navy, #001a3f);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--as-voltar-tinta);
    background-color: #fff;
    border: 1.5px solid var(--as-voltar-tinta);
    border-radius: 999px;
    padding: 0.32rem 0.95rem;
    line-height: 1.35;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* O botão encostava no que vem antes dele — quase sempre a trilha ("… ›
   Detalhes ←Voltar"), porque o `.page-header-left` é flex sem gap nenhum.
   `:not(:first-child)` para não empurrar o botão nas telas em que ele abre a
   linha sozinho (as barras de formulário, com `justify-content-between`). */
.btn-voltar:not(:first-child) {
    margin-left: 0.85rem;
}

.btn-voltar:hover,
.btn-voltar:focus {
    color: #fff;
    background-color: var(--as-voltar-tinta);
    border-color: var(--as-voltar-tinta);
    box-shadow: 0 2px 8px rgba(0, 26, 63, 0.25);
}

.btn-voltar i {
    transition: transform 0.15s ease;
}

.btn-voltar:hover i {
    transform: translateX(-3px);
}

/* Tema escuro: fundo branco sobre superfície escura inverteria o peso da tela —
   aqui o botão vira contorno claro.

   Os seletores são os que ESTE sistema usa: `html.app-skin-dark` (posto pelo
   botão de tema) e `[data-bs-theme="dark"]`. Escrevi `[data-theme="dark"]` na
   primeira versão, que é a convenção de outros lugares e aqui não existe — a
   regra simplesmente não pegava. */
html.app-skin-dark .btn-voltar,
[data-bs-theme="dark"] .btn-voltar {
    --as-voltar-tinta: #dbe4f0;
    color: #dbe4f0;
    background-color: transparent;
    border-color: #dbe4f0;
}

html.app-skin-dark .btn-voltar:hover,
html.app-skin-dark .btn-voltar:focus,
[data-bs-theme="dark"] .btn-voltar:hover,
[data-bs-theme="dark"] .btn-voltar:focus {
    color: var(--as-navy, #001a3f);
    background-color: #dbe4f0;
    border-color: #dbe4f0;
    box-shadow: 0 2px 8px rgba(219, 228, 240, 0.25);
}

/* ---------------------------------------------------------------------------
   Painel Geral do Comercial (templates/commercial/painel_geral.html)
   ---------------------------------------------------------------------------
   Dez colunas e três seletores por linha. A primeira tentativa deu largura
   MÍNIMA a cada seletor e deixou a tabela rolar na horizontal — o usuário
   pediu o contrário em 08/08/2026: *"preciso que tente diminuir as coisas para
   caber dentro da tela sem barra de rolagem"*.

   Agora as larguras são FIXAS, vindas do `<colgroup>`, e o texto longo corta
   com reticências guardando o inteiro no `title`. Medido: a tabela pedia
   1593px numa área de 1196.

   A régua: as três colunas de situação são o assunto da tela e ficam com o
   espaço; nome, responsável e local cedem, porque cortados continuam
   reconhecíveis. */
.painel-tabela {
    table-layout: fixed;
}

.painel-tabela > thead th,
.painel-tabela > tbody > tr > td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* PORCENTAGEM, e não `rem`. Com medida fixa a tabela cabia em 1366px e voltava
   a rolar em 1280 — eu teria de acertar o número para cada tela. Em
   porcentagem ela se ajusta à largura que existe e nunca ultrapassa.
   Soma: 100. */
/* No celular, espremer dez colunas em 400px não deixa nada legível: abaixo
   deste piso a tabela volta a rolar, que ali é a saída certa. */
.painel-tabela {
    min-width: 60rem;
}

/* Corta com reticências e guarda o inteiro no `title`. Sem o `title`, encurtar
   vira perda de informação: "[RADIOPHYSICS] - INCAN - BRAQ…" não distingue as
   duas obras do mesmo cliente. */
.painel-corta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O lápis de editar, colado no nome do negócio (13/08/2026). Mora AQUI, e não
   numa coluna própria, porque a grade do painel foi apertada até caber sem
   rolagem lateral — ver `--painel-grade`.
   O nome ocupa o que sobra e corta com reticências; o lápis não encolhe nunca,
   senão vira meio ícone quando o nome é comprido. */
.painel-titulo__nome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.painel-titulo__nome > a:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
/* O selo redondo é o botão que o sistema JÁ usa para "Editar" em Fornecedores,
   Contas a Receber e no Fiscal — escolha do usuário em 13/08/2026, depois de
   ver seis opções lado a lado. O lápis discreto que estava aqui antes não era
   achado.

   Não uso as classes `avatar-text avatar-sm` do tema porque elas são feitas
   para PILHA de avatares: trazem `margin-left:-10px` e borda branca de 2px, que
   aqui desalinhariam o selo e desenhariam um anel claro em volta dele. Mesmo
   desenho, sem o efeito de pilha. */
.painel-editar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 1;
    background: rgba(52, 84, 209, 0.1);
    transition: background-color 0.15s ease;
}
/* A COR vai no ícone, não no link. No tema escuro o tema pinta
   `html.app-skin-dark ... a ...` de branco com `!important` — nenhuma
   especificidade vence isso, e o projeto tem catraca contra `!important`. Mas
   a regra do tema mira o `a`; o `<i>` de dentro ela não toca. Colorir o ícone
   resolve sem entrar na guerra. */
.painel-editar i {
    color: #3454d1;
    transition: color 0.15s ease;
}
.painel-editar:hover,
.painel-editar:focus {
    background: #3454d1;
}
.painel-editar:hover i,
.painel-editar:focus i {
    color: #fff;
}
html.app-skin-dark .painel-editar {
    background: rgba(92, 124, 240, 0.16);
}
html.app-skin-dark .painel-editar i {
    color: #5c7cf0;
}
html.app-skin-dark .painel-editar:hover,
html.app-skin-dark .painel-editar:focus {
    background: #3454d1;
}
html.app-skin-dark .painel-editar:hover i,
html.app-skin-dark .painel-editar:focus i {
    color: #fff;
}

/* O BALÃO DE RECADOS (13/08/2026) — o gesto do Monday: clicar no negócio e
   escrever, sem sair do Painel. Fica ao lado do lápis, com a mesma medida, para
   os dois lerem como um par de ações do negócio. */
.painel-nota {
    flex: 0 0 auto;
    position: relative;
    display: inline-block;
}
.painel-balao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    background: rgba(107, 114, 128, 0.12);
    transition: background-color 0.15s ease;
}
.painel-balao::-webkit-details-marker { display: none; }
.painel-balao i { color: #6b7280; transition: color 0.15s ease; }
.painel-balao:hover { background: #6b7280; }
.painel-balao:hover i { color: #fff; }
/* Com nota, o balão para de ser cinza: dá para varrer a coluna e ver de
   relance quais negócios têm conversa e quais estão parados. */
.painel-balao--tem { background: rgba(25, 135, 84, 0.12); width: auto; padding: 0 0.5rem; }
.painel-balao--tem i { color: #198754; }
.painel-balao--tem:hover { background: #198754; }
.painel-balao__conta { font-size: 11px; font-weight: 800; color: #198754; }
.painel-balao--tem:hover .painel-balao__conta { color: #fff; }
html.app-skin-dark .painel-balao { background: rgba(255, 255, 255, 0.08); }
html.app-skin-dark .painel-balao i { color: #9db4cc; }
html.app-skin-dark .painel-balao--tem { background: rgba(74, 222, 128, 0.14); }
html.app-skin-dark .painel-balao--tem i,
html.app-skin-dark .painel-balao__conta { color: #4ade80; }

.painel-nota__painel {
    /* Abre para a DIREITA: o balão é o primeiro elemento da célula (fica à
       frente do nome), então ancorar à direita jogaria o painel para fora, em
       cima da coluna da TF. */
    left: 0;
    z-index: 1050;
    min-width: 320px;
    max-width: 92vw;
    padding: 12px;
    /* O cartão do Painel é estreito e a linha é uma grade: sem `normal` aqui a
       nota herdaria o `nowrap` das células e viraria uma linha só, sem fim. */
    white-space: normal;
    text-align: left;
    cursor: default;
}
.painel-nota__lista { max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.painel-nota__item {
    border-left: 3px solid rgba(107, 114, 128, 0.35);
    padding: 2px 0 2px 10px;
    margin-bottom: 10px;
}
.painel-nota__texto { font-size: 13px; line-height: 1.45; }
.painel-nota__quem { font-size: 11px; color: var(--bs-secondary-color, #6b7280); margin-top: 2px; }
.painel-nota__vazio { font-size: 12.5px; color: var(--bs-secondary-color, #6b7280); margin: 4px 0 0; }
.painel-nota__form textarea { font-size: 13px; }

/* `display: block` num `<td>` tira a célula do layout da tabela: ela deixa de
   respeitar a coluna e volta a crescer com o conteúdo. Foi assim que sobraram
   24px de rolagem mesmo com a tabela medindo exatamente a área disponível.
   No link, ao contrário, o bloco é obrigatório — sem ele não há reticências. */
a.painel-corta {
    display: block;
    max-width: 100%;
}

.painel-campo {
    width: 100%;
    /* O seletor também corta: era "Elaboração de Proposta" passando por baixo
       da seta e vazando do botão. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O contador de entregáveis: compacto, e não uma pílula branca larga. */
.painel-expandir {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    text-decoration: none;
}

.painel-expandir .badge {
    font-size: 0.68rem;
    padding: 0.12rem 0.35rem;
}

/* Coluna de ações do checklist da obra (templates/purchases/tf_abertura.html).
   Sem largura mínima, o campo de arquivo e o botão de concluir se espremem até
   virar dois quadradinhos ilegíveis quando o nome do documento é longo — e o
   nome longo é a regra aqui ("Documentos da negociação", "Arquivamento de toda
   a documentação de obra"). */
.tf-checklist-acoes {
    min-width: 13rem;
}

/* ---------------------------------------------------------------------------
   Tela de Abertura da TF (templates/purchases/tf_abertura.html)
   ---------------------------------------------------------------------------
   Aproxima a tela do desenho que o usuário mandou em 07/08/2026, usando o navy
   e o dourado que o sistema JÁ tem — e não a paleta própria das imagens.

   O motivo: adotar o visual das imagens só nesta tela a faria destoar das
   outras sessenta. Trocar a identidade do sistema inteiro é um projeto de
   design, não uma tela. Aqui é o salto visual onde importa, sem abrir frente
   nova. */

/* --- a trilha numerada de fases, no topo ---------------------------------- */
.tf-trilha {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 0.25rem 0 0.5rem;
}

.tf-trilha__passo {
    flex: 1 1 0;
    min-width: 7.5rem;
    text-align: center;
    position: relative;
    text-decoration: none;
}

/* A linha que liga um passo ao outro. Fica ATRÁS do número (z-index) para o
   círculo não ser cortado por ela. */
.tf-trilha__passo:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--as-navy-line, #d5dbe3);
    z-index: 0;
}

.tf-trilha__passo--feito:not(:first-child)::before {
    background: var(--as-gold, #fdc400);
}

.tf-trilha__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 2px solid var(--as-navy-line, #d5dbe3);
    background: #fff;
    color: #9aa4b2;
    font-weight: 700;
    font-size: 0.85rem;
}

.tf-trilha__passo--feito .tf-trilha__num {
    border-color: var(--as-gold, #fdc400);
    background: var(--as-gold, #fdc400);
    color: var(--as-navy, #001a3f);
}

.tf-trilha__passo--atual .tf-trilha__num {
    border-color: var(--as-navy, #001a3f);
    background: var(--as-navy, #001a3f);
    color: #fff;
    box-shadow: 0 0 0 4px var(--as-gold-soft, rgba(253, 196, 0, 0.2));
}

.tf-trilha__rotulo {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9aa4b2;
}

.tf-trilha__passo--atual .tf-trilha__rotulo,
.tf-trilha__passo--feito .tf-trilha__rotulo {
    color: var(--as-navy, #001a3f);
}

/* --- as linhas do checklist ----------------------------------------------- */
.tf-doc {
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tf-doc:hover {
    background: rgba(0, 26, 63, 0.02);
}

.tf-doc--feito {
    border-left-color: #17c666;
}

/* O número do documento, como no desenho. */
.tf-doc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--as-navy-line, #eef1f5);
    color: #6b7684;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tf-doc--feito .tf-doc__num {
    background: #17c666;
    color: #fff;
}

/* O arquivo anexado vira um cartão, e não uma linha de texto perdida. */
.tf-doc__arquivo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--as-navy-line, #e6eaf0);
    border-radius: 0.5rem;
    background: #fbfcfd;
    font-size: 0.8rem;
}

/* --- o contador "8 de 8", como selo --------------------------------------- */
.tf-contador {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--as-navy-line, #eef1f5);
    color: #6b7684;
}

.tf-contador--completo {
    background: rgba(23, 198, 102, 0.12);
    color: #0f8f4a;
}

/* --- tema escuro ----------------------------------------------------------
   Os seletores são os que ESTE sistema usa (html.app-skin-dark /
   [data-bs-theme="dark"]) — `[data-theme="dark"]` não existe aqui, e usá-lo já
   me custou uma correção em 06/08. */
html.app-skin-dark .tf-trilha__num,
[data-bs-theme="dark"] .tf-trilha__num {
    background: transparent;
    border-color: #33415a;
    color: #7d8899;
}

html.app-skin-dark .tf-doc__arquivo,
[data-bs-theme="dark"] .tf-doc__arquivo {
    background: rgba(255, 255, 255, 0.03);
    border-color: #2a3547;
}

html.app-skin-dark .tf-doc:hover,
[data-bs-theme="dark"] .tf-doc:hover {
    background: rgba(255, 255, 255, 0.03);
}

html.app-skin-dark .tf-doc__num,
html.app-skin-dark .tf-contador,
[data-bs-theme="dark"] .tf-doc__num,
[data-bs-theme="dark"] .tf-contador {
    background: rgba(255, 255, 255, 0.07);
    color: #b8c2cf;
}

/* O rótulo do passo ativo/concluído é navy — que no tema ESCURO é invisível
   sobre o fundo escuro. Foi o que fez "COMERCIAL" sumir da trilha na primeira
   versão: o passo atual ficava sem nome, justamente o que a pessoa precisa ler.
   Terceira vez que erro contraste no tema escuro (06/08 e 07/08 as outras). */
html.app-skin-dark .tf-trilha__passo--atual .tf-trilha__rotulo,
html.app-skin-dark .tf-trilha__passo--feito .tf-trilha__rotulo,
[data-bs-theme="dark"] .tf-trilha__passo--atual .tf-trilha__rotulo,
[data-bs-theme="dark"] .tf-trilha__passo--feito .tf-trilha__rotulo {
    color: #eef2f7;
}

html.app-skin-dark .tf-trilha__passo--atual .tf-trilha__num,
[data-bs-theme="dark"] .tf-trilha__passo--atual .tf-trilha__num {
    background: var(--as-gold, #fdc400);
    border-color: var(--as-gold, #fdc400);
    color: var(--as-navy, #001a3f);
}

/* ===========================================================================
   AS CORES DO FUNIL (Painel Geral do Comercial)
   ===========================================================================
   Copiadas do quadro que o time usa de verdade — "Funnel Radioterapia", no
   Monday. O usuário mandou as três paletas em 08/08/2026.

   Copiar a paleta DELE, e não escolher uma bonita, é o ponto: quem olha o
   quadro todo dia já lê "laranja = PRIOR 2" sem pensar.

   O tom mora no INVÓLUCRO (`.painel-cor-caixa[data-tom]`), não no seletor. É
   ele quem pinta o fundo, o texto e a setinha de uma vez — a seta é desenhada
   no invólucro e herda a cor do texto, o que faz ela funcionar nos vinte tons
   sem uma regra por tom.

   Nenhum hex mora no template, que é o que a catraca de UI mede. */

.painel-cor-caixa {
    --tom-fundo: #e5e7eb;
    --tom-texto: #374151;

    position: relative;
    display: block;
    color: var(--tom-texto);
}

.painel-cor {
    background-color: var(--tom-fundo);
    color: var(--tom-texto);
    border-color: transparent;
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
    /* A seta nativa é desenhada pelo navegador numa cor fixa que some em
       metade dos tons. Some com ela aqui e redesenha no invólucro, onde dá
       para herdar a cor certa. */
    background-image: none;
    padding-left: 0.5rem;
    padding-right: 1.4rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* A seta. Foi ela que eu apaguei sem repor na primeira versão, e as três
   células viraram etiquetas: davam a entender que não dava para mexer. */
.painel-cor-caixa::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 0;
    height: 0;
    margin-top: -0.1rem;
    border-left: 0.28rem solid transparent;
    border-right: 0.28rem solid transparent;
    border-top: 0.3rem solid currentColor;
    opacity: 0.75;
    pointer-events: none;
}

/* As opções do menu aberto são desenhadas pelo sistema operacional, não pelo
   CSS da página. Forçar cor nelas dá resultado diferente em cada navegador. */
.painel-cor option {
    background-color: #ffffff;
    color: #1f2937;
    font-weight: 500;
}

/* Os valores abaixo foram MEDIDOS na captura do quadro que o usuário mandou,
   pegando a cor predominante de cada pílula — não estimados no olho. A
   primeira versão foi estimada e errou sete das treze: "quase a cor certa" é
   perceptível quando as duas telas ficam lado a lado, e foi o que ele viu.

   --- Prioridade ---------------------------------------------------------- */
.painel-cor-caixa[data-tom="osl"]       { --tom-fundo: #175a63; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="prior_2"]   { --tom-fundo: #ff6d3b; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="prior_3"]   { --tom-fundo: #ffcb00; --tom-texto: #3d3000; }
.painel-cor-caixa[data-tom="sem_prior"] { --tom-fundo: #c4c4c4; --tom-texto: #3f3f3f; }

/* --- Compromisso ----------------------------------------------------------- */
.painel-cor-caixa[data-tom="lead"]                { --tom-fundo: #c4c4c4; --tom-texto: #3f3f3f; }
.painel-cor-caixa[data-tom="qualificacao"]        { --tom-fundo: #66ccff; --tom-texto: #0b3a4f; }
.painel-cor-caixa[data-tom="elaboracao"]          { --tom-fundo: #a9bee8; --tom-texto: #16224a; }
/* "Proposta enviada" entrou no eixo em 09/08/2026, com a importação do Monday
   (54 negócios). A cor é a MESMA que o quadro usa para a etapa homônima —
   quem olha o Monday todo dia já lê esse roxo como "está com o cliente". */
.painel-cor-caixa[data-tom="proposta_enviada"]    { --tom-fundo: #bda8f9; --tom-texto: #241645; }
.painel-cor-caixa[data-tom="negociacao"]          { --tom-fundo: #007eb5; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="fechamento"]          { --tom-fundo: #7e3b8a; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="on_hold"]             { --tom-fundo: #00c875; --tom-texto: #05331f; }
.painel-cor-caixa[data-tom="ganho"]               { --tom-fundo: #333333; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="perdido"]             { --tom-fundo: #bb3354; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="baixa_probabilidade"] { --tom-fundo: #563e3e; --tom-texto: #ffffff; }

/* --- Etapa ----------------------------------------------------------------- */
/* `lead`, `qualificacao`, `on_hold`, `ganho` e `perdido` reaproveitam as cores
   acima de propósito: no quadro real são a mesma cor nas duas colunas. */
.painel-cor-caixa[data-tom="projetos"]     { --tom-fundo: #4eccc6; --tom-texto: #0a3b39; }
.painel-cor-caixa[data-tom="orcamentacao"] { --tom-fundo: #e07a5f; --tom-texto: #40160c; }
.painel-cor-caixa[data-tom="rv_vendedor"]  { --tom-fundo: #8b2fc9; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="rv_gerente"]   { --tom-fundo: #0086c0; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="rv_diretor"]   { --tom-fundo: #333333; --tom-texto: #ffffff; }
.painel-cor-caixa[data-tom="para_envio"]   { --tom-fundo: #b8930b; --tom-texto: #2e2400; }
.painel-cor-caixa[data-tom="enviada"]      { --tom-fundo: #bda8f9; --tom-texto: #241645; }
.painel-cor-caixa[data-tom="aguardando"]   { --tom-fundo: #a8c6e5; --tom-texto: #12304a; }
.painel-cor-caixa[data-tom="neutro"]       { --tom-fundo: #e5e7eb; --tom-texto: #374151; }

/* ---------------------------------------------------------------------------
   AS ANIMAÇÕES
   ---------------------------------------------------------------------------
   A primeira versão não destacava nada, e o usuário disse isso na cara: a
   confirmação era um anel translúcido de 0,7s numa tabela de cinquenta linhas.
   O que faz destacar não é animar mais forte — é animar a coisa CERTA:

   - ao ABRIR, as três colunas entram em cascata. O olho registra que aquelas
     colunas são o assunto da tela, e acaba em menos de um segundo;
   - ao GRAVAR, a célula cresce e devolve um anel na PRÓPRIA cor dela;
   - o que é OSL ganha uma barra na lateral da LINHA. É o que se acha varrendo
     a tela de cima a baixo — um brilho no meio da linha, não. */

@keyframes painel-entrada {
    from { opacity: 0; transform: translateY(6px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* `.entrando` é posto pelo JS e some no fim; sem ele a animação rodaria de
   novo a cada repintura do navegador. */
.painel-cor-caixa.entrando {
    animation: painel-entrada 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
    animation-delay: var(--atraso, 0ms);
}

/* O piscar SAIU daqui em 08/08/2026. Ele não morreu: vai voltar no ícone da
   etapa em que o negócio está, onde o usuário decidiu que ele faz sentido —
   *"conforme for andando dentro das opções, o ícone pisca para alertar que
   está naquela etapa no momento"*.

   Piscar a célula que acabou de ser gravada avisava de uma mudança que a
   própria pessoa tinha acabado de fazer. No ícone da etapa ele avisa de uma
   coisa que ela não sabe olhando: onde o negócio está agora.

   A confirmação de gravação continua existindo — vira o realce de cor da
   célula, que muda na hora e fica. */
.painel-cor-caixa.gravou {
    outline: 2px solid var(--tom-texto);
    outline-offset: 1px;
    transition: outline-color 0.3s ease;
}

/* Falhou: sacode e volta ao valor anterior. O movimento lateral diz "não foi"
   sem depender de ler nada. */
@keyframes painel-falhou {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

.painel-cor-caixa.falhou {
    animation: painel-falhou 0.45s ease-in-out;
    box-shadow: 0 0 0 2px #e2445c;
}

/* A troca de cor: um giro curto, para o olho ACHAR qual das cinquenta linhas
   mudou. */
@keyframes painel-trocou {
    0%   { transform: rotateX(0); }
    50%  { transform: rotateX(-18deg) scale(1.05); }
    100% { transform: rotateX(0); }
}

.painel-cor-caixa.trocou {
    animation: painel-trocou 0.4s ease-out;
}

/* OSL é a prioridade máxima do quadro. A barra na lateral da linha é o que se
   acha varrendo a tela; o pulso sozinho, no meio de uma linha, não se acha. */
.painel-linha-osl > td:first-child {
    box-shadow: inset 0.28rem 0 0 0 #17696e;
}

/* A prioridade máxima não pisca mais. O destaque dela é a barra na lateral da
   linha — que não se mexe, e por isso continua servindo a quem desligou
   animação no sistema operacional. */
.painel-cor-caixa[data-tom="osl"] {
    border-radius: 0.375rem;
}

/* Quem pediu menos movimento no sistema operacional não recebe nenhum. Uma
   animação infinita que não dá para desligar é problema de acessibilidade, não
   enfeite — e a barra do OSL continua, porque ela não se mexe. */
@media (prefers-reduced-motion: reduce) {
    .painel-cor,
    .painel-cor-caixa,
    .painel-cor-caixa.entrando,
    .painel-cor-caixa.gravou,
    .painel-cor-caixa.falhou,
    .painel-cor-caixa.trocou,
    .painel-cor-caixa[data-tom="osl"] {
        animation: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   A TRILHA DE ETAPAS (Painel Geral)
   ---------------------------------------------------------------------------
   Cinco ícones ligados por um fio, no lugar do antigo seletor. Desenho
   escolhido pelo usuário em 08/08/2026 ("ideia A"), depois de ver as três
   alternativas lado a lado.

   O estado é o recado:
     feita  — ícone aceso, na cor da etapa: já passou por aqui
     atual  — aceso E piscando: está aqui agora
     futura — apagado: ainda não chegou

   O piscar VIVE AQUI, e só aqui. Ele saiu da Prioridade porque lá avisava de
   uma mudança que a própria pessoa acabou de fazer; aqui avisa de uma coisa
   que ela não sabe olhando — onde o negócio está. */

/* A trilha ocupa uma LINHA própria, embaixo da do negócio (08/08/2026).
   Espremida numa coluna, ela não cabia com os nomes. */
/* --- A LISTA DE NEGÓCIOS: CARTÕES, NÃO TABELA -------------------------------
   Foram quatro tentativas de separar um negócio do outro dentro de uma tabela
   — faixa alternada, borda grossa, cartão célula a célula, sombra em pedaços.
   Nenhuma agradou, e a causa era estrutural: cartão é UM elemento, linha de
   tabela é um punhado de células. Toda borda e toda sombra viravam remendo, e
   remendo parece remendo.

   Aqui cada negócio é um `<article>`. O alinhamento das colunas — único motivo
   de usar tabela — vem de uma GRADE compartilhada entre o cabeçalho e todos os
   cartões. Um lugar só define as colunas; mudar uma largura muda tudo junto.

   As frações (`fr`) em vez de porcentagem: a grade nunca ultrapassa a largura
   disponível, então a barra de rolagem horizontal não tem como voltar. */

.painel-lista {
    --painel-grade: 0.8fr 1.6fr 1fr 1.2fr 0.95fr 0.7fr 1.15fr 1.3fr 1.3fr;

    display: flex;
    flex-direction: column;
    /* O respiro entre cartões. É ele que faz o trabalho que quatro tentativas
       de borda não fizeram: o olho agrupa pelo que está perto e separa pelo
       que está longe. */
    gap: 1.15rem;

    /* O FUNDO é o que torna o respiro visível. Sem ele os cartões brancos
       ficam sobre um cartão branco e o vão de 18px some — o espaço estava lá
       o tempo todo, medido, e não se via. */
    background: #eef1f6;
    padding: 0 0.9rem 1rem;
    border-radius: 0.5rem;
    /* Sem `min-width`: ele reintroduziria a rolagem lateral que custou meia
       tarde para matar. Em tela estreita a grade aperta, e é o preço de nove
       colunas — a saída ali é o celular ter outra tela, não esta espremida. */
}

/* GRUDA no topo ao rolar. É a razão de o cabeçalho não precisar ser repetido
   dentro de cada cartão: repetir custaria nove rótulos por negócio e deixaria
   a comparação entre eles pior — o olho teria de pular o rótulo toda vez para
   achar o valor. Fixo, ele responde a mesma pergunta uma vez só. */
.painel-cab {
    position: sticky;
    /* 82px é a medida do projeto para "logo abaixo do cabeçalho fixo" — a
       mesma que a paginação grudenta usa. Zero deixaria o cabeçalho escondido
       atrás dele. */
    top: 82px;
    z-index: 30;
    /* Do tom do fundo da lista: branco criaria uma faixa flutuando por cima
       dos cartões ao rolar. */
    background: #eef1f6;
    border-bottom: 1px solid #dee4ec;
    padding-bottom: 0.5rem;
    display: grid;
    grid-template-columns: var(--painel-grade);
    gap: 0 0.75rem;
    padding: 0.6rem 1rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

/* As duas últimas colunas são pílulas CENTRALIZADAS; o rótulo alinhado à
   esquerda ficava deslocado em relação a elas. */
.painel-cab > span:nth-last-child(-n + 2) {
    text-align: center;
}

.painel-cab > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O cartão. Tudo o que as tentativas anteriores fingiam, aqui é direto: raio,
   sombra, e a elevação no hover que dá a profundidade que o usuário pediu. */
.painel-card {
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.8rem 1rem 0.85rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 3px 8px -4px rgba(15, 23, 42, 0.16);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.painel-card:hover {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 10px 010px -6px rgba(15, 23, 42, 0.28);
    transform: translateY(-1px);
}

.painel-card__linha {
    display: grid;
    grid-template-columns: var(--painel-grade);
    gap: 0 0.75rem;
    align-items: center;
    font-size: 0.82rem;
}

/* `min-width: 0` em cada célula: sem isso o conteúdo longo se recusa a
   encolher e estoura a coluna — o mesmo defeito que a tabela tinha. */
.painel-card__linha > * {
    min-width: 0;
}

.painel-card .trilha-etapa {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #eef1f5;
}

.trilha-etapa {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    /* Ocupa a largura que existe. A primeira versão limitava para os ícones
       não ficarem longe demais, mas com o nome embaixo de cada um a trilha se
       lê mesmo espalhada — e sobrava espaço à toa. */
    width: 100%;
}

/* O ÍCONE DA QUALIFICAÇÃO COMO BOTÃO DE ENTRADA (10/08/2026).
   Fora da trilha, o primeiro ícone deixa de abrir a Ficha e passa a MANDAR o
   negócio para lá. Um botão separado na ponta da linha existiu por um dia e o
   usuário não o achava: o gesto certo é no lugar onde a informação já está.

   `display: contents` faz o <form> sumir da caixa: sem isso ele viraria o item
   do flex e o botão perderia o alinhamento dos outros quatro ícones. */
.trilha-etapa__forma {
    display: contents;
}

/* Um <button> traz fundo, borda e fonte próprios do navegador — todos
   errados aqui, porque ele precisa ser indistinguível dos ícones vizinhos. */
.trilha-etapa__passo--enviar {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* O convite. Apagado como os outros (o negócio não está lá), mas o contorno
   tracejado diz que ali cabe uma ação — é a diferença entre "ainda não chegou"
   e "você pode pôr aqui". */
.trilha-etapa__passo--enviar .trilha-etapa__bolha {
    border-style: dashed;
}

.trilha-etapa__passo--enviar:hover .trilha-etapa__bolha,
.trilha-etapa__passo--enviar:focus-visible .trilha-etapa__bolha {
    border-style: solid;
    transform: scale(1.12);
}

/* COR PRÓPRIA, e não o cinza de "ainda não chegou".
   Medido: aquele cinza dá contraste 1.91 no tema claro e 2.70 no escuro, contra
   os 4.5 que texto pequeno exige. Passa para um rótulo passivo; num rótulo que
   se CLICA, não — ninguém age no que não consegue ler. */
.trilha-etapa__passo--enviar.trilha-etapa__passo--futura .trilha-etapa__nome {
    white-space: nowrap;
    color: #1d4ed8;
    font-weight: 600;
}

.trilha-etapa__passo--enviar:hover .trilha-etapa__nome,
.trilha-etapa__passo--enviar:focus-visible .trilha-etapa__nome {
    text-decoration: underline;
}

.trilha-etapa__passo {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    /* Cursor de ajuda enquanto as telas de cada etapa não existem: o ícone
       ainda não leva a lugar nenhum, e um cursor de link prometeria isso. */
    cursor: help;
}

/* O nome embaixo do ícone. Foi o que a linha própria comprou: sem ele, quem
   ainda não decorou os cinco desenhos fica adivinhando. */
.trilha-etapa__nome {
    font-size: 0.66rem;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    color: #6b7280;
}

.trilha-etapa__passo--atual .trilha-etapa__nome {
    color: currentColor;
    font-weight: 700;
}

.trilha-etapa__passo--futura .trilha-etapa__nome {
    color: #b6bcc5;
}

.trilha-etapa__bolha {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    background: #fff;
    transition: transform 0.15s ease;
}

.trilha-etapa__bolha svg {
    width: 0.95rem;
    height: 0.95rem;
}

.trilha-etapa__passo:hover .trilha-etapa__bolha {
    transform: scale(1.14);
}

/* O fio entre um ícone e o outro: mostra o caminho e o quanto já andou. */
.trilha-etapa__fio {
    flex: 1 1 auto;
    min-width: 2.5rem;
    height: 1.5px;
    background: #d1d5db;
    /* Sobe até a altura do ÍCONE: com o nome embaixo, o meio do bloco fica
       abaixo da bolha e o fio passava cortando o texto. */
    margin-top: 0.82rem;
}

.trilha-etapa__fio--ok {
    background: currentColor;
}

/* ===========================================================================
   O PAINEL NO CELULAR
   ===========================================================================
   A grade de nove colunas foi mantida em tela estreita e o resultado era
   inutilizável: cada coluna ficava com ~30px e todo valor virava uma letra com
   reticências — "H…", "d..", "S…". O cabeçalho virava "T. C… V… E… C. P.", e a
   trilha vazava para fora do cartão.

   O comentário em `.painel-lista` já dizia que a saída era o celular ter outra
   tela. Esta é ela: o cartão deixa de ser uma LINHA de tabela e vira uma FICHA
   — nome em cima, e cada valor com seu rótulo ao lado.

   O rótulo vem do atributo `data-rotulo` que o template põe em cada célula. É
   um HTML só para as duas telas: marcação duplicada envelheceria, e a coluna
   nova de amanhã apareceria numa e faltaria na outra.
   =========================================================================== */
@media (max-width: 767.98px) {
    /* O cabeçalho de colunas não faz sentido sem colunas — e empilhado seriam
       nove palavras soltas antes do primeiro negócio. */
    .painel-cab {
        display: none;
    }

    .painel-lista {
        padding: 0 0.5rem 0.75rem;
        gap: 0.75rem;
    }

    .painel-card {
        padding: 0.85rem 0.9rem;
    }

    .painel-card__linha {
        display: flex;
        flex-direction: column;
        gap: 0;
        font-size: 0.85rem;
        /* `stretch`, e é obrigatório dizer: a regra de tela larga tem
           `align-items: center`, que numa grade centraliza na VERTICAL — mas
           num empilhamento de coluna centraliza na HORIZONTAL. Sem isto, cada
           linha da ficha encolhia até o tamanho do texto e ficava boiando no
           meio do cartão. */
        align-items: stretch;
    }

    /* Rótulo à esquerda, valor à direita: é o que deixa a ficha legível de
       relance sem precisar do cabeçalho. */
    .painel-card__linha > * {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.38rem 0;
        border-bottom: 1px dashed #eef1f5;
        text-align: right;
    }

    .painel-card__linha > *:last-child {
        border-bottom: none;
    }

    .painel-card__linha > [data-rotulo]::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7280;
        text-align: left;
    }

    /* O nome do cliente é o TÍTULO da ficha: vai para o topo, sem rótulo, e
       maior. Sem isso ele seria mais uma linha igual às outras. */
    .painel-titulo {
        order: -1;
        display: block;
        font-size: 1rem;
        padding-bottom: 0.5rem;
        text-align: left;
    }

    .painel-valor {
        font-weight: 700;
        font-size: 0.95rem;
    }

    /* Em tela larga o corte com reticências protege a grade. Aqui não há grade
       para proteger, e cortar o endereço em "Rio de Jan…" esconde justamente o
       que a pessoa abriu o celular para ver. */
    .painel-card__linha .painel-corta {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    /* Os seletores de Prioridade e Compromisso encostam à direita, do tamanho
       do conteúdo — largura total deixaria duas barras coloridas gigantes
       dominando a ficha. */
    /* Prioridade e Compromisso dividem a linha com o próprio rótulo. Limitar a
       CAIXA (a primeira tentativa, com `max-width: 62%`) espremia o seletor
       para 61px e "Lead" saía como "Le..." — justamente a etiqueta que diz
       onde o negócio está. A caixa toma a linha inteira e quem tem teto é o
       SELETOR, que assim fica largo o bastante para o texto e ainda não vira
       uma barra colorida atravessando a ficha. */
    .painel-card__linha .painel-cor-caixa .painel-cor {
        flex: 0 1 auto;
        min-width: 7.5rem;
        max-width: 11rem;
    }

    /* A TRILHA. Cinco nomes lado a lado não cabem em 390px — "Proposta
       Comercial" sozinho come um quarto da tela. Fica só o nome da etapa
       ATUAL, que é a informação que a trilha existe para dar; os outros quatro
       viram ícone puro, e o aceso/apagado continua contando o resto. */
    .trilha-etapa__passo:not(.trilha-etapa__passo--atual) .trilha-etapa__nome {
        display: none;
    }

    .trilha-etapa__fio {
        min-width: 0.75rem;
    }

    .trilha-etapa__bolha {
        width: 1.7rem;
        height: 1.7rem;
    }

    /* O ícone-botão MANTÉM o nome em 390px, ao contrário dos outros quatro.
       A regra acima esconde o nome de quem não é a etapa atual, e ele não é
       nenhuma das duas coisas: sem o texto viraria um círculo tracejado mudo,
       e ninguém adivinharia que ali se manda o negócio para a fila.

       As DUAS classes no seletor não são enfeite: a regra que esconde usa
       `:not(...)`, que conta como classe, e com uma só esta aqui perderia por
       especificidade mesmo vindo depois. */
    .trilha-etapa__passo--enviar.trilha-etapa__passo--futura .trilha-etapa__nome {
        display: block;
    }

    .trilha-etapa__nome {
        white-space: normal;
        max-width: 6.5rem;
    }
}

/* ===========================================================================
   O PAINEL NO TEMA ESCURO
   ===========================================================================
   Relatado pelo usuário em 09/08/2026: *"no desktop o tema escuro está
   quebrado"*. Estava, e de um jeito que só se vê olhando: os cartões foram
   escritos com cores claras fixas e não tinham variante escura nenhuma.

   O que acontecia, medido pixel a pixel e não a olho:

   * o NOME DO CLIENTE sumia. O tema pinta link de branco no escuro, e o cartão
     continuava branco — texto branco sobre branco. A coluna mais importante da
     tela aparecia vazia, e nada indicava que havia algo ali.
   * as pílulas de Prioridade e Compromisso saíam como CAIXAS BRANCAS VAZIAS. O
     tema tem `html.app-skin-dark ... .form-select { background: transparent }`,
     que é mais específico que `.painel-cor` — o tom do quadro perdia a
     disputa, e com ele o único jeito de ler a situação do negócio de relance.
   * e a lista inteira ficava como uma ilha CLARA no meio de uma página escura.

   Os seletores são os deste sistema: `html.app-skin-dark` (posto pelo botão de
   tema) e `[data-bs-theme="dark"]`. `[data-theme="dark"]` é a convenção de
   outros lugares, não existe aqui, e usá-lo já custou correção em 06/08.

   As cores saem do próprio sistema no escuro: fundo da página #121a2d e
   superfície de cartão #0f1e30, amostradas da tela.
   =========================================================================== */
html.app-skin-dark .painel-lista,
[data-bs-theme="dark"] .painel-lista {
    /* Mais escuro que o cartão que a contém, para o respiro entre os negócios
       continuar aparecendo — é ele que separa um do outro. */
    background: #0a1523;
}

html.app-skin-dark .painel-cab,
[data-bs-theme="dark"] .painel-cab {
    background: #0a1523;
    border-bottom-color: #24344d;
    color: #94a3b8;
}

html.app-skin-dark .painel-card,
[data-bs-theme="dark"] .painel-card {
    background: #16263c;
    /* No claro a profundidade vem da sombra. No escuro sombra não se vê: quem
       levanta o cartão é ele ser mais claro que o fundo, e a borda fecha a
       silhueta. */
    border: 1px solid #24344d;
    box-shadow: none;
}

html.app-skin-dark .painel-card:hover,
[data-bs-theme="dark"] .painel-card:hover {
    border-color: #33456180;
    background: #1a2c46;
    box-shadow: none;
}

/* O NOME DO CLIENTE. Sem isto ele é branco sobre branco no claro — ou some no
   escuro quando o cartão escurece. Cor explícita nos dois temas. */
html.app-skin-dark .painel-card__linha a,
[data-bs-theme="dark"] .painel-card__linha a {
    color: #dbe4f0;
}

html.app-skin-dark .painel-card__linha a:hover,
[data-bs-theme="dark"] .painel-card__linha a:hover {
    color: #fff;
}

/* A PÍLULA.
   `!important`, e é a única saída honesta aqui: o tema apaga o fundo de TODO
   `.form-select` no escuro com `background: transparent !important`. Contra
   `!important` não existe especificidade que valha — só outro `!important`.
   Medi a disputa no navegador antes de escrever isto: minha regra estava lá,
   com a mesma especificidade e depois no arquivo, e perdia mesmo assim.

   Fica restrito ao tema escuro e a esta pílula, para não virar mais uma regra
   forte solta no sistema. */
html.app-skin-dark .painel-cor,
[data-bs-theme="dark"] .painel-cor {
    background-color: var(--tom-fundo) !important;
    color: var(--tom-texto) !important;
    border-color: transparent !important;
}

/* A trilha: a bolha era branca fixa e o fio, cinza claro. */
html.app-skin-dark .trilha-etapa__bolha,
[data-bs-theme="dark"] .trilha-etapa__bolha {
    background: #16263c;
}

/* E as etapas CUMPRIDA e ATUAL voltam a ser preenchidas.
   A regra acima é mais específica que `.trilha-etapa__passo--feita
   .trilha-etapa__bolha`, então ela apagava justamente o que a trilha existe
   para mostrar: por onde o negócio já passou e onde ele está. Ficaram todas as
   cinco bolhas vazadas e iguais — vi na tela depois de "consertar" o escuro. */
html.app-skin-dark .trilha-etapa__passo--feita .trilha-etapa__bolha,
html.app-skin-dark .trilha-etapa__passo--atual .trilha-etapa__bolha,
[data-bs-theme="dark"] .trilha-etapa__passo--feita .trilha-etapa__bolha,
[data-bs-theme="dark"] .trilha-etapa__passo--atual .trilha-etapa__bolha {
    background: currentColor;
}

html.app-skin-dark .trilha-etapa__fio,
[data-bs-theme="dark"] .trilha-etapa__fio {
    background: #33455f;
}

/* As CORES das etapas, repetidas aqui de propósito.
   O passo de Qualificação é um LINK (leva à Ficha), e o tema escuro pinta todo
   link de branco com especificidade maior que `.trilha-etapa__passo[data-tom]`.
   Resultado: a bolha dele saía BRANCA no meio de quatro coloridas — vi na tela.
   Como tudo na trilha é amarrado por `currentColor`, devolver a cor aqui
   conserta bolha, ícone e fio de uma vez.

   `!important` porque o tema usa `color: #fff !important` para link no escuro.
   Medi a disputa no navegador: minha regra tinha especificidade maior e
   perdia mesmo assim. Contra `!important` não existe especificidade. */
html.app-skin-dark .trilha-etapa__passo[data-tom="qualificacao"],
[data-bs-theme="dark"] .trilha-etapa__passo[data-tom="qualificacao"] { color: #4bb3e8 !important; }
html.app-skin-dark .trilha-etapa__passo[data-tom="projetos"],
[data-bs-theme="dark"] .trilha-etapa__passo[data-tom="projetos"] { color: #2bb3ad !important; }
html.app-skin-dark .trilha-etapa__passo[data-tom="orcamentacao"],
[data-bs-theme="dark"] .trilha-etapa__passo[data-tom="orcamentacao"] { color: #d9663f !important; }
html.app-skin-dark .trilha-etapa__passo[data-tom="para_envio"],
[data-bs-theme="dark"] .trilha-etapa__passo[data-tom="para_envio"] { color: #d4ab1f !important; }
html.app-skin-dark .trilha-etapa__passo[data-tom="fechamento"],
[data-bs-theme="dark"] .trilha-etapa__passo[data-tom="fechamento"] { color: #a970cc !important; }

html.app-skin-dark .trilha-etapa__nome,
[data-bs-theme="dark"] .trilha-etapa__nome {
    color: #94a3b8;
}

html.app-skin-dark .trilha-etapa__passo--futura .trilha-etapa__nome,
[data-bs-theme="dark"] .trilha-etapa__passo--futura .trilha-etapa__nome {
    color: #5a687e;
}

/* O convite de entrada no escuro. Precisa de DOIS seletores de classe no
   passo, senão a regra de `--futura` logo acima (que é mais específica e vem
   depois da versão clara) apaga o texto de volta para o cinza ilegível. */
html.app-skin-dark .trilha-etapa__passo--enviar.trilha-etapa__passo--futura .trilha-etapa__nome,
[data-bs-theme="dark"] .trilha-etapa__passo--enviar.trilha-etapa__passo--futura .trilha-etapa__nome {
    color: #7cb8f5;
}

/* A linha divisória entre os valores da ficha no celular. */
html.app-skin-dark .painel-card__linha > *,
[data-bs-theme="dark"] .painel-card__linha > * {
    border-bottom-color: #24344d;
}

html.app-skin-dark .painel-card .trilha-etapa,
[data-bs-theme="dark"] .painel-card .trilha-etapa {
    border-top-color: #24344d;
}

/* --- as cores de cada etapa ------------------------------------------------- */
/* Mesmas da paleta do quadro, para a trilha e as pílulas falarem a mesma
   língua. `currentColor` amarra tudo: borda, ícone, fio e preenchimento.

   Estas regras vêm ANTES das de estado de propósito. Cor e estado têm o mesmo
   peso no CSS (uma classe + um atributo cada), então quem vem por último
   ganha — e o estado tem de ganhar. Com a ordem invertida, as cinco etapas
   saíam coloridas e a trilha não dizia mais nada. */
.trilha-etapa__passo[data-tom="qualificacao"] { color: #4bb3e8; }
.trilha-etapa__passo[data-tom="projetos"]     { color: #2bb3ad; }
.trilha-etapa__passo[data-tom="orcamentacao"] { color: #d9663f; }
.trilha-etapa__passo[data-tom="para_envio"]   { color: #b8930b; }
.trilha-etapa__passo[data-tom="fechamento"]   { color: #8342a8; }

/* --- os três estados -------------------------------------------------------- */
.trilha-etapa__passo--feita .trilha-etapa__bolha {
    background: currentColor;
}

.trilha-etapa__passo--feita .trilha-etapa__bolha svg {
    stroke: #fff;
}

.trilha-etapa__passo--atual .trilha-etapa__bolha {
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.trilha-etapa__passo--atual .trilha-etapa__bolha svg {
    stroke: #fff;
}

/* Apagado, e não invisível: quem ainda não chegou precisa saber que a etapa
   existe e o que vem pela frente.

   Precisa das DUAS coisas para ganhar da cor da etapa: o `[data-tom]` para
   empatar o peso (classe + atributo, como lá) e vir DEPOIS no arquivo para
   desempatar. Errei as duas separadamente antes de acertar: só reordenar não
   resolve, porque empate de ordem não vale contra peso maior. */
.trilha-etapa__passo--futura[data-tom] {
    color: #d1d5db;
}

.trilha-etapa__passo--futura .trilha-etapa__bolha {
    background: #fff;
}

/* --- o piscar da etapa atual ------------------------------------------------ */
/* 1,6s por ciclo = 0,6 piscadas por segundo. Bem abaixo das três por segundo
   que são risco para epilepsia fotossensível — a conta já me escapou uma vez
   nesta tela, e o teste pegou. */
@keyframes trilha-etapa-pisca {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.trilha-etapa__passo--atual .trilha-etapa__bolha {
    animation: trilha-etapa-pisca 1.6s ease-in-out infinite;
}

/* Sem movimento, o "está aqui agora" tem de continuar legível: o anel grosso
   faz esse papel para quem desligou animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    .trilha-etapa__passo--atual .trilha-etapa__bolha {
        animation: none;
        box-shadow: 0 0 0 3px currentColor;
    }
}

/* ---------------------------------------------------------------------------
   A FICHA DE QUALIFICAÇÃO (templates/commercial/ficha_qualificacao.html)
   ---------------------------------------------------------------------------
   24 seções, 166 itens. O que a tela precisa resolver é sempre o mesmo: a
   pessoa não preenche numa sentada, então tem de ser fácil ACHAR ONDE PAROU e
   ter certeza de que o que respondeu ficou gravado. */

.ficha-barra {
    height: 0.5rem;
}

/* O contador de cada seção, no cabeçalho fechado do acordeão. É por ele que se
   acha onde parou sem abrir as 24. */
.ficha-contador {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}

.ficha-contador--ok {
    color: #15803d;
}

.ficha-tabela td,
.ficha-tabela th {
    vertical-align: middle;
    font-size: 0.8rem;
}

.ficha-tabela th {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

/* Item sem resposta fica com a lateral marcada. É o que faz a pessoa enxergar
   os buracos ao rolar, em vez de descobrir só na hora de concluir. */
.ficha-linha--vazia > td:first-child {
    box-shadow: inset 0.2rem 0 0 0 #e5e7eb;
}

.ficha-linha--gravando {
    opacity: 0.55;
}

/* Gravou: um verde curto. A tela salva sozinha, e sem sinal ninguém sabe se
   pegou. */
.ficha-linha--ok > td {
    background-color: #f0fdf4;
    transition: background-color 0.5s ease;
}

/* Falhou: fica marcado e NÃO some sozinho. Sem isso a pessoa segue
   preenchendo e só descobre que nada gravou quando recarrega. */
.ficha-linha--erro > td {
    background-color: #fef2f2;
}

.ficha-linha--erro > td:first-child {
    box-shadow: inset 0.2rem 0 0 0 #dc2626;
}

.ficha-pendencias {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
}

/* O que falta ao concluir. Desde que nenhuma seção trava (09/08/2026), este
   bloco é o único aviso de que a ficha vai fechar pela metade — por isso tem
   cor de aviso, e não o cinza de rodapé que tinha antes. */
.ficha-faltando > summary {
    cursor: pointer;
    color: #92400e;
}

.ficha-faltando[open] > summary {
    margin-bottom: 0.2rem;
}

/* O diagrama que acompanha a seção na ficha de papel. */
.ficha-diagrama {
    margin: 0;
    padding: 0.9rem 1rem 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ficha-diagrama img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}

.ficha-diagrama figcaption {
    padding: 0.5rem 0 0.9rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #64748b;
}

.ficha-diagrama figcaption strong {
    display: block;
    color: #334155;
}

/* O texto do diagrama é miúdo: dentro da tela ele serve para localizar, e
   quem precisa LER abre em tamanho real. O convite fica visível sempre, e não
   escondido no title da imagem. */
.ficha-diagrama figcaption a {
    display: inline-block;
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* O cartão de concluir acompanha a rolagem: com 166 itens, ele ficaria a
   quilômetros do fim da lista. */
@media (min-width: 1200px) {
    .ficha-fecho {
        position: sticky;
        top: 82px;
    }
}

/* O ícone que JÁ tem tela é clicável de verdade — e o cursor diz isso. Os
   outros quatro seguem com cursor de ajuda até as telas deles existirem. */
.trilha-etapa__passo--tem-tela {
    cursor: pointer;
    text-decoration: none;
}

/* ===========================================================================
   A FICHA DE QUALIFICAÇÃO NO TEMA ESCURO
   ===========================================================================
   O usuário disse que na VPS o escuro continuava ruim. Eu tinha consertado só
   o Painel; a Ficha nunca foi olhada no escuro, e estava pior.

   O que se via, medido e não a olho:

   * O ACORDEÃO era uma pilha de BARRAS BRANCAS VAZIAS. Os 25 nomes de seção
     saíam com contraste 1.0 — branco sobre branco. Só os contadores ("0/9")
     apareciam. A tela de 166 itens ficava sem como navegar: não dava para
     saber qual seção era qual.
   * o painel "Ainda falta" era creme com texto claro por cima.
   * a faixa do diagrama e a marca de "gravou/falhou" eram ilhas claras.

   O acordeão é usado SÓ nesta tela em todo o sistema — conferi antes de mexer,
   para o conserto não vazar para outro módulo.

   Seletores deste sistema: `html.app-skin-dark` e `[data-bs-theme="dark"]`.
   `[data-theme="dark"]` não existe aqui. */
html.app-skin-dark .ficha-secoes .accordion-button,
[data-bs-theme="dark"] .ficha-secoes .accordion-button {
    background-color: #16263c;
    color: #dbe4f0;
}

html.app-skin-dark .ficha-secoes .accordion-button:not(.collapsed),
[data-bs-theme="dark"] .ficha-secoes .accordion-button:not(.collapsed) {
    background-color: #1d3352;
    color: #fff;
}

html.app-skin-dark .ficha-secoes .accordion-item,
[data-bs-theme="dark"] .ficha-secoes .accordion-item {
    background-color: transparent;
    border-color: #24344d;
}

/* A setinha do acordeão é uma imagem SVG escura embutida no Bootstrap: no
   fundo escuro ela some junto com o texto. `invert` a clareia sem precisar
   reescrever o data-URI. */
html.app-skin-dark .ficha-secoes .accordion-button::after,
[data-bs-theme="dark"] .ficha-secoes .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(2);
}

html.app-skin-dark .ficha-pendencias,
[data-bs-theme="dark"] .ficha-pendencias {
    background: #2a2110;
    border-color: #6b5312;
    color: #f5d98b;
}

html.app-skin-dark .ficha-faltando > summary,
[data-bs-theme="dark"] .ficha-faltando > summary {
    color: #f0b95e;
}

html.app-skin-dark .ficha-diagrama,
[data-bs-theme="dark"] .ficha-diagrama {
    background: #101d31;
    border-bottom-color: #24344d;
}

html.app-skin-dark .ficha-diagrama figcaption,
[data-bs-theme="dark"] .ficha-diagrama figcaption {
    color: #94a3b8;
}

html.app-skin-dark .ficha-diagrama figcaption strong,
[data-bs-theme="dark"] .ficha-diagrama figcaption strong {
    color: #dbe4f0;
}

/* O sinal de gravou/falhou. São os dois avisos que dizem se a resposta pegou —
   em verde e vermelho claros eles sumiam no escuro. */
html.app-skin-dark .ficha-linha--ok > td,
[data-bs-theme="dark"] .ficha-linha--ok > td {
    background-color: #12301f;
}

html.app-skin-dark .ficha-linha--erro > td,
[data-bs-theme="dark"] .ficha-linha--erro > td {
    background-color: #3a1418;
}

html.app-skin-dark .ficha-linha--vazia > td:first-child,
[data-bs-theme="dark"] .ficha-linha--vazia > td:first-child {
    box-shadow: inset 0.2rem 0 0 0 #3d4d66;
}

html.app-skin-dark .ficha-contador,
[data-bs-theme="dark"] .ficha-contador {
    color: #94a3b8;
}

html.app-skin-dark .ficha-contador--ok,
[data-bs-theme="dark"] .ficha-contador--ok {
    color: #4ade80;
}

/* O BOTÃO DOURADO DOS DASHBOARDS, NO ESCURO
   ---------------------------------------------------------------------------
   Achado ao varrer o Comercial no escuro em 09/08/2026, mas o defeito é geral:
   o botão de ação principal de SETE dashboards (Comercial, Fiscal, Financeiro
   e três de Compras) saía com texto BRANCO sobre dourado — contraste 1.6, no
   limite do ilegível.

   O `base.html` pinta `.dash-hero .hbtn-gold` de navy, como deve ser. O que
   ganha é a regra do tema que faz todo link virar branco no escuro, com
   `!important`. Como o botão é um `<a>`, ele é pego junto.

   Daí o `!important` aqui: é a única forma de responder, e fica restrito a
   este botão e ao tema escuro. */
html.app-skin-dark .dash-hero .hbtn-gold,
[data-bs-theme="dark"] .dash-hero .hbtn-gold {
    color: #06213f !important;
}

/* ESTADO VAZIO E DICA DE CAMPO, NO ESCURO
   ---------------------------------------------------------------------------
   Achados na varredura do Comercial em 09/08/2026, mas os dois são
   componentes do SISTEMA INTEIRO — o estado vazio aparece em 81 telas.

   Os dois herdam `var(--bs-body-color)`, que neste tema não acompanha o
   escuro: ficam cinza-escuro sobre fundo escuro, com contraste ~2.2. Não
   somem, mas o título de "Nenhum X encontrado" e a dica que explica o que
   digitar são justamente o texto que alguém procura quando está perdido na
   tela — e são os que estavam mais apagados.

   Cinza claro, e não branco: continuam sendo texto secundário. */
html.app-skin-dark .empty-state__title,
[data-bs-theme="dark"] .empty-state__title {
    color: #cbd5e1;
}

html.app-skin-dark .empty-state__subtitle,
html.app-skin-dark .empty-state--compact .empty-state__title,
[data-bs-theme="dark"] .empty-state__subtitle,
[data-bs-theme="dark"] .empty-state--compact .empty-state__title {
    color: #94a3b8;
}

html.app-skin-dark .form-text,
[data-bs-theme="dark"] .form-text {
    color: #94a3b8;
}

/* A ETIQUETA DE TOM — a pílula colorida que NÃO é campo.
   ---------------------------------------------------------------------------
   Na fila, Prioridade só se lê; no Painel, ela se escolhe. Reusei a classe do
   Painel e o resultado apareceu na tela: a setinha do dropdown desenhada por
   cima do texto ("Prioridade⌄2") e nenhuma cor de fundo, porque quem pinta lá
   é o `<select>` de dentro.

   Esta variante aproveita as MESMAS treze definições de tom (`--tom-fundo` /
   `--tom-texto` de `.painel-cor-caixa[data-tom]`) e só muda o que difere:
   pinta a si mesma e não desenha seta. Copiar a paleta seria criar uma segunda
   verdade sobre a cor de cada situação. */
.painel-cor-caixa--estatica {
    background: var(--tom-fundo);
    color: var(--tom-texto);
    border-radius: 0.35rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.painel-cor-caixa--estatica::after {
    display: none;
}

/* A FILA NO CELULAR
   ---------------------------------------------------------------------------
   A tabela tem cinco colunas e 839px; num telefone de 390 ela ganha rolagem
   lateral própria — e o botão de trabalhar no negócio, que é o PONTO desta
   tela, fica escondido atrás dessa rolagem. Quem abre a fila no celular veria
   uma lista de nomes sem como agir sobre eles.

   Mesmo tratamento do Painel: a linha vira ficha, com o rótulo vindo do
   `data-rotulo` do template. Um HTML só para as duas telas. */
@media (max-width: 767.98px) {
    .fila-tabela,
    .fila-tabela thead,
    .fila-tabela tbody,
    .fila-tabela tr,
    .fila-tabela td {
        display: block;
        width: 100%;
    }

    .fila-tabela thead {
        display: none;
    }

    .fila-tabela tr {
        border-bottom: 1px solid #e5e7eb;
        padding: 0.65rem 0.9rem;
    }

    .fila-tabela td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        border: none;
        padding: 0.25rem 0;
        text-align: right;
    }

    .fila-tabela td[data-rotulo]::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7280;
        text-align: left;
    }

    .fila-tabela .fila-titulo {
        display: block;
        text-align: left;
        padding-bottom: 0.35rem;
    }

    /* O botão ocupa a largura toda: é a ação da linha, e no telefone o alvo de
       toque precisa ser grande. */
    .fila-tabela .fila-acao {
        display: block;
        padding-top: 0.5rem;
    }

    /* As categorias continuam EMPILHADAS no celular. A regra genérica acima
       põe rótulo à esquerda e valor à direita na mesma linha, e as quatro
       viravam uma fileira apertada de caixas minúsculas — perto demais para o
       dedo acertar a certa. */
    .fila-tabela .fila-categorias {
        display: block;
        text-align: left;
    }

    .fila-tabela .fila-categorias::before {
        display: block;
        margin-bottom: 0.3rem;
    }

    .fila-tabela .fila-categoria {
        padding: 0.22rem 0;
    }

    .fila-tabela .fila-acao .btn {
        width: 100%;
    }
}

html.app-skin-dark .fila-tabela tr,
[data-bs-theme="dark"] .fila-tabela tr {
    border-bottom-color: #24344d;
}

/* AS CATEGORIAS DA OBRA, NA FILA
   ---------------------------------------------------------------------------
   Empilhadas, como no desenho do usuário (10/08/2026). Lado a lado caberiam,
   mas o olho leria "quatro palavras" em vez de "quatro escolhas" — e a coluna
   ficaria com o dobro da largura das outras. */
.fila-categoria {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}

.fila-categoria input {
    cursor: pointer;
}

/* Gravou / falhou: os mesmos sinais da Ficha. A gravação é automática ao
   clicar, e sem sinal ninguém sabe se pegou. */
.fila-categorias--gravando {
    opacity: 0.55;
}

.fila-categorias--ok {
    box-shadow: inset 0.18rem 0 0 0 #16a34a;
    transition: box-shadow 0.5s ease;
}

.fila-categorias--erro {
    box-shadow: inset 0.18rem 0 0 0 #dc2626;
}

/* O ícone de ação da linha — abrir a ficha, abrir o PDF. */
.fila-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    color: #0f172a;
    background: #eef1f6;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.fila-icone:hover {
    background: var(--as-navy, #001a3f);
    color: #fff;
}

html.app-skin-dark .fila-icone,
[data-bs-theme="dark"] .fila-icone {
    background: #24344d;
    color: #dbe4f0;
}

html.app-skin-dark .fila-icone:hover,
[data-bs-theme="dark"] .fila-icone:hover {
    background: #dbe4f0;
    color: #0f172a;
}

/* As caixas de categoria dentro da Ficha. Em linha aqui (não empilhadas como
   na fila): há largura sobrando, e lado a lado elas se leem como um conjunto
   de escolhas — que é o que são. */
.ficha-categorias-caixas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}

.ficha-categorias--gravando {
    opacity: 0.55;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   A ETAPA DE PROJETOS (11/08/2026)

   As larguras vivem aqui, e não em `style=` no template, porque a catraca de
   dívida de UI existe justamente para isso: CSS inline é CSS que ninguém acha
   depois. A barra de progresso é a única exceção — a largura dela é um VALOR
   calculado por negócio, não estilo, e por isso continua no template.
   --------------------------------------------------------------------------- */
.projetos-cabeca__obra {
    min-width: 16rem;
}

.projetos-cabeca__contagem {
    min-width: 12rem;
}

.projetos-barra {
    height: 6px;
}

.projetos-tabela th:nth-child(1) { min-width: 22rem; }
.projetos-tabela th:nth-child(2) { min-width: 11rem; }
.projetos-tabela th:nth-child(3) { min-width: 9rem; }
.projetos-tabela th:nth-child(4) { min-width: 10rem; }
.projetos-tabela th:nth-child(5) { min-width: 9rem; }

/* O "o que está incluso" abre o texto do kit. É <summary>, que no Firefox não
   ganha cursor de mão sozinho. */
.projetos-abrir {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   ORÇAMENTAÇÃO (11/08/2026)
   Os quatro estados do desenho do usuário, e os "olhos" da lista.
   --------------------------------------------------------------------------- */
.orc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.orc-status i { font-size: 0.8rem; }

.orc-status--pendente { background: #fef3c7; color: #92400e; }
.orc-status--em_elaboracao { background: #e0f2fe; color: #075985; }
.orc-status--concluido { background: #dcfce7; color: #166534; }
.orc-status--revisao { background: #ede9fe; color: #5b21b6; }

/* Os dois olhos e a planilha: alvo de clique redondo, como o resto do sistema. */
.orc-olho,
.orc-planilha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    text-decoration: none;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
}
.orc-olho:hover,
.orc-planilha:hover { background: rgba(13, 110, 253, 0.2); }

/* O botão QUALIFICAR da lista de Qualificação (13/08/2026). Escolhido pelo
   usuário entre cinco desenhos: pílula azul suave.

   Por que azul e não dourado: o dourado é a ação principal da tela, e este
   botão aparece uma vez por linha — repetido, roubaria a atenção do que
   importa. E não verde: verde já significa "concluído" na coluna Situação,
   três colunas adiante; prometeria o que não é.

   A cor vai no `i` e no `span`, não no `<a>`: o tema pinta
   `html.app-skin-dark ... a ...` de branco com `!important`, e nenhuma
   especificidade vence isso. */
.orc-qualificar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(52, 84, 209, 0.1);
    transition: background-color 0.15s ease;
}
.orc-qualificar i,
.orc-qualificar span {
    color: #3454d1;
    transition: color 0.15s ease;
}
.orc-qualificar:hover {
    background: #3454d1;
}
.orc-qualificar:hover i,
.orc-qualificar:hover span {
    color: #fff;
}
html.app-skin-dark .orc-qualificar {
    background: rgba(92, 124, 240, 0.16);
}
html.app-skin-dark .orc-qualificar i,
html.app-skin-dark .orc-qualificar span {
    color: #5c7cf0;
}
html.app-skin-dark .orc-qualificar:hover {
    background: #3454d1;
}
html.app-skin-dark .orc-qualificar:hover i,
html.app-skin-dark .orc-qualificar:hover span {
    color: #fff;
}

.orcamento-cabeca__obra { min-width: 16rem; }
.orcamento-cabeca__total { min-width: 12rem; }
.orcamento-tabela .js-qtd { max-width: 7rem; }
/* Markup e markdown são fatores curtos ("1.40"): num campo largo, o número
   fica perdido e a grade cresce sem motivo. */
.orcamento-tabela .orc-fator { max-width: 4.5rem; }
.orcamento-tabela .orc-seco { max-width: 7rem; }

/* O DETALHAMENTO do cliente (14/08/2026): a mesma folha na tela e no PDF. */
.det-capa {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1.5rem;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    border-radius: 7px; padding: 12px 14px; margin-bottom: 1.25rem; font-size: 12.5px;
}
.det-capa b {
    display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bs-secondary-color); font-weight: 700;
}
/* `text-align: left` explícito nos títulos: a célula que atravessa a tabela
   com `colspan` herda o alinhamento central do tema, e o nome da seção ficava
   boiando no meio da folha, longe das descrições que ele encabeça. O total da
   seção continua à direita, na coluna dele. */
.det-tabela tr.det-secao td {
    background: var(--bs-tertiary-bg); font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em; text-align: left;
}
.det-tabela tr.det-secao td.text-end { text-align: right; }
.det-tabela tr.det-sub td {
    font-weight: 700; font-size: 12px; padding-left: 1.5rem; text-align: left;
}
/* A DESCRIÇÃO QUEBRA. O tema aplica `white-space: nowrap` em toda célula de
   tabela, e aqui as descrições de escopo têm 200+ caracteres: a folha ia a
   2.109px num espaço de 1.433px e as colunas de dinheiro sumiam atrás da
   rolagem. Numa folha que o cliente imprime, isso perde os valores. Mesma
   correção da Orçamentação (13/08/2026). */
.table-responsive .table.det-tabela tr td:first-child { white-space: normal; }
.det-tabela td:first-child, .det-tabela th:first-child { min-width: 20rem; }
.det-fecha { margin-left: auto; width: 22rem; margin-top: 1.25rem; font-size: 13px; }
.det-fecha > div {
    display: flex; justify-content: space-between; padding: .35rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.det-fecha__geral {
    border-bottom: 0 !important; border-top: 2px solid var(--as-navy, #001a3f);
    margin-top: .35rem; padding-top: .6rem; font-size: 16px; font-weight: 800;
}
.det-rodape { font-size: 11px; color: var(--bs-secondary-color); margin-top: 1.5rem; }

/* A COMPOSIÇÃO da linha, no painel (14/08/2026). As treze colunas na grade
   eram o que poluía a tela; aqui elas abrem só na linha em que alguém
   negocia. */
.orc-comp { min-width: 340px; padding: 12px; display: flex; gap: 1.25rem; }
.orc-comp__bloco { flex: 1 1 0; min-width: 0; }
.orc-comp__titulo {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .4rem;
}
.orc-comp__campo { display: block; margin-bottom: .4rem; }
.orc-comp__campo span { display: block; font-size: 11.5px; color: var(--bs-secondary-color); }
.orc-comp__conta {
    display: flex; flex-direction: column; gap: .15rem;
    font-size: 12px; margin-top: .5rem;
    border-top: 1px solid var(--bs-border-color); padding-top: .5rem;
}

/* A SANFONA da planilha analítica (13/08/2026). Cada subseção abre e fecha;
   com 295 linhas, mostrar tudo de uma vez é o que tornava a tela impossível. */
.orc-sub { border-bottom: 1px solid var(--bs-border-color); }
.orc-sub:last-child { border-bottom: 0; }
.orc-sub__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
}
.orc-sub__titulo::-webkit-details-marker { display: none; }
.orc-sub__titulo:hover { background: var(--bs-tertiary-bg); }
.orc-sub__nome { display: inline-flex; align-items: center; gap: 0.5rem; }
.orc-sub__meta { display: inline-flex; align-items: center; gap: 0.9rem; }
/* A seta gira ao abrir: é o sinal de que ali dentro tem coisa. */
.orc-sub__seta { transition: transform 0.15s ease; }
.orc-sub[open] > .orc-sub__titulo .orc-sub__seta { transform: rotate(90deg); }

/* A descrição do item quebra linha (13/08/2026).
   O tema aplica `.table-responsive .table tr td { white-space: nowrap }` em
   TODA tabela, e a descrição de orçamento é prosa: "Concreto armado, executado
   com concreto dosado para uma resistência característica..." tem 261
   caracteres e esticava a coluna para 1.780px, jogando a tabela para 2.057px
   numa tela de 1.700px. O `.table-responsive` não segura porque no desktop ele
   é `overflow-x: visible` — preço do cabeçalho grudento (ver base.html) —,
   então o estouro ia para a página inteira e a tela sangrava à direita.
   Deixar quebrar resolve na origem: sem rolagem horizontal e sem abrir mão do
   cabeçalho grudento. O `min-width` evita o outro extremo, a coluna espremida
   numa palavra por linha.

   O seletor é longo de propósito: a regra do tema é `.table-responsive .table
   tr td` (0,2,2) e ganha de `.orcamento-tabela td:first-child` (0,2,1). Em vez
   de `!important`, sobe-se a especificidade repetindo o caminho do tema. */
.table-responsive .table.orcamento-tabela tr td:first-child {
    white-space: normal;
}
.orcamento-tabela td:first-child,
.orcamento-tabela th:first-child {
    min-width: 22rem;
}

html.app-skin-dark .orc-status--pendente,
[data-bs-theme="dark"] .orc-status--pendente { background: #3f2d0a; color: #fcd34d; }
html.app-skin-dark .orc-status--em_elaboracao,
[data-bs-theme="dark"] .orc-status--em_elaboracao { background: #0c2a3d; color: #7cb8f5; }
html.app-skin-dark .orc-status--concluido,
[data-bs-theme="dark"] .orc-status--concluido { background: #0f2c1c; color: #4ade80; }
html.app-skin-dark .orc-status--revisao,
[data-bs-theme="dark"] .orc-status--revisao { background: #241a3d; color: #c4b5fd; }

/* Painel de correção de vencimento (Contas a Pagar, 14/08/2026): estreito o
   bastante para caber na coluna de ações, largo o bastante para o campo de
   data e o motivo não espremerem. */
.painel-vencimento { min-width: 260px; }

/* O bloco "já recebidos por completo" no recebimento parcial (14/08/2026).
   Classe, e não `style` inline: a catraca de dívida de UI recusa inline, e com
   razão — CSS solto em template ninguém acha depois. */
.recebidos-completos > summary { cursor: pointer; }

/* ============================================================
   NOTAS FISCAIS DE ENTRADA — a tabela enxuta (14/08/2026)
   O usuário: "essa tela é muito feia e poluída". Eram oito colunas, o status
   escrito por extenso ocupando mais espaço que o nome do fornecedor, e uma
   coluna de anexos com SETE botõezinhos por linha.
   Aqui, e não no template: a catraca de dívida recusa cor escrita à mão dentro
   de template, e com razão — CSS solto lá ninguém acha depois.
   ============================================================ */
/* Largura da SITUAÇÃO: cabe "Devolvida" com o ponto, e nada mais. O texto
   completo ("Aguardando Conferência - Compras") vive no `title`. */
.ie-col-situacao { width: 108px; }
.ie-situacao {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.74rem; font-weight: 600; color: var(--bs-secondary-color);
}
.ie-situacao--aguardando_compras { color: #b45309; }
.ie-situacao--aguardando_fiscal { color: #0e7490; }
.ie-situacao--finalizada { color: #15803d; }
.ie-situacao--devolvida_compras { color: #b91c1c; }
/* Faltava a Cancelada: o ponto tinha cor e o texto não, e a palavra ficava no
   cinza padrão como se a situação fosse desconhecida. */
.ie-situacao--cancelada { color: #64748b; }
.ie-col-anexos { width: 56px; }
.ie-col-acoes { width: 92px; }

/* O status vira um PONTO; o nome continua no `title` de quem precisa conferir. */
.ie-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.ie-ponto--aguardando_compras { background: #f59e0b; }
.ie-ponto--aguardando_fiscal { background: #06b6d4; }
.ie-ponto--finalizada { background: #16a34a; }
/* `devolvida_compras`, e não `devolvida`: o status no banco é
   DEVOLVIDA_COMPRAS, e a classe errada deixava o ponto cinza — a única
   situação que exige ação imediata era a única sem cor. */
.ie-ponto--devolvida_compras { background: #dc2626; }
.ie-ponto--cancelada { background: #94a3b8; }

/* O FORNECEDOR é o texto principal: é por ele que se procura, não pelo número
   da nota. Corta com reticências porque razão social é longa e empurraria a
   coluna do dinheiro para fora da tela. */
#ie-table .ie-forn-nome {
    font-weight: 600; max-width: 320px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
#ie-table .ie-sub { font-size: 0.72rem; color: var(--bs-secondary-color); }

/* "sem vencimento" GRITA: essa nota vira Conta a Pagar vencendo na emissão —
   quase sempre já vencida no dia em que nasce. Eram 28 assim em 14/08/2026. */
.ie-sem-venc { color: #b91c1c; font-weight: 600; }

.painel-anexos { min-width: 300px; }
.painel-acoes-nf { min-width: 260px; }
.painel-anexos .ie-rot {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bs-secondary-color); font-weight: 700; min-width: 74px;
}
.painel-anexos .ie-vazio { font-size: 0.72rem; color: var(--bs-secondary-color); font-style: italic; }

/* "Chegou negócio novo" no Painel do Comercial (14/08/2026). Canto inferior,
   fora do caminho: é aviso, não interrupção — quem está no meio de uma nota
   não pode ser atropelado por ele. */
.painel-aviso-novos {
    position: fixed; right: 24px; bottom: 24px; z-index: 1080;
    display: flex; align-items: center;
    background: var(--as-navy, #00162E); color: #fff;
    border-left: 4px solid #FDC400; border-radius: 10px;
    padding: 12px 16px; font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}

/* ============================================================
   PEDIDOS DE COMPRA — a lista enxuta (15/08/2026)
   Mesma linguagem da lista de NFs de Entrada: quem aprende uma sabe a outra.
   O que estragava não eram as oito colunas — era a coluna de Status EMPILHANDO
   até quatro etiquetas escritas por extenso, o que dava a linhas vizinhas
   alturas diferentes e transformava a lista numa escada.
   ============================================================ */
.po-col-situacao { width: 158px; }
.po-col-alertas { width: 84px; }
.po-col-acoes { width: 96px; }

.po-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.po-ponto--pendente { background: #f59e0b; }
.po-ponto--confirmado { background: #06b6d4; }
.po-ponto--parcial { background: #8b5cf6; }
.po-ponto--recebido { background: #16a34a; }
.po-ponto--encerrado { background: #64748b; }
/* REJEITADO e CANCELADO tinham a MESMA cor (15/08/2026). Numa legenda isso
   não se sustenta: são pés diferentes — um aprovador recusou, o outro foi
   desfeito depois. Cor repetida em legenda é cor que não informa. */
.po-ponto--rejeitado { background: #dc2626; }
.po-ponto--cancelado { background: #9f1239; }

/* Pastilha tingida com a cor da situação (15/08/2026): o usuário pediu pra
   "destacar em que pé está cada um". Continua em UMA linha — o que estragava a
   tela antes eram QUATRO etiquetas empilhadas por linha, não a cor. */
.po-sit {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}
.po-sit--pendente { background: rgba(245, 158, 11, 0.14); }
.po-sit--confirmado { background: rgba(6, 182, 212, 0.14); }
.po-sit--parcial { background: rgba(139, 92, 246, 0.14); }
.po-sit--recebido { background: rgba(22, 163, 74, 0.14); }
.po-sit--encerrado { background: rgba(100, 116, 139, 0.16); }
.po-sit--rejeitado { background: rgba(220, 38, 38, 0.13); }
.po-sit--cancelado { background: rgba(159, 18, 57, 0.13); }
/* Na legenda a cor é só do texto — a pastilha ali é o próprio botão de filtro,
   e duas pastilhas encaixadas viram confusão visual. Casa por PADRÃO de classe
   (`*-sit--x` / `*-situacao--x`) porque cada módulo tem o seu prefixo, e listar
   um a um garantiria esquecer o próximo. */
.as-legenda__item [class*="-sit--"],
.as-legenda__item [class*="-situacao--"] { background: transparent; padding: 0; }
.po-sit--pendente { color: #b45309; }
.po-sit--confirmado { color: #0e7490; }
.po-sit--parcial { color: #6d28d9; }
.po-sit--recebido { color: #15803d; }
.po-sit--encerrado { color: #475569; }
.po-sit--rejeitado { color: #b91c1c; }
.po-sit--cancelado { color: #9f1239; }

/* --------------------------------------------------------------------------
   Legenda das situações, no topo das listagens (15/08/2026)

   Nasceu na lista de Pedidos e o usuário pediu nas outras do mesmo padrão —
   por isso o nome é genérico (`as-`), e não `po-`: as cinco telas usam este
   mesmo bloco, mudando só o prefixo das cores de cada módulo.
   -------------------------------------------------------------------------- */
.as-legenda {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: 12px; padding: 8px 12px;
    border: 1px solid var(--bs-border-color); border-radius: 8px;
    background: var(--bs-body-bg);
}
.as-legenda__titulo {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin-right: 4px;
}
.as-legenda__item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem; font-weight: 600;
    color: var(--bs-body-color); text-decoration: none;
}
.as-legenda__item:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
/* A situação escolhida fica com moldura — sem isso, quem filtrou não sabe pelo
   que filtrou, e a legenda parece não ter feito nada. */
.as-legenda__item.is-ativa {
    border-color: var(--bs-primary); background: var(--bs-tertiary-bg);
}
.as-legenda__item.is-vazia { opacity: 0.45; }
.as-legenda__n {
    min-width: 1.4em; padding: 0 5px; border-radius: 999px;
    background: var(--bs-tertiary-bg); text-align: center;
    font-size: 0.7rem; color: var(--bs-secondary-color);
}
.as-legenda__todos { color: var(--bs-secondary-color); }

/* O FORNECEDOR é o texto principal: é por ele que se procura numa lista de
   compras, não pelo número do Pedido. Corta com reticências para não empurrar
   a coluna do dinheiro para fora da tela. */
.po-forn {
    font-weight: 600; max-width: 340px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.po-sub { font-size: 0.72rem; color: var(--bs-secondary-color); }

/* Os quatro alertas: ícone com o texto no title, numa coluna só. */
.po-al { font-size: 0.95rem; margin: 0 3px; cursor: help; }
.po-al--pend { color: #d97706; }
.po-al--ok { color: #16a34a; }
.po-al--esp { color: #a16207; }
.po-al--auto { color: #94a3b8; }

.painel-acoes-pedido { min-width: 220px; }

/* ============================================================
   MAPA DE COTAÇÃO — a lista enxuta (15/08/2026)
   Terceira tela no mesmo desenho, depois de NFs e Pedidos. Era a mais carregada
   da casa: NOVE colunas e até OITO controles por linha, com as TFs empilhadas
   verticalmente — mapa de quatro obras tinha o quádruplo da altura do vizinho.
   ============================================================ */
.mp-col-situacao { width: 150px; }
.mp-col-num { width: 68px; }
.mp-col-acoes { width: 96px; }

.mp-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.mp-ponto--rascunho { background: #f59e0b; }
.mp-ponto--aberto { background: #06b6d4; }
.mp-ponto--fechado { background: #16a34a; }
.mp-ponto--cancelado { background: #dc2626; }

.mp-sit {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.76rem; font-weight: 600; color: var(--bs-secondary-color);
}
.mp-sit--rascunho { color: #b45309; }
.mp-sit--aberto { color: #0e7490; }
.mp-sit--fechado { color: #15803d; }
.mp-sit--cancelado { color: #b91c1c; }

/* O NÚMERO DO MAPA é a identidade: é assim que as pessoas se referem a ele
   entre si ("o mapa 12 já fechou?"). A obra aparece em muitas telas e não
   distingue dois mapas da mesma obra. */
.mp-numero { font-weight: 600; }
.mp-sub { font-size: 0.72rem; color: var(--bs-secondary-color); }

/* Fechamento por exceção: ícone junto da situação, motivo no title. */
.mp-excecao { color: #d97706; margin-left: 6px; cursor: help; }

.mp-forn {
    display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 20px;
    background: var(--bs-tertiary-bg); font-size: 0.75rem; font-weight: 600; cursor: help;
}
.mp-pedido { font-weight: 600; }
.painel-acoes-mapa { min-width: 250px; }

/* ============================================================
   SOLICITAÇÕES DE COMPRA — a lista enxuta (15/08/2026)
   Quarta tela no mesmo desenho. Sete colunas viraram quatro; os quatro ícones
   de ação viraram um botão mais um menu.
   ============================================================ */
.sc-col-situacao { width: 150px; }
.sc-col-necessidade { width: 120px; }
.sc-col-acoes { width: 96px; }

/* AS OITO SITUAÇÕES REAIS de PurchaseRequest.STATUS_CHOICES. A primeira versão
   deste bloco (15/08/2026) tinha nomes INVENTADOS — "pendente", "rascunho",
   "atendida" não existem no modelo — e o efeito era silencioso: "Aberta",
   "Em Análise", "Pedido Gerado", "Recebida" e "Cancelada" caíam todas no cinza
   padrão, e a coluna de situação não informava nada. Cor de status se lê do
   modelo, não se adivinha. */
.sc-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.sc-ponto--aberta { background: #f59e0b; }
.sc-ponto--em_analise { background: #3b82f6; }
.sc-ponto--em_cotacao { background: #06b6d4; }
.sc-ponto--aprovada { background: #16a34a; }
.sc-ponto--rejeitada { background: #dc2626; }
.sc-ponto--pedido_gerado { background: #8b5cf6; }
.sc-ponto--recebida { background: #15803d; }
.sc-ponto--cancelada { background: #9f1239; }

.sc-sit {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}
.sc-sit--aberta { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.sc-sit--em_analise { color: #1d4ed8; background: rgba(59, 130, 246, 0.14); }
.sc-sit--em_cotacao { color: #0e7490; background: rgba(6, 182, 212, 0.14); }
.sc-sit--aprovada { color: #15803d; background: rgba(22, 163, 74, 0.14); }
.sc-sit--rejeitada { color: #b91c1c; background: rgba(220, 38, 38, 0.13); }
.sc-sit--pedido_gerado { color: #6d28d9; background: rgba(139, 92, 246, 0.14); }
.sc-sit--recebida { color: #166534; background: rgba(21, 128, 61, 0.14); }
.sc-sit--cancelada { color: #9f1239; background: rgba(159, 18, 57, 0.13); }

.sc-numero { font-weight: 600; }
.sc-sub { font-size: 0.72rem; color: var(--bs-secondary-color); }
/* Quem pediu saiu do sistema: ícone em vez da etiqueta "Desativado", que
   ocupava mais espaço que o próprio nome da pessoa. */
.sc-desativado { color: #94a3b8; cursor: help; }

/* A URGÊNCIA COLORE A DATA, em vez de virar uma etiqueta "!" ao lado: a
   informação é sobre a data, e a etiqueta separada fazia a coluna crescer. */
.sc-necessidade { font-size: 0.8rem; }
.sc-necessidade--danger { color: #b91c1c; font-weight: 700; }
.sc-necessidade--warning { color: #b45309; font-weight: 700; }
.sc-necessidade--success { color: #15803d; }

.painel-acoes-solicitacao { min-width: 230px; }

/* ==========================================================================
   "FALTA CHEGAR" — o painel do Pedido em recebimento parcial (15/08/2026)
   ========================================================================== */
.falta-tabela th {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.falta-tabela td { font-variant-numeric: tabular-nums; }
.falta-tabela .falta-item { font-weight: 600; }
/* A QUANTIDADE QUE FALTA é o número que decide — pastilha, não só vermelho:
   com quatro números na linha, cor sozinha não diz qual olhar primeiro. */
.falta-tabela .falta-qtd {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: rgba(220, 38, 38, .10); color: #b91c1c; font-weight: 700;
}
.falta-tabela tfoot td { border-top: 1px solid var(--bs-border-color); }

.falta-pergunta {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 8px;
}
/* Cartões de altura igual com o botão SEMPRE embaixo: sem o flex, o do meio
   (que tem menos texto) deixava o botão no meio da altura. */
.falta-opcao {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 14px;
    background: var(--bs-body-bg);
}
.falta-opcao__titulo {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 13.5px; margin-bottom: 4px;
}
.falta-opcao__texto {
    font-size: 12px; color: var(--bs-secondary-color); line-height: 1.45; margin-bottom: 10px;
}
.falta-opcao__rotulo {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 3px;
}