/* ==========================================================================
   Cobrança — sistema de design
   ========================================================================== */

:root {
    --fundo: #F4F6F8;
    --superficie: #FFFFFF;
    --superficie-2: #FAFBFC;
    --borda: #E3E7EC;
    --borda-forte: #D3D9E0;

    --texto: #111827;
    --texto-2: #5B6673;
    --texto-3: #8A94A1;

    --menu: #0E1117;
    --menu-2: #161B24;
    --menu-texto: #A7B0BD;
    --menu-texto-ativo: #FFFFFF;

    --acento: #00A67E;
    --acento-escuro: #008A69;
    --acento-suave: #E6F6F1;

    --perigo: #D14343;
    --perigo-suave: #FCECEC;
    --alerta: #B87503;
    --alerta-suave: #FDF3E2;
    --info: #2563EB;
    --info-suave: #EAF1FE;

    --raio: 10px;
    --raio-g: 14px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-alta: 0 4px 12px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .06);
    --suave: cubic-bezier(.25, .46, .45, .94);

    --menu-largura: 248px;
}

* { box-sizing: border-box; }

/* O atributo hidden precisa vencer os display:flex/grid deste arquivo,
   senao elemento escondido continua aparecendo (barra de selecao, modal,
   botoes Parar e Desconectar). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Numeros de dinheiro alinham melhor com largura fixa por digito. */
.metrica, .table td, .valor { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; letter-spacing: -.015em; }

a { color: inherit; }

/* ==========================================================================
   Estrutura
   ========================================================================== */

.app { min-height: 100vh; }

.conteudo {
    margin-left: var(--menu-largura);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.area {
    flex: 1;
    padding: 28px 36px 56px;
    max-width: 1360px;
    width: 100%;
}

/* ==========================================================================
   Menu lateral
   ========================================================================== */

.menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--menu-largura);
    background: var(--menu);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 20px 20px;
    color: #fff;
    text-decoration: none;
}

.menu-marca .simbolo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--acento), #00C994);
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: 0 2px 10px rgba(0, 166, 126, .35);
}

.menu-marca .nome {
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.menu-marca .sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #6D7889;
    letter-spacing: .02em;
}

.menu-nav {
    flex: 1;
    padding: 6px 12px;
    overflow-y: auto;
}

.menu-grupo {
    display: block;
    padding: 16px 10px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5D6675;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: var(--menu-texto);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .18s var(--suave), color .18s var(--suave);
}

.menu-item svg { flex: none; opacity: .8; transition: opacity .18s var(--suave); }
.menu-item:hover { background: var(--menu-2); color: #E4E8EE; }
.menu-item:hover svg { opacity: 1; }

.menu-item.ativo {
    background: var(--menu-2);
    color: var(--menu-texto-ativo);
    font-weight: 600;
}

.menu-item.ativo svg { opacity: 1; color: var(--acento); }

/* Barrinha de acento no item ativo: o detalhe que orienta o olho. */
.menu-item.ativo::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--acento);
}

.menu-rodape {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--menu-2);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 600;
    flex: none;
}

.menu-usuario { min-width: 0; flex: 1; }
.menu-usuario strong { display: block; color: #E4E8EE; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario span { display: block; font-size: 11px; color: #6D7889; }

.btn-sair {
    background: none;
    border: 0;
    color: #6D7889;
    cursor: pointer;
    padding: 6px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    transition: background .18s var(--suave), color .18s var(--suave);
}

.btn-sair:hover { background: var(--menu-2); color: #fff; }

/* ==========================================================================
   Cabecalho da pagina
   ========================================================================== */

.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: 20px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.topo h1 { font-size: 21px; font-weight: 600; }
.topo .sub { margin: 3px 0 0; color: var(--texto-2); font-size: 13px; }

/* ==========================================================================
   Cartoes e metricas
   ========================================================================== */

.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    padding: 20px 22px;
    box-shadow: var(--sombra);
}

.card h2 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.card .card-sub { color: var(--texto-2); font-size: 12.5px; margin: 0 0 16px; }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metrica-card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    padding: 18px 20px;
    box-shadow: var(--sombra);
    transition: box-shadow .22s var(--suave), transform .22s var(--suave);
}

.metrica-card:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }

.metrica-rotulo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--texto-2);
    font-size: 12.5px;
    font-weight: 500;
}

.ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ponto.verde { background: var(--acento); }
.ponto.vermelho { background: var(--perigo); }
.ponto.laranja { background: var(--alerta); }
.ponto.azul { background: var(--info); }

.metrica {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin-top: 8px;
}

.metrica-nota { color: var(--texto-3); font-size: 12px; margin-top: 3px; }

.mb { margin-bottom: 18px; }
.muted { color: var(--texto-2); }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-caixa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.tabela-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}

.tabela-topo h2 { font-size: 15px; font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; }

.table th {
    background: var(--superficie-2);
    text-align: left;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-3);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.table td {
    padding: 14px 18px;
    border-bottom: 1px solid #EEF1F4;
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s var(--suave); }
.table tbody tr:hover { background: var(--superficie-2); }

.celula-principal { font-weight: 500; }
.celula-apoio { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.valor { font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   Selos
   ========================================================================== */

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    background: #EFF2F5;
    color: var(--texto-2);
}

.selo.verde { background: var(--acento-suave); color: var(--acento-escuro); }
.selo.vermelho { background: var(--perigo-suave); color: var(--perigo); }
.selo.laranja { background: var(--alerta-suave); color: var(--alerta); }
.selo.azul { background: var(--info-suave); color: var(--info); }

/* ==========================================================================
   Botoes
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--acento);
    color: #fff;
    border: 1px solid var(--acento);
    border-radius: 9px;
    padding: 9px 15px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s var(--suave), border-color .18s var(--suave), box-shadow .18s var(--suave), transform .12s var(--suave);
}

.btn:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); box-shadow: 0 3px 10px rgba(0, 166, 126, .28); }
.btn:active { transform: translateY(1px); }

.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover { background: var(--superficie-2); border-color: var(--texto-3); box-shadow: var(--sombra); }

.btn-perigo { background: var(--superficie); color: var(--perigo); border-color: #EDC6C6; }
.btn-perigo:hover { background: var(--perigo-suave); border-color: var(--perigo); box-shadow: none; }

.btn-pequeno { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* ==========================================================================
   Formularios
   ========================================================================== */

label { display: block; font-size: 12.5px; font-weight: 500; color: var(--texto-2); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }

.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--borda-forte);
    border-radius: 9px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 13.5px;
    transition: border-color .18s var(--suave), box-shadow .18s var(--suave);
}

.form-control:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(0, 166, 126, .14);
}

.form-control::placeholder { color: var(--texto-3); }

textarea.form-control { line-height: 1.55; resize: vertical; }

.linha { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.linha > div { min-width: 0; }
.linha-fim { align-items: flex-end; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto); }
.check input { width: 16px; height: 16px; accent-color: var(--acento); margin: 0; }

.dica { color: var(--texto-3); font-size: 12px; margin: 8px 0 0; }

/* ==========================================================================
   Avisos
   ========================================================================== */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--raio);
    margin-bottom: 20px;
    font-size: 13.5px;
    border: 1px solid var(--acento);
    background: var(--acento-suave);
    color: var(--acento-escuro);
}

.aviso svg { flex: none; margin-top: 1px; }
.aviso-erro { border-color: #EDC6C6; background: var(--perigo-suave); color: #A33232; }

/* ==========================================================================
   Estado vazio
   ========================================================================== */

.vazio { padding: 56px 24px; text-align: center; }

.vazio .icone {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    color: var(--texto-3);
}

.vazio h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.vazio p { color: var(--texto-2); margin: 0 auto; max-width: 44ch; font-size: 13.5px; }
.vazio .btn { margin-top: 18px; }

/* ==========================================================================
   Detalhes recolhiveis (envio manual)
   ========================================================================== */

details.envio summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texto-2);
    border: 1px solid var(--borda-forte);
    background: var(--superficie);
    border-radius: 8px;
    padding: 6px 11px;
    transition: border-color .18s var(--suave), color .18s var(--suave);
}

details.envio summary::-webkit-details-marker { display: none; }
details.envio summary:hover { border-color: var(--acento); color: var(--acento-escuro); }
details.envio[open] summary { border-color: var(--acento); color: var(--acento-escuro); }

details.envio .painel {
    margin-top: 10px;
    min-width: 340px;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-tela {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1100px 520px at 50% -8%, rgba(0, 166, 126, .10), transparent 62%),
        var(--fundo);
}

.login-caixa { width: 100%; max-width: 392px; }

.login-marca {
    display: flex;
    align-items: center;
    gap: 11px;
    justify-content: center;
    margin-bottom: 22px;
}

.login-marca .simbolo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--acento), #00C994);
    display: grid;
    place-items: center;
    box-shadow: 0 3px 14px rgba(0, 166, 126, .32);
}

.login-marca .nome { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

.login-caixa .card { padding: 28px; border-radius: 16px; box-shadow: var(--sombra-alta); }
.login-caixa h1 { font-size: 17px; font-weight: 600; }
.login-caixa .card-sub { margin-bottom: 20px; }
.login-caixa .btn { width: 100%; margin-top: 20px; padding: 11px; }
.login-rodape { text-align: center; color: var(--texto-3); font-size: 12px; margin-top: 18px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    :root { --menu-largura: 0px; }

    .menu {
        position: sticky;
        inset: 0 0 auto 0;
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        overflow: hidden;
    }

    .menu-marca { padding: 12px 6px 12px 0; }
    .menu-marca .nome .sub { display: none; }

    .menu-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .menu-nav::-webkit-scrollbar { display: none; }
    .menu-grupo { display: none; }
    .menu-item { margin: 0; padding: 8px 10px; white-space: nowrap; }
    .menu-item.ativo::before { left: 10px; right: 10px; top: auto; bottom: -1px; width: auto; height: 2px; transform: none; border-radius: 2px 2px 0 0; }

    .menu-rodape { border: 0; padding: 8px 0 8px 8px; }
    .menu-usuario { display: none; }

    .conteudo { margin-left: 0; }
    .topo, .area { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 620px) {
    .grid { grid-template-columns: 1fr; }
    .topo { padding-top: 16px; padding-bottom: 16px; }
    .topo h1 { font-size: 18px; }
    .linha > div { flex: 1 1 100%; }
}

/* ==========================================================================
   Conexão do WhatsApp (QR Code)
   ========================================================================== */

.qr-area {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin-top: 18px;
    flex-wrap: wrap;
}

.qr-quadro {
    width: 260px;
    height: 260px;
    flex: none;
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 10px;
}

.qr-quadro img, .qr-quadro canvas { max-width: 100%; height: auto; display: block; border-radius: 6px; }

.qr-vazio {
    display: grid;
    place-items: center;
    gap: 10px;
    color: var(--texto-3);
    font-size: 12.5px;
    text-align: center;
    padding: 0 20px;
}

.qr-lado { flex: 1; min-width: 280px; }

.qr-passos {
    margin: 0;
    padding-left: 20px;
    color: var(--texto-2);
    font-size: 13.5px;
}

.qr-passos li { margin-bottom: 6px; }
.qr-passos strong { color: var(--texto); font-weight: 600; }

.qr-aviso {
    margin: 14px 0 0;
    padding: 10px 13px;
    border-radius: var(--raio);
    background: var(--acento-suave);
    color: var(--acento-escuro);
    border: 1px solid rgba(0, 166, 126, .25);
    font-size: 12.5px;
}

.qr-aviso.erro { background: var(--perigo-suave); color: #A33232; border-color: #EDC6C6; }

.qr-codigo {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    padding: 10px 14px;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie-2);
    display: inline-block;
}

@media (max-width: 620px) {
    .qr-quadro { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ==========================================================================
   Filtros, seleção e envio em lote
   ========================================================================== */

.filtros {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    padding: 18px 20px;
    box-shadow: var(--sombra);
}

.filtros-linha { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filtros-linha + .filtros-linha { margin-top: 12px; }
.filtro-campo { flex: 1; min-width: 160px; }
.filtro-campo label { margin-top: 0; }
.filtro-acoes { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 1px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--borda-forte);
    background: var(--superficie);
    color: var(--texto-2);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .18s var(--suave), color .18s var(--suave), background .18s var(--suave);
}

.chip:hover { border-color: var(--acento); color: var(--acento-escuro); }
.chip.ativo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-escuro); }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    font-size: 13px;
}

.table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--acento); margin: 0; cursor: pointer; }
.table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; }

/* Barra que aparece quando ha faturas selecionadas. */
.barra-selecao {
    position: fixed;
    left: calc(var(--menu-largura) + 24px);
    right: 24px;
    bottom: 20px;
    z-index: 30;
    background: var(--menu);
    color: #fff;
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-alta);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.barra-selecao .barra-info strong { font-size: 14px; font-weight: 600; }
.barra-selecao .muted { color: #97A1AE; margin-left: 10px; font-size: 12.5px; }
.barra-selecao .btn-secundario { background: var(--menu-2); color: #E4E8EE; border-color: #2A313D; }
.barra-selecao .btn-secundario:hover { background: #1F2734; border-color: #3A424F; }

.envio-fundo {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(14, 17, 23, .55);
    display: grid;
    place-items: center;
    padding: 24px;
}

.envio-caixa {
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-alta);
    padding: 26px 28px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
}

.envio-progresso { margin-top: 18px; }

.envio-progresso .barra {
    height: 6px;
    border-radius: 999px;
    background: var(--borda);
    overflow: hidden;
}

.envio-progresso .barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--acento);
    transition: width .3s var(--suave);
}

.envio-log {
    margin-top: 10px;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
    padding: 8px 10px;
    font-size: 12.5px;
}

.envio-log-item { padding: 3px 0; color: var(--acento-escuro); }
.envio-log-item.erro { color: var(--perigo); }

@media (max-width: 900px) {
    .barra-selecao { left: 12px; right: 12px; bottom: 12px; }
}

/* Telefone não pode quebrar no meio: "(11) 98338-6401" numa linha só. */
.celula-tel { white-space: nowrap; }

/* ==========================================================================
   Gráfico
   ========================================================================== */

.legenda { display: flex; gap: 16px; flex-wrap: wrap; }

.legenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--texto-2);
    white-space: nowrap;
}

/* A cor fica no marcador, nunca no texto: hue clara não se lê como letra. */
.legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.grafico { position: relative; margin-top: 18px; }
.grafico svg { display: block; overflow: visible; }

.grafico .col { cursor: default; outline: none; }
.grafico .col > path, .grafico .col > rect { transition: opacity .16s var(--suave); }
.grafico:hover .col { opacity: .45; }
.grafico:hover .col:hover, .grafico .col:focus-visible { opacity: 1; }

.grafico-dica {
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    pointer-events: none;
    background: var(--menu);
    color: #fff;
    border-radius: var(--raio);
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.55;
    box-shadow: var(--sombra-alta);
    white-space: nowrap;
}

.grafico-dica strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.grafico-dica span { display: flex; align-items: center; gap: 7px; color: #C3CAD3; }
.grafico-dica i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.grafico-dica b { margin-left: auto; padding-left: 14px; color: #fff; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
    .grafico svg { min-width: 560px; }
    .grafico { overflow-x: auto; }
}

/* ==========================================================================
   Mensagens enviadas
   ========================================================================== */

.mensagens { padding: 6px 20px 20px; }

.msg {
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda-forte);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--superficie);
    transition: box-shadow .2s var(--suave);
}

.msg:hover { box-shadow: var(--sombra); }

/* A barra lateral diz a situação de relance, sem precisar ler o selo.
   Prefixo 'estado-' e nao 'msg-': .msg-erro ja e o aviso de erro dentro do
   cartao, e o nome repetido fazia o cartao herdar o display:flex dele. */
.estado-enviado { border-left-color: var(--acento); }
.estado-erro { border-left-color: var(--perigo); }
.estado-pendente { border-left-color: var(--alerta); }

.msg-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.msg-quem strong { display: block; font-size: 14px; font-weight: 600; }
.msg-meta { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }

.msg-lado { display: flex; align-items: center; gap: 10px; flex: none; }
.msg-quando { color: var(--texto-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* O texto é o que a pessoa recebeu — fica em balão, não em célula de tabela. */
.msg-texto {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 4px 12px 12px 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--texto);
    white-space: normal;
    max-width: 68ch;
}

.msg-erro {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: var(--raio);
    background: var(--perigo-suave);
    color: #A33232;
    font-size: 12.5px;
    max-width: 68ch;
}

.msg-erro svg { flex: none; margin-top: 2px; }

.msg-rodape { margin-top: 10px; color: var(--texto-3); font-size: 12px; }

@media (max-width: 620px) {
    .mensagens { padding: 4px 14px 16px; }
    .msg-lado { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Conversas — leitura igual à do WhatsApp
   ==========================================================================
   Cores e proporções do WhatsApp Web, para a tela ser familiar de imediato.
   O padrão do fundo é desenhado aqui com gradientes, não copiado: a arte
   oficial é da Meta.
   ========================================================================== */

:root {
    --wa-verde: #00A884;
    --wa-verde-escuro: #008069;
    --wa-barra: #F0F2F5;
    --wa-fundo: #EFEAE2;
    --wa-saida: #D9FDD3;
    --wa-texto: #111B21;
    --wa-texto-2: #667781;
    --wa-divisor: #E9EDEF;
    --wa-hover: #F5F6F6;
    --wa-ativo: #F0F2F5;
    --wa-lida: #53BDEB;
}

.wa {
    display: grid;
    grid-template-columns: minmax(300px, 30%) 1fr;
    height: calc(100vh - 176px);
    min-height: 520px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    overflow: hidden;
    box-shadow: var(--sombra);
    background: #fff;
}

/* --------------------------------------------------- coluna das conversas */

.wa-lista {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--wa-divisor);
    background: #fff;
    min-width: 0;
}

.wa-lista-topo { padding: 9px 12px; background: var(--wa-barra); }
.wa-busca { position: relative; }

.wa-busca input {
    width: 100%;
    border: 0;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px 8px 40px;
    font: inherit;
    font-size: 13.5px;
    color: var(--wa-texto);
}

.wa-busca input:focus { outline: 1px solid var(--wa-divisor); }
.wa-busca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--wa-texto-2); }

.wa-abas {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--wa-divisor);
}

.wa-aba {
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--wa-barra);
    color: var(--wa-texto-2);
    text-decoration: none;
}

.wa-aba.ativa { background: #D9FDD3; color: var(--wa-verde-escuro); }

.wa-rolagem { flex: 1; overflow-y: auto; }
.wa-vazio-lista { padding: 40px 24px; text-align: center; color: var(--wa-texto-2); font-size: 13px; line-height: 1.6; }

.wa-item {
    display: flex;
    gap: 13px;
    padding: 11px 14px;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid var(--wa-divisor);
    transition: background .12s var(--suave);
}

.wa-item:hover { background: var(--wa-hover); }
.wa-item.ativo { background: var(--wa-ativo); }

.wa-foto {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    background: #DFE5E7;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 500;
}

.wa-item-corpo { flex: 1; min-width: 0; }
.wa-item-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wa-item-nome { font-size: 14.5px; color: var(--wa-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-item-hora { font-size: 11.5px; color: var(--wa-texto-2); flex: none; }
.wa-item-previa { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

.wa-item-texto {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--wa-texto-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-nao-lidas {
    background: var(--wa-verde);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    flex: none;
}

/* ------------------------------------------------------ painel da conversa */

.wa-painel { display: flex; flex-direction: column; min-width: 0; background: var(--wa-fundo); }

.wa-cabecalho {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 16px;
    background: var(--wa-barra);
    border-bottom: 1px solid var(--wa-divisor);
}

.wa-cabecalho .wa-foto { width: 40px; height: 40px; font-size: 15px; }
.wa-cabecalho-nome { font-size: 15px; color: var(--wa-texto); font-weight: 500; }
.wa-cabecalho-sub { font-size: 12.5px; color: var(--wa-texto-2); margin-top: 1px; }
.wa-cabecalho-sub a { color: var(--wa-verde-escuro); }
.wa-cabecalho-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.wa-faturas {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #FFF8E1;
    border-bottom: 1px solid #F3E5C3;
    font-size: 12px;
    color: #6B5A2B;
}

.wa-faturas .selo { background: #fff; border: 1px solid #EADFC0; color: #6B5A2B; }
.wa-faturas .selo.vermelho { background: var(--perigo-suave); border-color: #EDC6C6; color: var(--perigo); }

.wa-mensagens {
    flex: 1;
    overflow-y: auto;
    padding: 18px 7%;
    background-color: var(--wa-fundo);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 2px, transparent 2px),
        radial-gradient(circle at 70% 65%, rgba(0,0,0,.025) 0 3px, transparent 3px),
        radial-gradient(circle at 45% 85%, rgba(255,255,255,.45) 0 2px, transparent 2px);
    background-size: 130px 130px, 190px 190px, 160px 160px;
}

.wa-data { text-align: center; margin: 14px 0; }

.wa-data span {
    display: inline-block;
    background: #FFFFFF;
    color: var(--wa-texto-2);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(11,20,26,.08);
}

.wa-bolha {
    position: relative;
    max-width: 65%;
    margin-bottom: 4px;
    padding: 6px 9px 8px 11px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(11,20,26,.13);
    font-size: 14.2px;
    line-height: 1.4;
    color: var(--wa-texto);
    word-wrap: break-word;
    clear: both;
}

.wa-bolha p { margin: 0; white-space: pre-wrap; }
.wa-recebida { margin-right: auto; border-top-left-radius: 0; }
.wa-enviada { margin-left: auto; background: var(--wa-saida); border-top-right-radius: 0; }

/* O rabinho da primeira bolha de cada bloco, como no aplicativo. */
.wa-bolha.com-rabo::before {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 13px;
}

.wa-recebida.com-rabo::before {
    left: -8px;
    background: #fff;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.wa-enviada.com-rabo::before {
    right: -8px;
    background: var(--wa-saida);
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

.wa-meta {
    float: right;
    margin: 6px -4px -4px 10px;
    font-size: 11px;
    color: var(--wa-texto-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.wa-check { color: var(--wa-texto-2); }
.wa-check.falhou { color: var(--perigo); }

.wa-aviso-erro {
    clear: both;
    margin: 4px 0 0;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--perigo-suave);
    color: #A33232;
    font-size: 11.5px;
}

.wa-etiqueta {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    color: var(--wa-verde-escuro);
    font-weight: 500;
}

/* -------------------------------------------------------- barra de escrever */

.wa-rodape { position: relative; }

.wa-escrever {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 9px 16px;
    background: var(--wa-barra);
}

.wa-escrever textarea {
    flex: 1;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    color: var(--wa-texto);
}

.wa-escrever textarea:focus { outline: none; }

.wa-icone {
    background: none;
    border: 0;
    color: #54656F;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    transition: background .15s var(--suave);
}

.wa-icone:hover { background: rgba(0,0,0,.05); }

.wa-enviar {
    background: var(--wa-verde);
    color: #fff;
    border: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
    transition: background .15s var(--suave);
}

.wa-enviar:hover { background: var(--wa-verde-escuro); }
.wa-enviar:disabled { opacity: .5; cursor: default; }

.wa-emojis {
    position: absolute;
    bottom: 64px;
    left: 14px;
    z-index: 6;
    background: #fff;
    border: 1px solid var(--wa-divisor);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 300px;
}

.wa-emojis button {
    background: none;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
}

.wa-emojis button:hover { background: var(--wa-hover); }

.wa-anexo-aviso {
    padding: 8px 16px;
    background: #FFF8E1;
    border-top: 1px solid #F3E5C3;
    font-size: 12.5px;
    color: #6B5A2B;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ----------------------------------------------------------- tela de espera */

.wa-nenhuma {
    flex: 1;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px;
    background: var(--wa-barra);
    border-left: 1px solid var(--wa-divisor);
}

.wa-nenhuma h3 { font-size: 20px; font-weight: 300; color: #41525D; margin-bottom: 10px; }
.wa-nenhuma p { color: var(--wa-texto-2); font-size: 13.5px; max-width: 46ch; margin: 0 auto; line-height: 1.6; }

.wa-nenhuma .circulo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #DAE1E3;
    display: grid;
    place-items: center;
    margin: 0 auto 26px;
    color: #C4CDD1;
}

@media (max-width: 900px) {
    .wa { grid-template-columns: 1fr; height: auto; }
    .wa-lista { border-right: 0; border-bottom: 1px solid var(--wa-divisor); max-height: 320px; }
    .wa-mensagens { padding: 14px; min-height: 320px; }
    .wa-bolha { max-width: 84%; }
    .wa-nenhuma { min-height: 260px; border-left: 0; }
}

/* Ajustes finos da conversa em tela pequena. */
.wa-cabecalho > div:not(.wa-cabecalho-acoes) { min-width: 0; }
.wa-cabecalho-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-escrever textarea { min-height: 42px; }

@media (max-width: 900px) {
    /* Com muitas faturas a faixa empurrava a conversa para fora da tela. */
    .wa-faturas { max-height: 84px; overflow-y: auto; }
    .wa-cabecalho { padding: 8px 12px; gap: 10px; }
    .wa-cabecalho .wa-foto { width: 36px; height: 36px; }
    .wa-escrever { padding: 8px 10px; gap: 5px; }
    .wa-escrever textarea { padding: 10px 12px; }
}

/* A conversa ocupa a área toda, sem o cabeçalho de página. */
.area-cheia { padding: 0; max-width: none; }
.area-cheia .wa { height: calc(100vh - 1px); border: 0; border-radius: 0; box-shadow: none; }

/* Botão "Importar do aparelho" com a mesma pinta das abas. */
button.wa-aba { border: 0; cursor: pointer; font: inherit; }
button.wa-aba:disabled { opacity: .5; cursor: default; }

.wa-progresso { padding: 10px 14px; border-bottom: 1px solid var(--wa-divisor); background: #fff; }
.wa-progresso .barra { height: 4px; border-radius: 999px; background: var(--wa-divisor); overflow: hidden; }
.wa-progresso .barra span { display: block; height: 100%; width: 0; background: var(--wa-verde); transition: width .3s var(--suave); }
.wa-progresso p { margin: 7px 0 0; font-size: 12px; color: var(--wa-texto-2); }

@media (max-width: 900px) {
    .area-cheia .wa { height: auto; }
}

/* As abas não podem espremer o botão de importar a ponto de quebrar palavra. */
.wa-abas { flex-wrap: wrap; }
.wa-aba { white-space: nowrap; }

/* ============================================================================
   Conversa completa: mídia, citação, reação, encaminhar e gravação de áudio.
   Tudo aqui é a mesma linguagem visual do WhatsApp Web já usada acima.
   ========================================================================== */

/* Cada mensagem vira uma linha com a bolha e os botões que aparecem no hover.
   Como a linha é flex, a bolha não precisa mais do margin auto para escolher
   o lado — quem decide é a direção da linha. */
.wa-linha { display: flex; align-items: center; gap: 4px; }
.wa-linha-saida { flex-direction: row-reverse; }
.wa-linha > .wa-bolha { margin-left: 0; margin-right: 0; }

.wa-acoes { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity .15s var(--suave); }
.wa-linha:hover .wa-acoes, .wa-acoes:focus-within { opacity: 1; }

.wa-acao {
    background: none;
    border: 0;
    color: #54656F;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .15s var(--suave), color .15s var(--suave);
}

.wa-acao:hover { background: rgba(0,0,0,.07); color: var(--wa-texto); }

/* ------------------------------------------------------------------ mídia */

.wa-midia { display: block; margin: -2px -5px 5px; border-radius: 6px; overflow: hidden; }
.wa-midia img { display: block; width: 100%; max-width: 330px; max-height: 380px; object-fit: cover; }

/* Figurinha é recortada, então fundo e sombra atrapalham. */
.wa-figurinha { background: none; }
.wa-figurinha img { max-width: 150px; max-height: 150px; object-fit: contain; }

.wa-audio { display: block; width: 264px; max-width: 100%; margin: 2px 0 5px; height: 40px; }
.wa-video { display: block; width: 100%; max-width: 330px; border-radius: 6px; margin: -2px -5px 5px; }

.wa-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 5px;
    padding: 9px 11px;
    border-radius: 6px;
    background: rgba(0,0,0,.045);
    color: var(--wa-texto);
    font-size: 13px;
    word-break: break-all;
}

.wa-doc:hover { background: rgba(0,0,0,.075); }
.wa-doc svg { flex: none; color: var(--wa-texto-2); }

/* Mídia sem legenda: sobra só a hora, que fica alinhada à direita. */
.wa-so-meta { min-height: 15px; }

/* -------------------------------------------------------------- citação */

.wa-citacao {
    display: block;
    margin: 0 0 5px;
    padding: 5px 9px;
    border-left: 3px solid var(--wa-verde);
    border-radius: 4px;
    background: rgba(0,0,0,.045);
    font-size: 12.8px;
    line-height: 1.35;
    max-width: 100%;
}

.wa-citacao-quem { display: block; color: var(--wa-verde-escuro); font-weight: 500; font-size: 12px; }

.wa-citacao-texto {
    display: block;
    color: var(--wa-texto-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-encaminhada {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--wa-texto-2);
}

.wa-apagada-texto { display: flex; align-items: center; gap: 6px; color: var(--wa-texto-2); font-style: italic; }
.wa-apagada { opacity: .85; }

/* Reação fica pendurada embaixo da bolha, como uma etiqueta. */
.wa-reacao {
    display: inline-block;
    clear: both;
    margin: 5px 0 -3px;
    padding: 1px 7px 2px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--wa-divisor);
    box-shadow: 0 1px 1px rgba(11,20,26,.1);
    font-size: 13px;
    line-height: 1.3;
}

.wa-check.lida { color: var(--wa-lida); }

/* --------------------------------------------- painel de reagir (flutuante) */

.wa-reagir {
    position: fixed;
    z-index: 30;
    display: flex;
    gap: 2px;
    padding: 5px 7px;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--sombra-alta);
    border: 1px solid var(--wa-divisor);
}

.wa-reagir button {
    background: none;
    border: 0;
    font-size: 21px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .12s var(--suave), background .12s var(--suave);
}

.wa-reagir button:hover { transform: scale(1.25); background: var(--wa-hover); }

/* ------------------------------------------------- barra de responder e /rápidas */

.wa-respondendo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--wa-barra);
    border-top: 1px solid var(--wa-divisor);
}

.wa-respondendo > div {
    flex: 1;
    min-width: 0;
    border-left: 3px solid var(--wa-verde);
    padding-left: 9px;
}

.wa-respondendo button {
    background: none;
    border: 0;
    color: var(--wa-texto-2);
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
}

.wa-respondendo button:hover { background: rgba(0,0,0,.06); }

.wa-rapidas {
    position: absolute;
    bottom: 64px;
    left: 14px;
    right: 14px;
    z-index: 6;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--wa-divisor);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 6px;
}

.wa-rapidas button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    font: inherit;
}

.wa-rapidas button:hover { background: var(--wa-hover); }
.wa-rapidas b { display: block; color: var(--wa-verde-escuro); font-size: 12.5px; }
.wa-rapidas span { display: block; color: var(--wa-texto-2); font-size: 12.5px; margin-top: 2px; }

/* ------------------------------------------------------------ gravar áudio */

.wa-gravando {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: #FFF1F0;
    border-top: 1px solid #F5D2D0;
    font-size: 13px;
    color: #8A2F2C;
}

.wa-gravando .ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--perigo);
    animation: wa-pulsa 1s infinite;
}

.wa-gravando button:last-child { margin-left: 0; }
.wa-gravando > span:nth-child(2) { flex: 1; }

@keyframes wa-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.wa-gravar.gravando { color: var(--perigo); }

/* ------------------------------------------------------------------ modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(11,20,26,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-caixa {
    background: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 22px 24px;
    width: min(460px, 100%);
    max-height: 82vh;
    overflow-y: auto;
}

.modal-caixa h3 { font-size: 16px; margin: 0 0 14px; }

.wa-encaminhar-lista { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; }

.wa-encaminhar-lista label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    margin: 0;
}

.wa-encaminhar-lista label:hover { background: var(--wa-hover); }

@media (max-width: 900px) {
    /* Sem hover no celular os botões precisam estar sempre visíveis. */
    .wa-acoes { opacity: 1; }
    .wa-midia img, .wa-video { max-width: 100%; }
    .wa-audio { width: 100%; }
}

/* Em coluna, um item flex não encolhe abaixo do próprio conteúdo enquanto o
   min-height for "auto". Com mensagens altas (foto, áudio) a área de conversa
   passava da tela e empurrava a barra de escrever para fora — só aparecia com
   conversa cheia, por isso demorou a aparecer. */
.wa-painel, .wa-lista, .wa-mensagens, .wa-rolagem { min-height: 0; }

/* Cliente com muitas parcelas em aberto fazia a faixa amarela ocupar metade
   da tela e espremer a conversa. Ela rola por dentro, como no cabeçalho de um
   aplicativo. */
.wa-faturas { max-height: 92px; overflow-y: auto; align-content: flex-start; }

/* ----------------------------------------- abas com contagem e conversa encerrada */

.wa-aba b { font-weight: 600; opacity: .65; margin-left: 2px; }
.wa-aba.ativa b { opacity: .85; }

.wa-selo-fechada {
    flex: none;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--wa-verde-escuro);
    background: #D9FDD3;
    border-radius: 999px;
    padding: 1px 7px 2px;
}

/* ------------------------------------------------ procurar dentro da conversa */

.wa-busca-conversa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--wa-barra);
    border-bottom: 1px solid var(--wa-divisor);
}

.wa-busca-conversa svg { color: var(--wa-texto-2); flex: none; }

.wa-busca-conversa input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13.5px;
    background: #fff;
    color: var(--wa-texto);
}

.wa-busca-conversa input:focus { outline: 1px solid var(--wa-divisor); }
.wa-busca-conversa span { font-size: 12px; color: var(--wa-texto-2); white-space: nowrap; flex: none; }

.wa-busca-conversa button {
    background: none;
    border: 0;
    color: var(--wa-texto-2);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 6px 7px;
    border-radius: 6px;
    flex: none;
}

.wa-busca-conversa button:hover { background: rgba(0,0,0,.06); color: var(--wa-texto); }

mark.wa-achado { background: #FFE9A8; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.wa-achado.atual { background: #FFC400; }

/* Data do arquivo no rodapé do menu: serve para saber, de relance, se o
   navegador está mostrando a versão que acabou de subir. */
.menu-versao { font-size: 10.5px; opacity: .5; }

/* ------------------------------------------- menu de ações do cabeçalho */

/* Com todos os botões à vista o nome do cliente não cabia. Fica a lupa e um
   menu, que é o arranjo do próprio aplicativo. */
.wa-cabecalho-acoes { gap: 2px; flex: none; }
.wa-cabecalho > div:not(.wa-cabecalho-acoes) { flex: 1; }
.wa-cabecalho-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wa-menu { position: relative; }

.wa-menu-lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 216px;
    background: #fff;
    border: 1px solid var(--wa-divisor);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 6px;
}

.wa-menu-lista button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 9px 11px;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px;
    color: var(--wa-texto);
}

.wa-menu-lista button:hover { background: var(--wa-hover); }
.wa-menu-lista button.perigo { color: var(--perigo); }
.wa-menu-lista button.perigo:hover { background: var(--perigo-suave); }

/* ------------------------------------------- selo de WhatsApp no cadastro */

/* Três estados de propósito: "não sei" não pode parecer "não tem". */
.zap {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: help;
}

.zap-sim { color: #fff; background: #25D366; }
.zap-nao { color: #9AA4AD; background: #EEF1F3; position: relative; }
.zap-duvida { color: #C3CBD2; background: transparent; }
.zap-vazio { color: #E1E6EA; background: transparent; }

/* Risco em diagonal no "não tem conta", para não depender só da cor. */
.zap-nao::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 1.6px;
    background: #8D979F;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.chips .chip { white-space: nowrap; }

/* ------------------------------------------- janela de 24h da API oficial */

/* A Meta só aceita texto livre até 24h depois da última mensagem do cliente.
   O aviso fica colado na barra de escrever porque é ali que a pessoa descobre
   o problema — no botão de enviar, tarde demais. */
.wa-janela {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    border-top: 1px solid var(--wa-divisor);
}

.wa-janela svg { flex: none; margin-top: 1px; }
.wa-janela.fechada { background: #FFF1F0; border-top-color: #F5D2D0; color: #8A2F2C; }
.wa-janela.acabando { background: #FFF8E1; border-top-color: #F3E5C3; color: #6B5A2B; }

/* Escolha de provedor em Configurações: a linha inteira é clicável. */
.escolha {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin: 0 0 8px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color .15s var(--suave), background .15s var(--suave);
}

.escolha:hover { background: var(--fundo-suave, #F7F9FA); }
.escolha:has(input:checked) { border-color: var(--acento); background: #F2FBF8; }
.escolha input { margin-top: 3px; flex: none; }
.escolha > span { display: flex; flex-direction: column; gap: 3px; }
.escolha strong { font-size: 14px; }
.escolha .muted { font-size: 12.5px; line-height: 1.5; }

/* ------------------------------------------------- abas de Configurações */

/* A tela tinha ficado comprida demais: o que era um rolo virou quatro grupos.
   As abas só mostram e escondem — os campos continuam no mesmo formulário. */
.abas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 0;
}

.aba {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: var(--texto-2);
    padding: 10px 14px;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
    transition: color .15s var(--suave), border-color .15s var(--suave), background .15s var(--suave);
}

.aba:hover { color: var(--texto); background: rgba(0,0,0,.03); }

.aba.ativa {
    color: var(--acento);
    border-bottom-color: var(--acento);
    font-weight: 500;
}

@media (max-width: 640px) {
    /* Em tela estreita as abas rolam na horizontal em vez de quebrar linha. */
    .abas { flex-wrap: nowrap; overflow-x: auto; }
    .aba { white-space: nowrap; }
}

/* Aviso de divergência entre o ID salvo e o que o webhook recebe. */
.aviso-waba {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: var(--raio);
    background: #FFF8E1;
    border: 1px solid #F3E5C3;
    color: #6B5A2B;
    font-size: 12.8px;
    line-height: 1.5;
}

.aviso-waba svg { flex: none; margin-top: 1px; }

/* Como a mensagem vai chegar: o corpo do modelo aprovado, do jeito que está
   na Meta. É leitura, não campo — por isso não parece um input. */
.envio-corpo {
    margin-top: 6px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--texto);
    white-space: pre-wrap;
}