/* ==================================================================
   WA-GATEWAY — Painel

   Paleta do WhatsApp Web. Verde-petróleo no cabeçalho, corpo cinza
   claro, cartões brancos. Contraste alto de propósito: painel de
   operação é lido de relance, às vezes com o celular na outra mão.

   Cor de estado nunca decora. Verde = conectado, âmbar = conectando,
   vermelho = caiu. Nada mais usa essas cores.
   ================================================================== */

:root {
    /* Marca WhatsApp */
    --verde:        #00a884;
    --verde-escuro: #008069;
    --verde-veu:    #d9fdd3;
    --verde-tinta:  #017561;

    /* Superfícies */
    --fundo:        #eff2f5;
    --carta:        #ffffff;
    --carta-alt:    #f7f9fa;
    --borda:        #d8dee3;
    --borda-forte:  #b9c3ca;

    /* Texto — contraste alto */
    --tinta:        #0b141a;
    --tinta-media:  #4b5c66;
    --tinta-fraca:  #6d7f8a;

    /* Estados */
    --ok:           #017561;
    --ok-veu:       #d9fdd3;
    --espera:       #8a5a00;
    --espera-veu:   #fff2cd;
    --erro:         #9c2b21;
    --erro-veu:     #ffe0dc;
    --neutro:       #5a6b75;
    --neutro-veu:   #e4e9ec;

    --raio:    12px;
    --raio-p:  8px;
    --sombra:  0 1px 2px rgba(11,20,26,.07), 0 2px 8px rgba(11,20,26,.05);
    --sombra-alta: 0 4px 10px rgba(11,20,26,.10), 0 12px 30px rgba(11,20,26,.10);

    --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --corpo:   'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--corpo);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-tinta); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }






.saude {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
}
.pulso {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #7ce8a4;
    animation: pulsar 2.6s infinite;
}
.pulso.mal { background: #ff8f80; animation: none; }
@keyframes pulsar {
    0%   { box-shadow: 0 0 0 0 rgba(124,232,164,.65); }
    70%  { box-shadow: 0 0 0 8px rgba(124,232,164,0); }
    100% { box-shadow: 0 0 0 0 rgba(124,232,164,0); }
}


/* ==================================================================
   Estrutura — barra lateral

   Eram nove itens num menu horizontal: o indicador de saúde quebrava em
   duas linhas e o nome do usuário encostava na borda. Menu horizontal
   não escala além de uns cinco itens.
   ================================================================== */
.app { display: block; }

.lateral {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 232px;
    background: #0e2b26;
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow-y: auto;
}

.lateral-marca {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 20px 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.lateral-marca:hover { text-decoration: none; }

.marca-icone {
    width: 34px; height: 34px;
    background: var(--verde);
    border-radius: 9px;
    display: grid; place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.marca-texto {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -.02em;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
}
.marca-texto small {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 2px;
}

.lateral-nav { flex: 1; padding: 14px 12px 20px; }

.lateral-grupo {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    padding: 0 10px;
    margin: 16px 0 6px;
}
.lateral-nav > .lateral-grupo:first-child { margin-top: 0; }

.lateral-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1px;
    transition: background .13s, color .13s;
}
.lateral-item svg { flex-shrink: 0; opacity: .75; }
.lateral-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.lateral-item:hover svg { opacity: 1; }

/* O item ativo carrega a cor da marca — é o único verde da barra, então
   não há dúvida sobre onde você está. */
.lateral-item.ativo {
    background: var(--verde);
    color: #fff;
    font-weight: 600;
}
.lateral-item.ativo svg { opacity: 1; }

.lateral-pe {
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.lateral-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.quem {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sair {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    font-family: var(--corpo);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.sair:hover { background: rgba(255,255,255,.2); color: #fff; }

.conteudo { margin-left: 232px; min-height: 100vh; }

.pagina { max-width: 1080px; margin: 0 auto; padding: 34px 34px 76px; }

/* Botão do menu no celular */
.menu-botao {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 60;
    width: 42px; height: 42px;
    background: #0e2b26;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    padding: 12px 11px;
    flex-direction: column;
    justify-content: space-between;
}
.menu-botao span { display: block; height: 2px; background: #fff; border-radius: 2px; }

.fundo-menu {
    position: fixed; inset: 0;
    background: rgba(11,20,26,.5);
    z-index: 35;
}

.cabecalho-secao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 20px;
}

h1 {
    font-family: var(--display);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--tinta);
}
h2 {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 14px;
    color: var(--tinta);
}
.sub { color: var(--tinta-media); font-size: 14.5px; margin: 5px 0 0; }

.rotulo {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    font-weight: 500;
}

/* ------------------------------------------------------------------
   Cartões de instância
   ------------------------------------------------------------------ */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.linha-card {
    background: var(--carta);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--borda-forte);
    border-radius: var(--raio);
    padding: 19px 20px;
    box-shadow: var(--sombra);
    transition: box-shadow .18s, transform .18s;
    display: block;
    color: inherit;
    font-weight: 400;
}
.linha-card:hover {
    text-decoration: none;
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
}
/* A borda esquerda repete o estado: dá pra ler a grade de longe */
.linha-card.e-conectado    { border-left-color: var(--verde); }
.linha-card.e-conectando   { border-left-color: #d99e00; }
.linha-card.e-desconectado { border-left-color: #c0392b; }

.linha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.linha-nome {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--tinta);
}

.linha-fone {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--tinta-media);
    margin-top: 4px;
}
.linha-fone.vazio { color: var(--tinta-fraca); font-style: italic; font-family: var(--corpo); text-align: left; padding: 0; }

.linha-pe {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--borda);
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--tinta-fraca);
}

/* Selo de estado */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.conectado    { background: var(--ok-veu);     color: var(--ok);     border-color: #a5e6a0; }
.selo.conectando   { background: var(--espera-veu); color: var(--espera); border-color: #f0d492; }
.selo.desconectado { background: var(--erro-veu);   color: var(--erro);   border-color: #f3b9b2; }
.selo.desconhecido { background: var(--neutro-veu); color: var(--neutro); border-color: var(--borda-forte); }

/* ------------------------------------------------------------------
   Painéis
   ------------------------------------------------------------------ */
.painel {
    background: var(--carta);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
    margin-bottom: 20px;
}

.dados { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dados th {
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    font-weight: 500;
    padding: 0 14px 9px 0;
    border-bottom: 2px solid var(--borda);
}
.dados td {
    padding: 13px 14px 13px 0;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
    color: var(--tinta);
}
.dados tr:last-child td { border-bottom: 0; }
.dados .mono { font-family: var(--mono); font-size: 13px; }

/* Métricas */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}
.metrica {
    padding: 15px 18px;
    border-radius: var(--raio-p);
    background: var(--carta-alt);
    border: 1px solid var(--borda);
}
.metrica .valor {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 4px;
    letter-spacing: -.03em;
}
.metrica.alerta { background: var(--erro-veu); border-color: #f3b9b2; }
.metrica.alerta .valor { color: var(--erro); }
.metrica.atencao { background: var(--espera-veu); border-color: #f0d492; }
.metrica.atencao .valor { color: var(--espera); }

/* ------------------------------------------------------------------
   Controles
   ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raio-p);
    border: 1.5px solid var(--borda-forte);
    background: var(--carta);
    color: var(--tinta);
    font-family: var(--corpo);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--carta-alt); border-color: var(--tinta-fraca); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primario {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,168,132,.35);
}
.btn.primario:hover { background: var(--verde-tinta); border-color: var(--verde-tinta); }

.btn.perigo { color: var(--erro); border-color: #e6a89f; background: #fff; }
.btn.perigo:hover { background: var(--erro-veu); border-color: var(--erro); }

.btn.pequeno { padding: 7px 13px; font-size: 13.5px; }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 6px;
}
.campo { margin-bottom: 17px; }
.dica { font-size: 13px; color: var(--tinta-media); margin-top: 6px; }

/*
 * Seleção por exclusão, não por lista.
 *
 * Antes eram três tipos listados à mão — e `email` ficou de fora, então
 * o campo de e-mail da tela de entrada aparecia cru enquanto o de senha
 * ao lado estava estilizado. Listar tipos garante que o próximo campo
 * novo apareça quebrado de novo.
 */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]):not([type=button]),
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--carta);
    font-family: var(--corpo);
    font-size: 15px;
    color: var(--tinta);
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #9aa8b0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]):not([type=button]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(0,168,132,.18);
}

/* O navegador pinta o autopreenchimento de amarelo e destrói a
   aparência do campo. Esta é a forma de manter o fundo branco. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--tinta);
    -webkit-box-shadow: 0 0 0 40px var(--carta) inset;
    caret-color: var(--tinta);
}
input.mono { font-family: var(--mono); font-size: 13.5px; }

/* ------------------------------------------------------------------
   Avisos
   ------------------------------------------------------------------ */
.aviso {
    padding: 13px 16px;
    border-radius: var(--raio-p);
    margin-bottom: 20px;
    font-size: 14.5px;
    border: 1px solid;
    border-left-width: 4px;
}
.aviso.ok   { background: var(--ok-veu);     border-color: #a5e6a0; border-left-color: var(--verde); color: #0a5c48; }
.aviso.ruim { background: var(--erro-veu);   border-color: #f3b9b2; border-left-color: #c0392b;      color: #7d221a; }
.aviso.nota { background: var(--espera-veu); border-color: #f0d492; border-left-color: #d99e00;      color: #6b4600; }

/* Segredo */
.segredo {
    font-family: var(--mono);
    font-size: 13.5px;
    background: #0b141a;
    color: #d9fdd3;
    padding: 15px 17px;
    padding-right: 96px;
    border-radius: var(--raio-p);
    word-break: break-all;
    margin: 12px 0;
    position: relative;
    line-height: 1.6;
}
.segredo button {
    position: absolute; top: 10px; right: 10px;
    background: var(--verde);
    border: 0; color: #fff;
    padding: 6px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: var(--corpo);
}
.segredo button:hover { background: #00c39a; }

/* ==================================================================
   CARTÃO DE PAREAMENTO

   O QR do WhatsApp vive ~40 segundos. O anel mostra quanto resta e o
   cartão busca outro sozinho quando acaba.
   ================================================================== */
.pareamento {
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 760px) { .pareamento { grid-template-columns: 1fr; } }

.qr-palco {
    position: relative;
    width: 360px;
    height: 360px;
    display: grid;
    place-items: center;
    /* Branco puro, não a cor de carta: o QR precisa de fundo branco
       de verdade em volta. */
    background: #fff;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    padding: 16px;
}


.qr-img {
    width: 100%; height: auto; max-width: 328px;
    /* Zona quieta: o padrão do QR exige margem branca em volta.
       Sem ela a câmera não acha as bordas do código. */
    padding: 14px;
    /* pixelated: mantém os módulos com borda dura em vez de borrados.
       Leitor de QR erra com serrilhado suavizado. */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 4px;
    transition: opacity .25s;
    background: #fff;

    /* A Evolution gera o QR em AZUL. O leitor do WhatsApp espera preto
       sobre branco — azul tem contraste bem menor e a câmera recusa.
       grayscale + contrast força preto real sem depender do provedor.
       (contrast(4) leva o azul médio para preto e o fundo para branco) */
    filter: grayscale(1) contrast(4);
}
.qr-img.velho { opacity: .22; }

/* Contagem regressiva ABAIXO do código, nunca sobre ele. */
.qr-tempo { width: 360px; max-width: 100%; margin-top: 16px; }

.qr-barra {
    height: 6px;
    background: var(--borda);
    border-radius: 99px;
    overflow: hidden;
}
.qr-barra span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--verde);
    border-radius: 99px;
    transition: width 1s linear, background .3s;
}
.qr-barra span.acabando { background: #d99e00; }

.qr-conta {
    margin-top: 9px;
    text-align: center;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--tinta-media);
    font-variant-numeric: tabular-nums;
}
.qr-conta b { color: var(--tinta); }

.qr-estado {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: var(--carta);
    border-radius: 10px;
    text-align: center;
    padding: 32px;
}
.qr-estado.escondido { display: none; }
.qr-estado .grande {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--tinta);
}

.girando {
    width: 28px; height: 28px;
    border: 3px solid var(--borda);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: girar .8s linear infinite;
    margin: 0 auto 15px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Passos — numerados porque a ordem importa de verdade */
.passos { counter-reset: p; margin: 0; padding: 0; list-style: none; }
.passos li {
    counter-increment: p;
    position: relative;
    padding: 0 0 18px 44px;
    color: var(--tinta-media);
    font-size: 15px;
}
.passos li::before {
    content: counter(p);
    position: absolute; left: 0; top: -2px;
    width: 29px; height: 29px;
    display: grid; place-items: center;
    background: var(--verde);
    color: #fff;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}
.passos li::after {
    content: '';
    position: absolute; left: 14px; top: 33px; bottom: 3px;
    width: 2px; background: var(--borda);
}
.passos li:last-child { padding-bottom: 0; }
.passos li:last-child::after { display: none; }
.passos strong { color: var(--tinta); font-weight: 600; }


.vazio { text-align: center; padding: 52px 24px; color: var(--tinta-media); }
.vazio .grande {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 7px;
}

code {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--fundo);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--borda);
}

@media (max-width: 620px) {
    h1 { font-size: 24px; }
    .qr-palco { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; }
    .qr-img { width: 82%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==================================================================
   BLOCO B — visibilidade
   ================================================================== */

/* Filtros */
.filtros {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
.filtros > div { margin: 0; }
.filtros-acoes { display: flex; gap: 9px; }
@media (max-width: 900px) { .filtros { grid-template-columns: 1fr 1fr; } }

/* Tabelas largas */
.tabela-larga { font-size: 14px; }
.tabela-larga th { padding: 14px 16px 11px; }
.tabela-larga td { padding: 12px 16px; }
.tabela-larga tr.clicavel { cursor: pointer; transition: background .12s; }
.tabela-larga tr.clicavel:hover { background: var(--carta-alt); }

.seta { font-weight: 700; margin-right: 3px; }
.seta.saiu   { color: var(--verde); }
.seta.chegou { color: #3c72b8; }

/* Status — mesma linguagem em toda parte */
.tique {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--corpo);
    white-space: nowrap;
    border: 1px solid transparent;
}
.grande-tique { font-size: 13.5px; padding: 6px 14px; }

.t-queued, .t-processing { background: var(--neutro-veu); color: var(--neutro); border-color: var(--borda-forte); }
.t-retrying              { background: var(--espera-veu); color: var(--espera); border-color: #f0d492; }
.t-sent                  { background: #e3eefb;           color: #1c4f8f;       border-color: #bcd6f2; }
.t-delivered             { background: #dcefe9;           color: #0f6350;       border-color: #a9d9c9; }
.t-read                  { background: var(--ok-veu);     color: var(--ok);     border-color: #a5e6a0; }
.t-received              { background: var(--ok-veu);     color: var(--ok);     border-color: #a5e6a0; }
.t-failed, .t-cancelled  { background: var(--erro-veu);   color: var(--erro);   border-color: #f3b9b2; }
.t-descartado            { background: var(--neutro-veu); color: var(--neutro); border-color: var(--borda-forte); }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 0 4px;
}

.conteudo-texto {
    background: var(--carta-alt);
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ------------------------------------------------------------------
   Conversas
   ------------------------------------------------------------------ */
.lista-contatos { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }

.contato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--raio-p);
    color: var(--tinta);
    font-weight: 400;
    font-size: 13.5px;
}
.contato:hover { background: var(--carta-alt); text-decoration: none; }
.contato.ativo { background: var(--verde-veu); }
.contato-meta { font-family: var(--mono); font-size: 11px; color: var(--tinta-fraca); }

/* Balões — o vocabulário do próprio WhatsApp.
   De um lado o que saiu, do outro o que chegou: a direção da mensagem
   se lê antes de ler o texto. */
.thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px;
    max-height: 62vh;
    overflow-y: auto;
    /* Bege do papel de parede do WhatsApp */
    background: #efeae2;
    border-radius: var(--raio-p);
    padding: 16px;
}

.thread-dia {
    align-self: center;
    background: rgba(255,255,255,.9);
    color: var(--tinta-media);
    font-size: 11.5px;
    font-family: var(--mono);
    padding: 4px 12px;
    border-radius: 99px;
    margin: 8px 0 4px;
    box-shadow: 0 1px 1px rgba(11,20,26,.1);
}

.balao {
    max-width: 74%;
    padding: 8px 11px 6px;
    border-radius: 9px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tinta);
    font-weight: 400;
    box-shadow: 0 1px 1px rgba(11,20,26,.13);
    position: relative;
    display: block;
}
.balao:hover { text-decoration: none; filter: brightness(.97); }
.balao.saiu   { align-self: flex-end;   background: var(--verde-veu); border-top-right-radius: 2px; }
.balao.chegou { align-self: flex-start; background: #fff;             border-top-left-radius: 2px; }

.balao-txt { white-space: pre-wrap; word-break: break-word; }

.balao-midia {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 3px 0;
}
.balao-midia .mono { font-weight: 400; color: var(--tinta-media); font-size: 12px; }

.balao-pe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--tinta-fraca);
    font-family: var(--mono);
}
.balao-pe .tique { padding: 1px 6px; font-size: 10.5px; }

@media (max-width: 900px) {
    .lista-contatos { max-height: 220px; }
    .balao { max-width: 88%; }
}

/* ==================================================================
   Documentação
   ================================================================== */
.docs {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } .docs-menu { display: none; } }

.docs-menu { position: sticky; top: 24px; }
.docs-menu nav { display: flex; flex-direction: column; gap: 1px; }
.docs-menu .rotulo { margin: 16px 0 5px; }
.docs-menu .rotulo:first-child { margin-top: 0; }
.docs-menu a {
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--tinta-media);
    font-weight: 400;
}
.docs-menu a:hover { background: var(--carta); color: var(--tinta); text-decoration: none; }

.docs-corpo { max-width: 760px; }
.docs-corpo section {
    background: var(--carta);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px 30px;
    margin-bottom: 20px;
    scroll-margin-top: 24px;
}
.docs-corpo section > h2:first-child { margin-top: 0; }
.docs-corpo h2 {
    font-size: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--borda);
    margin-bottom: 18px;
}
.docs-corpo h3 {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    margin: 26px 0 10px;
    color: var(--tinta);
}
.docs-corpo p { margin: 0 0 14px; color: var(--tinta-media); }
.docs-corpo p strong { color: var(--tinta); }
.docs-corpo table { margin-bottom: 16px; }
.docs-corpo .aviso { margin: 18px 0; }

/* Blocos de código: escuros, para separar do texto de leitura */
.codigo {
    position: relative;
    background: #0b141a;
    border-radius: var(--raio-p);
    margin: 0 0 16px;
    overflow: hidden;
}
.codigo pre {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    color: #d9fdd3;
    white-space: pre;
}
.codigo button {
    position: absolute; top: 9px; right: 9px;
    background: rgba(255,255,255,.12);
    border: 0; color: #d9fdd3;
    padding: 5px 11px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; cursor: pointer;
    font-family: var(--corpo);
    opacity: 0; transition: opacity .15s;
}
.codigo:hover button { opacity: 1; }
.codigo button:hover { background: var(--verde); color: #fff; }

/* Resposta do servidor: fundo claro, para não competir com o comando */
.codigo.saida { background: var(--carta-alt); border: 1px solid var(--borda); }
.codigo.saida pre { color: var(--tinta); }

.docs-corpo code {
    font-size: 12.5px;
    background: var(--verde-veu);
    border-color: #b7e8ae;
    color: #0a5c48;
}
.codigo code, .dados code { background: none; border: 0; padding: 0; }

/* Diagrama do fluxo */
.diagrama {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 18px 0 22px;
    flex-wrap: wrap;
}
.dg-caixa {
    flex: 1;
    min-width: 140px;
    background: var(--carta-alt);
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    padding: 13px 15px;
    font-weight: 600;
    font-size: 14.5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dg-caixa span { font-weight: 400; font-size: 12px; color: var(--tinta-fraca); font-family: var(--mono); }
.dg-caixa.destaque { background: var(--verde-veu); border-color: #a5e6a0; }
.dg-caixa.destaque span { color: var(--verde-tinta); }
.dg-seta { display: grid; place-items: center; color: var(--tinta-fraca); font-size: 19px; }

/* Primeiros passos */
.passos-inicio { counter-reset: q; }
.passo-inicio {
    counter-increment: q;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--borda);
}
.passo-inicio:last-child { border-bottom: 0; padding-bottom: 0; }
.passo-inicio::before {
    content: counter(q);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--verde);
    color: #fff;
    border-radius: 50%;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 14px;
}
.passo-inicio.feito::before { content: '✓'; background: var(--ok); font-size: 16px; }
.passo-inicio.feito .passo-titulo { color: var(--tinta-fraca); text-decoration: line-through; }
.passo-titulo { font-family: var(--display); font-size: 16.5px; font-weight: 600; margin-bottom: 3px; }
.passo-texto { color: var(--tinta-media); font-size: 14.5px; }

.entrada-logo {
    width: 52px; height: 52px;
    background: var(--verde);
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0,168,132,.35);
}
.entrada-pe {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
    text-align: center;
    font-size: 13px;
    color: var(--tinta-fraca);
}

/* ==================================================================
   Teste de envio
   ================================================================== */
textarea { resize: vertical; min-height: 84px; }

input[type=file] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px dashed var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--carta-alt);
    font-family: var(--corpo);
    font-size: 14px;
    cursor: pointer;
}
input[type=file]:hover { border-color: var(--verde); background: #fff; }

/* Escolha de tipo: cartões, não select. São cinco opções e cada uma
   muda o formulário — vale ver todas de uma vez. */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

.tipo-opcao { margin: 0; cursor: pointer; }
.tipo-opcao input { position: absolute; opacity: 0; pointer-events: none; }

.tipo-corpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1.5px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--carta);
    transition: border-color .15s, background .15s;
}
.tipo-opcao:hover .tipo-corpo { border-color: var(--verde); }
.tipo-opcao input:checked + .tipo-corpo {
    border-color: var(--verde);
    background: var(--verde-veu);
    box-shadow: 0 0 0 3px rgba(0,168,132,.15);
}
.tipo-opcao input:focus-visible + .tipo-corpo { outline: 3px solid var(--verde); outline-offset: 2px; }

.tipo-nome  { font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.tipo-ajuda { font-size: 12px; color: var(--tinta-media); }

.bloco-tipo[hidden] { display: none; }

.separador {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 16px;
    color: var(--tinta-fraca);
    font-size: 13px;
}
.separador::before, .separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borda);
}


/* ==================================================================
   Tela de entrada

   Duas colunas: a marca conta o que o sistema faz — útil para quem
   chegou por um link de recuperação e não lembra do que se trata.
   ================================================================== */
.entrada {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--fundo);
}

.entrada-lado {
    background: linear-gradient(160deg, #005c4b 0%, #008069 55%, #00a884 100%);
    color: #fff;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.entrada-logo {
    width: 50px; height: 50px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 26px;
}

.entrada-titulo {
    font-family: var(--display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 0 0 8px;
    color: #fff;
}

.entrada-frase {
    font-size: 17px;
    color: rgba(255,255,255,.9);
    margin: 0 0 34px;
    max-width: 340px;
    line-height: 1.5;
}

.entrada-lista { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.entrada-lista li {
    position: relative;
    padding: 0 0 14px 26px;
    font-size: 14.5px;
    color: rgba(255,255,255,.82);
    line-height: 1.5;
}
.entrada-lista li::before {
    content: '';
    position: absolute; left: 0; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
}

.entrada-rodape {
    margin: 44px 0 0;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.entrada-caixa {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}

/* O formulário num cartão branco, não solto sobre o cinza: dá borda ao
   que é para preencher e separa do lado da marca. */
.entrada-form {
    width: 100%;
    max-width: 380px;
    background: var(--carta);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11,20,26,.06), 0 10px 32px rgba(11,20,26,.09);
    padding: 36px 34px 32px;
}

.form-titulo {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0 0 6px;
    color: var(--tinta);
}
.form-sub { color: var(--tinta-media); font-size: 14.5px; margin: 0 0 26px; line-height: 1.55; }
.form-link { margin: 20px 0 0; text-align: center; font-size: 14px; }

.btn.largo { width: 100%; padding: 12px 18px; font-size: 15px; }

/* Ver a senha: quem digita 14 caracteres num campo mascarado erra, e
   errar aqui é ficar do lado de fora. */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 72px; }
.ver-senha {
    position: absolute; right: 7px; top: 50%;
    transform: translateY(-50%);
    background: none; border: 0;
    color: var(--tinta-media);
    font-family: var(--corpo);
    font-size: 12.5px; font-weight: 600;
    padding: 6px 10px; cursor: pointer;
    border-radius: 5px;
}
.ver-senha:hover { background: var(--fundo); color: var(--tinta); }

.forca { height: 5px; background: var(--borda); border-radius: 99px; margin-top: 9px; overflow: hidden; }
.forca span {
    display: block; height: 100%; width: 0;
    background: #c0392b;
    border-radius: 99px;
    transition: width .25s, background .25s;
}
.forca span.media { background: #d99e00; }
.forca span.boa   { background: var(--verde); }

.marca-ok {
    width: 52px; height: 52px;
    background: var(--verde-veu);
    color: var(--ok);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.quem {
    font-size: 13.5px;
    color: rgba(255,255,255,.9);
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .entrada { grid-template-columns: 1fr; }
    .entrada-lado { padding: 36px 28px; }
    .entrada-lista, .entrada-rodape { display: none; }
    .entrada-titulo { font-size: 27px; }
    .entrada-frase { margin-bottom: 0; font-size: 15px; }
    .entrada-caixa { padding: 26px 18px 46px; }
    .entrada-form { padding: 28px 22px 26px; box-shadow: var(--sombra); }
}


/* Barra lateral no celular: fora da tela até você abrir. */
@media (max-width: 980px) {
    .lateral {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.3);
    }
    .lateral.aberta { transform: translateX(0); }
    .conteudo { margin-left: 0; }
    .pagina { padding: 70px 18px 60px; }
    .menu-botao { display: flex; }
}