/* =============================================================
   A LEITURA DOS ANÚNCIOS

   O painel é escuro e a cor da marca troca em cinco temas — um
   deles prata. Nada aqui pode depender de a marca ser azul.

   A ESCALA DE COR sai do próprio tema, e por um motivo: se ela
   fosse azul fixa, o painel em prata teria um gráfico azul no meio
   dele, e o painel em vermelho teria dois vermelhos querendo dizer
   coisas diferentes.

   O PISO DE 42% não é gosto. Abaixo disso o degrau mais claro da
   escala cai para 1,8:1 contra a superfície do cartão — some. Com
   42% ele fica em 2,04:1, que é o mínimo para uma marca continuar
   sendo uma marca. Os seis degraus do funil foram conferidos com o
   validador: monotônicos, matiz única, e nenhum par de vizinhos com
   menos de 0,06 de diferença de claridade.
============================================================= */

/* A ESCALA MORA NA RAIZ, e não no bloco de análise.
   Ela nasceu dentro de `.mi-visao`, e enquanto só o funil a usava
   isso bastava. Quando a biblioteca de criativos e os cartões de
   objetivo passaram a pedir os mesmos degraus, o `var(--mi-r5)`
   deles resolvia para nada: a regra inteira caía, sem erro, sem
   aviso, e a barra ficava cinzenta. Os valores são os mesmos
   conferidos com o validador — só o alcance mudou. */
:root {
    /* O chão da escala: a superfície do cartão. É contra ele que
       todo degrau foi medido. */
    --mi-chao: #0f0f15;
    --mi-piso: color-mix(in srgb, var(--accent) 42%, var(--mi-chao));

    /* Os seis degraus do funil. Do piso ao tom claro da marca —
       uma matiz só, sempre mais clara quanto maior o valor. */
    --mi-r0: var(--mi-piso);
    --mi-r1: color-mix(in srgb, var(--accent-hi) 20%, var(--mi-piso));
    --mi-r2: color-mix(in srgb, var(--accent-hi) 40%, var(--mi-piso));
    --mi-r3: color-mix(in srgb, var(--accent-hi) 60%, var(--mi-piso));
    --mi-r4: color-mix(in srgb, var(--accent-hi) 80%, var(--mi-piso));
    --mi-r5: var(--accent-hi);
}

.mi-visao {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Enquanto o novo recorte chega, o antigo fica — mais apagado, no
   lugar. Trocar tudo por esqueleto a cada filtro faz a página
   saltar e perde a linha onde a pessoa estava. */
.mi-visao.e-atualizando { opacity: .45; transition: opacity .18s var(--ease); }
.mi-visao.e-atualizando * { pointer-events: none; }

.mi-card { display: flex; flex-direction: column; gap: 14px; }

.mi-card-capa h3 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 15px; font-weight: 600;
    color: var(--text-strong);
}
.mi-card-capa h3 i { font-size: 13px; color: var(--accent); }
.mi-card-capa p {
    margin: 0; max-width: 62ch;
    font-size: 12.5px; line-height: 1.6; color: var(--text-faint);
}

/* -------------------------------------------------------------
   O QUE FAZER HOJE
------------------------------------------------------------- */

.mi-acoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.mi-acao {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    /* Um filete na borda esquerda carrega a urgência. É o único
       lugar da tela onde a cor diz gravidade — e ela vem sempre
       acompanhada de ícone e de texto. */
    border-left: 3px solid var(--text-faint);
}
.mi-acao.e-alta  { border-left-color: var(--danger); background: var(--danger-soft); }
.mi-acao.e-media { border-left-color: var(--warn); }

.mi-acao-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 14px;
}
.mi-acao.e-alta .mi-acao-ico  { background: rgba(var(--danger-rgb), .16); color: var(--danger); }
.mi-acao.e-media .mi-acao-ico { background: rgba(var(--warn-rgb), .16); color: var(--warn); }

.mi-acao-txt { min-width: 0; }
.mi-acao-tit {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}
.mi-acao-alvo {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 500; color: var(--text-dim);
    overflow-wrap: anywhere;
}
.mi-acao-txt p {
    margin: 4px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}

.mi-acao-fim {
    display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
    white-space: nowrap;
}
.mi-acao-valor {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}

.mi-tudo-certo {
    display: flex; align-items: center; gap: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--success-rgb), .24);
    border-radius: var(--r);
    background: var(--success-soft);
}
.mi-tudo-certo > i { font-size: 22px; color: var(--success); }
.mi-tudo-certo strong {
    display: block; margin-bottom: 3px;
    font-family: var(--font-display); font-size: 14px; color: var(--text-strong);
}
.mi-tudo-certo span { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* -------------------------------------------------------------
   O TOPO: um número grande e as comparações
------------------------------------------------------------- */

.mi-topo {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 18px;
    align-items: stretch;
}

.mi-heroi {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    background: var(--accent-soft);
}
.mi-heroi-rot {
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-faint);
}
.mi-heroi-num {
    /* O número que a tela lidera. Fonte do painel, não uma de
       display: número grande em fonte decorativa lê como enfeite.
       E figuras proporcionais — `tabular-nums` num número deste
       tamanho deixa o 1 boiando dentro do espaço de um 0. */
    font-family: var(--font-body);
    font-size: 34px; font-weight: 700; line-height: 1.05;
    color: var(--text-strong);
    letter-spacing: -.02em;
}
.mi-heroi-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }

.mi-placas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}
.mi-placa {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    min-width: 0;
}
.mi-placa-rot {
    font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
    overflow-wrap: anywhere;
}
.mi-placa-num {
    font-family: var(--font-body);
    font-size: 19px; font-weight: 650; color: var(--text-strong);
    letter-spacing: -.01em;
}

.mi-seta {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}
.mi-seta em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.mi-seta.e-bom  { color: var(--success); }
.mi-seta.e-ruim { color: var(--danger); }
.mi-seta.e-nula { color: var(--text-faint); font-weight: 400; }
.mi-seta i { font-size: 11px; }

.mi-spark-caixa { color: var(--accent); display: inline-flex; }
.mi-spark { width: 88px; height: 24px; display: block; }

/* -------------------------------------------------------------
   O RITMO DO MÊS — uma medida, não um gráfico
------------------------------------------------------------- */


/* -------------------------------------------------------------
   A MOLDURA DE UM GRÁFICO
------------------------------------------------------------- */

.mi-gr { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.mi-capa {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-soft);
}
.mi-capa-tit {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text);
}
.mi-capa-nota { font-size: 11.5px; color: var(--text-faint); }

.mi-tabela-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-faint);
    font-family: var(--font-body); font-size: 11px;
    cursor: pointer;
    transition: var(--t-fast);
}
.mi-tabela-btn:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
.mi-tabela-btn i { font-size: 10px; }

.mi-nota { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--text-faint); }

/* Dois gráficos irmãos, mesmo eixo de tempo, escalas próprias.
   Nunca o mesmo desenho com dois eixos: a sobreposição inventaria
   uma correlação que o dado não tem. */
.mi-dois {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

/* -------------------------------------------------------------
   COLUNAS
------------------------------------------------------------- */

.mi-plot { display: flex; gap: 10px; }

.mi-eixo-y {
    display: flex; flex-direction: column; justify-content: space-between;
    /* A altura do desenho MAIS a faixa dos dias embaixo: um
       contêiner que só cabe o desenho corta o eixo e cria um
       scrollzinho dentro do cartão. */
    height: 168px;
    padding-bottom: 18px;
    font-size: 10px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.mi-area { position: relative; flex: 1 1 auto; min-width: 0; height: 168px; }

.mi-grade {
    position: absolute; inset: 0 0 18px 0;
    display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
}
/* Fio contínuo, nunca tracejado: tracejo lê como "meta" ou
   "projeção" quando é só grade. */
.mi-grade i { display: block; height: 1px; background: var(--border-soft); }

/* A CURVA. O desenho é esticado pelo CSS (`preserveAspectRatio:
   none` no SVG), então nada de texto lá dentro — texto esticado
   fica com letra achatada. Todo rótulo é HTML por cima. */
.mi-svg {
    position: absolute; inset: 0 0 18px 0;
    width: 100%; height: calc(100% - 18px);
    display: block;
    overflow: visible;
}

.mi-curva-linha {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* O degradê é o que separa a área da linha sem gastar uma segunda
   cor: forte junto do traço, onde está o dado; sumindo na base,
   onde só há distância até o zero. */
.mi-g1 { stop-color: var(--accent); stop-opacity: .34; }
.mi-g2 { stop-color: var(--accent); stop-opacity: .12; }
.mi-g3 { stop-color: var(--accent); stop-opacity: 0; }

/* As zonas de toque são HTML: um alvo esticado junto com o desenho
   teria largura diferente em cada tela, e dedo precisa de alvo
   previsível. Uma faixa inteira por dia — mirar o ponto exato de
   uma curva é impossível no celular. */
.mi-zonas { position: absolute; inset: 0 0 18px 0; }

.mi-zona {
    position: absolute; top: 0; bottom: 0;
    padding: 0; margin: 0;
    border: 0; background: transparent;
    cursor: default;
    outline: none;
}
.mi-zona:hover, .mi-zona:focus-visible { background: var(--surface-2); }
.mi-zona:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }

/* A marca só aparece na faixa em que o dedo está: doze bolinhas
   sempre visíveis viram sujeira sobre a curva. */
.mi-marca {
    position: absolute; left: 50%;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--accent);
    /* Anel na cor da superfície: é o que mantém a bolinha legível
       onde ela cruza a própria linha. */
    box-shadow: 0 0 0 2px var(--mi-chao);
    opacity: 0;
    transition: opacity .12s var(--ease);
}
.mi-zona:hover .mi-marca, .mi-zona:focus-visible .mi-marca { opacity: 1; }

/* A ponta fica sempre: é "hoje", e o olho procura por ela. */
.mi-ponta {
    position: absolute; right: 0;
    width: 9px; height: 9px;
    margin: -4.5px -4.5px 0 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--mi-chao), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
    pointer-events: none;
}

/* A FAIXA DOS DIAS. Cada rótulo é posicionado pelo centro do dia
   que ele nomeia; as duas pontas ficam presas pela borda do plot,
   que é o único jeito de "hoje" não sair cortado. */
.mi-eixo-x {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 18px;
}
.mi-dia {
    position: absolute; top: 0;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
    line-height: 18px;
    font-size: 9.5px; color: var(--text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mi-dia.e-inicio, .mi-dia.e-fim { transform: none; }


/* -------------------------------------------------------------
   AS BARRAS — dinheiro por dia

   Barra e não linha: linha liga dois pontos e, ao ligar, afirma
   que existiu alguma coisa entre eles. Entre terça e quarta não
   existe nada. Grandeza de cada dia se compara por altura lado a
   lado; taxa, que é o gráfico de baixo, aí sim é curva.
------------------------------------------------------------- */

.mi-barras {
    position: absolute; inset: 0 0 18px 0;
    display: flex; align-items: stretch; gap: 3px;
}

.mi-bar {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: flex-end;
    padding: 0; margin: 0; border: 0;
    background: transparent;
    cursor: default;
    outline: none;
    border-radius: var(--r-xs);
}
/* O alvo é a coluna inteira, do topo à base: mirar a ponta de uma
   barra de 4px de altura é impossível no dedo. */
.mi-bar:hover, .mi-bar:focus-visible { background: var(--surface-2); }
.mi-bar:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }

.mi-bar-tubo {
    width: 100%; height: 100%;
    display: flex; align-items: flex-end; justify-content: center;
}

.mi-bar-corpo {
    width: 100%;
    /* Teto de 26px: a barra não preenche a faixa dela, e a sobra é
       o ar que faz o desenho respirar. */
    max-width: 26px;
    /* Ponta arredondada em cima, quadrada na base — ela nasce do
       zero, e é da base que se lê a altura. */
    border-radius: 5px 5px 2px 2px;
    /* O degradê é mais forte no topo, onde está o valor, e some na
       base, onde só há distância até o zero. */
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--accent) 38%, transparent) 0%,
        var(--accent) 100%);
    transition: filter .15s var(--ease);
}

.mi-bar:hover .mi-bar-corpo,
.mi-bar:focus-visible .mi-bar-corpo { filter: brightness(1.22); }

/* DOIS destaques, não doze: o maior dia e hoje. O pico ganha um
   halo; hoje ganha a cor clara da marca no topo. */
.mi-bar.e-pico .mi-bar-corpo {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-hi) 45%, transparent),
                0 -2px 14px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.mi-bar.e-hoje .mi-bar-corpo {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--accent) 42%, transparent) 0%,
        var(--accent-hi) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .mi-bar-corpo { transition: none; }
}

/* -------------------------------------------------------------
   O ANEL — uma medida contra um limite, e só isso
------------------------------------------------------------- */

.mi-anel {
    position: relative;
    flex: 0 0 auto;
    width: 148px; height: 148px;
    display: grid; place-items: center;
}
.mi-anel svg { width: 100%; height: 100%; display: block; }

.mi-anel-pista {
    fill: none;
    stroke: color-mix(in srgb, var(--accent) 14%, transparent);
    stroke-width: 11;
    stroke-linecap: round;
}
.mi-anel-cheio {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dasharray .5s var(--ease);
}
.mi-ag1 { stop-color: var(--accent-2); }
.mi-ag2 { stop-color: var(--accent-hi); }

.mi-anel.e-alerta .mi-ag1 { stop-color: var(--warn); }
.mi-anel.e-alerta .mi-ag2 { stop-color: var(--danger); }

/* Estourou o teto: a volta inteira acende, porque "passou" não tem
   como ser desenhado dentro de um arco que já acabou. */
.mi-anel.e-estourou .mi-anel-pista {
    stroke: color-mix(in srgb, var(--danger) 26%, transparent);
}

.mi-anel-meio {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    text-align: center;
    padding: 0 18px;
}
.mi-anel-num {
    font-family: var(--font-body);
    font-size: 19px; font-weight: 700; letter-spacing: -.02em;
    color: var(--text-strong);
    line-height: 1.1;
}
.mi-anel-rot { font-size: 10.5px; color: var(--text-faint); }

.mi-ritmo {
    display: flex; align-items: center; gap: 20px;
    padding: 16px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    /* Um brilho fraco no canto do cartão, na cor da marca. É a
       única decoração da tela, e ela marca QUAL cartão é o do
       dinheiro — o olho volta nele primeiro. */
    background:
        radial-gradient(120% 140% at 0% 0%,
            color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
        var(--surface-2);
}
.mi-ritmo.e-estoura {
    border-color: rgba(var(--warn-rgb), .3);
    background:
        radial-gradient(120% 140% at 0% 0%,
            rgba(var(--warn-rgb), .12) 0%, transparent 60%),
        var(--surface-2);
}

.mi-ritmo-txt { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mi-ritmo-tit {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
}
.mi-ritmo-frase {
    margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.mi-ritmo-frase b { color: var(--text-strong); }

/* As fichas: rótulo pequeno em cima, número embaixo. É a forma mais
   densa de mostrar quatro medidas sem virar tabela. */
.mi-fichas {
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    margin: 2px 0 0;
}
.mi-fichas div { display: flex; flex-direction: column; gap: 1px; }
.mi-fichas dt {
    font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
}
.mi-fichas dd {
    margin: 0; font-size: 13px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}

.mi-alerta {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 2px 0 0;
    font-size: 12px; line-height: 1.5; color: var(--warn);
}

/* -------------------------------------------------------------
   O FUNIL
------------------------------------------------------------- */

.mi-nota-topo { margin-top: -4px; }
.mi-funil { display: flex; flex-direction: column; gap: 3px; }

.mi-etapa {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr minmax(76px, auto);
    align-items: center;
    gap: 12px;
    padding: 5px 4px;
    border-radius: var(--r-xs);
    outline: none;
}
.mi-etapa:hover, .mi-etapa:focus-visible { background: var(--surface-2); }
.mi-etapa:focus-visible { box-shadow: var(--ring); }

.mi-etapa-rot {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--text-dim);
    min-width: 0;
}
.mi-fonte {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    font-size: 9px; font-weight: 600; letter-spacing: .04em;
    color: var(--text-faint);
    text-transform: uppercase;
}

.mi-etapa-pista { height: 22px; display: flex; align-items: center; min-width: 0; }
.mi-etapa-barra {
    height: 100%;
    border-radius: 0 4px 4px 0;
    min-width: 3px;
}

.mi-etapa-num {
    display: flex; align-items: baseline; gap: 7px; justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mi-etapa-num b { font-size: 13px; color: var(--text-strong); font-weight: 650; }
.mi-etapa-num span { font-size: 11px; color: var(--text-faint); }
.mi-etapa-num .mi-vaza { color: var(--warn); font-weight: 600; }

/* A COSTURA. É o ponto mais interessante do funil: até aqui é o que
   a Meta enxerga; daqui para baixo, só este painel. Desenhar a
   fronteira é o que faz alguém perceber que o anúncio traz gente e
   o atendimento perde. */
.mi-funil-costura {
    display: flex; align-items: center; gap: 10px;
    margin: 7px 0 4px;
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
}
.mi-funil-costura::before, .mi-funil-costura::after {
    content: ''; flex: 1 1 auto; height: 1px;
    background: var(--border-soft);
}

/* -------------------------------------------------------------
   O MAPA DAS HORAS
------------------------------------------------------------- */

.mi-mapa-caixa { overflow-x: auto; padding-bottom: 4px; }

.mi-mapa {
    display: grid;
    grid-template-columns: 30px repeat(24, minmax(11px, 1fr));
    gap: 2px;
    align-items: center;
    min-width: 380px;
}
.mi-mapa-canto { grid-column: 1; }
.mi-mapa-hora {
    font-size: 9.5px; color: var(--text-faint);
    text-align: left; white-space: nowrap;
}
.mi-mapa-dia {
    grid-column: 1;
    font-size: 10px; color: var(--text-faint);
    text-align: right; padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

.mi-cel {
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 11px;
    border-radius: 3px;
    /* A cor diz VOLUME. Zero fica quase invisível de propósito:
       pintar "ninguém chegou" com o degrau mais claro faria vazio
       parecer pouco. */
    background: color-mix(in srgb, var(--accent-hi) var(--f, 0%), var(--mi-piso));
    outline: none;
}
.mi-cel.e-vazia { background: var(--surface-2); }

/* A TAXA DE RESPOSTA é o segundo canal, e ele é forma, não cor: um
   anel. Duas informações em duas pistas separadas continuam
   legíveis quando uma delas falha. */
.mi-cel.e-boa  { box-shadow: inset 0 0 0 2px var(--success); }
.mi-cel.e-ruim { box-shadow: inset 0 0 0 2px var(--danger); }
.mi-cel:focus-visible { box-shadow: var(--ring); }

.mi-legenda {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    font-size: 11px; color: var(--text-faint);
}
.mi-leg-escala, .mi-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.mi-legenda .mi-cel { width: 12px; min-height: 12px; }

/* -------------------------------------------------------------
   O RANKING
------------------------------------------------------------- */

.mi-criterios { display: flex; flex-wrap: wrap; gap: 5px; }

.mi-rank { display: flex; flex-direction: column; gap: 4px; }

.mi-rank-linha {
    display: grid;
    grid-template-columns: minmax(130px, 34%) 1fr minmax(72px, auto);
    align-items: center; gap: 12px;
    padding: 6px 5px;
    border-radius: var(--r-xs);
    outline: none;
}
.mi-rank-linha:hover, .mi-rank-linha:focus-visible { background: var(--surface-2); }
.mi-rank-linha:focus-visible { box-shadow: var(--ring); }

.mi-rank-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-width: 0;
    font-size: 12px; color: var(--text-dim);
}
.mi-rank-nome > span { overflow-wrap: anywhere; }

.mi-rank-pista { height: 16px; display: flex; align-items: center; min-width: 0; }
.mi-rank-barra {
    height: 100%;
    /* Uma série, uma cor. Escurecer a barra conforme o valor
       gastaria o único canal livre repetindo o comprimento. */
    background: color-mix(in srgb, var(--accent) 72%, var(--mi-chao));
    border-radius: 0 4px 4px 0;
    min-width: 3px;
}
/* O melhor e o pior ganham a cor do estado — e junto vem selo com
   ícone e palavra, no nome. Cor sozinha nunca carrega o recado. */
.mi-rank-linha.e-melhor .mi-rank-barra { background: var(--success); }
.mi-rank-linha.e-pior   .mi-rank-barra { background: var(--danger); }

.mi-rank-val {
    text-align: right; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   CRIATIVO CANSANDO
------------------------------------------------------------- */

.mi-fadiga { display: flex; flex-direction: column; gap: 7px; }

.mi-fad {
    padding: 11px 13px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mi-fad.e-cansado { border-left-color: var(--danger); background: var(--danger-soft); }

.mi-fad-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    overflow-wrap: anywhere;
}
.mi-fad-num {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    margin-top: 5px;
    font-size: 11.5px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.mi-fad-num b { color: var(--text-dim); font-weight: 600; }
.mi-fad-num .e-ruim { color: var(--danger); font-weight: 600; }
.mi-fad-num .e-bom  { color: var(--success); font-weight: 600; }

/* -------------------------------------------------------------
   O BALÃO
------------------------------------------------------------- */

.mi-balao {
    position: fixed; z-index: 9000;
    left: 0; top: 0;
    max-width: 260px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--flutuante);
    box-shadow: var(--sh-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11.5px; line-height: 1.45;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s var(--ease), transform .12s var(--ease);
}
.mi-balao.e-visivel { opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------
   TABELAS DOS GRÁFICOS
------------------------------------------------------------- */

.mi-tab .mi-numerico { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------
   AS FICHAS DE PÚBLICO E O BOTÃO DE ARQUIVO

   Dois controles nativos foram embora. O <select multiple> chegava
   com fundo claro no tema escuro, exigia segurar Ctrl no
   computador e, no celular, virava uma roleta em que marcar dois
   itens é quase impossível. O <input type="file"> trazia o botão
   do sistema, com o texto cortado no meio ("Nenhum...colhido") e
   nenhuma pista do que servia.
------------------------------------------------------------- */

.mn-lados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.mn-lado { display: flex; flex-direction: column; gap: 8px; }
.mn-lado-rot {
    font-size: 11px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--text-faint);
}
.mn-lado small { font-size: 11px; line-height: 1.5; color: var(--text-faint); }

.mn-fichas { display: flex; flex-wrap: wrap; gap: 6px; }

.mn-ficha {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%;
    padding: 7px 13px 7px 10px;
    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);
}
.mn-ficha i { font-size: 10px; opacity: .5; }
.mn-ficha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-ficha:hover { color: var(--text); border-color: var(--border); }

.mn-ficha.e-ligada {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--text-strong);
}
.mn-ficha.e-ligada i { opacity: 1; color: var(--accent); }

/* Excluir não é "mirar ao contrário" -- é a única coisa nesta tela
   que faz o gasto CAIR. Por isso o lado tem cor própria: quem marca
   sem querer precisa ver que marcou. */
.mn-lado.e-excluir .mn-ficha.e-ligada {
    background: color-mix(in srgb, var(--warn) 16%, var(--surface-2));
    border-color: color-mix(in srgb, var(--warn) 50%, transparent);
}
.mn-lado.e-excluir .mn-ficha.e-ligada i { color: var(--warn); }

.mn-arquivos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.mn-arquivo {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px;
    border: 1px dashed var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-arquivo:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.mn-arquivo > i { font-size: 17px; color: var(--text-faint); }
.mn-arquivo:hover > i { color: var(--accent); }
.mn-arquivo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-arquivo b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mn-arquivo small { font-size: 11px; line-height: 1.45; color: var(--text-faint); }

/* O input continua aqui -- é ele que abre a janela de arquivo --
   mas fora de vista. `display:none` tiraria o foco do teclado
   junto; assim o rótulo continua alcançável pelo Tab. */
.mn-arquivo input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.mn-arquivo:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* -------------------------------------------------------------
   NO CELULAR
------------------------------------------------------------- */

@media (max-width: 720px) {
    .mi-topo { grid-template-columns: 1fr; }
    .mi-heroi-num { font-size: 29px; }

    /* "a mais que antes" quebrava em três linhas dentro de uma placa
       de 150px e empurrava a de baixo. A seta e o sinal já dizem a
       direção; a frase inteira fica no herói, onde cabe. */
    .mi-placa .mi-seta em { display: none; }
    .mi-placas { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

    .mi-acao { grid-template-columns: 28px 1fr; }
    .mi-acao-ico { width: 28px; height: 28px; font-size: 12px; }
    /* O botão desce para a linha inteira em vez de espremer o texto
       da ação numa coluna de duas palavras. */
    .mi-acao-fim {
        grid-column: 1 / -1;
        flex-direction: row; align-items: center; justify-content: flex-end;
        gap: 12px;
    }

    .mi-ritmo { flex-direction: column; align-items: stretch; gap: 14px; }
    .mi-anel { align-self: center; }

    .mi-etapa {
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        padding: 7px 4px;
    }
    .mi-etapa-pista { grid-column: 1 / -1; order: 3; }
    .mi-etapa-num { order: 2; }

    .mi-rank-linha { grid-template-columns: 1fr auto; gap: 3px 10px; }
    .mi-rank-pista { grid-column: 1 / -1; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .mi-balao, .mi-marca, .mi-anel-cheio, .mi-visao { transition: none; }
}

/* =============================================================
   OS TRÊS NÍVEIS

   O problema que isto resolve: campanha, conjunto e anúncio
   apareciam como três linhas iguais com recuos diferentes. Quem já
   anuncia reconhecia pelo recuo; quem não anuncia via "uma lista
   com margens estranhas" e não sabia o que era o do meio.

   Três marcas juntas, e nenhuma sozinha: SELO com o nome do nível,
   TRILHO colorido à esquerda com intensidade decrescente, e RECUO.
   Recuo sozinho não ensina nada; selo sozinho vira etiqueta; os
   três juntos deixam o desenho legível de relance e por escrito.
============================================================= */

.ma-arvore { display: flex; flex-direction: column; gap: 10px; }

/* -------- a legenda, uma vez -------- */

.ma-legenda {
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    margin-bottom: 12px;
}
.ma-legenda > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.ma-legenda > summary::-webkit-details-marker { display: none; }
.ma-legenda > summary i { color: var(--accent); font-size: 12px; }
.ma-legenda > summary::after {
    content: "";
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.5px solid var(--text-faint);
    border-bottom: 1.5px solid var(--text-faint);
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}
.ma-legenda[open] > summary::after { transform: rotate(-135deg); }

.ma-legenda-corpo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 0 14px 13px;
}
.ma-legenda-item { display: flex; align-items: center; gap: 8px; }
.ma-legenda-item span { font-size: 12px; color: var(--text-faint); }
.ma-legenda-item b { color: var(--text-dim); font-weight: 600; }
.ma-legenda-seta { font-size: 9px; color: var(--text-faint); opacity: .6; }

/* -------- o selo de nível -------- */

.ma-nv {
    display: inline-flex; align-items: center; gap: 5px;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
}
.ma-nv i { font-size: 9px; }

/* A intensidade cai do topo para a base da hierarquia: a campanha
   é a mais forte porque é a que manda nas outras duas. */
.e-campanha .ma-nv { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-hi); }
.e-conjunto .ma-nv { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.e-anuncio  .ma-nv { background: var(--surface-3); color: var(--text-dim); }

/* -------- as linhas -------- */

.ma-bloco {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
}

.ma-linha {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px;
    min-width: 0;
}

/* O TRILHO. Três pixels na borda esquerda, na cor do nível. É o que
   deixa a hierarquia legível quando a tela está cheia e o olho não
   vai ler selo nenhum. */
.ma-linha.e-campanha {
    border-left: 3px solid var(--accent);
    background:
        radial-gradient(90% 200% at 0% 50%,
            color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%);
}
.ma-linha.e-conjunto {
    border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.ma-linha.e-anuncio {
    border-left: 3px solid var(--border);
    padding-top: 10px; padding-bottom: 10px;
}

.ma-filhos {
    display: flex; flex-direction: column;
    padding-left: 18px;
    border-top: 1px solid var(--border-soft);
}
.ma-sub + .ma-sub, .ma-item + .ma-item { border-top: 1px solid var(--border-soft); }
.ma-sub > .ma-filhos { padding-left: 16px; }

.ma-linha-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.ma-linha-topo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    min-width: 0;
}
.ma-nome {
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600; color: var(--text-strong);
    overflow-wrap: anywhere;
}
.e-anuncio .ma-nome { font-size: 12.5px; font-weight: 500; color: var(--text); }

.ma-conta-filhos { font-size: 11px; color: var(--text-faint); }

.ma-abrir {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    margin-top: 1px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--r-xs);
    background: transparent; color: var(--text-faint);
    cursor: pointer;
    transition: var(--t-fast);
}
.ma-abrir:hover { background: var(--surface-3); color: var(--text); }
.ma-abrir i { font-size: 10px; transition: transform .2s var(--ease); }
.ma-abrir.e-aberta i { transform: rotate(90deg); }

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

.ma-orc-caixa {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--surface-solid);
}
.ma-orc-caixa > span { font-size: 10px; color: var(--text-faint); }
.ma-orc-caixa .mt-orc {
    width: 52px;
    border: 0; background: transparent; padding: 0;
    color: var(--text); font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.ma-orc-caixa .mt-orc:focus { outline: none; }
.ma-orc-caixa:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); }

.ma-criativo {
    display: flex; flex-direction: column; gap: 1px;
    font-size: 11.5px; line-height: 1.45; color: var(--text-faint);
}
.ma-criativo b { color: var(--text-dim); font-weight: 600; }
.ma-criativo > span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.ma-vazio-nivel {
    padding: 12px 15px;
    font-size: 11.5px; color: var(--text-faint);
}

/* -------- o público, na linha do conjunto -------- */

.ma-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

.ma-pub-ficha {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2.5px 9px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--surface-solid);
    font-size: 11px; color: var(--text-dim);
    white-space: nowrap;
}
.ma-pub-ficha i { font-size: 9px; color: var(--text-faint); }
.ma-pub-ficha.e-aviso {
    border-color: rgba(var(--warn-rgb), .3);
    background: var(--warn-soft);
    color: var(--warn);
}
.ma-pub-ficha.e-aviso i { color: var(--warn); }

.ma-pub.e-vazio {
    font-size: 11px; color: var(--text-faint);
    display: flex; gap: 6px; align-items: center;
}

.ma-pub-mais {
    border: 0; background: transparent;
    padding: 2px 4px;
    color: var(--accent); font-size: 11px; font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-xs);
}
.ma-pub-mais:hover { text-decoration: underline; }
.ma-pub-mais:focus-visible { box-shadow: var(--ring); outline: none; }

.ma-pub-todo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 0 15px 13px 18px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-solid);
}
.ma-pub-bloco h5 {
    margin: 0 0 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent);
}
.ma-pub-bloco dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-pub-bloco dt {
    font-size: 10px; color: var(--text-faint);
    letter-spacing: .04em; text-transform: uppercase;
}
.ma-pub-bloco dd {
    margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-dim);
    overflow-wrap: anywhere;
}
.ma-pub-nota {
    margin: 7px 0 0;
    font-size: 10.5px; line-height: 1.45; color: var(--text-faint);
    font-style: italic;
}
.ma-pub-rodape {
    grid-column: 1 / -1;
    margin: 0; padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px; color: var(--text-faint);
}

.ma-pub-todo .mt-conselho { grid-column: 1 / -1; }

/* -------- no celular -------- */

@media (max-width: 720px) {
    .ma-linha { flex-wrap: wrap; gap: 9px; padding: 12px; }
    .ma-acoes { width: 100%; justify-content: flex-end; }
    .ma-filhos { padding-left: 10px; }
    .ma-sub > .ma-filhos { padding-left: 8px; }
    .ma-pub-todo { margin: 0 10px 12px; grid-template-columns: 1fr; }
    .ma-legenda-seta { display: none; }
    .ma-legenda-corpo { flex-direction: column; align-items: flex-start; gap: 7px; }
}

/* =============================================================
   AS SECÇÕES E OS PÚBLICOS
============================================================= */

/* A barra de secções gruda no topo: numa lista comprida de
   campanhas, ter de rolar até o começo para trocar de aba é o tipo
   de atrito que faz a pessoa não trocar. */
/* `hidden` PRECISA VENCER O `display` DA CLASSE.
   O navegador esconde um elemento com `hidden` por uma regra fraca
   (`[hidden] { display: none }` na folha dele). Qualquer classe que
   declare `display` ganha dela — e `.mi-visao` declara `flex`.
   Resultado: a secção "trocava" no estado e as duas continuavam na
   tela, uma embaixo da outra. */
.mi-visao[hidden],
#maPaneCampanhas[hidden],
#maPaneCriar[hidden],
#maPaneCriativos[hidden],
#maPanePublicos[hidden],
#maPaneRegras[hidden],
#maPaneConta[hidden] { display: none !important; }

.ma-secoes {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 4px;
    margin-bottom: 14px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--flutuante);
    backdrop-filter: blur(14px);
    box-shadow: var(--sh-sm);
    overflow-x: auto;
    scrollbar-width: none;
}
.ma-secoes::-webkit-scrollbar { display: none; }

.ma-secao {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    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;
    white-space: nowrap;
    transition: var(--t-fast);
}
.ma-secao i { font-size: 11px; }
.ma-secao:hover { color: var(--text); background: var(--surface-2); }

.ma-secao.e-ativa {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 2px 14px -4px rgba(var(--accent-rgb), .55);
}
.ma-secao.e-ativa i { color: var(--accent-ink); }

/* O contador só na aba "Hoje": é a única que muda sozinha enquanto
   a pessoa está noutra. */
.ma-secao-conta {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--danger);
    color: #fff;
    font-size: 10px; font-weight: 700; font-style: normal;
}
.ma-secao.e-ativa .ma-secao-conta { background: var(--accent-ink); color: var(--accent); }

/* -------------------------------------------------------------
   OS PÚBLICOS
------------------------------------------------------------- */

/* O atalho que economiza mais dinheiro na tela: ele fica no topo e
   com a cor da marca porque é literalmente a ação de maior retorno
   por clique que existe aqui. */
.mp-atalho {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 15px 17px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(110% 160% at 0% 0%,
            color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 62%),
        var(--surface-2);
}
.mp-atalho.e-pronto { border-color: rgba(var(--success-rgb), .3); }
.mp-atalho-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-atalho-txt strong {
    font-family: var(--font-display);
    font-size: 14px; color: var(--text-strong);
}
.mp-atalho-txt span { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); max-width: 64ch; }

.mp-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}

.mp-cartao {
    display: flex; flex-direction: column; gap: 9px;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: var(--r);
    background: var(--surface-2);
}
/* O trilho âmbar marca os que servem para EXCLUIR. É a distinção
   mais fácil de errar aqui: mirar "chegaram e sumiram" é pedir à
   Meta mais gente que some. */
.mp-cartao.e-excluir { border-left-color: var(--warn); }

.mp-cartao-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mp-cartao-topo h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}
.mp-conta { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); }

.mp-numero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mp-numero b {
    font-family: var(--font-body);
    font-size: 26px; font-weight: 700; letter-spacing: -.02em;
    color: var(--text-strong);
    line-height: 1;
}
.mp-numero > span { font-size: 11.5px; color: var(--text-faint); }
.mp-numero em {
    font-style: normal; font-size: 10.5px; color: var(--text-faint);
    width: 100%;
}
.mp-pede { font-size: 12px; color: var(--text-faint); font-style: italic; }

.mp-paraque { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.mp-paraque b { color: var(--text-faint); font-weight: 600; }

.mp-curto {
    margin: 0; padding: 7px 9px;
    border-radius: var(--r-xs);
    background: var(--warn-soft);
    font-size: 11px; line-height: 1.45; color: var(--warn);
}

.mp-cartao-pe {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 4px;
}
.mp-ja {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--success);
}

/* -------- a lista do que já existe -------- */

.mp-lista { display: flex; flex-direction: column; gap: 8px; }

.mp-linha {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mp-linha-txt { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.mp-linha-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    overflow-wrap: anywhere;
}
.mp-linha-num {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 11.5px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.mp-linha-num .e-ruim { color: var(--danger); font-weight: 600; }
.mp-linha-num .e-alerta { color: var(--warn); font-weight: 600; }

.mp-dica {
    margin: 3px 0 0;
    font-size: 11px; line-height: 1.5; color: var(--text-faint);
    max-width: 62ch;
}

.mp-linha-acoes { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.mp-auto {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-faint);
    cursor: pointer;
}
.mp-auto input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 720px) {
    /* NO CELULAR AS OITO APARECEM DE UMA VEZ.
       Roladas na horizontal, só três cabiam em 375px — e a barra de
       rolagem está escondida, então não havia nem sinal de que
       existiam as outras. O dono abriu a tela e não achou as
       páginas novas; elas estavam ali, fora do quadro.
       Quebrando em duas fileiras, nada fica escondido e ninguém
       precisa descobrir que aquilo rola. */
    .ma-secoes {
        position: static;
        flex-wrap: wrap;
        overflow-x: visible;
        border-radius: var(--r);
        padding: 7px;
        gap: 5px;
    }
    .ma-secao {
        justify-content: center;
    }
    .mp-grade { grid-template-columns: 1fr; }
    .mp-atalho { flex-direction: column; align-items: stretch; }
    .mp-linha-acoes { width: 100%; justify-content: flex-end; }
}

/* -------------------------------------------------------------
   AS REGRAS

   A distinção visual que carrega a tela: regra que SÓ AVISA tem
   trilho neutro; regra SOLTA — que mexe em dinheiro sem ninguém na
   sala — tem trilho da cor da marca. É a diferença que precisa ser
   vista de relance, porque é a diferença entre um relatório e uma
   coisa que age.
------------------------------------------------------------- */

.mr-lista { display: flex; flex-direction: column; gap: 9px; }

.mr-regra {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    background: var(--surface-2);
}
/* Parada: o trilho some e o cartão apaga. Ela continua na lista
   porque foi escrita, e some do olho porque não está valendo. */
.mr-regra.e-parada { border-left-color: var(--border); opacity: .62; }

.mr-regra-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.mr-regra-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}

/* A regra escrita como FRASE, não como formulário preenchido.
   "custo_por_respondido > 80" ninguém confere; "quando o custo por
   lead que respondeu ficar acima de R$ 80" qualquer um confere. */
.mr-frase {
    margin: 0;
    font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
    max-width: 72ch;
}
.mr-frase b { color: var(--text-strong); font-weight: 600; }
.mr-piso { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }

.mr-regra-pe { font-size: 11px; color: var(--text-faint); }
.mr-regra-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }

/* -------- as prontas -------- */

.mr-prontas {
    margin-top: 6px; padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.mr-prontas h4 {
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text);
}
.mr-prontas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 11px;
}
.mr-pronta {
    display: flex; flex-direction: column; gap: 7px;
    padding: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--r);
    background: var(--surface-solid);
}
.mr-pronta strong {
    font-family: var(--font-display);
    font-size: 12.5px; color: var(--text-strong);
}
.mr-pronta p {
    margin: 0; flex: 1 1 auto;
    font-size: 11.5px; line-height: 1.55; color: var(--text-faint);
}
.mr-pronta .btn { align-self: flex-start; }

/* -------- o formulário -------- */

.mr-form {
    display: flex; flex-direction: column; gap: 11px;
    padding: 15px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    background: var(--surface-solid);
}
.mr-form-linha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-dim);
}
.mr-form select, .mr-form input {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body); font-size: 12.5px;
}
.mr-form input[type="number"] { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.mr-form input.mr-nome { flex: 1 1 220px; text-align: left; }
.mr-form select:focus, .mr-form input:focus {
    outline: none; border-color: var(--accent-line); box-shadow: var(--ring);
}
.mr-unidade { font-size: 12px; color: var(--text-faint); }

.mr-explica {
    margin: -4px 0 0;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
    max-width: 70ch;
}
.mr-explica b { color: var(--accent); }

.mr-form-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* -------- a simulação -------- */

.mr-pegaria { display: flex; flex-direction: column; gap: 6px; }
.mr-pegaria h4 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 13px; color: var(--text-strong);
}

.mr-alvo {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: 12px;
}
.mr-alvo.e-fora { border-left-color: var(--border); opacity: .7; }
.mr-alvo-nome {
    display: flex; align-items: center; gap: 7px;
    min-width: 0; color: var(--text); overflow-wrap: anywhere;
}
.mr-alvo-num {
    font-weight: 700; color: var(--warn);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mr-alvo.e-fora .mr-alvo-num { color: var(--text-faint); font-weight: 500; }
.mr-alvo-gasto { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.mr-fora > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 12px; color: var(--text-faint);
}
.mr-fora > div { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }

@media (max-width: 720px) {
    .mr-regra-acoes { width: 100%; justify-content: flex-end; }
    .mr-alvo { grid-template-columns: 1fr auto; }
    .mr-alvo-gasto { grid-column: 1 / -1; }
    .mr-form input[type="number"] { width: 72px; }
}

/* -------------------------------------------------------------
   ONDE VAI O DINHEIRO, POR OBJETIVO
------------------------------------------------------------- */

.mi-obj { display: flex; flex-direction: column; gap: 4px; }

.mi-obj-linha {
    display: grid;
    grid-template-columns: minmax(150px, 30%) 1fr minmax(96px, auto);
    align-items: center; gap: 6px 14px;
    padding: 9px 6px;
    border-radius: var(--r-xs);
    outline: none;
}
.mi-obj-linha:hover, .mi-obj-linha:focus-visible { background: var(--surface-2); }
.mi-obj-linha:focus-visible { box-shadow: var(--ring); }

.mi-obj-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-width: 0;
    font-size: 12.5px; font-weight: 600; color: var(--text);
}
.mi-obj-nome em {
    font-style: normal; font-weight: 400;
    font-size: 10.5px; color: var(--text-faint);
}

.mi-obj-pista { height: 18px; display: flex; align-items: center; min-width: 0; }
.mi-obj-barra {
    height: 100%;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: color-mix(in srgb, var(--accent) 45%, var(--mi-chao));
}
/* O de conversa ganha a cor cheia da marca: e o unico que este
   painel consegue acompanhar ate o fim, e a diferenca precisa ser
   vista sem ler o selo. */
.mi-obj-linha.e-conversa .mi-obj-barra { background: var(--accent); }

.mi-obj-num {
    text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mi-obj-num b { font-size: 13px; color: var(--text-strong); }
.mi-obj-num span { display: block; font-size: 10.5px; color: var(--text-faint); }

.mi-obj-entrega {
    grid-column: 1 / -1;
    font-size: 11.5px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.mi-obj-entrega b { color: var(--text-dim); font-weight: 600; }

@media (max-width: 720px) {
    .mi-obj-linha { grid-template-columns: 1fr auto; }
    .mi-obj-pista { grid-column: 1 / -1; order: 3; }
    .mi-obj-entrega { order: 4; }
}

/* =============================================================
   A GAVETA DE EDIÇÃO E AS AÇÕES EM MASSA
============================================================= */

.ma-marca {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    margin-top: 2px;
    cursor: pointer;
}
.ma-marca input {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* -------------------------------------------------------------
   A BARRA DE AÇÃO EM MASSA

   Flutua no RODAPÉ. Numa árvore comprida a pessoa marca itens no
   meio da lista; uma barra no topo obrigaria a rolar de volta só
   para agir sobre o que ela acabou de marcar.
------------------------------------------------------------- */

.me-massa {
    position: fixed;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    z-index: 9500;
    display: flex; align-items: center; gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 11px 13px 11px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--flutuante);
    backdrop-filter: blur(16px);
    box-shadow: var(--sh-lg);
    animation: meSobe .2s var(--ease);
}
@keyframes meSobe { from { opacity: 0; transform: translate(-50%, 10px); } }

.me-massa-conta {
    font-size: 12.5px; font-weight: 600; color: var(--text-strong);
    white-space: nowrap;
}
.me-massa-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.me-massa-x {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--surface-3); color: var(--text-faint);
    cursor: pointer;
}
.me-massa-x:hover { background: var(--surface-4); color: var(--text); }

/* -------------------------------------------------------------
   A GAVETA

   Entra pela direita no computador e por baixo no celular — em
   cada um, do lado em que o polegar ou o olho já está.
------------------------------------------------------------- */

.me-gaveta { position: fixed; inset: 0; z-index: 9600; }

.me-fundo {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .18s var(--ease);
}
.me-gaveta.e-aberta .me-fundo { opacity: 1; }

.me-painel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(520px, 100vw);
    display: flex; flex-direction: column;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    transform: translateX(100%);
    transition: transform .22s var(--ease);
}
.me-gaveta.e-aberta .me-painel { transform: translateX(0); }

.me-topo {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.me-topo h3 {
    margin: 8px 0 4px;
    font-family: var(--font-display);
    font-size: 17px; font-weight: 600; color: var(--text-strong);
    overflow-wrap: anywhere;
}
.me-topo p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.me-topo p b { color: var(--text-dim); }

.me-x {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--surface-3); color: var(--text-dim);
    cursor: pointer;
}
.me-x:hover { background: var(--surface-4); color: var(--text-strong); }

.me-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 22px 28px;
    display: flex; flex-direction: column;
}

.me-bloco {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 10px;
}
.me-bloco:last-child { border-bottom: 0; }
.me-bloco h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.me-conta {
    margin: -4px 0 0;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
    max-width: 64ch;
}

.me-linha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.me-linha > label {
    flex: 0 0 auto;
    min-width: 86px;
    font-size: 12px; color: var(--text-dim);
}
.me-cifrao { font-size: 12px; color: var(--text-faint); }

.me-campo { display: flex; flex-direction: column; gap: 5px; }
.me-campo > label { font-size: 12px; color: var(--text-dim); }

.me-corpo input, .me-corpo select, .me-corpo textarea {
    flex: 1 1 130px; min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body); font-size: 12.5px;
}
.me-corpo textarea { resize: vertical; line-height: 1.5; }
.me-corpo input:focus, .me-corpo select:focus, .me-corpo textarea:focus {
    outline: none; border-color: var(--accent-line); box-shadow: var(--ring);
}
.me-corpo input[type="number"] { flex: 0 0 110px; text-align: right;
    font-variant-numeric: tabular-nums; }

.me-aviso-fraco {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 0;
    font-size: 11px; line-height: 1.5; color: var(--text-faint);
}
.me-aviso-fraco i { color: var(--warn); margin-top: 2px; }
.me-aviso-fraco b { color: var(--warn); }

.me-link {
    align-self: flex-start;
    border: 0; background: transparent; padding: 0;
    color: var(--accent); font-size: 11.5px; cursor: pointer;
}
.me-link:hover { text-decoration: underline; }

/* O bloco de apagar tem cara de bloco de apagar. */
.me-bloco.e-perigo {
    margin-top: 6px;
    padding: 15px;
    border: 1px solid rgba(var(--danger-rgb), .22);
    border-radius: var(--r);
    background: var(--danger-soft);
}
.btn.e-perigo { color: var(--danger); border-color: rgba(var(--danger-rgb), .35); }
.btn.e-perigo:hover { background: rgba(var(--danger-rgb), .12); }

@media (max-width: 720px) {
    /* No celular ela sobe de baixo: é de onde o polegar alcança. */
    .me-painel {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; max-height: 88vh;
        border-left: 0; border-top: 1px solid var(--border);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        transform: translateY(100%);
    }
    .me-gaveta.e-aberta .me-painel { transform: translateY(0); }
    .me-topo { padding: 18px 16px 14px; }
    .me-corpo { padding: 4px 16px 24px; }
    .me-linha > label { min-width: 100%; }
    .me-massa { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
    @keyframes meSobe { from { opacity: 0; transform: translateY(10px); } }
}

@media (prefers-reduced-motion: reduce) {
    .me-painel, .me-fundo { transition: none; }
    .me-massa { animation: none; }
}

/* =============================================================
   A TABELA DE DESEMPENHO E O DIAGNÓSTICO
============================================================= */

.mrl-barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px;
}
.mrl-acoes { display: flex; gap: 6px; }

.mrl-tab th button {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
    white-space: nowrap;
}
.mrl-tab th button:hover { color: var(--text); }
.mrl-tab th.e-ordenado { color: var(--accent); }

/* A marca de origem. Metade das colunas não existe no Gerenciador:
   sem dizer isso, a pessoa procura lá um número que só existe aqui
   e conclui que o painel está inventando. */
.mrl-so-aqui {
    padding: 1px 5px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 8.5px; font-style: normal; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}

.mrl-tab tr.e-pausado { opacity: .58; }
.mrl-nome {
    display: flex; align-items: center; gap: 7px;
    max-width: 260px;
    overflow-wrap: anywhere;
}
.mrl-fim { display: flex; gap: 4px; justify-content: flex-end; }

.mrl-tab tfoot td {
    border-top: 1px solid var(--border);
    font-weight: 700; color: var(--text-strong);
    background: var(--surface-2);
}

/* -------- o escolhedor de colunas -------- */

.mrl-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 15px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    background: var(--surface-solid);
}
.mrl-grupo h5 {
    margin: 0 0 3px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-faint);
}
.mrl-grupo.e-aqui h5 { color: var(--accent); }
.mrl-grupo p {
    margin: 0 0 8px;
    font-size: 11px; line-height: 1.45; color: var(--text-faint);
}
.mrl-grupo > div { display: flex; flex-wrap: wrap; gap: 5px; }

.mrl-col {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-size: 11.5px; color: var(--text-dim);
    cursor: pointer;
}
.mrl-col.e-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--text);
}
.mrl-col input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

.mrl-grupo-pe {
    grid-column: 1 / -1;
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
}

/* -------- o diagnóstico -------- */

.mrl-ponto {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--text-faint);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mrl-ponto.e-grave {
    border-left-color: var(--warn);
    background: var(--warn-soft);
}

.mrl-ponto-topo {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.mrl-ponto-topo i { color: var(--text-faint); font-size: 13px; }
.mrl-ponto.e-grave .mrl-ponto-topo i { color: var(--warn); }

.mrl-ponto p {
    margin: 0;
    font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
    max-width: 62ch;
}
.mrl-faltam {
    padding: 8px 10px;
    border-radius: var(--r-xs);
    background: var(--surface-solid);
    font-variant-numeric: tabular-nums;
}
.mrl-fazer b { color: var(--accent); }

@media (max-width: 720px) {
    .mrl-barra { flex-direction: column; align-items: stretch; }
    .mrl-acoes { justify-content: flex-end; }
    .mrl-nome { max-width: 160px; }
}

/* =============================================================
   O CABEÇALHO ENXUTO E A FAIXA DE NÚMEROS

   O que estava errado não era o estilo das linhas: era a proporção.
   Título, subtítulo de duas linhas, barra de estado, três botões,
   cinco pílulas de período e uma busca — seiscentos pixels de
   enfeite antes do primeiro número. No celular dava para rolar a
   tela inteira sem ver um anúncio.
============================================================= */

.card.ma-cabeca { padding: 14px 16px; gap: 10px; }
.card.ma-cabeca .panel-header-row { align-items: center; gap: 10px; }

.ma-cabeca-tit {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; color: var(--text-strong);
}
.ma-cabeca-tit i { font-size: 15px; }

.card.ma-cabeca #maResumo { margin-top: 0 !important; }
.card.ma-cabeca .ma-filtros { margin-bottom: 0; }

/* O cartão da árvore não precisa de moldura dupla: cada campanha
   já é um cartão. */
.card.ma-cartao-arvore { padding: 0; border: 0; background: transparent; }

/* -------------------------------------------------------------
   A FAIXA DE NÚMEROS

   Cada número é uma célula com rótulo em cima e valor embaixo. Na
   frase corrida anterior tudo tinha o mesmo peso, e para achar o
   custo por resultado era preciso ler a linha inteira.
------------------------------------------------------------- */

.ma-faixa {
    display: flex; flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}
.ma-faixa.e-vazia {
    font-size: 11.5px; color: var(--text-faint); font-style: italic;
}

.ma-cel {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
    padding: 5px 13px 5px 0;
    border-right: 1px solid var(--border-soft);
}
.ma-cel:last-child { border-right: 0; padding-right: 0; }

.ma-cel-rot {
    font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}
.ma-cel-val {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* O resultado que o objetivo prometeu é o número pelo qual se
   julga o anúncio. Ele é maior e da cor da marca; o resto é
   contexto e fica em tom de texto. */
.ma-cel.e-forte .ma-cel-val { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.ma-cel.e-forte .ma-cel-rot { color: var(--accent); }

.ma-cel.e-bom .ma-cel-val { color: var(--success); }
.ma-cel.e-ruim .ma-cel-val { color: var(--danger); }
.ma-cel.e-atencao .ma-cel-val { color: var(--warn); }

/* A única célula que nenhum Gerenciador tem. */
.ma-cel.e-daqui .ma-cel-rot { color: var(--accent); }
.ma-cel.e-daqui .ma-cel-val { color: var(--accent-hi); }

/* -------------------------------------------------------------
   A LINHA DO ANÚNCIO: a miniatura vira protagonista
------------------------------------------------------------- */

.ma-linha.e-anuncio .ma-thumb {
    width: 52px; height: 52px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
}
.ma-thumb.e-vazia {
    display: grid; place-items: center;
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 16px;
}

@media (max-width: 720px) {
    .card.ma-cabeca { padding: 12px 13px; }
    .ma-cel { padding-right: 10px; }
    .ma-cel-val { font-size: 12.5px; }
    .ma-cel.e-forte .ma-cel-val { font-size: 14px; }
    .ma-linha.e-anuncio .ma-thumb { width: 44px; height: 44px; }
}

/* =============================================================
   CRIAR, CRIATIVOS E CONTA

   Três secções novas. A régua é a mesma do resto da tela: a cor
   da marca é reservada para o que decide alguma coisa, o resto
   vive em tinta de texto. Uma tela em que tudo brilha é uma tela
   em que nada chama.
============================================================= */

/* -------------------------------------------------------------
   1. A ESCOLHA DO OBJETIVO

   A única escolha desta tela que não dá para corrigir depois: o
   objetivo não muda numa campanha que já existe. Por isso ela é
   uma grade de cartões grandes e não um <select> de seis linhas
   parecidas -- que é como o Gerenciador faz, e é por isso que
   tanta gente escolhe "Tráfego" querendo vender.
------------------------------------------------------------- */

.mn-objetivos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.mn-objetivo {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 16px;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--mn-tom) 17%, transparent) 0%,
            color-mix(in srgb, var(--mn-tom) 4%, transparent) 55%,
            transparent 78%),
        var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-objetivo:hover {
    border-color: color-mix(in srgb, var(--mn-tom) 55%, var(--border-soft));
    transform: translateY(-1px);
    box-shadow: var(--sh-sm);
}

/* O cartão recomendado é o único que o painel consegue acompanhar
   do clique até a venda. A borda inteira, e não um selo solto,
   porque o selo se lê depois de já ter decidido. */
.mn-objetivo.e-recomendado {
    border-color: color-mix(in srgb, var(--mn-tom) 60%, var(--border-soft));
}

.mn-objetivo-icone {
    display: grid; place-items: center;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--mn-tom) 22%, transparent);
    color: var(--mn-tom);
    font-size: 15px;
}

.mn-objetivo-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mn-objetivo-corpo strong {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.mn-objetivo-conta {
    font-size: 12px; line-height: 1.55; color: var(--text-faint);
}

/* A palavra que vai aparecer como resultado nos relatórios depois.
   É ela que separa "achei que ia vender" de "sabia o que ia medir". */
.mn-objetivo-entrega {
    margin-top: 2px;
    font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-faint);
}
/* O TEXTO VESTE TINTA DE TEXTO, nunca a cor do cartão.
   O tom mais baixo da escala foi medido para PREENCHIMENTO (2,04:1
   contra a superfície) — como letra ele fica ilegível no escuro. A
   cor do objetivo já está no ícone, na borda e no degradê; aqui ela
   não acrescenta nada e só tira contraste. */
.mn-objetivo-entrega b { color: var(--text); font-weight: 700; }

.mn-selo {
    position: absolute; top: -8px; right: 12px;
    max-width: calc(100% - 26px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--mn-tom);
    color: var(--accent-ink);
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------
   2. O FORMULÁRIO EM PASSOS

   Numerado porque a ordem importa de verdade: orçamento antes de
   público, público antes do anúncio. Não é enfeite de numeração --
   é a ordem em que a Meta monta as três coisas.
------------------------------------------------------------- */

.mn-escolhido {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
    padding: 12px 14px;
    border-radius: var(--r);
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--mn-tom) 13%, transparent) 0%,
            transparent 70%),
        var(--surface-2);
}
.mn-escolhido > div { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.mn-escolhido strong {
    font-family: var(--font-display); font-size: 14px; color: var(--text-strong);
}
.mn-escolhido span { font-size: 11px; color: var(--text-faint); }

.mn-passo { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.mn-passo-cabeca { display: flex; align-items: center; gap: 10px; }
.mn-passo-cabeca h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.mn-passo-n {
    display: grid; place-items: center;
    width: 21px; height: 21px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* O trilho à esquerda liga os passos: sem ele, quatro blocos de
   campos parecem quatro formulários diferentes. */
.mn-passo-corpo {
    display: flex; flex-direction: column; gap: 12px;
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--border-soft);
}

.mn-check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
}
.mn-check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); }
.mn-check span { display: flex; flex-direction: column; gap: 2px; }
.mn-check b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mn-check small { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

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

.mn-nota-curta { display: block; font-size: 11px; color: var(--text-faint); }

/* O aviso que muda a decisão -- pixel que nunca disparou, vídeo
   ainda convertendo, imagem pequena demais. Nunca decorativo. */
.mn-alerta { color: var(--warn); font-weight: 600; }

/* -------------------------------------------------------------
   A MÍDIA
------------------------------------------------------------- */

.mn-midia {
    display: flex; align-items: center; gap: 14px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mn-midia.e-subindo { color: var(--text-faint); font-size: 12.5px; gap: 9px; }
.mn-midia img {
    width: 84px; height: 84px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
}
.mn-midia > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mn-midia strong { font-size: 13px; color: var(--text-strong); }
.mn-midia span { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.mn-midia-botoes { display: flex; gap: 7px; flex-wrap: wrap; }
.mn-midia-video {
    display: grid; place-items: center;
    width: 84px; height: 84px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 24px;
}

/* -------------------------------------------------------------
   A PRÉVIA DA CONVERSA

   Os botões prontos são a decisão mais subestimada de um anúncio
   de WhatsApp. Mostrá-los enquanto se digita é o que faz alguém
   perceber que "oi" não é resposta nenhuma.
------------------------------------------------------------- */

.mn-previa-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mn-previa-botoes span {
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft));
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: 11.5px; color: var(--accent);
}
.mn-previa-vazio {
    margin-top: 8px;
    font-size: 11.5px; line-height: 1.5; font-style: italic; color: var(--text-faint);
}

/* -------------------------------------------------------------
   OS AJUSTES FINOS, RECOLHIDOS
------------------------------------------------------------- */

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

.mn-categorias { border: 0; margin: 12px 14px; padding: 0; }
.mn-categorias legend {
    padding: 0;
    font-size: 12px; font-weight: 600; color: var(--text);
}
.mn-categorias p {
    margin: 4px 0 10px;
    font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}
.mn-categorias p b { color: var(--danger); }
.mn-categorias .mn-check { margin-bottom: 7px; }

/* -------------------------------------------------------------
   O RODAPÉ DA CRIAÇÃO
------------------------------------------------------------- */

.mn-rodape {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.mn-rodape-nota {
    flex: 1 1 220px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}

/* -------------------------------------------------------------
   O RECIBO E A PRÉVIA DE VERDADE
------------------------------------------------------------- */

.mn-recibo-ids {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 16px 0;
}
.mn-recibo-ids > div {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mn-recibo-ids span {
    font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-faint);
}
.mn-recibo-ids code {
    font-size: 11.5px; color: var(--text);
    font-variant-numeric: tabular-nums;
}

.mn-previa-real { margin-top: 6px; }
.mn-previa-barra { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.mn-formato {
    padding: 6px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-faint);
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-formato:hover { color: var(--text); background: var(--surface-2); }
.mn-formato.e-ativo {
    background: var(--accent); color: var(--accent-ink); border-color: transparent;
}

/* O <iframe> vem da Meta e entra como veio. Reescrever o HTML dela
   é exatamente o jeito de a prévia deixar de ser prévia. */
.mn-previa-quadro {
    display: grid; place-items: center;
    min-height: 120px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    overflow-x: auto;
}
.mn-previa-quadro iframe { max-width: 100%; border: 0; }
.mn-previa-esperando { font-size: 12px; color: var(--text-faint); text-align: center; }

/* -------------------------------------------------------------
   OS TESTES A/B
------------------------------------------------------------- */

.mn-testes { margin-top: 14px; }
.mn-testes-lista { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

.mn-teste {
    padding: 13px 15px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mn-teste.e-rodando { border-left-color: var(--accent); }
.mn-teste-cabeca {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}
.mn-teste-cabeca strong { font-size: 13px; color: var(--text-strong); }
.mn-teste-estado {
    font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-faint);
}
.mn-teste.e-rodando .mn-teste-estado { color: var(--accent); font-weight: 700; }
.mn-teste p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-faint); }
.mn-teste-variacoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mn-teste-var {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    font-size: 11.5px; color: var(--text);
}
.mn-teste-var em { font-style: normal; font-size: 10.5px; color: var(--text-faint); }
.mn-teste .mn-alerta { display: block; margin-top: 9px; font-size: 11px; line-height: 1.5; }

/* =============================================================
   3. OS CRIATIVOS
============================================================= */

.mb-abas {
    display: flex; gap: 4px;
    margin: 16px 0 14px;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--surface-2);
}
.mb-aba {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 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);
}
.mb-aba i { font-size: 11px; }
.mb-aba:hover { color: var(--text); }
.mb-aba.e-ativa { background: var(--surface); color: var(--text-strong); box-shadow: var(--sh-sm); }

.mb-resumo { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }
.mb-resumo b { color: var(--text-strong); }

.mb-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 11px;
}

.mb-criativo {
    display: flex; gap: 13px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
/* Criativo que nunca rodou não tem o que contar. Ele fica na lista
   -- serve para reaproveitar -- mas recuado, para não disputar o
   olho com os que têm número. */
.mb-criativo.e-parado { opacity: .72; }

.mb-criativo-arte { flex: 0 0 auto; }
.mb-criativo-arte img {
    width: 78px; height: 78px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
    background: var(--surface-3);
}
.mb-sem-arte {
    display: grid; place-items: center;
    width: 78px; height: 78px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 19px;
}

.mb-criativo-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.mb-criativo-corpo > strong {
    font-size: 13px; font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-criativo-texto {
    margin: 0;
    font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A barra é comparativa: o maior gasto da conta é o cheio. Ela
   responde "qual imagem levou o dinheiro" sem ler número nenhum. */
.mb-barra {
    height: 3px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    overflow: hidden;
}
.mb-barra span {
    display: block; height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--mi-r2), var(--mi-r5));
}

.mb-criativo-botoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.mb-previa { margin-top: 8px; }
.mb-previa iframe { max-width: 100%; border: 0; }

/* -------------------------------------------------------------
   OS COMENTÁRIOS
------------------------------------------------------------- */

.mb-escolha { margin-bottom: 14px; }

/* O alerta que muda o dia de quem cuida da conta. Vermelho de
   verdade, e não a cor da marca: aqui é problema, não é destaque. */
.mb-alerta {
    display: flex; align-items: flex-start; gap: 11px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border-radius: var(--r);
    border-left: 3px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-2));
}
.mb-alerta > i { margin-top: 2px; color: var(--danger); font-size: 15px; }
.mb-alerta strong { display: block; font-size: 13px; color: var(--text-strong); margin-bottom: 3px; }
.mb-alerta div { font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }

.mb-comentarios { display: flex; flex-direction: column; gap: 9px; }

.mb-comentario {
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-left: 3px solid transparent;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mb-comentario.e-urgente { border-left-color: var(--danger); }
.mb-comentario.e-escondido { opacity: .6; }

.mb-comentario header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.mb-comentario header strong { font-size: 12.5px; color: var(--text-strong); }
.mb-comentario header span { font-size: 11px; color: var(--text-faint); }
.mb-comentario p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text); }

.mb-marca {
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 9.5px; font-style: normal; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.mb-marca.e-urgente { background: var(--danger); color: #fff; }

.mb-comentario footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 9px;
    margin-top: 10px;
}
.mb-comentario-numeros { font-size: 11px; color: var(--text-faint); }
.mb-comentario-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-apagar { color: var(--danger); }

/* =============================================================
   4. A CONTA: POR QUE PAROU
============================================================= */

.mb-estado {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 16px 0 14px;
    padding: 14px 16px;
    border-radius: var(--r);
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
}
.mb-estado.e-parada {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-2));
}
.mb-estado > i { margin-top: 1px; font-size: 16px; color: var(--success); }
.mb-estado.e-parada > i { color: var(--danger); }
.mb-estado strong { display: block; font-size: 13.5px; color: var(--text-strong); }
.mb-estado span { font-size: 12px; line-height: 1.55; color: var(--text-faint); }

.mb-faixa-conta { margin: 16px 0; }

.mb-limite {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}
.mb-limite .mt-campo { flex: 1 1 240px; margin: 0; }

.mb-sub {
    margin: 20px 0 9px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}

.mb-faturas { display: flex; flex-direction: column; gap: 5px; }
.mb-fatura {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: baseline; gap: 12px;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12px;
}
.mb-fatura-quando { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mb-fatura-valor {
    font-weight: 600; color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.mb-fatura-estado { font-size: 11px; color: var(--text-faint); }
.mb-fatura.e-aberta .mb-fatura-estado { color: var(--warn); font-weight: 600; }

/* -------------------------------------------------------------
   NO CELULAR
------------------------------------------------------------- */

@media (max-width: 720px) {
    /* OITO ABAS EM DUAS FILEIRAS DE QUATRO, sempre.
       Deixadas à vontade, oito pílulas de larguras diferentes caem
       em três fileiras irregulares, e a barra come metade da
       primeira tela. Travadas em quatro por fileira, o retângulo é
       previsível e o rótulo encolhe em vez de quebrar a linha. */
    .ma-secao {
        flex: 0 0 calc(25% - 4px);
        min-width: 0;
        padding: 9px 4px;
        font-size: 11px;
        gap: 4px;
    }
    /* O ICONE SAI NO CELULAR.
       Com oito abas em 375px sobram cinquenta pixels por pilula, e
       o icone come metade: "Campanhas" virava "Camp...". O rotulo
       e o que faz alguem achar a pagina -- o icone so a reconhece
       depois de ja ter achado. */
    .ma-secao i { display: none; }
    .ma-secao span {
        min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .mn-objetivos { grid-template-columns: 1fr; }
    .mn-passo-corpo { margin-left: 4px; padding-left: 13px; }
    .mn-midia { flex-direction: column; align-items: flex-start; }
    .mb-grade { grid-template-columns: 1fr; }
    .mb-criativo { flex-direction: column; }
    .mb-criativo-arte img, .mb-sem-arte { width: 100%; height: 148px; }
    .mb-fatura { grid-template-columns: 1fr auto; }
    .mb-fatura-estado { grid-column: 1 / -1; }
    .mn-rodape .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------
   CONECTOU, MAS FALTOU UMA CHAVE

   A janela do Facebook vem com todas as permissões ligadas, e
   desligar uma é um toque. Quem desliga "ads_management" conecta,
   vê os números, e descobre dias depois que pausar dá erro — num
   momento em que ninguém mais liga uma coisa à outra. A lista diz
   o que se PERDE, não o nome da permissão.
------------------------------------------------------------- */

.ma-faltando {
    list-style: none;
    margin: 4px 0 14px;
    padding: 0;
    display: flex; flex-direction: column; gap: 7px;
    width: 100%;
}
.ma-faltando li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
    font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.ma-faltando li i { margin-top: 2px; color: var(--danger); font-size: 12px; }

/* =============================================================
   PARIDADE COM O GERENCIADOR — interesse, posicionamento,
   conteúdo (carrossel / publicação existente), horário do dia e
   catálogo de produtos.
============================================================= */

/* -------------------------------------------------------------
   INTERESSE E COMPORTAMENTO
------------------------------------------------------------- */
.mn-opcional { font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0; }

.mn-interesse-busca {
    position: relative;
    display: flex; align-items: center;
}
.mn-interesse-busca i {
    position: absolute; left: 12px;
    font-size: 12px; color: var(--text-faint);
    pointer-events: none;
}
.mn-interesse-busca input { padding-left: 32px !important; width: 100%; }

.mn-interesse-resultados {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 220px; overflow-y: auto;
}
.mn-interesse-resultados:empty { display: none; }
.mn-interesse-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px; text-align: left;
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-interesse-item:hover { border-color: var(--accent-line); background: var(--surface-3); }
.mn-interesse-item small { color: var(--text-faint); font-size: 10.5px; flex-shrink: 0; }
.mn-interesse-estado {
    padding: 8px 4px; font-size: 11.5px; color: var(--text-faint); text-align: center;
}

.mn-interesses-escolhidos { margin-top: 2px; }

/* -------------------------------------------------------------
   POSICIONAMENTO
------------------------------------------------------------- */
.mn-posicionamento { display: flex; flex-direction: column; gap: 12px; }

.mn-segmento {
    display: inline-flex; gap: 4px;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    width: fit-content;
}
.mn-seg-op {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
}
.mn-seg-op:hover { color: var(--text); }
.mn-seg-op.on {
    background: var(--accent); color: var(--accent-ink);
}

.mn-plataformas { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-plataformas .mn-check { flex: 1 1 160px; padding: 9px 12px; }

.mn-posicoes { display: flex; flex-wrap: wrap; gap: 7px; }
.mn-check-sm {
    flex-direction: row; align-items: center; gap: 7px;
    padding: 6px 11px;
}
.mn-check-sm input { margin-top: 0; width: 13px; height: 13px; }
.mn-check-sm span { font-size: 11.5px; font-weight: 600; color: var(--text); }

/* -------------------------------------------------------------
   O CONTEÚDO: mídia, carrossel ou publicação existente
------------------------------------------------------------- */
.mn-conteudo-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 4px; margin-bottom: 4px;
    border-radius: var(--r); background: var(--surface-3);
    border: 1px solid var(--border-soft);
}
.mn-conteudo-tab {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px;
    border-radius: var(--r-sm); border: 1px solid transparent;
    background: transparent; color: var(--text-faint);
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-align: center;
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-conteudo-tab i { font-size: 16px; }
.mn-conteudo-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.mn-conteudo-tab.on {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: var(--accent-line); color: var(--accent-hi);
}
.mn-conteudo-corpo { animation: mnDesliza2 .2s ease; }
@keyframes mnDesliza2 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { .mn-conteudo-tabs { grid-template-columns: 1fr; } }

/* O carrossel */
.mn-carrossel-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.mn-cartao {
    display: flex; flex-direction: column; gap: 7px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mn-cartao-topo {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-faint);
}
.mn-cartao-remover {
    border: 0; background: transparent; color: var(--text-faint);
    cursor: pointer; padding: 2px 4px;
}
.mn-cartao-remover:hover { color: var(--danger); }
.mn-cartao img {
    width: 100%; height: 110px; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid var(--border-soft);
}
.mn-cartao-subir {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 110px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--r-sm);
    color: var(--text-faint);
    font-size: 11px; font-weight: 600;
    cursor: pointer;
}
.mn-cartao-subir:hover { color: var(--accent); border-color: var(--accent-line); }
.mn-cartao-subir i { font-size: 18px; }
.mn-cartao-subir input { display: none; }
.mn-cartao input[type="text"], .mn-cartao input[type="url"] {
    padding: 7px 9px; font-size: 11.5px;
    border: 1px solid var(--border-soft); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
}
.mn-cartao-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 168px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-cartao-add:hover { color: var(--accent); border-color: var(--accent-line); }

/* Impulsionar uma publicação existente */
.mn-posts-carregando {
    display: flex; align-items: center; gap: 9px;
    padding: 16px; justify-content: center;
    color: var(--text-faint); font-size: 12.5px;
}
.mn-posts-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 340px; overflow-y: auto;
}
.mn-post-ficha {
    display: flex; flex-direction: column; gap: 6px;
    padding: 7px;
    border: 2px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    text-align: left;
    transition: var(--t-fast);
}
.mn-post-ficha:hover { border-color: var(--accent-line); }
.mn-post-ficha.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.mn-post-ficha img {
    width: 100%; height: 90px; object-fit: cover; border-radius: var(--r-sm);
}
.mn-post-sem-foto {
    display: grid; place-items: center;
    width: 100%; height: 90px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-faint); font-size: 20px;
}
.mn-post-ficha span {
    font-size: 10.5px; line-height: 1.4; color: var(--text-faint);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* -------------------------------------------------------------
   HORÁRIO ESPECÍFICO DO DIA (dayparting)
------------------------------------------------------------- */
.mn-dayparting { border: 0; margin: 12px 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mn-dayparting legend { padding: 0; font-size: 12px; font-weight: 600; color: var(--text); }

.mn-dias-semana { display: flex; gap: 6px; }
.mn-dia-chip {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    transition: var(--t-fast);
}
.mn-dia-chip:hover { border-color: var(--accent-line); color: var(--text); }
.mn-dia-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* -------------------------------------------------------------
   CATÁLOGO DE PRODUTOS
------------------------------------------------------------- */
.mn-produtos-catalogo {
    display: flex; flex-direction: column; gap: 7px;
    max-height: 280px; overflow-y: auto;
}
.mn-produto-linha {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.mn-produto-info { display: flex; flex-direction: column; gap: 1px; flex: 0 0 140px; min-width: 0; }
.mn-produto-info b { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-produto-info small { font-size: 11px; color: var(--text-faint); }
.mn-produto-foto {
    flex: 1 1 auto; min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--border-soft); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
    font-size: 11.5px;
}
.mn-foto-ok { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.mn-foto-falta { color: var(--warn); font-size: 14px; flex-shrink: 0; }
.mn-produtos-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-width: 560px) {
    .mn-produto-linha { flex-wrap: wrap; }
    .mn-produto-info { flex: 1 1 100%; }
}

/* -------------------------------------------------------------
   QUAL CONTA DE ANÚNCIO
   -------------------------------------------------------------
   Só existe quando há mais de uma marcada para mostrar — ver
   `mnSeletorDeConta`. Fica sozinha no topo, fora do cartão do
   objetivo: a conta vale para a tela inteira, não para um passo dela.
------------------------------------------------------------- */
.mn-seletor-conta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}
.mn-seletor-conta label {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--text-faint);
    white-space: nowrap;
}
.mn-seletor-conta label i { color: var(--accent); font-size: 12px; }
.mn-seletor-conta select {
    flex: 1 1 auto; min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border-soft); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
    font-size: 12.5px; font-weight: 600;
}