/* =============================================================
   O TRILHO OFICIAL E OS ANÚNCIOS
=============================================================

   Estas duas telas mexem com o dinheiro do cliente: uma mostra o
   que cada mensagem custa, a outra liga e desliga anúncio que gasta
   sozinho. Isso decide o desenho inteiro:

   1. O ESTADO SE LÊ SEM LER. Verde, âmbar e vermelho respondem "está
      tudo bem?" antes da primeira palavra. As cores de estado NÃO
      são o dourado do painel — dourado aqui é acento, não semáforo.

   2. NÚMERO É NÚMERO. Tudo o que se compara em coluna usa
      `tabular-nums`. Valor que dança de largura entre uma linha e
      outra não se compara de relance.

   3. O QUE GASTA PEDE CONFIRMAÇÃO VISUAL. Ligar um anúncio não é um
      botão igual aos outros.
============================================================= */

:root {
    --mt-verde:  #2F8F63;
    --mt-verde-fundo: rgba(47, 143, 99, .12);
    --mt-ambar:  #B57B12;
    --mt-ambar-fundo: rgba(181, 123, 18, .13);
    --mt-vermelho: #C2453D;
    --mt-vermelho-fundo: rgba(194, 69, 61, .12);
    --mt-frio: rgba(140, 150, 160, .14);
}

/* -------------------------------------------------------------
   Cabeçalho de estado: a primeira coisa que a tela responde
------------------------------------------------------------- */
.mt-topo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.mt-placa {
    position: relative;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
    overflow: hidden;
}
/* A faixa da esquerda é o semáforo. Só ela carrega a cor forte —
   o resto do cartão fica quieto para o número ser o que salta. */
.mt-placa::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--mt-frio);
}
.mt-placa.e-bom::before  { background: var(--mt-verde); }
.mt-placa.e-atencao::before { background: var(--mt-ambar); }
.mt-placa.e-ruim::before { background: var(--mt-vermelho); }

.mt-placa-rot {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}
.mt-placa-valor {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.mt-placa-sub {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-faint);
}
.mt-placa.e-bom .mt-placa-valor  { color: var(--mt-verde); }
.mt-placa.e-atencao .mt-placa-valor { color: var(--mt-ambar); }
.mt-placa.e-ruim .mt-placa-valor { color: var(--mt-vermelho); }

/* -------------------------------------------------------------
   Conselho: a frase que ninguém dá
------------------------------------------------------------- */
.mt-conselho {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--r, 14px);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.55;
}
.mt-conselho i { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.mt-conselho b { color: var(--text-strong); }

/* -------------------------------------------------------------
   Conectar
------------------------------------------------------------- */
.mt-conectar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
    text-align: center;
}
/* O BOTÃO TEM O TAMANHO DO QUE ELE DIZ. Numa coluna flex ele
   esticava de ponta a ponta do cartão — uma barra azul de 900px
   para três palavras, que grita mais alto que o texto que explica
   o que vai acontecer ao clicar. */
.mt-conectar > .btn { align-self: center; }
.mt-conectar i.mt-simbolo { font-size: 26px; color: var(--accent); }
.mt-conectar h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}
.mt-conectar p {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-faint);
}
.mt-passos {
    margin: 4px auto 0;
    padding: 0;
    max-width: 52ch;
    list-style: none;
    counter-reset: passo;
    text-align: left;
}
/* O PASSO É UM PARÁGRAFO COM UM NÚMERO AO LADO, não duas colunas.
   Com `display: flex` no <li>, cada <b> dentro do texto virava um
   item do flex e ia parar numa coluna própria — a frase se partia
   em pedaços fora de ordem, e só quando alguém escrevia um passo
   com negrito. Número solto no canto, texto em fluxo normal: o
   negrito, o <code> e o link voltam a ser o que são. */
.mt-passos li {
    counter-increment: passo;
    position: relative;
    padding: 5px 0 5px 28px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}
.mt-passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 10.5px;
    font-weight: 700;
}
.mt-passos li b { color: var(--text); font-weight: 600; }

/* O botão do Facebook usa o azul do Facebook, e não o dourado do
   painel: é um botão que leva para FORA, e a cor de lá é o que faz
   a pessoa reconhecer para onde vai antes de clicar. */
.btn.mo-facebook {
    background: #1877F2;
    border-color: #1877F2;
    color: #fff;
}
.btn.mo-facebook:hover { background: #166FE5; border-color: #166FE5; color: #fff; }
.btn.mo-facebook i { color: #fff; }

.mo-manual {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-faint);
}
.mo-manual summary {
    cursor: pointer;
    list-style: none;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mo-manual summary::-webkit-details-marker { display: none; }
.mo-manual summary:hover { color: var(--text-dim); }

/* -------------------------------------------------------------
   O SEGUNDO CAMINHO: token de conta que já é sua

   Ele estava escondido num <details> chamado "tenho um token e
   prefiro colar", como se fosse gosto. Não é: quando a janela do
   Facebook diz "não é possível compartilhar uma conta do WhatsApp
   Business com um BSP não verificado", ele é o único caminho — e
   quem não souber disso conclui que o painel não funciona.
------------------------------------------------------------- */

.mo-ou {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 460px;
    margin: 18px auto 4px;
    color: var(--text-faint);
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.mo-ou::before, .mo-ou::after {
    content: ''; flex: 1 1 auto; height: 1px; background: var(--border-soft);
}

.mo-manual summary i { margin-right: 6px; }
.mo-manual-conta {
    max-width: 52ch;
    margin: 10px auto 12px;
    font-size: 12px; line-height: 1.6; color: var(--text-faint);
    text-align: center;
}
.mo-manual-conta b { color: var(--text); }

/* -------------------------------------------------------------
   ESCOLHER A CONTA DO WHATSAPP BUSINESS

   Vem antes de escolher o número. Quem tem uma conta de teste e uma
   de verdade — quase todo mundo que já mexeu nisso uma vez —
   conectava na de teste sem saber, porque o servidor pegava a
   primeira da lista e chamava aquilo de decisão.
------------------------------------------------------------- */

.mo-wabas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.mo-waba {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 13px 15px;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: var(--t-fast);
}
.mo-waba:hover { border-color: var(--accent); background: var(--surface-3); }
.mo-waba > i { font-size: 17px; color: var(--mt-verde, #25d366); }
.mo-waba span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mo-waba b { font-size: 13px; color: var(--text-strong); }
.mo-waba small {
    font-size: 11px; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mo-waba em {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 10px; font-style: normal; font-weight: 600;
}
.mo-waba.e-atual { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft)); }

.mo-trocar {
    padding: 0 2px;
    border: 0; background: none;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 11px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer;
}
.mo-trocar:hover { color: var(--accent-hi); }

/* -------------------------------------------------------------
   Lista de templates
------------------------------------------------------------- */
.mt-tpls { display: flex; flex-direction: column; gap: 8px; }

.mt-tpl {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
}
.mt-tpl-txt { min-width: 0; }
.mt-tpl-nome {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-tpl-sub {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-faint);
}
.mt-tpl-acoes { display: flex; gap: 6px; flex: 0 0 auto; }

.mt-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--mt-frio);
    color: var(--text-dim);
}
.mt-selo.e-bom     { background: var(--mt-verde-fundo);    color: var(--mt-verde); }
.mt-selo.e-atencao { background: var(--mt-ambar-fundo);    color: var(--mt-ambar); }
.mt-selo.e-ruim    { background: var(--mt-vermelho-fundo); color: var(--mt-vermelho); }

/* -------------------------------------------------------------
   VÁRIOS NÚMEROS NA MESMA CONTA
   -------------------------------------------------------------
   A lista dos que já disparam pela Ramboo, e — só quando existe
   algum — o catálogo do que a WABA ainda tem sem ativar. */
.mo-numeros-conta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.mo-numeros-titulo {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-faint); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.mo-numeros-titulo-2 { margin-top: 16px; }
.mo-numero-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: var(--r, 14px);
    border: 1px solid var(--border-soft); background: var(--surface-2);
    margin-bottom: 6px;
}
.mo-numero-linha.e-padrao { border-color: var(--mt-verde); background: var(--mt-verde-fundo); }
.mo-numero-txt { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-strong); }
.mo-numero-txt i { color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
.mo-numero-linha.e-padrao .mo-numero-txt i { color: var(--mt-verde); }
.mo-numero-txt span:first-of-type { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------
   QUANTO ESTÁ GASTANDO — visão, não pagamento (a Meta não abre isso)
------------------------------------------------------------- */
.mo-custo-conta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.mo-custo-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mo-custo-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.mo-custo-total { display: block; font-size: 22px; font-weight: 800; color: var(--text-strong); margin-top: 2px; }
.mo-custo-lista { display: flex; flex-direction: column; gap: 6px; }
.mo-custo-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; border-radius: var(--r, 14px);
    border: 1px solid var(--border-soft); background: var(--surface-2);
    font-size: 12.5px; color: var(--text-dim);
}
.mo-custo-linha b { color: var(--text-strong); }

/* -------------------------------------------------------------
   A árvore de anúncios
------------------------------------------------------------- */
.mt-arvore { display: flex; flex-direction: column; gap: 12px; }

.mt-campanha {
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
    overflow: hidden;
}

.mt-linha {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    padding: 13px 15px;
}
.mt-linha + .mt-linha { border-top: 1px solid var(--border-soft); }

/* O recuo conta a hierarquia sem desenhar linha nenhuma: campanha
   na margem, conjunto um passo dentro, anúncio dois. */
.mt-linha.e-conjunto { padding-left: 30px; background: rgba(125, 135, 150, .04); }
.mt-linha.e-anuncio  { padding-left: 46px; }

.mt-linha-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-linha-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-strong);
    min-width: 0;
}
.mt-linha-nome span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-linha.e-conjunto .mt-linha-nome { font-size: 12.5px; font-weight: 500; }
.mt-linha.e-anuncio .mt-linha-nome  { font-size: 12.5px; font-weight: 400; color: var(--text); }

.mt-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 11.5px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.mt-numeros b { color: var(--text-dim); font-weight: 600; }
/* O custo por lead é o número que este painel entrega e o
   Gerenciador não tem — ele merece destaque, os outros não. */
.mt-numeros .e-destaque b { color: var(--accent-hi); }

.mt-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* O interruptor. Anúncio que gasta dinheiro não pode ter o mesmo
   botão de "ver detalhes". */
.mt-chave {
    position: relative;
    width: 42px; height: 24px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-4);
    cursor: pointer;
    transition: var(--t-fast);
    padding: 0;
}
.mt-chave::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: var(--t-fast);
}
.mt-chave.e-ligado { background: var(--mt-verde-fundo); border-color: var(--mt-verde); }
.mt-chave.e-ligado::after { left: 21px; background: var(--mt-verde); }
/* LIGADO, MAS NÃO NO AR.
   O interruptor mostra o que foi PEDIDO; o selo ao lado mostra o que
   VALE. Quando os dois divergem — anúncio ligado dentro de um
   conjunto pausado — a chave verde ao lado de "o conjunto está
   pausado" se contradiz. Aqui ela fica âmbar e vazada: ligada, sim,
   mas segurada por outra coisa. */
.mt-chave.e-preso {
    background: var(--mt-ambar-fundo);
    border-color: var(--mt-ambar);
    border-style: dashed;
}
.mt-chave.e-preso::after { background: var(--mt-ambar); }

.mt-chave:disabled { opacity: .5; cursor: not-allowed; }
.mt-chave:focus-visible { box-shadow: var(--ring); }

.mt-orc {
    width: 92px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 10px);
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.mt-orc:focus { border-color: var(--accent-line); }

/* -------------------------------------------------------------
   A barra de estado: sempre visível, sempre com saída
------------------------------------------------------------- */
/* `ma-estado` e não `ma-barra`: `.ma-barra` já era a BARRA DO
   GRÁFICO, pintada com o azul de acento. Reusar o nome deixou a
   pílula de estado com fundo azul de barra de gráfico — colisão no
   meu próprio arquivo, que é o tipo que ninguém procura. */
.ma-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    flex: 0 0 auto;
}
.ma-estado-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ma-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-full);
    background: var(--mt-frio);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.ma-pill i { font-size: 9.5px; }
.ma-pill.e-bom { background: var(--mt-verde-fundo); color: var(--mt-verde); }
.ma-pill.e-off { background: var(--mt-frio); color: var(--text-faint); }
.ma-pill.e-alerta { background: var(--mt-ambar-fundo); color: var(--mt-ambar); }

/* -------------------------------------------------------------
   O esqueleto de carregamento
   -------------------------------------------------------------
   Existe porque uma FRASE de carregamento é indistinguível do
   texto estático da página — e foi assim que a tela conseguiu
   ficar parada em "Lendo seus anúncios…" sem que ninguém, nem eu,
   soubesse dizer se ela estava viva. O esqueleto se move; texto
   parado, não.
------------------------------------------------------------- */
.ma-esqueleto { display: flex; flex-direction: column; gap: 10px; }

.ma-osso {
    border-radius: var(--r, 14px);
    background: linear-gradient(90deg,
        var(--surface-2) 0%, var(--surface-3) 40%,
        var(--surface-2) 80%);
    background-size: 240% 100%;
    animation: ma-brilho 1.4s ease-in-out infinite;
}
@keyframes ma-brilho {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ma-osso { animation: none; opacity: .6; }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------
   Criar anúncio: o bloco que se abre
   -------------------------------------------------------------
   O `<details>` nativo vem com um triângulo do sistema operacional
   que não combina com nada do painel e muda de desenho por
   navegador. Aqui ele vira um cabeçalho de cartão de verdade, com
   um chevron desenhado que gira ao abrir.
------------------------------------------------------------- */
details.ma-criar { padding: 0; overflow: hidden; }

details.ma-criar > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -.01em;
    transition: var(--t-fast);
    /* Sem isto o Safari desenha o triângulo dele do mesmo jeito. */
    -webkit-appearance: none;
}
details.ma-criar > summary::-webkit-details-marker { display: none; }
details.ma-criar > summary::marker { content: ''; }
details.ma-criar > summary:hover { background: var(--surface-2); }
details.ma-criar > summary:focus-visible { box-shadow: var(--ring); border-radius: var(--r, 14px); }

/* O chevron desenhado, à direita e girando. À direita porque é
   onde a mão procura o "abre" numa linha larga — o ícone da
   esquerda é identidade, não controle. */
details.ma-criar > summary::after {
    content: '';
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s var(--ease-out, ease);
}
details.ma-criar[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
details.ma-criar[open] > summary {
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
}
details.ma-criar > div { padding: 16px 18px 18px; }

/* -------------------------------------------------------------
   Filtros e período
------------------------------------------------------------- */
.ma-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.ma-periodos { display: flex; flex-wrap: wrap; gap: 4px; }

/* A MINISSÉRIE NA LINHA DO ANÚNCIO. Some no celular: ali a linha já
   quebra em três, e um risco de 88px a mais só empurra o nome para
   uma quarta. */
.ma-mini { display: inline-flex; color: var(--text-faint); opacity: .8; }
.ma-mini .mi-spark { width: 62px; height: 18px; }
@media (max-width: 720px) { .ma-mini { display: none; } }
.ma-filtros-dir { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* A conta de anúncio é uma linha clicável inteira, não uma caixinha
   de 16px perdida na direita. */
/* A CAIXA FICA NA DIREITA, sempre. No celular a linha quebrava e a
   caixinha caía sozinha embaixo do texto, longe da conta que ela
   marca — dá para errar de conta assim. O texto encolhe; a caixa,
   não. */
.mt-tpl.ma-conta { cursor: pointer; }
.mt-tpl.ma-conta .mt-tpl-nome { overflow-wrap: anywhere; }
.mt-tpl.ma-conta .mt-tpl-sub { flex-wrap: wrap; }
.mt-tpl.ma-conta input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.mt-tpl.ma-conta:hover { border-color: var(--border); background: var(--surface-3); }

.mt-conectar small { font-size: 11.5px; color: var(--text-faint); }

/* AS CONTAS AGRUPADAS PELO PORTFÓLIO a que pertencem. Quem cuida de
   mais de um negócio vê "Ótica Sol" e "Ótica Sol - Teste" na mesma
   lista; sem dizer de qual portfólio cada uma é, escolher a certa
   vira adivinhação. O cabeçalho do grupo é rótulo, não cartão: um
   filete em cima, nada de moldura em volta. */
.ma-grupos { display: flex; flex-direction: column; gap: 18px; }
.ma-grupo { display: flex; flex-direction: column; gap: 6px; }

.ma-grupo-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 2px 7px;
    border-bottom: 1px solid var(--border-subtle, var(--border));
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}
.ma-grupo-topo i { font-size: 10.5px; color: var(--text-faint); }
.ma-grupo-topo span { min-width: 0; overflow-wrap: anywhere; }
.ma-grupo-topo em {
    margin-left: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-faint);
    white-space: nowrap;
}

/* O id da conta em fonte de código: ele existe para ser CONFERIDO
   contra o Gerenciador de Anúncios, e dois nomes iguais só se
   separam por ele. */
.ma-id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    color: var(--text-faint);
}

.ma-rodape {
    margin: 2px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, var(--border));
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-faint);
    text-align: center;
}
.ma-rodape i { margin-right: 4px; }

@media (max-width: 520px) {
    .ma-grupo-topo em { margin-left: 0; width: 100%; }
}

.ma-periodo {
    padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: var(--t-fast);
}
.ma-periodo:hover { background: var(--surface-3); color: var(--text); }
.ma-periodo.e-ativo {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-weight: 600;
}

.mt-busca-caixa {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-3);
    min-width: 0;
    flex: 0 1 240px;
}
.mt-busca-caixa i { color: var(--text-faint); font-size: 11.5px; }
.mt-busca-caixa input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0; background: none; outline: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12.5px;
}

/* -------------------------------------------------------------
   O gasto por dia
   -------------------------------------------------------------
   Uma série só: sem legenda a montar e sem paleta categórica a
   validar. A cor diz "isto é a barra"; o texto vive em tom de
   texto, nunca na cor da barra.

   Em HTML e não em SVG porque são catorze barras — um `div` com
   altura em porcentagem não tem viewBox para estourar nem rótulo
   para colidir.
------------------------------------------------------------- */
.ma-grafico {
    margin: 0 0 16px;
    padding: 14px 16px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
}
.ma-grafico figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.ma-grafico figcaption span {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    font-size: 11.5px;
}

.ma-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 96px;
}
.ma-barra-caixa {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
    /* A caixa inteira é o alvo do toque, e não só a barra: num dia
       de gasto baixo a barra tem três pixels de altura. */
    cursor: default;
}
.ma-barra {
    /* Ponta arredondada só em cima: embaixo ela encosta na linha de
       base, e canto arredondado ali daria a impressão de flutuar. */
    border-radius: 4px 4px 0 0;
    background: var(--accent);
    opacity: .85;
    transition: var(--t-fast);
    min-height: 2px;
}
.ma-barra-caixa:hover .ma-barra { opacity: 1; }
.ma-barra-dia {
    display: block;
    margin-top: 6px;
    font-size: 9.5px;
    color: var(--text-faint);
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   O criativo e o detalhe
------------------------------------------------------------- */
.ma-thumb {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    border: 1px solid var(--border-soft);
    background: var(--surface-3);
}
.ma-thumb.e-vazia {
    display: grid;
    place-items: center;
    color: var(--text-faint);
    font-size: 12px;
}

.mt-linha.e-anuncio {
    grid-template-columns: 34px 1fr auto;
    gap: 10px 12px;
}
.mt-linha.e-aberto { background: var(--accent-soft); }

.ma-detalhe {
    padding: 14px 15px 16px 46px;
    border-top: 1px solid var(--border-soft);
    background: rgba(125, 135, 150, .05);
}

.ma-abas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ma-aba {
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 11.5px;
    cursor: pointer;
    transition: var(--t-fast);
}
.ma-aba:hover { background: var(--surface-3); color: var(--text); }
.ma-aba.e-ativa {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-hi);
}

/* Frequência alta e retorno abaixo de 1 são avisos, não enfeites. */
.mt-numeros .e-alerta b { color: var(--mt-ambar); }

/* -------------------------------------------------------------
   O retorno: a tabela que só existe aqui
------------------------------------------------------------- */
.mt-tabela-caixa { overflow-x: auto; }
table.mt-tabela {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
}
table.mt-tabela th {
    text-align: right;
    padding: 0 10px 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}
table.mt-tabela th:first-child,
table.mt-tabela td:first-child { text-align: left; }
table.mt-tabela td {
    padding: 11px 10px 11px 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    white-space: nowrap;
}
table.mt-tabela td:first-child {
    color: var(--text-strong);
    font-weight: 500;
    white-space: normal;
    min-width: 160px;
}
table.mt-tabela tr:last-child td { border-bottom: 0; }

.mt-retorno { font-weight: 700; }
.mt-retorno.e-bom  { color: var(--mt-verde); }
.mt-retorno.e-ruim { color: var(--mt-vermelho); }

/* -------------------------------------------------------------
   Formulário de anúncio
------------------------------------------------------------- */
.mt-form { display: flex; flex-direction: column; gap: 14px; }
.mt-dupla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.mt-campo { display: flex; flex-direction: column; gap: 5px; }
.mt-campo > label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
}
.mt-campo small { font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.mt-campo input, .mt-campo select, .mt-campo textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 10px);
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
}
.mt-campo textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.mt-campo input:focus, .mt-campo select:focus, .mt-campo textarea:focus {
    border-color: var(--accent-line);
}

/* A prévia da mensagem, do jeito que ela chega */
.mt-previa {
    padding: 14px;
    border-radius: var(--r, 14px);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
}
.mt-previa-bolha {
    max-width: 320px;
    padding: 9px 12px;
    border-radius: 14px 14px 14px 4px;
    background: var(--surface-solid, #1b2029);
    border: 1px solid var(--border-soft);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.mt-previa-gelos { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; max-width: 320px; }
.mt-previa-gelo {
    padding: 7px 10px;
    border: 1px solid var(--accent-line);
    border-radius: 9px;
    text-align: center;
    font-size: 12.5px;
    color: var(--accent-hi);
    background: var(--surface-solid, #1b2029);
}

/* -------------------------------------------------------------
   "A CONVERSA" — como o anúncio de WhatsApp começa
   -------------------------------------------------------------
   Três jeitos (texto solto / botões / abrir um Flow), num seletor só,
   com a prévia parecendo WhatsApp de verdade — é a decisão que mais
   muda o resultado do anúncio, e era a parte mais crua da tela. */
.mn-conversa-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 4px; margin-bottom: 16px;
    border-radius: 14px; background: var(--surface-3);
    border: 1px solid var(--border-soft);
}
.mn-conversa-tab {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 11px; border: 1px solid transparent;
    background: transparent; color: var(--text-faint); cursor: pointer;
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.mn-conversa-tab i { font-size: 16px; }
.mn-conversa-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.mn-conversa-tab.on {
    background: linear-gradient(155deg, rgba(var(--accent-rgb, 88,138,255), .22), rgba(var(--accent-rgb, 88,138,255), .07));
    border-color: var(--accent-line); color: var(--accent-hi);
    box-shadow: 0 4px 16px -6px rgba(var(--accent-rgb, 88,138,255), .5);
}
.mn-conversa-tab.on i { animation: mnTabAceso .4s ease; }
@keyframes mnTabAceso { from { transform: scale(.7) rotate(-15deg); } to { transform: scale(1) rotate(0); } }

.mn-conversa-corpo { animation: mnDesliza .22s ease; }
.mn-conversa-modo { animation: mnDesliza .22s ease; }
@keyframes mnDesliza { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.mt-tripla { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 560px) { .mt-tripla, .mn-conversa-tabs { grid-template-columns: 1fr; } }

.mn-conversa-vazio {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-radius: 12px; background: rgba(var(--warn-rgb, 255,180,60), .08);
    border: 1px dashed rgba(var(--warn-rgb, 255,180,60), .35);
    color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
}
.mn-conversa-vazio i { font-size: 20px; color: var(--warn, #ffb43c); flex-shrink: 0; }

/* A prévia vira uma tela de WhatsApp de verdade: fundo escuro
   pontilhado, bolha verde com raboinho, botões abaixo dela. */
.mt-previa {
    padding: 16px; border-radius: 16px; position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0 / 16px 16px,
        var(--surface-solid, #0c1116);
    border: 1px solid var(--border-soft);
}
.mt-previa-bolha {
    max-width: 320px; padding: 9px 12px 8px; border-radius: 4px 14px 14px 14px;
    background: linear-gradient(155deg, #2a3942, #1f2c33);
    border: 1px solid rgba(255,255,255,.06); box-shadow: 0 3px 10px -4px rgba(0,0,0,.5);
    font-size: 13px; line-height: 1.5; color: #e9edef; white-space: pre-wrap; word-break: break-word;
    position: relative; z-index: 1;
}
.mn-previa-botoes { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; max-width: 320px; position: relative; z-index: 1; }
.mn-previa-botoes span {
    padding: 9px 12px; text-align: center; font-size: 12.5px; font-weight: 600;
    color: #53bdeb; background: linear-gradient(155deg, #2a3942, #1f2c33);
    border-top: 1px solid rgba(255,255,255,.07);
}
.mn-previa-botoes span:first-child { border-radius: 0; }
.mn-previa-botoes span:last-child { border-radius: 0 0 10px 10px; }
.mn-previa-flow { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366 !important; }
.mn-previa-vazio {
    margin-top: 9px; font-size: 11.5px; color: var(--text-faint); line-height: 1.5;
    max-width: 320px; position: relative; z-index: 1;
}

/* O "avançado, recolhido": existia sem UMA linha de CSS — abria como
   um <details> cru do navegador, sem cara nenhuma de Ramboo. */
.mn-avancado {
    margin-top: 6px; border-radius: 14px; border: 1px solid var(--border-soft);
    background: var(--surface-3); overflow: hidden;
}
.mn-avancado > summary {
    display: flex; align-items: center; gap: 9px; padding: 12px 14px;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer;
    list-style: none; user-select: none; transition: color .15s ease, background .15s ease;
}
.mn-avancado > summary::-webkit-details-marker { display: none; }
.mn-avancado > summary:hover { color: var(--text); background: rgba(255,255,255,.03); }
.mn-avancado > summary i { color: var(--accent); width: 14px; text-align: center; transition: transform .2s ease; }
.mn-avancado[open] > summary i { transform: rotate(45deg); }
.mn-avancado > summary ~ * { padding: 0 14px; }
.mn-avancado > summary + * { margin-top: 12px; }
.mn-avancado > :last-child { padding-bottom: 14px; }

/* -------------------------------------------------------------
   Vazio e carregando
------------------------------------------------------------- */
.mt-vazio {
    padding: 28px 18px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.6;
}
.mt-vazio i { display: block; font-size: 26px; margin-bottom: 10px; opacity: .4; }
.mt-vazio strong { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 5px; }

@media (max-width: 720px) {
    .mt-linha { grid-template-columns: 1fr; }
    .mt-linha.e-anuncio { grid-template-columns: 34px 1fr; }
    .ma-detalhe { padding-left: 15px; }
    .ma-filtros { flex-direction: column; align-items: stretch; }
    .ma-filtros-dir { width: 100%; }
    .mt-busca-caixa { flex: 1 1 auto; }
    .ma-barras { height: 72px; }
    .mt-linha.e-conjunto { padding-left: 20px; }
    .mt-linha.e-anuncio  { padding-left: 30px; }
    .mt-acoes { justify-content: flex-end; }
    .mt-tpl { grid-template-columns: 1fr; }
    /* A CONTA DE ANÚNCIO É EXCEÇÃO: o modelo de mensagem desce para
       uma coluna porque o texto dele é comprido, mas aqui a caixa
       que marca a conta cairia sozinha embaixo, longe da conta que
       ela marca — e marcar a conta errada é mexer no anúncio de
       outro cliente. Ela fica na direita do nome, sempre. */
    .mt-tpl.ma-conta { grid-template-columns: 1fr auto; }
    .mt-tpl-acoes { justify-content: flex-end; }
}

/* -------------------------------------------------------------
   O CABEÇALHO DA CONEXÃO NÃO CORTA O NÚMERO

   `.mt-linha` é `1fr auto`: a coluna dos botões pega o que precisa
   e o texto fica com o resto. Numa lista de anúncios isso está
   certo — o nome pode ser cortado. Aqui não: a coluna da esquerda é
   O NÚMERO QUE ESTÁ CONECTADO, o único fato que esta tela existe
   para mostrar, e com quatro botões ao lado ele virava "+55 11 …".

   Só aqui, e por flex em vez de grid: cabendo, fica tudo numa
   linha; não cabendo, os botões descem inteiros em vez de espremer
   o número.
------------------------------------------------------------- */

#moConexao > .mt-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#moConexao > .mt-linha > .mt-linha-txt { flex: 1 1 240px; }
#moConexao > .mt-linha > .mt-acoes { flex-wrap: wrap; justify-content: flex-end; }
#moConexao > .mt-linha .mt-linha-nome span { overflow: visible; }

/* -------------------------------------------------------------
   AS PORTAS ENTRE "EU USO" E "EU VENDO"

   Recado para o dono, não para o cliente dele. Fica recolhido: quem
   só quer conectar o próprio WhatsApp não precisa saber que existe
   análise de aplicativo.

   Verde, vermelho e cinza têm significados diferentes de propósito.
   O cinza não é "mais ou menos": é "isto eu não consigo ler". Pintar
   de verde o que não sei seria pior que não mostrar — o dono
   confiaria e continuaria sem entender por que o cliente não entra.
------------------------------------------------------------- */

.mo-vender {
    margin-top: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mo-vender > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 15px;
    font-size: 12.5px; font-weight: 600; color: var(--text);
    cursor: pointer; list-style: none;
}
.mo-vender > summary::-webkit-details-marker { display: none; }
.mo-vender > summary i { color: var(--text-faint); font-size: 12px; }
.mo-vender[open] > summary { border-bottom: 1px solid var(--border-soft); }
.mo-vender > div { padding: 14px 15px; }

.mo-pronto-recado {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
    font-size: 12.5px; line-height: 1.6; color: var(--text);
}
.mo-pronto-recado > i { margin-top: 2px; color: var(--warn); }
.mo-pronto-recado.e-bom {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
}
.mo-pronto-recado.e-bom > i { color: var(--success); }

.mo-portas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mo-portas li { display: flex; align-items: flex-start; gap: 11px; }
.mo-portas li > i { margin-top: 2px; font-size: 13px; }
.mo-portas li.e-aberta > i { color: var(--success); }
.mo-portas li.e-fechada > i { color: var(--danger); }
.mo-portas li.e-incerta > i { color: var(--text-faint); }
.mo-portas strong { display: block; font-size: 12.5px; color: var(--text-strong); }
.mo-portas p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-faint); }

/* Onde resolver fica em tom de instrução, e não de explicação: é a
   linha que a pessoa vai copiar para a barra de endereço. */
.mo-porta-onde {
    margin-top: 5px !important;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-dim) !important;
}

.mo-negocios { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mo-negocios span {
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-3));
    font-size: 10.5px; color: var(--text-dim);
}
.mo-negocios span.e-bom { background: color-mix(in srgb, var(--success) 14%, var(--surface-3)); }

/* Qual porta trava VOCÊ hoje e qual só trava a venda para outra
   pessoa. Misturar as duas foi o que fez o dono concluir que o
   painel não servia nem para ele — quando as portas que o travavam
   eram outras, e mais baratas. */
.mo-porta-so {
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 9.5px; font-style: normal; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase;
    vertical-align: middle;
}

/* -------------------------------------------------------------
   A FALHA DO TOKEN, ESCRITA

   Um aviso que some em três segundos não serve para quem está com
   o painel da Meta aberto noutra aba conferindo. E mostrar o que a
   Meta respondeu ao lado do motivo é o que convence alguém de que
   o problema é outro — a falta disso fez o dono gerar três tokens
   iguais achando que errava a permissão.
------------------------------------------------------------- */

.mo-falha {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: 14px;
    padding: 13px 15px;
    text-align: left;
    border-radius: var(--r);
    border-left: 3px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-2));
}
.mo-falha > i { margin-top: 2px; color: var(--danger); font-size: 15px; }
.mo-falha strong {
    display: block;
    font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--text);
}

.mo-falha-dados { margin-top: 10px; }
.mo-falha-rot {
    display: block; margin-bottom: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-faint);
}
.mo-falha-dados ul {
    margin: 0; padding: 9px 12px;
    list-style: none;
    border-radius: var(--r-sm);
    background: var(--surface-3);
}
.mo-falha-dados li {
    font-size: 11px; line-height: 1.7; color: var(--text-dim);
    word-break: break-word;
}
.mo-falha-dados i { color: var(--text-faint); }

/* O campo dentro do próprio erro.
   Mandar alguém procurar um controle noutro canto da tela é
   trabalho que a tela devia ter feito — e a frase ainda apontava
   "aqui embaixo" com o link acima dela. */
.mo-falha.e-pede-id {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.mo-falha.e-pede-id > i { color: var(--accent); }

.mo-falha-agir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mo-falha-agir input {
    flex: 1 1 200px; min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body); font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.mo-falha-agir input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.mo-falha-agir .btn { flex: 0 0 auto; }

/* Toda tela precisa de porta de saída. A de "escolher o número"
   não tinha nenhuma: conectado numa conta vazia, a pessoa ficava
   presa ali — recarregar a página trazia de volta ao mesmo lugar. */
.mo-saidas {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

/* Número que mora no aplicativo WhatsApp Business.
   Migrar para a Cloud API tira ele do celular — e descobrir isso
   depois de apertar "usar este" é descobrir com o número da
   pessoa fora do ar. */
.mt-tpl.e-no-aplicativo { border-left: 3px solid var(--warn); }
.mo-aviso-app {
    margin: 8px 0 0;
    max-width: 62ch;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}
.mo-aviso-app b { color: var(--warn); }

/* -------------------------------------------------------------
   A CONTA DA META AO LADO DA NOSSA

   Três números e uma frase. A diferença é o que interessa: pequena
   é arredondamento e fuso, grande quer dizer que alguma coisa não
   está sendo contada — e é melhor descobrir agora do que na fatura.
------------------------------------------------------------- */

.mo-conferencia { margin-top: 14px; }

.mo-conf-linha {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px;
    border-radius: var(--r);
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 7%, var(--surface-2));
}
.mo-conf-linha.e-difere {
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}
.mo-conf-linha > i { margin-top: 3px; font-size: 15px; color: var(--success); }
.mo-conf-linha.e-difere > i { color: var(--warn); }

.mo-conf-nums {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    font-size: 11.5px; color: var(--text-faint);
}
.mo-conf-nums b {
    font-size: 14px; color: var(--text-strong); font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 5px;
}
.mo-conf-dif b, .mo-conf-dif { color: var(--warn); }

/* O dolar na conferencia e procedencia, nao resultado: ele nao
   compete com os dois numeros que estao sendo comparados. */
.mo-conf-usd {
    flex-basis: 100%;
    font-size: 10.5px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* A coluna em dolar da tabela de gasto: presente, e recuada. */
.mt-tabela td.e-fraca {
    color: var(--text-faint);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* QUANDO A COTACAO E DE VERDADE, A FAIXA DIZ ISSO.
   Ela chamava de "estimativa" um numero que tinha acabado de vir
   do Banco Central -- e quem desconfia de um numero desconfia do
   painel inteiro. */
.mo-cambio.e-vivo .mo-cambio-rot { color: var(--mt-verde); }
.mo-cambio.e-vivo .mo-cambio-rot i { margin-right: 5px; font-size: 10px; }

.mo-conf-linha p {
    flex: 1 1 100%;
    margin: 7px 0 0;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}

/* =============================================================
   O CAMINHO ATÉ O PRIMEIRO ENVIO

   Os passos precisam ler como um CAMINHO, não como uma lista de
   pendências. A diferença é o trilho que liga um ao outro: sem
   ele são cinco avisos soltos, e cinco avisos soltos não contam
   que existe uma ordem — que é justamente a informação que
   faltava nesta tela.
============================================================= */

.mk-topo { margin-bottom: 16px; }

.mk-titulo {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 8px;
}
.mk-titulo strong {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.mk-titulo span { font-size: 11.5px; color: var(--text-faint); }

.mk-barra {
    height: 4px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    overflow: hidden;
}
.mk-barra span {
    display: block; height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--success) 70%, var(--accent)), var(--success));
    transition: width .4s ease;
}

.mk-passos {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
}

.mk-passo {
    position: relative;
    display: flex; gap: 13px;
    padding: 0 0 18px 0;
}
.mk-passo:last-child { padding-bottom: 0; }

/* O TRILHO. Ele desce da marca de um passo até a do seguinte, e é
   o que transforma cinco avisos numa sequência. */
.mk-passo::before {
    content: '';
    position: absolute;
    left: 13px; top: 28px; bottom: 4px;
    width: 2px;
    background: var(--border-soft);
}
.mk-passo:last-child::before { display: none; }
.mk-passo.e-feito::before { background: color-mix(in srgb, var(--success) 45%, transparent); }

.mk-marca {
    position: relative; z-index: 1;
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--r-full);
    border: 2px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mk-passo.e-feito .mk-marca {
    border-color: transparent;
    background: var(--success);
    color: #fff;
}
/* O passo ATUAL é o único com anel: é ele que a pessoa tem de
   fazer, e mais de um destaque ao mesmo tempo não destaca nada. */
.mk-passo.e-agora .mk-marca {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.mk-corpo { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.mk-corpo strong {
    display: block;
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.mk-passo.e-depois .mk-corpo strong { color: var(--text-faint); font-weight: 500; }
.mk-corpo p {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}
.mk-acao { margin-top: 10px; }

/* Os passos já feitos recuam: eles são histórico, e histórico não
   disputa atenção com o que falta fazer. */
.mk-passo.e-feito .mk-corpo p { opacity: .75; }

/* -------------------------------------------------------------
   TUDO PRONTO
------------------------------------------------------------- */

.mk-pronto {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 17px;
    border-radius: var(--r);
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
}
.mk-pronto > i { margin-top: 2px; font-size: 17px; color: var(--success); }
.mk-pronto strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px; color: var(--text-strong);
}
.mk-pronto p {
    margin: 5px 0 0; max-width: 64ch;
    font-size: 12px; line-height: 1.6; color: var(--text-faint);
}
.mk-pronto p b { color: var(--text); }

/* NAO E FLEX, de proposito. Com `display:flex` os <b> do meio da
   frase viram itens de flex e a frase quebra em colunas: "38
   pessoa(s)" de um lado, o resto do outro. Ja aconteceu antes
   neste projeto, com a lista de passos. Texto corrido com um
   icone dentro e texto corrido -- o icone entra na linha. */
.mk-janela {
    margin-top: 10px !important;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
}
.mk-janela i { margin-right: 6px; color: var(--accent); font-size: 11px; }
.mk-janela b { color: var(--accent-hi); }

.mk-rever { margin-top: 14px; }
.mk-rever > summary {
    font-size: 11.5px; color: var(--text-faint);
    cursor: pointer; list-style: none;
    text-decoration: underline; text-underline-offset: 3px;
}
.mk-rever > summary::-webkit-details-marker { display: none; }
.mk-rever[open] > summary { margin-bottom: 14px; }
.mk-passos.e-compacta .mk-passo { padding-bottom: 12px; }

/* -------------------------------------------------------------
   O TESTE

   O único botão desta tela que responde "funciona?". Todo o resto
   é estado, e estado não prova entrega.
------------------------------------------------------------- */

.mk-teste {
    padding: 15px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.mk-teste-rodape {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-top: 14px;
}
.mk-teste-rodape span {
    flex: 1 1 200px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}

.mk-resultado {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: var(--r);
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.mk-resultado.e-ruim {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}
.mk-resultado > i { margin-top: 2px; font-size: 15px; color: var(--success); }
.mk-resultado.e-ruim > i { color: var(--danger); }
.mk-resultado strong { display: block; font-size: 13px; color: var(--text-strong); }
.mk-resultado p {
    margin: 4px 0 0; max-width: 62ch;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}
.mk-resultado small {
    display: block; margin-top: 5px;
    font-size: 11px; color: var(--text-faint);
}

/* O identificador é o que liga este envio ao aviso de entrega que
   vem depois. Ele precisa ser copiável, não decorativo. */
.mk-wamid {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 9px !important;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
}
.mk-wamid span {
    font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-faint);
}
.mk-wamid code {
    font-size: 11px; color: var(--text-dim);
    word-break: break-all;
    user-select: all;
}

@media (max-width: 720px) {
    .mk-teste-rodape .btn { width: 100%; justify-content: center; }
    .mk-passo { gap: 11px; }
}

/* -------------------------------------------------------------
   O QUE CADA VARIÁVEL DO TEMPLATE É

   O corpo aceita {{1}}, {{2}} e a tela não perguntava o que cada
   um significa. O exemplo que ia para a Meta era a string literal
   "exemplo 1" — e o revisor dela julga o template PELO EXEMPLO.
   "Olá exemplo 1" é um pedido de recusa.
------------------------------------------------------------- */

.mo-vars {
    margin-top: 14px;
    padding: 14px 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.mo-vars-topo { margin-bottom: 12px; }
.mo-vars-topo strong {
    display: block;
    font-size: 12.5px; font-weight: 600; color: var(--text-strong);
}
.mo-vars-topo span {
    display: block; margin-top: 2px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}

.mo-vars-aviso {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    font-size: 11.5px; line-height: 1.55; color: var(--text-faint);
}
.mo-vars-aviso i { margin-top: 2px; color: var(--warn); }

/* Uma linha por variável: o número à esquerda ancora a leitura,
   porque é ele que aparece no texto logo acima. */
.mo-var {
    display: grid;
    grid-template-columns: 54px 1fr 1fr;
    align-items: end;
    gap: 10px;
}
.mo-var + .mo-var { margin-top: 10px; }
.mo-var .mt-campo { margin: 0; }

.mo-var-n {
    padding: 9px 0;
    font-size: 12px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .mo-var { grid-template-columns: 1fr; gap: 8px; }
    .mo-var-n { padding: 0; }
    .mo-var + .mo-var {
        margin-top: 14px; padding-top: 14px;
        border-top: 1px solid var(--border-soft);
    }
}

/* =============================================================
   CRIAR UM MODELO — o assistente

   Mesma estrutura do Gerenciador da Meta, porque a estrutura dela
   é a estrutura do produto e mudar a ordem só faria quem já
   conhece tropeçar. O que muda é o que ela não conta: o preço na
   hora de escolher a categoria, o que cada variável é, e a
   conferência rodando enquanto se escreve.
============================================================= */

.mm-trilha {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 18px;
    padding: 5px;
    border-radius: var(--r-full);
    background: var(--surface-2);
}
.mm-etapa {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 14px;
    border: 0; border-radius: var(--r-full);
    background: transparent;
    color: var(--text-faint);
    font-family: var(--font-body);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}
.mm-etapa:disabled { opacity: .45; cursor: not-allowed; }
.mm-etapa:not(:disabled):hover { color: var(--text); }
.mm-etapa.e-agora { background: var(--surface); color: var(--text-strong); box-shadow: var(--sh-sm); }
.mm-etapa.e-feita { color: var(--success); }

.mm-etapa-n {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    font-size: 10.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mm-etapa.e-agora .mm-etapa-n { background: var(--accent); color: var(--accent-ink); }
.mm-etapa.e-feita .mm-etapa-n { background: var(--success); color: #fff; }

/* A MESA: o editor à esquerda, a prévia à direita e sempre à
   vista. Ninguém escreve bem o que não vê. */
.mm-mesa {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
}
.mm-lado { min-width: 0; }

.mm-bloco { margin-bottom: 20px; }
.mm-bloco h4 {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.mm-op {
    font-size: 10px; font-weight: 500; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-faint);
}
.mm-ajuda {
    margin: 0 0 12px; max-width: 62ch;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}

/* -------------------------------------------------------------
   AS CATEGORIAS — com o preço, que é o que a Meta não mostra
------------------------------------------------------------- */

/* AS TRES NUMA LINHA SO.
   Com 170px de minimo elas caem 2 + 1 na coluna do editor, e a
   terceira sozinha numa fileira parece uma opcao de segunda
   classe -- justamente a autenticacao, que e a que menos gente
   conhece. Em 150px as tres cabem lado a lado e comparam-se pelo
   preco, que e o ponto. */
.mm-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.mm-cat {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: var(--t-fast);
}
.mm-cat:hover { border-color: var(--border); transform: translateY(-1px); }
.mm-cat.e-ativa {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.mm-cat-topo { display: flex; align-items: center; gap: 8px; }
.mm-cat-topo i { font-size: 13px; color: var(--text-faint); }
.mm-cat.e-ativa .mm-cat-topo i { color: var(--accent); }
.mm-cat-topo b { font-size: 13.5px; color: var(--text-strong); }

/* O PREÇO É O PROTAGONISTA. É a informação que muda a escolha, e
   a única que a tela da Meta esconde. */
/* O PAR: real grande, dólar pequeno.
   Estava ao contrário -- o dólar em corpo grande e o real
   espremido ao lado. Quem aprova a campanha decide em real; o
   dólar é a origem do número, e origem tem tamanho de rodapé. */
.mm-par { display: flex; flex-direction: column; gap: 1px; }
.mm-par b {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700; line-height: 1.15;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.mm-par em {
    font-size: 10px; font-style: normal; font-weight: 500;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.mm-cat-preco {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700; color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.mm-cat-preco em {
    display: block;
    font-size: 10px; font-style: normal; font-weight: 500;
    color: var(--text-faint);
}
.mm-cat-conta { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

.mm-cat-selo {
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--success);
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
}
.mm-cat-selo.e-cobra {
    background: color-mix(in srgb, var(--warn) 16%, transparent);
    color: var(--warn);
}

.mm-cuidado {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 12px 0 0;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}
.mm-cuidado i { margin-top: 2px; color: var(--accent); }

/* -------------------------------------------------------------
   FORMATO, CHIPS E BOTÕES
------------------------------------------------------------- */

.mm-tipos { display: flex; flex-direction: column; gap: 8px; }
.mm-tipo {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: var(--t-fast);
}
.mm-tipo.e-ativo { border-color: var(--accent); }
.mm-tipo > i { margin-top: 2px; font-size: 15px; color: var(--text-faint); }
.mm-tipo.e-ativo > i { color: var(--accent); }
.mm-tipo span { display: flex; flex-direction: column; gap: 2px; }
.mm-tipo b { font-size: 13px; color: var(--text-strong); }
.mm-tipo small { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--text-faint);
    font-family: var(--font-body);
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}
.mm-chip i { font-size: 10px; }
.mm-chip:hover { color: var(--text); }
.mm-chip.e-ativo {
    background: var(--accent); color: var(--accent-ink); border-color: transparent;
}

.mm-inserir {
    padding: 0; margin-right: 10px;
    border: 0; background: none;
    color: var(--accent);
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}

.mm-sem-botao p { margin: 0 0 10px; font-size: 11.5px; color: var(--text-faint); }
.mm-botoes { display: flex; flex-direction: column; gap: 10px; }
.mm-botao {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    padding: 12px 38px 12px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mm-botao .mt-campo { margin: 0; }

/* O BOTÃO DE RECUSA.
   Ele se explica na hora em que é escolhido, e não numa ajuda
   escondida: é o único tipo de botão que faz algo sozinho depois
   que a mensagem sai, e quem monta o modelo precisa saber disso
   antes de mandar para a revisão da Meta. */
.mm-nota-saida {
    grid-column: 1 / -1;
    display: flex; align-items: flex-start; gap: 8px;
    margin: 2px 0 0;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--mt-verde-fundo);
    color: var(--text-dim);
    font-size: 11.5px; line-height: 1.5;
}
.mm-nota-saida i { margin-top: 2px; color: var(--mt-verde); font-size: 11px; }

/* O ATALHO.
   A Meta põe isto como uma caixinha marcável em toda promoção, e
   não como uma opção dentro de um menu — porque é o botão que
   evita bloqueio. Aqui ele tem o mesmo peso: uma faixa que se lê
   sem procurar. */
.mm-atalho-saida {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--r);
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.mm-atalho-saida:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.mm-atalho-saida > i {
    flex: none;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 12px;
}
.mm-atalho-saida span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-atalho-saida b { font-size: 12.5px; font-weight: 650; }
.mm-atalho-saida em {
    font-style: normal;
    font-size: 11px; line-height: 1.45;
    color: var(--text-faint);
}
.mm-tirar {
    position: absolute; top: 10px; right: 10px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}
.mm-tirar:hover { background: var(--surface-3); color: var(--danger); }

/* -------------------------------------------------------------
   AS VARIÁVEIS
------------------------------------------------------------- */

.mm-vars {
    margin-top: 14px;
    padding: 14px 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mm-vars-topo { margin-bottom: 12px; }
.mm-vars-topo strong {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--text-strong);
}
.mm-vars-topo span {
    display: block; margin-top: 2px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}
.mm-var {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    align-items: end; gap: 10px;
}
.mm-var + .mm-var { margin-top: 10px; }
.mm-var .mt-campo { margin: 0; }
.mm-var-n {
    padding: 9px 0;
    font-size: 12px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   A PRÉVIA — a mensagem como ela chega
------------------------------------------------------------- */

.mm-previa-caixa { position: sticky; top: 14px; }
.mm-previa-rot {
    display: block; margin-bottom: 9px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-faint);
}

/* O fundo do WhatsApp, sem imitar a textura dele: um tom escuro e
   quente que faz a bolha ler como bolha, e não como mais um
   cartão do painel. */
.mm-fone {
    padding: 16px 14px;
    border-radius: var(--r);
    background: color-mix(in srgb, #0b141a 88%, var(--surface-2));
    border: 1px solid var(--border-soft);
}

.mm-bolha {
    position: relative;
    max-width: 100%;
    padding: 8px 10px 6px;
    border-radius: 9px 9px 9px 2px;
    background: #202c33;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.mm-bolha-midia {
    display: grid; place-items: center; gap: 6px;
    height: 104px;
    margin: -2px -4px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: rgba(233, 237, 239, .5);
    font-size: 11px;
}
.mm-bolha-midia i { font-size: 20px; }

.mm-bolha-titulo {
    margin-bottom: 4px;
    font-size: 13px; font-weight: 700; color: #e9edef;
    line-height: 1.35;
}
.mm-bolha-corpo {
    font-size: 13px; line-height: 1.45; color: #e9edef;
    white-space: pre-wrap; word-break: break-word;
}
.mm-bolha-corpo.e-vazia { color: rgba(233, 237, 239, .38); font-style: italic; }

/* A variável já preenchida pelo exemplo. Marcada porque é o que o
   revisor da Meta vai ler — e o que vai variar por pessoa. */
.mm-bolha-corpo mark {
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(0, 168, 132, .28);
    color: #d7fbe8;
}

.mm-bolha-rodape {
    margin-top: 6px;
    font-size: 11px; color: rgba(233, 237, 239, .45);
    line-height: 1.4;
}
.mm-bolha-hora {
    margin-top: 3px;
    text-align: right;
    font-size: 10px; color: rgba(233, 237, 239, .45);
}

.mm-bolha-botoes { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.mm-bolha-botao {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px;
    border-radius: 7px;
    background: #202c33;
    color: #53bdeb;
    font-size: 12.5px; font-weight: 500;
}
.mm-bolha-botao i { font-size: 11px; }

.mm-custo {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}
.mm-custo-linha {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.mm-custo-linha span { font-size: 11px; color: var(--text-faint); }
/* No total o par fica alinhado a direita: o real em cima, o dolar
   embaixo, os dois terminando na mesma coluna. */
.mm-custo-linha.e-total { align-items: flex-start; }
.mm-custo-linha .mm-par { align-items: flex-end; text-align: right; }
.mm-custo-linha .mm-par b { font-size: 20px; }
.mm-custo-linha b {
    font-family: var(--font-display);
    font-size: 16px; color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.mm-custo p {
    margin: 7px 0 0;
    font-size: 11px; line-height: 1.5; color: var(--text-faint);
}
.mm-custo p b { color: var(--success); }

/* -------------------------------------------------------------
   O ENVIO
------------------------------------------------------------- */

.mm-ok, .mm-erros {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--r);
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
}
.mm-erros {
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 9%, var(--surface-2));
}
.mm-ok > i { font-size: 16px; color: var(--success); margin-top: 1px; }
.mm-erros > i { font-size: 16px; color: var(--warn); margin-top: 1px; }
.mm-ok strong, .mm-erros strong {
    display: block; font-size: 13px; color: var(--text-strong);
}
.mm-ok p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }
.mm-erros ul { margin: 6px 0 0; padding-left: 18px; }
.mm-erros li { font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }

.mm-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 2px;
    margin: 0;
}
.mm-resumo > div {
    padding: 9px 12px;
    background: var(--surface-2);
}
.mm-resumo dt {
    font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-faint);
}
.mm-resumo dd {
    margin: 2px 0 0;
    font-size: 12.5px; color: var(--text-strong);
}

.mm-rodape {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 900px) {
    .mm-mesa { grid-template-columns: 1fr; }
    /* A prévia sobe: no celular, ver a bolha antes de escrever é o
       que ensina o formato. */
    .mm-previa-caixa { position: static; order: -1; }
    .mm-fone { max-width: 360px; }
}
@media (max-width: 720px) {
    .mm-var { grid-template-columns: 1fr; gap: 8px; }
    .mm-var-n { padding: 0; }
    .mm-var + .mm-var {
        margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft);
    }
    .mm-botao { grid-template-columns: 1fr; }
    /* Só o número na trilha: três rótulos não cabem em 375px sem
       virar reticências, e reticências não orientam ninguém. */
    .mm-etapa span:not(.mm-etapa-n) { display: none; }
    .mm-rodape .btn { flex: 1 1 auto; justify-content: center; }
}

/* -------------------------------------------------------------
   O CÂMBIO, À VISTA E EDITÁVEL

   A Meta tarifa em DÓLAR. Esconder a conversão foi o que deixou
   "R$ 0,0625" passar por preço em real -- e com ele a conta saía
   cinco vezes menor que a verdadeira.
------------------------------------------------------------- */

.mo-cambio {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}
.mo-cambio-rot {
    display: block;
    font-size: 12.5px; font-weight: 600; color: var(--text-strong);
}
.mo-cambio-sub {
    display: block; margin-top: 2px; max-width: 48ch;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}
.mo-cambio-campo { display: flex; align-items: center; gap: 8px; }
.mo-cambio-campo span { font-size: 11.5px; color: var(--text-faint); }
.mo-cambio-campo input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body); font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.mo-cambio-campo input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* O convertido, no assistente, lê como segunda linha -- o dólar é
   o preço, o real é a leitura dele. */
.mm-custo-linha.e-convertido b { font-size: 13px; color: var(--text); }
.mm-custo-cambio {
    margin: 8px 0 0 !important;
    font-size: 10.5px !important; line-height: 1.5;
    color: var(--text-faint);
}


/* =============================================================
   QUEM PEDIU PARA SAIR

   Uma lista de nomes com data e motivo. O que ela precisa fazer
   em um olhar: dizer quantos sao, quantos foram esta semana, e
   dar o desfazer a um clique. Nao e um painel -- e uma conferida.
============================================================= */

.mx-topo {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 14px;
}
.mx-numeros { display: flex; gap: 22px; }
.mx-num { display: flex; flex-direction: column; gap: 1px; }
.mx-num b {
    font-family: var(--font-display);
    font-size: 23px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}
.mx-num span { font-size: 10.5px; color: var(--text-faint); }
/* A semana com saidas ganha cor; a semana limpa nao precisa de nenhuma. */
.mx-num.e-quente b { color: var(--mt-ambar); }

.mx-busca {
    flex: 1; min-width: 180px; max-width: 260px;
    padding: 8px 11px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body); font-size: 12px;
}
.mx-busca:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.mx-alerta {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--mt-ambar-fundo);
    color: var(--text-dim);
    font-size: 11.5px; line-height: 1.55;
}
.mx-alerta i { margin-top: 2px; color: var(--mt-ambar); }
.mx-alerta b { color: var(--text-strong); }

.mx-pessoas { display: flex; flex-direction: column; }
.mx-pessoa {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto 30px;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--border-soft);
}
.mx-pessoa:last-child { border-bottom: 0; }

.mx-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-quem b {
    font-size: 12.5px; font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-fone { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.mx-porque { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-de-onde { font-size: 11px; color: var(--text-dim); }
/* O motivo guarda o que a pessoa escreveu. Ele corta numa linha
   porque e contexto, nao leitura -- o texto inteiro fica no title. */
.mx-porque em {
    font-style: normal;
    font-size: 10.5px; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mx-pessoa time {
    font-size: 11px; color: var(--text-faint);
    white-space: nowrap;
}

.mx-desfazer {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.mx-desfazer:hover { color: var(--accent); border-color: var(--border-soft); }

/* NINGUEM PEDIU PARA SAIR E A MELHOR NOTICIA QUE ESTA TELA DA.
   Escrever "nenhum resultado" aqui faria parecer erro. */
.mx-limpo {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px;
    border-radius: var(--r);
    background: var(--mt-verde-fundo);
}
.mx-limpo > i { margin-top: 2px; color: var(--mt-verde); font-size: 15px; }
.mx-limpo div { display: flex; flex-direction: column; gap: 4px; }
.mx-limpo b { font-size: 13px; color: var(--text-strong); }
.mx-limpo span { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }

.mx-rodape {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 16px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px; line-height: 1.55;
    color: var(--text-faint);
}
.mx-rodape i { margin-top: 2px; }
.mx-rodape b { color: var(--text-dim); }

@media (max-width: 600px) {
    /* No celular a grade de quatro colunas espreme o nome ate
       sobrar uma letra. Duas linhas cabem; quatro colunas nao. */
    .mx-pessoa {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        padding: 12px 2px;
    }
    .mx-porque { grid-column: 1; grid-row: 2; }
    .mx-pessoa time { grid-column: 2; grid-row: 2; justify-self: end; }
    .mx-desfazer { grid-column: 2; grid-row: 1; justify-self: end; }
    .mx-numeros { gap: 18px; }
    .mx-busca { max-width: none; }
}

/* -------------------------------------------------------------
   WHATSAPP OFICIAL EM ABAS

   O número, o nome, a foto e o perfil viraram um bloco só: antes o
   perfil era um cartão três posições abaixo do número que ele
   descreve.
------------------------------------------------------------- */

/* `.ma-secoes` declara display:flex, e isso vence o atributo hidden
   do navegador — sem esta linha a barra apareceria mesmo escondida. */
.mo-secoes[hidden] { display: none; }
.mo-secoes { margin-top: 4px; }

.mo-perfil { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.mo-perfil:empty, .mo-perfil[hidden] { display: none; }

.mo-id { display: flex; align-items: center; gap: 16px; }
.mo-id-txt { flex: 1 1 auto; min-width: 0; }
.mo-id-rot {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-faint);
}
.mo-id-nome {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 2px;
}
.mo-id-nome strong {
    font-family: var(--font-display);
    font-size: 19px; line-height: 1.25;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}
.mo-id-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mo-arquivo { cursor: pointer; }

.mo-nome-form {
    margin-top: 14px; padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mo-nome-form[hidden] { display: none; }
.mo-nome-form > label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.mo-nome-form > small { display: block; margin-top: 8px; line-height: 1.5; }
.mo-nome-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-nome-linha input { flex: 1 1 220px; min-width: 0; }

.mo-perfil-campos { margin-top: 18px; }
.mo-perfil-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

#moNomeAviso .mt-conselho { margin: 14px 0 0; }
.mt-conselho.e-bom     { background: var(--mt-verde-fundo); }
.mt-conselho.e-bom i   { color: var(--mt-verde); }
.mt-conselho.e-atencao { background: var(--mt-ambar-fundo); }
.mt-conselho.e-atencao i { color: var(--mt-ambar); }
.mt-conselho.e-ruim    { background: var(--mt-vermelho-fundo); }
.mt-conselho.e-ruim i  { color: var(--mt-vermelho); }

.mo-link {
    display: inline; padding: 0; margin-left: 4px;
    border: 0; background: none;
    font: inherit; font-weight: 700;
    color: var(--accent); text-decoration: underline; cursor: pointer;
}
.mo-link:hover { color: var(--accent-hi); }

.mo-acoes-topo { display: flex; flex-wrap: wrap; gap: 8px; }

/* O assistente de modelo fica fechado até pedirem: aberto o tempo todo
   ele empurrava a lista de templates para fora da tela. */
.mo-criar > summary {
    position: relative; display: block;
    padding-right: 30px;
    cursor: pointer; list-style: none;
}
.mo-criar > summary::-webkit-details-marker { display: none; }
.mo-criar > summary::after {
    content: ''; position: absolute; right: 4px; top: 6px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg); transition: var(--t-fast);
}
.mo-criar[open] > summary::after { transform: rotate(225deg); top: 10px; }
.mo-criar-tit { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-strong); }
.mo-criar-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }

@media (max-width: 560px) {
    .mo-id { align-items: flex-start; }
    .mo-nome-linha .btn { flex: 1 1 auto; }
}