:root {
    --vinho: #7A3B3E;
    --vinho-escuro: #683235; /* hover do botão primário */
    --preto: #1a1a1a;
    --cinza-claro: #f4f2f2;
    --borda: #e2dcdc;
    --borda-card: #cfc5c5; /* mais escura que --borda, só pra fronteira dos cards */
    --sombra-card: 0 1px 3px rgba(26, 26, 26, 0.08), 0 1px 2px rgba(26, 26, 26, 0.05);
    --texto-secundario: #6b6b6b;
    --raio: 8px; /* raio único (pills/avatares usam 999px à parte) */
    /* status dessaturados — pra dot/tag/acento, nunca pra fundo cheio */
    --status-vermelho: #b23b3b;
    --status-ambar: #b7791f;
    --status-azul: #3a6ea5;
    --status-verde: #2f855a;
    --anel-foco: 0 0 0 3px rgba(122, 59, 62, 0.28); /* foco visível (vinho suave) */
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: #fff;
    color: var(--preto);
}

/* foco visível global (acessibilidade + polimento) — só no teclado */
:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
    border-radius: var(--raio);
}

.layout {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    flex-shrink: 0;
    width: 78px;
    background: #fff;
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.4rem;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
}

.sidebar .logo-area img {
    width: 40px;
    height: auto;
}

.sidebar .logo-area .titulo {
    display: none;
    font-weight: 600;
    font-size: 1rem;
    color: var(--preto);
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    flex: 1; /* preenche a altura pra o link de Backup poder ir pro rodapé */
}

.sidebar nav a {
    color: var(--preto);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.6rem 0.2rem;
    border-radius: var(--raio);
    transition: background 0.13s;
}

.sidebar nav a:hover {
    background: var(--cinza-claro);
}

/* item ativo: realce sóbrio (fundo cinza + acento vinho) em vez do preto sólido */
.sidebar nav a.ativo,
.sidebar nav a:active {
    background: var(--cinza-claro);
    color: var(--vinho);
    font-weight: 600;
}

main {
    flex: 1;
    min-width: 0; /* impede o main (item flex) de esticar além da janela por conta do conteúdo */
    padding: 1.2rem;
    padding-bottom: 3rem;
    max-width: 640px;
}

/* link discreto de Backup, empurrado pro rodapé da sidebar */
.sidebar nav a.nav-rodape {
    margin-top: auto;
    color: var(--texto-secundario);
    font-weight: 500;
}

/* botão de Sair — sempre o último item, no rodapé da sidebar */
.sidebar nav a.nav-sair {
    background: var(--status-vermelho);
    color: #fff;
    font-weight: 600;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
}

.sidebar nav a.nav-sair:hover {
    background: #963030;
}

/* área de Backup — lista de opções, uma por linha (título + descrição + Baixar) */
.opcoes {
    margin: 0.8rem 0 0.4rem;
    border-top: 1px solid var(--borda);
}
.opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0.1rem;
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}
.opcao-texto {
    flex: 1;
    min-width: 0;
}
.opcao-titulo {
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.opcao-botao {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ico-baixar {
    width: 15px;
    height: 15px;
    display: block;
}
.backup-linha {
    border: none;
    border-top: 1px solid var(--borda);
    margin: 1.8rem 0 1rem;
}
.backup-importar summary {
    cursor: pointer;
    color: var(--texto-secundario);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.3rem 0;
}
.backup-importar-corpo {
    margin-top: 0.8rem;
}
.backup-aviso {
    margin: 0 0 1rem;
}

@media (min-width: 680px) {
    .sidebar {
        width: 220px;
        align-items: flex-start;
        padding: 1.5rem 1.2rem;
    }

    .sidebar .logo-area {
        flex-direction: row;
        text-align: left;
    }

    .sidebar .logo-area .titulo {
        display: inline;
    }

    .sidebar nav a {
        text-align: left;
        font-size: 0.95rem;
        padding: 0.7rem 0.9rem;
    }

    main {
        padding: 2rem;
    }
}

h1 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 1rem;
}

h2 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--preto);
    margin-top: 1.5rem;
}

.card {
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.card a, a.card {
    color: var(--preto);
    text-decoration: none;
    display: block;
}

.link-secundario {
    display: inline-block;
    color: var(--vinho);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.card .destaque {
    font-weight: 600;
    font-size: 1.05rem;
}

.card .sub {
    color: var(--texto-secundario);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.card form {
    margin-top: 0.6rem;
}

.stats {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.stat-tile {
    flex: 1;
    display: block;
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.2rem 0.8rem;
    text-align: center;
    text-decoration: none;
    transition: background 0.13s;
}

.stat-tile:hover {
    background: #efecec;
}

.stat-numero {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--preto);
    line-height: 1;
}

.stat-label {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-secundario);
}

.atalho {
    display: block;
    width: 100%;
    background: var(--vinho);
    color: #fff;
    text-align: center;
    padding: 1rem;
    border: none;
    border-radius: var(--raio);
    font-weight: 500;
    font-size: 1.05rem;
    font-family: inherit;
    text-decoration: none;
    margin-bottom: 0.9rem;
    cursor: pointer;
    transition: background 0.13s;
}

.atalho:hover {
    background: var(--vinho-escuro);
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

label {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

label .opcional {
    font-weight: normal;
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

input,
select,
textarea {
    padding: 0.65rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--vinho);
    box-shadow: var(--anel-foco);
}

textarea {
    resize: vertical;
}

button,
.botao {
    background: var(--vinho);
    color: #fff;
    border: none;
    padding: 0.7rem 0.9rem;
    border-radius: var(--raio);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background 0.13s, border-color 0.13s;
}

/* escurece só o botão primário (.botao) no hover — botões customizados (chips, ×,
   menu ⋯, lixeira) têm hover próprio e não podem virar vinho */
.botao:hover {
    background: var(--vinho-escuro);
}

/* secundário neutro: fio cinza + texto escuro (uma ação primária vinho por tela) */
.botao.secundario {
    background: #fff;
    color: var(--preto);
    border: 1px solid var(--borda);
}

.botao.secundario:hover {
    background: var(--cinza-claro);
}

.botao.discreto {
    background: #fff;
    color: var(--texto-secundario);
    border: 1px solid var(--borda);
}

.botao.discreto:hover {
    background: var(--cinza-claro);
}

.atalho.pequeno {
    display: inline-block;
    width: auto;
    background: #fff;
    color: var(--preto);
    border: 1px solid var(--borda);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    border-radius: var(--raio);
}

.atalho.pequeno:hover {
    background: var(--cinza-claro);
}


.busca {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.busca input {
    flex: 1;
}

.aviso {
    background: var(--cinza-claro);
    border: 1px solid var(--preto);
    color: var(--preto);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
    font-size: 0.85rem;
    margin-top: -0.4rem;
}

.aviso a {
    color: var(--preto);
}

.aviso.erros {
    margin-top: 0;
    margin-bottom: 1rem;
}

.aviso.erros ul {
    margin: 0;
    padding-left: 1.1rem;
}

.vazio {
    color: #777;
    padding: 1rem 0;
}

.linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.botoes-topo {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fotos-preview {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.foto-abrir {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    position: relative;
    flex-shrink: 0;
}

.foto-abrir-principal img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--borda);
    display: block;
}

.fotos-miniaturas {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.4rem;
    max-width: 116px;
}

.fotos-miniaturas .foto-abrir img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--borda);
    display: block;
}

.foto-mais {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 6px;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    color: #fff;
}

.lightbox-contador {
    font-size: 0.85rem;
}

.lightbox-fechar {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.lightbox-corpo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    min-height: 0;
}

.lightbox-imagem {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-nav {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1.8rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lightbox-acoes {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    padding: 1rem;
}

.botao.mini,
button.mini {
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
}

.form-observacao {
    margin-bottom: 1.3rem;
}

.form-observacao button {
    align-self: flex-start;
}

.linha-acoes-observacao {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.card-selecionavel {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.checkbox-observacao {
    display: none;
    margin-top: 0.3rem;
    width: auto;
    flex-shrink: 0;
}

#form-remover-observacoes.modo-selecao .checkbox-observacao {
    display: block;
}

.conteudo-observacao {
    flex: 1;
}

.acoes-selecao[hidden] {
    display: none;
}

.acoes-selecao {
    display: flex;
    gap: 0.6rem;
    margin: 0.8rem 0 1.3rem;
}

.botao-espacado {
    margin-bottom: 1rem;
}

.tabela-orcamento-wrap {
    overflow-x: auto;
    margin-bottom: 0.6rem;
}

.tabela-orcamento {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 0.85rem;
}

.tabela-orcamento th,
.tabela-orcamento td {
    border: 1px solid var(--borda);
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.tabela-orcamento th {
    background: var(--cinza-claro);
    color: var(--preto);
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.linha-mao-de-obra td {
    background: var(--preto);
    color: #fff;
}

.linha-mao-de-obra input,
.linha-mao-de-obra select {
    background: #2b2b2b;
    color: #fff;
    border-color: #555;
}

.linha-mao-de-obra .campo-total {
    color: #fff;
    font-weight: bold;
}

.linha-mao-de-obra .campo-qtd {
    visibility: hidden;
}

.linha-mao-de-obra .tag {
    color: #ccc;
}

.tabela-orcamento input,
.tabela-orcamento select {
    padding: 0.35rem;
    font-size: 0.82rem;
    border-radius: 4px;
    width: 100%;
    min-width: 70px;
}

.tabela-orcamento td.campo-total {
    font-weight: bold;
    white-space: nowrap;
}

.tabela-orcamento tfoot td {
    font-weight: bold;
    background: var(--cinza-claro);
}

.tabela-orcamento .remover-linha {
    padding: 0.3rem 0.55rem;
    line-height: 1;
}

.total-geral-linha {
    font-weight: bold;
    text-align: right;
    margin-bottom: 0.6rem;
}

.acoes-orcamento {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.checkbox-destaque {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin: 0.8rem 0 1.2rem;
    cursor: pointer;
}

.checkbox-destaque input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    accent-color: var(--preto);
    cursor: pointer;
}

.checkbox-destaque span {
    font-weight: bold;
    font-size: 1rem;
    color: #000;
}

.tag {
    font-size: 0.68rem;
    color: #777;
    font-style: italic;
}

form.acao-simples {
    margin-top: 1rem;
}

form.acao-simples button {
    align-self: flex-start;
}

.status-icones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.linha-com-data {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.icone-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icone-status svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--preto);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icone-status.faltando svg {
    stroke: #c0392b;
    opacity: 0.6;
}

.icone-status.faltando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: #c0392b;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* card branco com um acento de cor discreto na borda esquerda (em vez de fundo
   inteiro tingido) — cor só como sinal, não enchendo a tela */
.lista-prioridade {
    background: #fff;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--status-vermelho);
    border-radius: var(--raio);
    padding: 1rem;
    margin: 1.6rem 0;
}

.lista-prioridade-vermelha {
    border-left-color: var(--status-vermelho);
}

/* bloco "Dados faltantes" — âmbar, pra distinguir do vermelho dos parados */
.lista-prioridade-dados {
    border-left-color: var(--status-ambar);
}

.lista-prioridade-dados .lista-prioridade-titulo {
    color: var(--status-ambar);
}

.lista-prioridade-dados .lista-prioridade-icone {
    background: var(--status-ambar);
}

/* aviso de cliente duplicado (mesmo telefone) */
.aviso-dedup {
    border-left: 4px solid #c98a1b;
    background: #fdf4e3;
}

.aviso-dedup .dedup-acao {
    margin: 0.5rem 0 0.3rem;
    display: inline-block;
}

/* toast temporário (aviso que some sozinho) */
.aviso-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #c98a1b;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    max-width: 90vw;
    text-align: center;
    pointer-events: none;
}

.aviso-toast.visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lista-prioridade-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--status-vermelho);
    margin-bottom: 0.8rem;
}

.lista-prioridade-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--status-vermelho);
    color: #fff;
    font-size: 0.72rem;
}

.lista-prioridade .contagem {
    font-weight: normal;
    color: var(--texto-secundario);
}

/* os blocos de prioridade ficam SEMPRE lado a lado (nunca empilham). O <main> da
   Início é estreito (max-width: 640px), então quando os blocos não cabem a faixa
   rola na horizontal DENTRO de si mesma — a página não ganha scroll horizontal
   (mesma regra do quadro do funil .crm-board). */
.lista-prioridade-colunas {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.6rem; /* espaço pra barra de rolagem não cortar os cards */
}

/* cada coluna com largura fixa e sem encolher (senão comprimiriam até empilhar) */
.lista-prioridade-colunas > * {
    flex: 0 0 260px;
}

/* No desktop o <main> é limitado a 640px (por isso sobra espaço vazio à direita).
   A faixa de prioridade fura esse limite e usa a tela toda até perto da borda
   direita — só ela, o resto da Início continua nos 640px. O <main> tem overflow
   visível, então a faixa transborda pra direita sem ser cortada; como a largura
   fica dentro da viewport, a página não ganha scroll horizontal. */
@media (min-width: 680px) {
    .lista-prioridade-colunas {
        /* 220px = sidebar · 2rem = padding esquerdo do main · 2rem = respiro direito */
        width: calc(100vw - 220px - 2rem - 2rem);
    }
}

.lista-prioridade-colunas .lista-prioridade {
    margin: 0;
}

/* wrapper do bloco JS: quando vazio (sem contatos novos ou ponte offline) não
   pode reservar uma coluna fantasma na faixa */
#contatos-novos:empty {
    display: none;
}

/* dentro de cada bloco os itens ficam empilhados, um por fileira */
.lista-prioridade-itens {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* "mostrar mais": some depois de um certo número de itens, sem poluir a tela */
.lista-prioridade-mais {
    margin-top: 0.7rem;
}

.item-prioridade {
    display: block;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    color: var(--preto);
    transition: background 0.13s, border-color 0.13s;
}

.item-prioridade:hover {
    background: var(--cinza-claro);
    border-color: #d4cccc;
}

.item-prioridade .destaque {
    font-weight: 600;
    font-size: 1.05rem;
}

.item-prioridade .sub {
    color: var(--texto-secundario);
    font-size: 0.88rem;
    margin-top: 0.15rem;
}

.data-registro {
    font-size: 0.75rem;
    color: #999;
    margin-left: auto;
    white-space: nowrap;
}

.busca-dono-sugestoes {
    margin-top: -0.6rem;
    margin-bottom: 0.2rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    max-height: 220px;
    overflow-y: auto;
}

.busca-dono-sugestoes[hidden] {
    display: none;
}

.busca-dono-opcao {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--borda);
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--preto);
    cursor: pointer;
    border-radius: 0;
}

.busca-dono-opcao:last-child {
    border-bottom: none;
}

.busca-dono-opcao:hover,
.busca-dono-opcao:active {
    background: var(--cinza-claro);
}

.grid-categorias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 680px) {
    .grid-categorias {
        grid-template-columns: repeat(3, 1fr);
    }
}

.galeria-simples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
    margin: 0.8rem 0 1.3rem;
}

.galeria-simples img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borda);
    display: block;
}

.card a.link-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #25D366;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.link-whatsapp svg {
    width: 11px;
    height: 11px;
}

/* --- Menu: item WhatsApp (acento verde discreto) --- */
.sidebar nav a.nav-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #128C4A;
    background: rgba(37, 211, 102, 0.10);
    border: 1px solid rgba(37, 211, 102, 0.35);
    margin-bottom: 0.6rem;
}

.sidebar nav a.nav-whatsapp .nav-whatsapp-icone {
    width: 16px;
    height: 16px;
    fill: #25D366;
    flex-shrink: 0;
}

.sidebar nav a.nav-whatsapp.ativo {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.sidebar nav a.nav-whatsapp.ativo .nav-whatsapp-icone {
    fill: #fff;
}

@media (min-width: 680px) {
    .sidebar nav a.nav-whatsapp {
        justify-content: flex-start;
    }
}

/* --- CRM: área WhatsApp (ocupa a tela toda) --- */
main.full {
    max-width: none;
}

.crm-topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wa-arquivadas-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: #e23b3b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: bold;
}

.crm-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.crm-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--cinza-claro);
    padding: 0.25rem;
    border-radius: 10px;
}

.crm-tab {
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--preto);
    font-weight: bold;
    font-size: 0.9rem;
}

.crm-tab.ativo {
    background: #25D366;
    color: #fff;
}

.wa-conectar.conectado {
    background: #fff;
    color: #128C4A;
    border: 1px solid #25D366;
}

/* --- WhatsApp: painel de 2 colunas (estilo WhatsApp Web) --- */
.wa {
    display: flex;
    position: relative; /* âncora pro painel de perfil flutuante */
    height: calc(100vh - 190px);
    min-height: 420px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.wa-lista {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--borda);
    min-width: 0;
}

.wa-busca {
    margin: 0.7rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: 0.9rem;
}

.wa-conversas {
    flex: 1;
    overflow-y: auto;
}

.wa-aviso {
    color: #888;
    font-size: 0.88rem;
    text-align: center;
    padding: 1.5rem 1rem;
    line-height: 1.5;
}

.wa-conversa-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--borda);
}

.wa-conversa-item:hover {
    background: var(--cinza-claro);
}

.wa-conversa-item.ativo {
    background: rgba(37, 211, 102, 0.12);
}

/* barrinha lateral na cor da etapa (inset = não desloca o conteúdo) */
.wa-conversa-item[data-etapa="Novo contato"]      { box-shadow: inset 5px 0 0 #8a8f98; }
.wa-conversa-item[data-etapa="Orçamento enviado"] { box-shadow: inset 5px 0 0 #2f6f8f; }
.wa-conversa-item[data-etapa="Em negociação"]     { box-shadow: inset 5px 0 0 #c98a1b; }
.wa-conversa-item[data-etapa="Na oficina"]        { box-shadow: inset 5px 0 0 #2a9d8f; }
.wa-conversa-item[data-etapa="Fechado"]           { box-shadow: inset 5px 0 0 #1f9d57; }
.wa-conversa-item[data-etapa="Perdido"]           { box-shadow: inset 5px 0 0 #c0392b; }

/* etiqueta "novo" (contato ainda não classificado no funil) — sóbria, distinta do verde */
.wa-conversa-novo {
    background: var(--preto);
    color: #fff;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.06rem 0.35rem;
    border-radius: 4px;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

/* botão "Conversar com <número novo>" no topo da lista (busca por telefone) */
.wa-novo-numero {
    display: block;
    width: calc(100% - 1.2rem);
    margin: 0.6rem;
    text-align: center;
}

/* contador de não-classificados no topo da lista */
.wa-nao-class-contador {
    font-size: 0.72rem;
    font-weight: bold;
    color: var(--preto);
    background: #f2efec;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--borda);
}

/* agrupa o que vem depois do link principal (botão destacado + "⋯") */
.wa-thread-acoes-lead {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* botão "Arquivar" exposto (fora do "⋯") — só quando a etapa é Perdido */
.wa-arquivar-destaque {
    background: #c0392b;
    color: #fff;
    border: none;
}

/* guarda o hover próprio (senão o .botao:hover o deixaria vinho) */
.wa-arquivar-destaque:hover {
    background: #a93226;
}

/* menu "⋯" — ações secundárias/discretas do cabeçalho da conversa */
.wa-mais {
    position: relative;
    display: inline-block;
}

.wa-mais-botao {
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: bold;
}

.wa-mais-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 50;
    overflow: hidden;
}

.wa-mais-item {
    display: block;
    width: 100%;
    background: #fff;
    color: var(--preto);
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    font-weight: normal;
}

.wa-mais-item + .wa-mais-item {
    border-top: 1px solid var(--borda);
}

.wa-mais-item.perigo {
    color: #c0392b;
}

/* bloco "Contatos novos pra classificar" na Início (azul sóbrio, distinto dos outros) */
.lista-prioridade-novos {
    border-left-color: var(--status-azul);
}
.lista-prioridade-novos .lista-prioridade-titulo { color: var(--status-azul); }
.lista-prioridade-novos .lista-prioridade-icone { background: var(--status-azul); }

.wa-conversa-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.wa-conversa-avatar img,
.wa-thread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-thread-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.wa-conversa-corpo {
    flex: 1;
    min-width: 0;
}

.wa-conversa-linha1 {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.wa-conversa-nome {
    font-weight: bold;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-conversa-hora {
    color: #999;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.wa-conversa-linha2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wa-conversa-previa {
    color: #666;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.wa-badge {
    background: #25D366;
    color: #fff;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wa-conversa-item.nao-lida .wa-conversa-nome,
.wa-conversa-item.nao-lida .wa-conversa-previa {
    font-weight: bold;
    color: var(--preto);
}

.wa-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #efe7e1;
    min-width: 0;
}

.wa-thread-vazio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    gap: 0.6rem;
    text-align: center;
    padding: 1rem;
}

.wa-thread-icone {
    width: 64px;
    height: 64px;
    fill: #c9bdb4;
}

.wa-thread-topo {
    padding: 0.55rem 0.9rem;
    background: #f0f0f0;
    border-bottom: 2px solid var(--borda);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.wa-thread-topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wa-thread-quem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wa-thread-nome {
    font-weight: 600;
}

/* rótulo discreto "Arquivada" ao lado do nome no topo da conversa */
.wa-arquivada-tag {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-secundario);
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.wa-thread-acoes {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

/* faixa de chips de etapa (abaixo do nome) */
.wa-thread-etapas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.wa-thread-etapas:empty {
    display: none;
}

.wa-etapa-chip {
    border: 1px solid var(--borda);
    background: #fff;
    color: #6a6f78;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.35rem 0.75rem;
    min-height: 32px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.wa-etapa-chip:active {
    transform: scale(0.96);
}

/* chip da etapa atual: preenchido com a cor da etapa */
.wa-etapa-chip.ativo { color: #fff; border-color: transparent; }
.wa-etapa-chip.ativo[data-etapa="Novo contato"]      { background: #8a8f98; }
.wa-etapa-chip.ativo[data-etapa="Orçamento enviado"] { background: #2f6f8f; }
.wa-etapa-chip.ativo[data-etapa="Em negociação"]     { background: #c98a1b; }
.wa-etapa-chip.ativo[data-etapa="Na oficina"]        { background: #2a9d8f; }
.wa-etapa-chip.ativo[data-etapa="Fechado"]           { background: #1f9d57; }
.wa-etapa-chip.ativo[data-etapa="Perdido"]           { background: #c0392b; }

/* tingimento suave do cabeçalho conforme a etapa */
.wa-thread-topo[data-etapa="Novo contato"]      { background: rgba(138,143,152,0.12); border-bottom-color: #8a8f98; }
.wa-thread-topo[data-etapa="Orçamento enviado"] { background: rgba(47,111,143,0.12);  border-bottom-color: #2f6f8f; }
.wa-thread-topo[data-etapa="Em negociação"]     { background: rgba(201,138,27,0.13);  border-bottom-color: #c98a1b; }
.wa-thread-topo[data-etapa="Na oficina"]        { background: rgba(42,157,143,0.12);  border-bottom-color: #2a9d8f; }
.wa-thread-topo[data-etapa="Fechado"]           { background: rgba(31,157,87,0.12);   border-bottom-color: #1f9d57; }
.wa-thread-topo[data-etapa="Perdido"]           { background: rgba(192,57,43,0.10);   border-bottom-color: #c0392b; }

.wa-mensagens {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wa-msg {
    max-width: 75%;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    font-size: 0.9rem;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08);
}

.wa-msg-texto {
    white-space: pre-wrap;
    word-break: break-word;
}

.wa-msg-hora {
    font-size: 0.68rem;
    color: #667;
    text-align: right;
    margin-top: 0.1rem;
}

/* risquinho de status (só nas mensagens da oficina) — ícone SVG discreto, ao lado
   da hora. A cor (cinza/azul) vem por currentColor. */
.wa-msg-status {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.3rem;
    color: #8a949e;
}

.wa-msg-status.lido {
    color: #34b7f1; /* azul do WhatsApp = visualizado */
}

.wa-tick {
    width: 15px;
    height: auto;
    display: block;
}

.wa-tick-duplo {
    width: 18px; /* o tique duplo é mais largo — mantém a mesma altura visual */
}

.wa-msg-minha {
    align-self: flex-end;
    background: #d9fdd3;
}

.wa-msg-dele {
    align-self: flex-start;
    background: #fff;
}

/* mídia dentro do balão */
.wa-msg-img {
    display: block;
    max-width: 240px;
    max-height: 320px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
}

.wa-msg-img.figurinha {
    max-width: 130px;
    max-height: 130px;
    background: transparent;
    cursor: default;
}

.wa-msg-video {
    display: block;
    max-width: 260px;
    border-radius: 8px;
}

.wa-msg-audio {
    display: block;
    width: 240px;
    max-width: 100%;
}

.wa-msg-doc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    text-decoration: none;
    color: var(--preto);
    font-size: 0.85rem;
    word-break: break-word;
}

.wa-msg-doc-ico {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.wa-msg-indisponivel {
    font-size: 0.82rem;
    color: #999;
    font-style: italic;
    padding: 0.3rem 0;
}

/* visualizador de imagem em tela cheia — escondido até receber .aberto */
.wa-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.wa-lightbox.aberto {
    display: flex;
}

.wa-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
}

.wa-lightbox-fechar {
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    width: auto;
}

/* painel lateral do perfil do contato — escondido por padrão, aparece com .aberto.
   position:fixed ancora na janela (não no .wa), então independe da largura do container. */
.wa-perfil {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    z-index: 200;
    flex-direction: column;
    border-left: 1px solid var(--borda);
    background: #fff;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.25);
}

.wa-perfil.aberto {
    display: flex;
}

.wa-perfil-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: #f0f0f0;
    border-bottom: 1px solid var(--borda);
    font-weight: bold;
    font-size: 0.9rem;
}

.wa-perfil-fechar {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: auto;
}

.wa-perfil-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.wa-perfil-foto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0.3rem auto 0.8rem;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: bold;
    overflow: hidden;
}

.wa-perfil-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.wa-perfil-nome {
    text-align: center;
    margin: 0;
    font-size: 1.1rem;
}

.wa-perfil-numero {
    text-align: center;
    color: #777;
    font-size: 0.85rem;
    margin: 0.2rem 0 1rem;
}

.wa-perfil-dica {
    font-size: 0.82rem;
    color: #777;
    text-align: center;
    margin: 0 0 0.8rem;
}

.wa-perfil-vazio {
    font-size: 0.82rem;
    color: #999;
}

.wa-perfil-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.wa-perfil-card {
    background: var(--cinza-claro);
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wa-perfil-card span {
    font-size: 0.72rem;
    color: #888;
}

.wa-perfil-card b {
    font-size: 0.95rem;
}

.wa-perfil-bloco {
    margin-bottom: 1rem;
}

.wa-perfil-bloco h4 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #999;
}

.wa-perfil-linha {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.2rem 0;
}

.wa-perfil-linha span { color: #777; }

.wa-perfil-carro,
.wa-perfil-orc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    text-decoration: none;
    color: var(--preto);
}

.wa-perfil-carro:hover,
.wa-perfil-orc:hover { background: var(--cinza-claro); }

.wa-perfil-carro b { font-size: 0.9rem; }
.wa-perfil-carro span { font-size: 0.8rem; color: #777; }

.wa-perfil-orc div { display: flex; flex-direction: column; }
.wa-perfil-orc span { font-size: 0.78rem; color: #777; }
.wa-perfil-orc-data { font-size: 0.78rem; color: #999; flex-shrink: 0; }

.wa-perfil-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
}

.wa-perfil-busca {
    width: 100%;
    margin-bottom: 0.5rem;
}

.wa-perfil-campo {
    display: block;
    font-size: 0.78rem;
    color: #777;
    margin-bottom: 0.5rem;
}

.wa-perfil-campo .obrig {
    color: #c0392b;
}

.wa-perfil-campo input {
    width: 100%;
    margin-top: 0.2rem;
}

.wa-perfil-erro {
    color: #c0392b;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.wa-perfil-sugestao {
    display: block;
    font-size: 0.72rem;
    color: #999;
    margin-top: 0.25rem;
    font-style: italic;
}

.wa-perfil-cliente-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: #fff;
    color: var(--preto);
    cursor: pointer;
}

.wa-perfil-cliente-item:hover { background: var(--cinza-claro); }
.wa-perfil-cliente-item b { font-size: 0.88rem; color: var(--preto); }
.wa-perfil-cliente-item span { font-size: 0.78rem; color: #777; }

.wa-perfil-nota {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    margin-bottom: 0.5rem;
    font-family: inherit;
}

.wa-perfil-nota-ok {
    font-size: 0.8rem;
    color: #128C4A;
    margin-left: 0.5rem;
}

.wa-thread-quem {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    width: auto;
}

.wa-thread-quem:hover .wa-thread-nome { text-decoration: underline; }

.wa-composer {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.7rem;
    background: #f0f0f0;
    border-top: 1px solid var(--borda);
}

.wa-composer input[type="text"] {
    flex: 1;
    border-radius: 999px;
}

.wa-composer button[type="submit"] {
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    background: #25D366;
}

/* botão de anexo (clipe) no composer — abre o menu Arquivo/Orçamento */
.wa-anexo-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.wa-anexo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    color: #667;
    background: none;
    border: none;
    border-radius: 999px;
}
.wa-anexo:active { background: rgba(0, 0, 0, 0.06); }
.wa-anexo svg { width: 22px; height: 22px; }

/* menuzinho do anexo — abre PRA CIMA (o composer fica no rodapé) */
.wa-anexo-menu {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 50;
    overflow: hidden;
}

/* linha de ações do orçamento (Baixar PDF / Enviar no WhatsApp) */
.orcamento-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.2rem 0;
}

/* Modal do QR */
.wa-qr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wa-qr-caixa {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 340px;
    text-align: center;
    position: relative;
}

.wa-qr-caixa h3 {
    margin: 0 0 0.5rem;
}

.wa-qr-instrucao {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

.wa-qr-img-area {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.8rem 0;
}

.wa-qr-img-area img {
    width: 220px;
    height: 220px;
}

.wa-qr-status {
    font-size: 0.85rem;
    color: #128C4A;
    font-weight: bold;
    margin: 0;
}

.wa-progresso {
    width: 100%;
    height: 10px;
    background: var(--cinza-claro);
    border-radius: 999px;
    overflow: hidden;
    margin: 1rem 0 0.6rem;
}

.wa-progresso-barra {
    height: 100%;
    background: #25D366;
    border-radius: 999px;
    width: 0%;
    transition: width 0.4s ease;
}

.wa-sync-detalhe {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

.wa-qr-fechar {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    background: none;
    border: none;
    color: #999;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: auto;
}

/* --- CRM: funil de atendimentos --- */
.crm-board {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    margin-top: 1rem;
    -webkit-overflow-scrolling: touch;
}

.crm-coluna {
    flex: 1 1 0;
    min-width: 180px;
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 0.7rem;
    transition: background 0.12s, box-shadow 0.12s;
}

.crm-coluna-sobre {
    background: rgba(37, 211, 102, 0.12);
    box-shadow: inset 0 0 0 2px #25D366;
}

.crm-coluna {
    min-height: 340px;
}

.crm-coluna-cards {
    min-height: 260px;
}

.crm-coluna-titulo {
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.crm-contagem {
    background: var(--preto);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    padding: 0.05rem 0.5rem;
    min-width: 1.4rem;
    text-align: center;
}

.crm-card {
    background: #fff;
    margin-bottom: 0.6rem;
    padding: 0.7rem;
    cursor: grab;
    border: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.12s, transform 0.12s;
}

.crm-card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.crm-card:last-of-type {
    margin-bottom: 0;
}

.crm-card:active {
    cursor: grabbing;
}

.crm-card.arrastando {
    opacity: 0.5;
    transform: rotate(1.5deg) scale(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* card parado 5+ dias vira prioridade (avermelhado) */
.crm-card-prioritario {
    background: #fdecec;
    border-color: #e8a3a3;
}

.crm-card-tempo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    color: #999;
}

.crm-card-alerta {
    color: #d23b3b;
    font-weight: bold;
}

.crm-card-prioritario .crm-card-tempo-valor {
    color: #b23b3b;
    font-weight: bold;
}

/* colunas roláveis — escala pra muitos cards na mesma etapa */
.crm-coluna-cards {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 2px;
}

.crm-dica {
    color: #888;
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
}

/* raia por etapa: faixa de cor no topo da coluna */
.crm-coluna { border-top: 3px solid var(--borda); }
.crm-coluna[data-etapa="Novo contato"] { border-top-color: #8a8f98; }
.crm-coluna[data-etapa="Orçamento enviado"] { border-top-color: #2f6f8f; }
.crm-coluna[data-etapa="Em negociação"] { border-top-color: #c98a1b; }
.crm-coluna[data-etapa="Na oficina"] { border-top-color: #2a9d8f; }
.crm-coluna[data-etapa="Fechado"] { border-top-color: #1f9d57; }

/* --- Lixeira (Perdidos) --- */
.crm-lixeira {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--borda);
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 900;
    transition: transform 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}

.crm-lixeira svg {
    width: 26px;
    height: 26px;
}

.crm-lixeira.sobre {
    background: #e23b3b;
    border-color: #e23b3b;
    color: #fff;
    transform: scale(1.15);
}

.crm-lixeira-contagem {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e23b3b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* --- Modal de perdidos --- */
.crm-perdidos-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.crm-perdidos-caixa {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-perdidos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--borda);
}

.crm-perdidos-topo h3 { margin: 0; }

.crm-perdidos-fechar {
    background: none;
    border: none;
    color: #999;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: auto;
}

.crm-perdidos-lista {
    overflow-y: auto;
    padding: 0.6rem 1.2rem 1rem;
}

.crm-perdido-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--borda);
}

.crm-perdido-item:last-child { border-bottom: none; }

.crm-perdido-info {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--preto);
    min-width: 0;
}

/* item de conversa arquivada — "cara de conversa" (avatar + nome + tempo + prévia).
   A parte clicável (avatar + corpo) é um <button> que abre a conversa. */
.wa-arq-item {
    padding: 0.5rem 0.4rem;
    border-radius: var(--raio);
    transition: background 0.12s;
}
.wa-arq-item:hover,
.wa-arq-item:active { background: var(--cinza-claro); }

.wa-arq-clic {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--preto); /* senão herda o branco global de button e o nome some */
    text-align: left;
    cursor: pointer;
    opacity: 0.9; /* tom levemente "apagado" — é arquivada */
}
.wa-arq-clic .wa-conversa-avatar { width: 40px; height: 40px; font-size: 1rem; }

.wa-arq-corpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.wa-arq-linha1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.wa-arq-linha1 .destaque { font-weight: 600; }
.wa-arq-tempo {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--texto-secundario);
}
.wa-arq-previa {
    color: var(--texto-secundario);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 0.1rem;
}

.crm-perdidos-vazio {
    padding: 1.5rem 1.2rem;
}

.crm-card-info {
    display: block;
    color: var(--preto);
    text-decoration: none;
}

.crm-mover {
    margin-top: 0.5rem;
    gap: 0.4rem;
}

.crm-mover-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.35rem;
    border-radius: 6px;
}

.crm-mover-detalhe {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.crm-mover-detalhe .crm-mover-select {
    flex: 1;
    width: auto;
}

.crm-vazio {
    color: #999;
    font-size: 0.82rem;
    text-align: center;
    padding: 0.4rem 0;
    margin: 0;
}

/* --- CRM: página do atendimento (estilo perfil) --- */
.perfil {
    max-width: 560px;
}

.perfil-topo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.2rem 1rem 1.4rem;
}

.perfil-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.perfil-nome {
    font-size: 1.4rem;
    font-weight: bold;
}

.perfil-numero {
    color: #667;
    font-size: 0.95rem;
}

.perfil-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}

.perfil-wa svg {
    width: 15px;
    height: 15px;
}

.perfil-secao {
    border-top: 1px solid var(--borda);
    padding: 1rem 0.2rem;
}

.perfil-rotulo {
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vinho);
    margin-bottom: 0.6rem;
}

.etapa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.etapa-chip {
    background: var(--cinza-claro);
    color: var(--preto);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    width: auto;
}

.etapa-chip.ativo {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.perfil-cliente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.perfil-cliente span {
    font-weight: bold;
}

.perfil-desvincular {
    margin-top: 0.5rem;
}

.perfil-vincular {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.perfil-vincular .busca-dono {
    flex: 1;
}

.perfil-ajuda {
    color: #777;
    font-size: 0.88rem;
    margin: 0 0 0.6rem;
}

.perfil-link-novo {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--vinho);
    font-weight: bold;
    font-size: 0.88rem;
}

.perfil-notas {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perfil-nota {
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    font-size: 0.9rem;
}

/* --- Finanças: item de nav (pílula azul, espelho da do WhatsApp) --- */
.sidebar nav a.nav-financas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #3a6ea5;
    background: rgba(58, 110, 165, 0.10);
    border: 1px solid rgba(58, 110, 165, 0.35);
    margin-bottom: 0.6rem;
}

.sidebar nav a.nav-financas .nav-financas-icone {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar nav a.nav-financas.ativo {
    background: #3a6ea5;
    color: #fff;
    border-color: #3a6ea5;
}

@media (min-width: 680px) {
    .sidebar nav a.nav-financas {
        justify-content: flex-start;
    }
}

/* --- Finanças: área e sub-abas (espelho de .crm-tabs, mas azul e rolável) --- */
.fin-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.fin-topo-acoes {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.fin-h1 {
    margin: 0;
}

.fin-sub {
    margin: 0.15rem 0 0;
    color: var(--texto-secundario);
    font-size: 0.95rem;
}

.fin-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--cinza-claro);
    padding: 0.25rem;
    border-radius: 10px;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 1.2rem;
}

.fin-tab {
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--preto);
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.fin-tab.ativo {
    background: var(--status-azul);
    color: #fff;
}

.fin-vazio {
    border: 1px dashed var(--borda);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--texto-secundario);
    background: #fff;
}

/* --- Finanças: dashboard Visão Geral (cards de KPI + toggle de período) --- */
.fin-periodo-area {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.fin-periodo {
    display: inline-flex;
    gap: 0.2rem;
    background: var(--cinza-claro);
    padding: 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--borda);
}

.fin-periodo a {
    padding: 0.45rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--texto-secundario);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fin-periodo a:hover {
    color: var(--preto);
}

.fin-periodo a.ativo {
    background: #fff;
    color: var(--vinho);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.06);
}

/* Seletor de calendário (intervalo De/Até + "Todo o período") ao lado da pílula */
.fin-cal {
    position: relative;
}

.fin-cal-botao {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: #fff;
    color: var(--texto-secundario);
    font-weight: 600;
    font-size: 0.85rem;
}

.fin-cal-botao::-webkit-details-marker {
    display: none;
}

.fin-cal-botao svg {
    width: 15px;
    height: 15px;
}

.fin-cal-botao:hover {
    color: var(--preto);
}

.fin-cal-botao.ativo,
.fin-cal[open] .fin-cal-botao {
    color: var(--vinho);
    border-color: var(--vinho);
}

.fin-cal-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    width: 230px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fin-cal-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--texto-secundario);
    font-weight: 600;
}

.fin-cal-campo input {
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--preto);
}

.fin-cal-tudo {
    text-align: center;
    font-size: 0.82rem;
    color: var(--texto-secundario);
    text-decoration: none;
    padding-top: 0.5rem;
    border-top: 1px solid var(--cinza-claro);
}

.fin-cal-tudo:hover {
    color: var(--vinho);
}

.fin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fin-card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fin-card-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.fin-card-link:hover {
    border-color: var(--vinho);
    box-shadow: 0 2px 8px rgba(122, 59, 62, 0.12);
}

.fin-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fin-card-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texto-secundario);
    font-weight: bold;
}

.fin-card-icone {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(122, 59, 62, 0.1);
    color: var(--vinho);
    flex-shrink: 0;
}

.fin-card-icone svg {
    width: 16px;
    height: 16px;
}

.fin-card-valor {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--preto);
    line-height: 1.1;
}

.fin-card-valor.pos {
    color: var(--status-verde);
}

.fin-card-valor.neg {
    color: var(--status-vermelho);
}

.fin-vazio-grande {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--texto-secundario);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.fin-recentes {
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
}

.fin-recentes-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--borda);
}

.fin-recentes-linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--cinza-claro);
}

.fin-recentes-linha:last-child {
    border-bottom: none;
}

.fin-valor-pos {
    color: var(--status-verde);
    font-weight: bold;
}

.fin-valor-neg {
    color: var(--status-vermelho);
    font-weight: bold;
}

/* Lista de lançamentos (Entradas/Saídas) */
.fin-lista {
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.fin-lista-linha {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 100px 120px 120px;
    gap: 1rem;
    align-items: center;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--cinza-claro);
}
.fin-lista-linha:last-child {
    border-bottom: none;
}
.fin-lista-linha.cabecalho {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-secundario);
    font-weight: bold;
    background: var(--cinza-claro);
}
.fin-lista .valor.pos {
    color: var(--status-verde);
    font-weight: bold;
    text-align: right;
}
.fin-lista .valor.neg {
    color: var(--status-vermelho);
    font-weight: bold;
    text-align: right;
}
.fin-lista .cabecalho .valor {
    text-align: right;
}
.fin-lista .acoes {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    align-items: center;
}
.fin-selo-importado {
    font-size: .7rem;
    color: var(--texto-secundario);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: .1rem .5rem;
}

/* Form de novo/editar lançamento — largura legível dentro do full-width */
.fin-form {
    max-width: 560px;
    margin-top: 1.2rem;
}
.fin-form-acoes {
    flex-direction: row;
    display: flex;
    gap: .8rem;
    align-items: center;
    margin-top: .4rem;
}

/* Importar do banco: textarea de JSON + mini-form nova conta */
.fin-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    white-space: pre;
}
.fin-nova-conta {
    max-width: 560px;
    margin-top: 1.4rem;
    border-top: 1px solid var(--borda);
    padding-top: .6rem;
}
.fin-nova-conta > summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--texto-secundario);
}
.fin-check {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

/* Pagador/cliente do lançamento importado (sub-linha na célula de descrição) */
.fin-pagador {
    display: block;
    font-size: .74rem;
    color: var(--texto-secundario);
    margin-top: .15rem;
}
.fin-pagador .marca {
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0 .4rem;
    margin-left: .25rem;
}
/* nome do lançamento importado: parece texto, mas é clicável (abre o detalhe) */
.fin-desc-nome {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}
.fin-desc-nome:hover {
    text-decoration: underline;
}

/* Detalhe do lançamento */
.fin-det-valor {
    font-size: 1.9rem;
    font-weight: bold;
    margin: .3rem 0 1.1rem;
}
.fin-det-valor.pos { color: var(--status-verde); }
.fin-det-valor.neg { color: var(--status-vermelho); }
.fin-det {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .1rem 1.5rem;
    max-width: 640px;
    margin: 0;
}
.fin-det > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--borda);
}
.fin-det dt {
    color: var(--texto-secundario);
    font-size: .85rem;
}
.fin-det dd {
    margin: 0;
    text-align: right;
    font-size: .9rem;
}
.fin-det-cru {
    margin-top: 1.2rem;
    max-width: 640px;
}
.fin-det-cru .rotulo {
    display: block;
    color: var(--texto-secundario);
    font-size: .8rem;
    margin-bottom: .3rem;
}
.fin-det-cru code {
    display: block;
    background: var(--fundo, #f6f3f3);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .85rem;
    white-space: pre-wrap;
    word-break: break-word;
}
@media (max-width: 680px) {
    .fin-det { grid-template-columns: 1fr; }
}

/* Linha inteira clicável (stretched link) — cobre a linha sem aninhar <a> */
.fin-lista-linha { position: relative; }
.fin-linha-stretch { position: absolute; inset: 0; z-index: 0; }
.fin-lista-linha:not(.cabecalho):hover { background: rgba(0, 0, 0, .025); }
/* links e botões reais ficam clicáveis por cima do stretch */
.fin-lista-linha a:not(.fin-linha-stretch),
.fin-lista-linha button,
.fin-lista-linha form { position: relative; z-index: 1; }

/* Widget de sincronização — discreto, no canto do cabeçalho */
.fin-sync {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--texto-secundario);
}
.fin-sync-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--texto-secundario);
    flex: none;
}
.fin-sync-ok { background: var(--status-verde); }
.fin-sync-reconectar { background: #d98a00; }
.fin-sync-parado { background: var(--status-vermelho); }
.fin-sync-transitorio { background: #b0b0b0; }
.fin-sync-txt { white-space: nowrap; }
.fin-sync-acao {
    color: #d98a00;
    font-weight: 500;
    white-space: nowrap;
}
.fin-sync-parado ~ .fin-sync-acao { color: var(--status-vermelho); }
.fin-sync-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texto-secundario);
    font-size: 1rem;
    line-height: 1;
    padding: .1rem .2rem;
}
.fin-sync-btn:hover { color: var(--texto); }
@keyframes fin-girar { to { transform: rotate(360deg); } }
.fin-sync-btn.girando { animation: fin-girar .8s linear infinite; }
.fin-sync-flash {
    color: var(--status-verde);
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .fin-lista-linha {
        grid-template-columns: 1fr auto;  /* empilha no celular */
    }
    .fin-lista-linha.cabecalho {
        display: none;
    }
}

/* Atribuição (Parte 5) --------------------------------------------------- */
/* Alerta no topo da Visão Geral: importados aguardando atribuição */
.fin-alerta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(122, 59, 62, .08);
    border: 1px solid var(--vinho);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
}
.fin-alerta strong { color: var(--vinho); }

/* Fila de atribuição: mesma lista, colunas próprias (data, valor, descrição,
   cliente [só o status], ação). O nome na descrição já é o link pro cliente. */
.fin-lista-linha.fin-fila-linha {
    grid-template-columns: 88px 108px 1.7fr 150px 116px;
}
.fin-tag-novo,
.fin-tag-ok {
    font-size: .74rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .1rem .5rem;
    white-space: nowrap;
}
.fin-tag-novo { color: var(--vinho); }
.fin-tag-ok { color: var(--status-verde); }
.fin-cliente-na { color: var(--texto-secundario); }

/* Card de atribuição no detalhe do lançamento (Parte 6) */
.fin-atribuir {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1.4rem 0;
    max-width: 560px;
}
.fin-atribuir h2 {
    font-size: 1.05rem;
    margin: 0 0 .8rem;
    color: var(--vinho);
}
.fin-atribuir-sep {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: 1rem 0;
}
.fin-atribuir-cliente {
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
/* dentro do card, o form de categoria não precisa da largura extra do .fin-form */
.fin-atribuir .fin-form { max-width: none; margin-top: 0; }

/* Bloco de cadastro rápido a partir do pagador */
.fin-cadastro-novo {
    max-width: 560px;
    margin-top: 1.8rem;
    border-top: 1px solid var(--borda);
    padding-top: 1rem;
}
.fin-cadastro-titulo {
    font-size: 1.05rem;
    margin: 0 0 .2rem;
    color: var(--vinho);
}

@media (max-width: 680px) {
    .fin-lista-linha.fin-fila-linha {
        grid-template-columns: 1fr auto;  /* empilha no celular */
    }
}

/* Contas a Receber / a Pagar + conciliação (Parte 8) -------------------- */
.fin-status {
    font-size: .72rem; font-weight: bold; border-radius: 999px;
    padding: .12rem .6rem; text-transform: capitalize; white-space: nowrap;
}
.fin-status.aberto    { background: var(--cinza-claro); color: var(--texto-secundario); }
.fin-status.parcial   { background: rgba(183, 121, 31, .12); color: var(--status-ambar); }
.fin-status.quitado   { background: rgba(47, 133, 90, .12); color: var(--status-verde); }
.fin-status.cancelado { background: var(--cinza-claro); color: var(--texto-secundario); text-decoration: line-through; }
.fin-variacao.pos { color: var(--status-vermelho); }   /* pagou/recebeu a mais que o previsto */
.fin-variacao.neg { color: var(--status-verde); }

/* listas de previsão e de conciliações */
.fin-lista-linha.fin-prev-linha {
    grid-template-columns: 1.6fr 1.2fr 120px 120px 120px 110px 110px;
}
.fin-lista-linha.fin-conc-linha {
    grid-template-columns: 100px 1fr 130px;
}

.fin-filtro { display: flex; gap: .5rem; margin: 0 0 1rem; }
.fin-filtro-op {
    font-size: .82rem; text-decoration: none; color: var(--texto-secundario);
    border: 1px solid var(--borda); border-radius: 999px; padding: .15rem .8rem;
}
.fin-filtro-op.ativo { background: var(--vinho); color: #fff; border-color: var(--vinho); }

.fin-sec { font-size: 1.05rem; color: var(--vinho); margin: 1.6rem 0 .6rem; }

/* candidatos a conciliar (no detalhe da previsão e no detalhe do lançamento) */
.fin-conc-cands { display: flex; flex-direction: column; gap: .7rem; max-width: 620px; }
.fin-conc-cand {
    border: 1px solid var(--borda); border-radius: 12px; padding: .8rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem;
}
.fin-conc-cand-info { display: flex; flex-direction: column; gap: .1rem; }
.fin-conc-cand-info strong { font-size: 1.02rem; }
.fin-conc-cand-info span { font-size: .85rem; color: var(--texto-secundario); }
.fin-conc-cand-acoes { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.fin-conc-inline { font-size: .78rem; color: var(--texto-secundario); display: flex; flex-direction: column; gap: .15rem; }
.fin-conc-inline input, .fin-conc-inline select { min-width: 92px; }
.fin-conc-cpf {
    flex-basis: 100%; font-size: .82rem; color: var(--texto-secundario);
    display: flex; align-items: center; gap: .5rem; border-top: 1px dashed var(--borda); padding-top: .6rem;
}

/* desempate de cliente ambíguo (CPF que aponta pra mais de um) */
.fin-atribuir-ambiguo { display: block; }
.fin-ambiguo-op {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .4rem 0; border-top: 1px solid var(--cinza-claro);
}

@media (max-width: 760px) {
    .fin-lista-linha.fin-prev-linha { grid-template-columns: 1fr auto; }
    .fin-lista-linha.fin-prev-linha.cabecalho { display: none; }
}

/* Funcionários / Folha (Parte 6) ---------------------------------------- */
.fin-breadcrumb { margin: 0 0 .15rem; font-size: .8rem; color: var(--texto-secundario); }
.fin-breadcrumb a { color: var(--texto-secundario); text-decoration: none; }
.fin-breadcrumb a:hover { text-decoration: underline; }
/* segunda barra de abas (sub-área), logo abaixo da barra do Financeiro */
.fin-subtabs { margin-top: -.7rem; }

.func-linha {
    display: grid;
    grid-template-columns: 1.6fr 1.3fr 110px 130px 150px 130px;
    gap: 1rem;
    align-items: center;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--cinza-claro);
}
.func-linha:last-child { border-bottom: none; }
.func-linha .valor { text-align: right; font-weight: bold; }
.func-linha .acoes { display: flex; gap: .6rem; justify-content: flex-end; align-items: center; }
.func-linha.cabecalho {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-secundario); font-weight: bold; background: var(--cinza-claro);
}
.func-status {
    font-size: .78rem; padding: .1rem .5rem; border-radius: 999px;
    border: 1px solid currentColor; white-space: nowrap;
}
.func-status.ativo { color: var(--status-verde); }
.func-status.desligado { color: var(--texto-secundario); }

.func-resumo-linha {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--cinza-claro);
}
.func-resumo-linha:last-child { border-bottom: none; }

.func-teaser {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-top: 1.4rem; padding: 1rem 1.1rem;
    border: 1px solid var(--borda); border-radius: 12px;
}

@media (max-width: 680px) {
    .func-linha { grid-template-columns: 1fr auto; }
    .func-linha.cabecalho { display: none; }
}

/* Fluxo de Caixa (Parte 7) ---------------------------------------------- */
.fin-alerta.aviso { background: rgba(183,121,31,.10); border-color: var(--status-ambar); }
.fin-alerta.aviso strong { color: var(--status-ambar); }
.fin-alerta.grave { background: rgba(178,59,59,.10); border-color: var(--status-vermelho); }
.fin-alerta.grave strong { color: var(--status-vermelho); }
.fin-alerta.ok { background: rgba(47,133,90,.10); border-color: var(--status-verde); }
.fin-alerta.ok strong { color: var(--status-verde); }

.fin-grafico {
    position: relative;
    width: 100%;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
    padding: 1rem;
    margin-bottom: 1.2rem;
}
.fin-grafico svg { width: 100%; height: auto; display: block; cursor: ew-resize; touch-action: none; }
#fxScrub { transition: r .08s ease; }
.fin-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    background: var(--preto);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    padding: .35rem .55rem;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.fin-tip strong { display: block; font-size: .72rem; opacity: .85; font-weight: 600; }

.fin-selo-proj {
    font-size: .7rem; color: var(--texto-secundario);
    border: 1px solid var(--borda); border-radius: 999px; padding: .1rem .5rem;
}

.fin-fluxo-controles {
    display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.fin-fluxo-conta { margin: 0; }
.fin-fluxo-conta label { font-size: .8rem; color: var(--texto-secundario); }

.fin-legenda {
    display: flex; gap: 1.2rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem;
    font-size: .82rem; color: var(--texto-secundario);
}
.leg-item { display: inline-flex; align-items: center; gap: .4rem; }
.leg-linha { width: 22px; height: 0; display: inline-block; }
.leg-linha.realizado { border-top: 2.5px solid var(--vinho); }
.leg-linha.projecao  { border-top: 2.5px dashed var(--vinho); opacity: .7; }
.leg-linha.colchao   { border-top: 2px dashed var(--status-ambar); }

.fluxo-linha {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1.1fr 90px;
    gap: 1rem; align-items: center;
    padding: .7rem 1.1rem; border-bottom: 1px solid var(--cinza-claro);
}
.fluxo-linha:last-child { border-bottom: none; }
.fluxo-linha .valor { text-align: right; }
.fluxo-linha .valor.neg { color: var(--status-vermelho); font-weight: bold; }
.fluxo-linha.cabecalho {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-secundario); font-weight: bold; background: var(--cinza-claro);
}

.fin-fluxo-config-card {
    border: 1px solid var(--borda); border-radius: 12px; background: #fff;
    padding: 1.6rem; max-width: 560px;
}

/* config do fluxo */
.fin-cfg-h2 { font-size: 1.05rem; margin: 1rem 0 .4rem; color: var(--vinho); }
.fin-cfg-conta {
    border: 1px solid var(--borda); border-radius: 10px; padding: .4rem .9rem .9rem;
    margin: 0 0 .8rem;
}
.fin-cfg-conta legend { font-weight: bold; padding: 0 .3rem; }
.rec-linha {
    display: grid; grid-template-columns: 1.6fr 1fr 80px 110px; gap: 1rem; align-items: center;
    padding: .6rem 1.1rem; border-bottom: 1px solid var(--cinza-claro);
}
.rec-linha:last-child { border-bottom: none; }
.rec-linha .valor { text-align: right; }
.rec-linha .acoes { display: flex; justify-content: flex-end; }
.rec-linha.cabecalho {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-secundario); font-weight: bold; background: var(--cinza-claro);
}
.rec-form { display: grid; grid-template-columns: 1.6fr 1fr 90px 1fr; gap: .8rem; }

@media (max-width: 680px) {
    .fluxo-linha { grid-template-columns: 1fr auto; }
    .fluxo-linha.cabecalho { display: none; }
    .rec-form { grid-template-columns: 1fr; }
}

/* Configurações › Mensagens do WhatsApp (#17c) — editor + prévia ao vivo -------- */
.msgcfg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.8rem;
    align-items: start;
    margin-top: 1rem;
}
.msgcfg-form { max-width: 560px; }
.msgcfg-chips-titulo { font-size: .85rem; color: var(--texto-secundario); margin: 0 0 .45rem; }
.msgcfg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.msgcfg-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem; color: var(--vinho);
    background: #fff; border: 1px solid var(--borda); border-radius: 999px;
    padding: .2rem .6rem; cursor: pointer;
}
.msgcfg-chip:hover { background: var(--cinza-claro); }
.msgcfg-campo { margin-bottom: 1.1rem; }
.msgcfg-campo label span { font-weight: 600; }
.msgcfg-restaurar {
    background: none; border: 0; color: var(--texto-secundario);
    font-size: .8rem; cursor: pointer; padding: .3rem 0 0; text-decoration: underline;
}
.msgcfg-restaurar:hover { color: var(--vinho); }

.msgcfg-previa { position: sticky; top: 1rem; }
.msgcfg-previa-titulo { font-size: .85rem; color: var(--texto-secundario); margin: 0 0 .5rem; }
.wa-chat {
    background: #e7e0da; border-radius: 14px; padding: 1rem .8rem;
    display: flex; flex-direction: column; gap: .5rem; min-height: 130px;
}
.wa-bolha {
    align-self: flex-end; max-width: 88%;
    background: #d7f8c8; color: #111b21; border-radius: 12px; border-top-right-radius: 4px;
    padding: .5rem .7rem; font-size: .9rem; line-height: 1.35; white-space: pre-wrap;
    word-break: break-word; box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.wa-bolha-arquivo { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.wa-doc-ico { color: var(--vinho); display: inline-flex; }

@media (max-width: 820px) {
    .msgcfg { grid-template-columns: 1fr; }
    .msgcfg-previa { position: static; }
    .msgcfg-form { max-width: none; }
}

/* Página do carro repensada (UI-carro) — cabeçalho + cards por seção -------- */
.carro-detalhe { max-width: 1180px; }

/* cabeçalho com uma linha separando das seções (dá o "chão" da página) */
.carro-cabecalho {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--borda);
}
.carro-ident h1 { margin: 0; }
.carro-ident .sub { margin: .18rem 0 0; }
.carro-acoes-topo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.carro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}
.carro-col-principal { min-width: 0; }
.carro-col-lateral { min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }

/* o card: a "divisão" que faltava — fundo, borda e respiro pra cada seção */
.carro-card {
    background: #fff;
    border: 1px solid var(--borda-card);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--sombra-card);
}
.carro-card-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .9rem;
}
.carro-card-topo h2 { margin: 0; font-size: 1.1rem; }

/* orçamentos: lista limpa DENTRO do card (divisórias leves, sem caixinhas aninhadas) */
.orc-lista { display: flex; flex-direction: column; }
.orc-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 0; border-bottom: 1px solid var(--cinza-claro);
}
.orc-item:first-child { padding-top: 0; }
.orc-item:last-child { border-bottom: none; padding-bottom: 0; }
.orc-info { display: flex; flex-direction: column; gap: .05rem; }
.orc-total { font-size: 1.2rem; font-weight: bold; color: var(--vinho); text-decoration: none; }
.orc-total:hover { text-decoration: underline; }
.orc-acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* estado vazio centrado, pra não parecer que faltou algo */
.carro-vazio {
    display: flex; flex-direction: column; gap: .9rem; align-items: center;
    text-align: center; padding: 1.6rem 0 .4rem;
}
.carro-vazio .vazio { margin: 0; }

.carro-add-dono { margin-top: 1rem; }
.carro-observacoes { margin-top: 1.4rem; max-width: 760px; }

.donos-resumo {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.donos-resumo .vazio { margin: 0; padding: 0; }
.donos-gerenciar { margin-top: 1rem; }

@media (max-width: 900px) {
    .carro-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .orc-item { align-items: flex-start; }
}

/* ====================================================================== */
/* Oficina — lista dos carros na oficina + perfil com checklist do serviço */
/* Pensado pra celular no chão de fábrica: alvos grandes, leitura de longe. */
/* ====================================================================== */
.oficina-secao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.6rem 0 0.8rem;
    font-size: 1.15rem;
}
.oficina-secao-contagem {
    background: var(--vinho);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.oficina-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.oficina-card {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.7rem;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid var(--borda-card);
    box-shadow: var(--sombra-card);
}
a.oficina-card { transition: box-shadow 0.15s ease, transform 0.05s ease; }
a.oficina-card:hover { box-shadow: 0 3px 10px rgba(26,26,26,0.12); }
a.oficina-card:active { transform: scale(0.995); }

.oficina-card-foto {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--cinza-claro);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oficina-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.oficina-sem-foto { font-size: 0.7rem; color: var(--texto-secundario); }

.oficina-card-info { min-width: 0; flex: 1; }
.oficina-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin-top: 0.45rem;
}

.oficina-contador {
    display: inline-flex;
    align-items: center;
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    color: var(--preto);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.oficina-contador.completo {
    background: rgba(47, 133, 90, 0.12);
    border-color: rgba(47, 133, 90, 0.35);
    color: var(--status-verde);
}
.oficina-contador.vazio { color: var(--texto-secundario); font-weight: 500; }

.oficina-card-sem-carro { display: block; border-style: dashed; }
.oficina-card-sem-carro select {
    margin-top: 0.4rem;
    width: 100%;
    max-width: 340px;
    padding: 0.55rem;
    font-size: 1rem;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
}

.oficina-card-pronto { display: flex; flex-wrap: wrap; }
.oficina-card-link { display: flex; gap: 0.85rem; align-items: center; flex: 1; min-width: 200px; color: var(--preto); text-decoration: none; }
.oficina-card-acoes { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }

/* Colocar carro na oficina (busca) */
.oficina-colocar-busca {
    margin: 0.5rem 0 1rem;
    padding: 0.8rem;
    background: var(--cinza-claro);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.oficina-colocar-busca input[type="search"] {
    width: 100%;
    padding: 0.7rem;
    font-size: 1rem;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
}
.oficina-colocar-resultados { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.oficina-colocar-item {
    text-align: left;
    padding: 0.65rem 0.7rem;
    background: #fff;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
    font-size: 0.95rem;
    cursor: pointer;
}
.oficina-colocar-item:hover:not(:disabled) { border-color: var(--vinho); }
.oficina-colocar-item:disabled { opacity: 0.5; cursor: default; }

/* Perfil: fotos */
.oficina-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin: 0.8rem 0 1.2rem;
}
.oficina-foto { width: 100%; height: 150px; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--borda); }

/* Perfil: checklist do serviço (o coração da tela) */
.oficina-checklist { margin-bottom: 1.4rem; }
.oficina-checklist-topo { margin: 0 0 0.7rem; }
.oficina-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0.8rem;
    background: #fff;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-size: 1.08rem;
}
.oficina-item-check {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    accent-color: var(--status-verde);
    cursor: pointer;
}
.oficina-item-texto { line-height: 1.3; }
.oficina-item.feito { background: rgba(47, 133, 90, 0.06); border-color: rgba(47, 133, 90, 0.3); }
.oficina-item.feito .oficina-item-texto { text-decoration: line-through; color: var(--texto-secundario); }

/* Perfil: ações grandes */
.oficina-acoes-carro { display: flex; flex-direction: column; gap: 0.6rem; max-width: 480px; }
.botao.grande { padding: 0.95rem 1.2rem; font-size: 1.1rem; width: 100%; }
.oficina-pronto-aviso {
    padding: 0.7rem 0.9rem;
    background: rgba(47, 133, 90, 0.1);
    border: 1px solid rgba(47, 133, 90, 0.3);
    border-radius: var(--raio);
    color: var(--status-verde);
}

/* Selo "pronto há X" (aguardando retirada). Vermelho quando espera faz tempo. */
.oficina-pronto-tempo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(183, 121, 31, 0.12);
    border: 1px solid rgba(183, 121, 31, 0.35);
    color: var(--status-ambar);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.oficina-pronto-tempo.demorado {
    background: rgba(178, 59, 59, 0.12);
    border-color: rgba(178, 59, 59, 0.4);
    color: var(--status-vermelho);
}
.oficina-pronto-aviso.demorado {
    background: rgba(178, 59, 59, 0.1);
    border-color: rgba(178, 59, 59, 0.35);
    color: var(--status-vermelho);
}

/* ====================================================================== */
/* Formulário de orçamento — itens em blocos. A DESCRIÇÃO é uma faixa larga */
/* no topo de cada item (ganha a largura toda, em qualquer tela) e cresce   */
/* com o texto; Tipo/Qtd/Valor/Total/× ficam numa linha embaixo (quebram no */
/* celular). Contrato de campos (tipo/descricao/quantidade/valor) inalterado.*/
/* ====================================================================== */
.orc-itens { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.6rem; }

.orc-itens .orc-item {
    padding: 0.85rem;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
    background: #fff;
}

.orc-campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.orc-rotulo {
    font-size: 0.72rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--texto-secundario);
}

/* Descrição — faixa larga no topo, sempre 100% */
.orc-item-desc { margin-bottom: 0.7rem; }
.orc-descricao {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.7rem;
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
    font-family: inherit;
    background: #fff;
    resize: none;
    overflow: hidden;
    min-height: 2.9rem;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Controles — linha embaixo, quebram no celular */
.orc-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.orc-controles .campo-qtd,
.orc-controles .campo-valor,
.orc-controles select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem;
    font-size: 1rem;
    border: 1px solid var(--borda-card);
    border-radius: var(--raio);
    font-family: inherit;
    background: #fff;
    min-height: 44px;
}
.orc-item-tipo  { flex: 1 1 150px; }
.orc-item-qtd   { flex: 0 0 76px; }
.orc-item-valor { flex: 0 0 130px; }
.orc-item-total { flex: 0 0 auto; }
.orc-item-total .campo-total { font-weight: bold; white-space: nowrap; padding: 0.55rem 0; }
.orc-remover { flex: 0 0 auto; align-self: flex-end; margin-bottom: 0.15rem; }

/* Mão de obra: item escuro, quantidade some (mantém o casamento dos campos) */
.orc-itens .orc-item.linha-mao-de-obra { background: var(--preto); border-color: var(--preto); color: #fff; }
.orc-itens .orc-item.linha-mao-de-obra .orc-rotulo { color: #ccc; }
.orc-itens .orc-item.linha-mao-de-obra .orc-descricao,
.orc-itens .orc-item.linha-mao-de-obra .campo-valor,
.orc-itens .orc-item.linha-mao-de-obra select { background: #2b2b2b; color: #fff; border-color: #555; }
.orc-itens .orc-item.linha-mao-de-obra .orc-item-qtd { visibility: hidden; }

@media (min-width: 680px) {
    .orc-itens .orc-item { padding: 1rem 1.1rem; }
    .orc-item-valor { flex: 0 0 150px; }
}