/* Tokens, reset, componentes e o CSS de cada tela.
   Nao contem nada do shell: nenhuma regra aqui sabe se em volta ha barra de abas ou
   pilha de drawers. E isso que permite a mesma tela ser servida nos dois estilos. */

* { box-sizing: border-box; }

:root {
    --bg: #f9f9fa;
    --card: #ffffff;
    --topbar-bg: #f2f2f5;
    --border: #e2e2e8;
    --text: #5b5c81;
    --text-muted: #8f90ab;
    --link: #5b5c81;
    --link-hover: #35365a;
    --accent: #474fcf;
    --accent-hover: #3a41b0;
    --accent-soft: #e8e9fb;
    --sidebar-bg: #ebecf0;
    --sidebar-bg-hover: #e0e1e8;
    --sidebar-bg-active: #e8e9fb;
    --sidebar-text: #5b5c81;
    --sidebar-border: rgba(20, 20, 50, 0.08);
    --input-bg: #ffffff;
    --shadow: 0 1px 2px rgba(20, 20, 45, 0.05);
    --radius: 10px;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 72px;
    /* Altura util da barra inferior do celular, SEM o safe-area inset — quem precisa da
       altura total soma o env() por cima.

       Mora aqui, e nao em cada shell, porque os dois desenham a mesma barra e porque
       quatro lugares dependem deste numero: a barra, o padding do conteudo, a folha
       "Mais" e o painel deslizante. Enquanto era 60px escrito a mao em cada um, eles
       discordavam entre si — a barra tratava o inset como espaco de dentro e os outros
       como espaco de fora, e os icones vazavam para cima da barra. */
    --barra-inferior-h: 60px;
}

:root[data-theme="dark"] {
    --bg: #101114;
    --card: #1b1c21;
    --topbar-bg: #101114;
    --border: #2b2c33;
    --text: #eceef2;
    --text-muted: #8b8e99;
    --link: #d5d7dd;
    --link-hover: #ffffff;
    --accent: #7c72ff;
    --accent-hover: #948bff;
    --accent-soft: #262a3f;
    --sidebar-bg: #0b0c0f;
    --sidebar-bg-hover: #1c1d22;
    --sidebar-bg-active: #232429;
    --sidebar-text: #8e919c;
    --sidebar-border: rgba(255,255,255,0.06);
    --input-bg: #17181d;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html, body { height: 100%; height: -webkit-fill-available; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; font-weight: 600; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- Alerts ---------- */
.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.9rem; }
.alert-success { background: #e4f8ec; color: #167c3c; }
.alert-error { background: #fdecea; color: #c0392b; }
.alert-info { background: #e8f0fe; color: #1a56db; }
:root[data-theme="dark"] .alert-success { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .alert-error { background: #3a1a1a; color: #ff8a80; }
:root[data-theme="dark"] .alert-info { background: #172447; color: #9bb8ff; }

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-soft); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
}
/* A cor precisa ser reposta aqui, e nao so no .btn: o botao quase sempre e um <a>, e
   "a:hover" (0,1,1) tem especificidade maior que ".btn" (0,1,0). Sem esta linha, no hover
   a cor do link vencia a do botao e o texto virava --link-hover sobre --accent-hover: no
   shell GA as duas sao literalmente a mesma cor, e o rotulo sumia. */
.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-secondary { background: var(--accent-soft); color: var(--accent-hover); }
.btn-secondary:hover { background: var(--border); color: var(--accent-hover); }
.btn-link {
    background: none; border: none; color: var(--accent-hover);
    cursor: pointer; padding: 0; font-size: 0.86rem; font-weight: 600; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }

.actions { display: flex; gap: 0.75rem; align-items: center; }

/* Numa celula de tabela o display:flex acima faz estrago: ele tira o <td> do layout da
   tabela, o navegador o envolve numa celula anonima, e a borda inferior passa a ser
   desenhada na base da caixa flex — que tem a altura do conteudo, nao a da linha. O
   resultado e a divisoria da coluna de acoes alguns pixels acima das vizinhas, um degrau
   que comeca exatamente onde comeca aquela coluna.

   Aqui a celula volta a ser celula e os itens se alinham pelo fluxo inline (o
   form.inline logo abaixo e o que os mantem lado a lado). Especificidade maior que
   .actions, entao vence sem depender da ordem — e os usos em <div>, dentro dos
   formularios, continuam com o flex, que ali esta certo. */
td.actions {
    display: table-cell;
    white-space: nowrap;
}
td.actions > * { vertical-align: middle; }
td.actions > * + * { margin-left: 0.75rem; }
form.inline { display: inline; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.86rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 160px; }
.form-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.3rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
}
.badge-alta { background: #fdecea; color: #c0392b; }
.badge-media { background: #fff2dc; color: #a5620a; }
.badge-baixa { background: var(--border); color: var(--text-muted); }
/* Presenca de pessoa, nao estado de tarefa: classe propria mesmo coincidindo hoje em cor
   com a .badge-concluida, para que uma nao arraste a outra quando divergirem. */
.badge-online { background: #e4f8ec; color: #167c3c; }

.badge-a_fazer { background: var(--border); color: var(--text-muted); }
.badge-em_andamento { background: var(--accent-soft); color: var(--accent-hover); }
.badge-aguardando_cliente { background: #fff2dc; color: #a5620a; }
.badge-em_aprovacao { background: #fff2dc; color: #a5620a; }
.badge-concluida { background: #e4f8ec; color: #167c3c; }
:root[data-theme="dark"] .badge-alta { background: #3a1a1a; color: #ff8a80; }
:root[data-theme="dark"] .badge-media { background: #3a2c10; color: #ffcb7a; }
:root[data-theme="dark"] .badge-em_aprovacao { background: #3a2c10; color: #ffcb7a; }
:root[data-theme="dark"] .badge-concluida { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .badge-online { background: #12301f; color: #4fd486; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters select {
    padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit;
}

.section-title { margin: 1.75rem 0 0.75rem; font-size: 0.98rem; font-weight: 700; color: var(--text); }
.empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; }
.meta-line { color: var(--text-muted); font-size: 0.92rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* ---------- Profile ---------- */
.avatar-lg {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-hover);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 2rem; overflow: hidden; flex-shrink: 0;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.profile-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.5rem; }

/* ---------- Login ----------
   Visual fixo — claro a esquerda, escuro a direita — independente do tema do
   usuario. O login acontece antes de qualquer preferencia estar carregada, entao
   seguir o tema faria a tela piscar. Por isso as cores daqui sao literais e nao
   tokens: e a unica tela do sistema que nao acompanha o tema.

   A altura usa 100svh, a altura *estavel* da viewport. A versao antiga empilhava
   100vh + -webkit-fill-available + 100dvh e isso brigava com o `height: 100%`
   global do html/body: no celular o dvh cresce quando a barra de URL se esconde,
   o body ficava mais alto que o html e sobrava aquele scroll de poucos pixels.
   O `height: auto` aqui e o que desarma o 100% herdado. */
.login-page {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    background: #0e0f13;
}
.login-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    min-height: 100vh;
    min-height: 100svh;
}

/* --- Esquerda: o formulario --- */
/* Coluna, e nao linha: com o bloco do Google embaixo do formulario sao dois filhos, e em
   linha eles ficariam lado a lado. Com um filho so, como era antes, o eixo nao muda nada. */
.login-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1.5rem;
    background: #f9f9fa;
}
.login-form,
.login-google,
.login-rodape { width: 100%; max-width: 344px; }

.login-rodape { margin: 1.8rem 0 0; text-align: center; font-size: 0.78rem; }
.login-rodape a { color: #a5a6bd; text-decoration: none; }
.login-rodape a:hover { color: #474fcf; text-decoration: underline; }

/* "ou" com um risco de cada lado, feito com uma borda que a propria palavra interrompe. */
.login-ou {
    display: flex; align-items: center; gap: 0.8rem;
    margin: 1.3rem 0; color: #a5a6bd; font-size: 0.78rem;
}
.login-ou::before,
.login-ou::after { content: ""; flex: 1; height: 1px; background: #e2e2ea; }

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    width: 100%; padding: 0.7rem 1rem;
    border: 1px solid #dcdce4; border-radius: 8px;
    background: #fff; color: #2c2d4a;
    font-size: 0.92rem; font-weight: 600; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.btn-google:hover { background: #f4f4f7; border-color: #c9c9d4; }
.btn-google svg { flex-shrink: 0; }
.login-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; }
.login-mark {
    width: 44px; height: 44px; flex-shrink: 0; color: #474fcf;
    display: flex; align-items: center; justify-content: center;
}
.login-mark svg { width: 100%; height: 100%; display: block; }
.login-form h1 {
    margin: 0; font-size: 1.6rem; font-weight: 700;
    letter-spacing: -0.025em; color: #2c2d4a;
}
/* Assinatura ao lado da marca: menor e apagada, para nao competir com o "Uplift". */
.login-assinatura { font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: #8f90ab; margin-left: 0.15rem; }
.login-sub { margin: 0 0 1.6rem; color: #8f90ab; font-size: 0.92rem; }

/* --- Direita: a orbita de conexoes --- */
.login-art {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.5rem; padding: 2rem;
    background: radial-gradient(circle at 30% 20%, #23244d, #0b0c12 70%);
}
/* --r e o raio da orbita; os nos e os aneis todos saem dele, entao mudar o raio
   nao exige mexer em mais nada. O + 52px na caixa e para o no da borda nao cortar. */
.orbit {
    --r: min(148px, 26vw);
    position: relative;
    width: calc(var(--r) * 2 + 52px);
    height: calc(var(--r) * 2 + 52px);
    display: flex; align-items: center; justify-content: center;
}
.orbit-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.09);
}
.orbit-ring-in { width: calc(var(--r) * 1.12); height: calc(var(--r) * 1.12); }
.orbit-ring-out {
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    border-style: dashed; border-color: rgba(255, 255, 255, 0.07);
}
.orbit-core {
    position: relative; z-index: 2;
    width: 96px; height: 96px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #474fcf, #9b8bff);
    color: #fff;
    box-shadow: 0 18px 44px rgba(71, 79, 207, 0.45);
}
.orbit-core svg { width: 62%; height: 62%; display: block; }

/* O primeiro rotate leva o no para o angulo, o translate joga ele para a borda, e o
   segundo rotate desgira o icone — sem ele, cada logo ficaria tombado no proprio
   angulo. A animacao mora no filho justamente para nao disputar esse transform. */
.node {
    position: absolute; top: 50%; left: 50%;
    width: 46px; height: 46px; margin: -23px 0 0 -23px;
    transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}
.node-in {
    width: 100%; height: 100%; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    animation: node-bob 6s ease-in-out infinite;
    animation-delay: var(--d);
}
.node-in svg { width: 56%; height: 56%; display: block; }
@keyframes node-bob {
    0%, 100% { transform: translateY(-5px); }
    50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .node-in { animation: none; }
}

.login-art-text {
    margin: 0; max-width: 34ch; text-align: center;
    color: rgba(236, 238, 242, 0.72); font-size: 0.95rem; line-height: 1.6;
}

/* Abaixo de 900px a orbita sai e o formulario fica com a tela toda. */
@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; }
    .login-art { display: none; }
}

/* ---------- Resultados de midia paga (portal) ---------- */
.res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.res-eyebrow { display: block; color: var(--text-muted); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.res-period { margin: 0.25rem 0 0; font-size: 1.35rem; font-weight: 700; color: var(--text); }
.res-picker { display: flex; align-items: center; gap: 0.5rem; }
.res-picker label { color: var(--text-muted); font-size: 0.8rem; }
.res-alert { background: var(--accent-soft); color: var(--text); }

.res-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.85rem; }
.res-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem;
}
/* Tracejado marca o card que espera um numero seu, nao da plataforma. */
.res-kpi-open { border-style: dashed; box-shadow: none; }
.res-label { color: var(--text-muted); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.res-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.res-kpi-open .res-value { color: var(--text-muted); font-weight: 400; }
.res-cost { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.res-foot { font-size: 0.8rem; color: var(--text-muted); }
.res-delta { font-variant-numeric: tabular-nums; font-weight: 600; }

.res-goal { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.res-goal-track { background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.res-goal-fill { display: block; height: 6px; background: var(--accent); border-radius: 999px; }
.res-goal-hit { background: #167c3c; }
:root[data-theme="dark"] .res-goal-hit { background: #4fd486; }
.res-goal-text { color: var(--text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.res-readout p { margin: 0 0 0.8rem; }
.res-readout p:last-child { margin-bottom: 0; }
.res-headline { font-size: 1.08rem; font-weight: 600; color: var(--text); line-height: 1.5; }

.res-scroll { overflow-x: auto; }
.res-table { min-width: 660px; }
.res-num { text-align: right; font-variant-numeric: tabular-nums; }
.res-dim td { color: var(--text-muted); }
.res-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; }

/* Miniatura do criativo. Fonte da Meta e 64px; exibir a 44 mantem nitido. */
.res-criativo { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.res-thumb {
    position: relative; flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 6px; overflow: hidden;
    background: var(--border);
    display: flex; align-items: center; justify-content: center;
}
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-thumb-vazia { background: var(--accent-soft); }
.res-thumb-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 0.72rem;
}
.res-thumb-vazia .res-thumb-play { background: none; color: var(--accent); }

.res-col-bar { min-width: 190px; }
.res-bar-row { display: flex; align-items: center; gap: 0.5rem; }
.res-bar-num { font-weight: 700; font-size: 1rem; min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.res-bar-track { flex: 1; min-width: 50px; }
.res-bar { display: block; height: 10px; background: var(--accent); border-radius: 0 3px 3px 0; }
.res-bar-pct { color: var(--text-muted); font-size: 0.78rem; min-width: 4.6ch; font-variant-numeric: tabular-nums; }

.res-details summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; }
.res-details[open] summary { margin-bottom: 0.9rem; }
.res-note { color: var(--text-muted); font-size: 0.85rem; margin: 0.9rem 0 0; max-width: 68ch; }

@media (max-width: 768px) {
    .res-value { font-size: 1.6rem; }
}

/* ---------- Analise: graficos e navegacao por hierarquia ---------- */
/* As cores saem das variaveis do tema, entao o SVG acompanha claro/escuro sozinho. */
.grafico { width: 100%; height: auto; display: block; }
/* Duas larguras do mesmo grafico (Chart::seriesResponsivo): a estreita so no celular. */
.grafico-estreito { display: none; }
@media (max-width: 768px) {
    .grafico-largo { display: none; }
    .grafico-estreito { display: block; }
}
.grafico-grade { stroke: var(--border); stroke-width: 1; }
.grafico-eixo { fill: var(--text-muted); font-size: 10px; font-family: inherit; }
.grafico-barra { fill: var(--accent); opacity: 0.75; transition: opacity 0.12s ease; }
.grafico-barra:hover { opacity: 1; }
/* O dia de pico fica cheio: destaca sem precisar de rotulo em cima de cada barra. */
/* Periodo de comparacao: atras e recessivo, para o atual continuar sendo o que se le. */
.grafico-linha { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.grafico-ponto { fill: var(--accent); }

/* Paleta categorica da quebra (guia de visualizacao; validada para daltonismo nos dois
   temas: vizinhos com dE >= 8.4 simulado e >= 19 normal). A ordem importa: o slot N e
   sempre a mesma cor. "Outras" e comparacao sao cinza, nunca um slot. No tema claro,
   agua/amarelo/magenta ficam abaixo de 3:1 no branco: a legenda e o tooltip com o nome
   (e a tabela ao lado) sao a pista que o guia exige nesse caso. */
:root {
    --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
    --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948;
}
:root[data-theme="dark"] {
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
    --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767;
}
.serie-c1 { --cor: var(--serie-1); } .serie-c2 { --cor: var(--serie-2); }
.serie-c3 { --cor: var(--serie-3); } .serie-c4 { --cor: var(--serie-4); }
.serie-c5 { --cor: var(--serie-5); } .serie-c6 { --cor: var(--serie-6); }
.serie-c7 { --cor: var(--serie-7); } .serie-c8 { --cor: var(--serie-8); }
.serie-principal { --cor: var(--accent); }
.serie-outras, .serie-anterior { --cor: var(--text-muted); }
/* Opaca: com 75% (o padrao de .grafico-barra) a barra cinza da comparacao vazava por
   tras e a barra saia em dois tons. */
.grafico-barra.serie-principal { fill: var(--cor); opacity: 1; }
.grafico-barra.serie-anterior { fill: var(--border); opacity: 1; }
.grafico-linha { fill: none; stroke: var(--cor, var(--accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha.serie-anterior, .grafico-linha.serie-outras { stroke-dasharray: 4 3; stroke-width: 1.5; }
/* Dias que o Google ainda nao fechou (Search Console): mesma cor da principal, tracejado. */
.serie-parcial { --cor: var(--accent); }
.grafico-linha.serie-parcial { stroke-dasharray: 5 4; }
.grafico-ponto[class*="serie-"] { fill: var(--cor); stroke: var(--card); stroke-width: 2; }
.grafico-alvo { fill: transparent; cursor: crosshair; }
.grafico-guia { stroke: var(--text-muted); stroke-width: 1; opacity: 0; pointer-events: none; }
.grafico-guia.ativa { opacity: .6; }
.grafico-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.5rem 0 0; padding: 0; font-size: 0.8rem; color: var(--text); }
.grafico-legenda li { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 260px; min-width: 0; }
.grafico-legenda li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-chave { width: 12px; height: 3px; border-radius: 2px; background: var(--cor); flex: none; display: inline-block; }
.grafico-tooltip { position: fixed; z-index: 60; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); padding: 0.45rem 0.6rem; font-size: 0.78rem; min-width: 170px; max-width: 320px; }
.grafico-tooltip[hidden] { display: none; }
.grafico-tooltip strong { display: block; margin-bottom: 0.25rem; }
.grafico-tooltip div { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }
.grafico-tooltip div span:first-child { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-tooltip div span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- painel lateral do anuncio ---- */
.ana-link-anuncio { color: inherit; text-decoration: none; }
.ana-link-anuncio:hover .res-criativo span:last-child { text-decoration: underline; }
.ana-lateral { position: fixed; inset: 0; z-index: 70; }
.ana-lateral[hidden] { display: none; }
.ana-lateral-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ana-lateral-caixa { position: absolute; top: 0; right: 0; bottom: 0; width: min(780px, 100vw); background: var(--bg); overflow-y: auto; box-shadow: -8px 0 30px rgba(0, 0, 0, .2); }
.ana-lat-topo { position: sticky; top: 0; z-index: 3; display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; background: var(--card); border-bottom: 1px solid var(--border); }
.ana-lat-mini { width: 56px; height: 56px; flex: none; }
.ana-lat-titulo { flex: 1; min-width: 0; }
.ana-lat-titulo h2 { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.3; }
.ana-lat-titulo p { margin: 0 0 0.2rem; }
.ana-lat-fechar { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 0.2rem; }
.ana-lat-secao { margin: 0.9rem 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.ana-lat-secao > h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.ana-lat-secao .ana-graficos { margin: 0; border: 0; padding: 0; box-shadow: none; }
.ana-lat-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin: 0 0 0.9rem; }
.ana-lat-numeros dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ana-lat-numeros dd { margin: 0.1rem 0 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ana-lat-aviso { margin: 0.7rem 0 0.5rem; }
.ana-lat-videos { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ana-lat-videos figure { margin: 0; width: 120px; font-size: 0.75rem; color: var(--text-muted); }
.ana-lat-videos img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 0.2rem; }
.ana-lat-texto + .ana-lat-texto { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.ana-lat-texto p { margin: 0.35rem 0; }
.ana-lat-corpo { line-height: 1.5; margin: 0.3rem 0; overflow-wrap: anywhere; }
.ana-lat-copiar { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.55rem; cursor: pointer; font: inherit; font-size: 0.78rem; color: var(--text-muted); }
.ana-lat-previa { margin-top: 0.8rem; display: flex; justify-content: center; min-height: 120px; }
.ana-previa-meta { border: 0; max-width: 100%; background: #fff; border-radius: 8px; }
.ana-imitacao { width: min(360px, 100%); }
.ana-imitacao-aviso { text-align: center; margin: 0 0 0.5rem; }
.ana-imitacao-post { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.ana-imitacao-cab { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem; font-size: 0.85rem; }
.ana-imitacao-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); flex: none; }
.ana-imitacao-corpo { padding: 0 0.7rem; margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ana-imitacao-post img { width: 100%; display: block; }
.ana-imitacao-rodape { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; padding: 0.6rem 0.7rem; background: var(--bg); font-size: 0.85rem; }
.ana-imitacao-cta { flex: none; background: var(--accent-soft); color: var(--text); border-radius: 6px; padding: 0.35rem 0.7rem; font-weight: 600; font-size: 0.8rem; }
@media (max-width: 768px) {
    .ana-lateral-caixa { width: 100vw; }
    .ana-lat-secao { margin: 0.6rem; padding: 0.8rem; }
}

/* ---- analise estilo Meta ---- */
.ana-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ana-topo-dir { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-left: auto; }
.ana-atualizado { color: var(--text-muted); font-size: 0.8rem; }
.ana-atualizado-velho { color: #b3261e; font-weight: 600; }
:root[data-theme="dark"] .ana-atualizado-velho { color: #ff8a80; }

.ana-abas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; overflow-x: auto; }
.ana-aba { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ana-aba.ativa { border-bottom-color: var(--accent); }
.ana-aba > a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
.ana-aba.ativa > a { color: var(--text); }
.ana-aba-sel { font-size: 0.75rem; background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 0.1rem 0.25rem 0.1rem 0.55rem; }
.ana-aba-limpar { margin-left: 0.15rem; padding: 0 0.3rem; text-decoration: none; color: var(--text-muted); font-size: 1rem; line-height: 1; }

/* Filtros em chips, como na Meta. */
.ana-filtros { position: relative; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ana-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 0.82rem; }
.ana-chip-texto { display: inline-flex; align-items: center; background: none; border: 0; padding: 0.3rem 0.35rem 0.3rem 0.75rem; cursor: pointer; color: var(--text); font: inherit; }
.ana-chip-texto .ana-dot { margin-right: 0.3rem; }
.ana-chip-remover { padding: 0.3rem 0.65rem 0.3rem 0.3rem; text-decoration: none; color: var(--text-muted); font-size: 1rem; line-height: 1; }
.ana-chip-novo { background: none; border: 1px dashed var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; color: var(--accent); font: inherit; font-size: 0.82rem; font-weight: 600; }
.ana-filtros-limpar { font-size: 0.8rem; color: var(--text-muted); }
.ana-filtro-painel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 0.85rem; width: min(460px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 0.6rem; }
.ana-filtro-painel form { display: flex; flex-direction: column; gap: 0.6rem; }
.ana-filtro-campo { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--text-muted); }
.ana-filtro-condicao { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; }
.ana-filtro-valor { display: inline-flex; align-items: center; gap: 0.3rem; }
.ana-filtro-valor input { width: 7.5rem; }
.ana-filtro-painel select, .ana-filtro-painel input[type="text"] { padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit; }
.ana-filtro-erro { margin: 0; color: #b3261e; font-size: 0.8rem; }
:root[data-theme="dark"] .ana-filtro-erro { color: #ff8a80; }
.ana-filtro-botoes { display: flex; justify-content: flex-end; gap: 0.4rem; }
/* display proprio ganha do [hidden] do navegador (ver .cri-fila); o JS esconde estes. */
.ana-filtro-painel[hidden], .ana-filtro-valor[hidden], .ana-aba-sel[hidden] { display: none; }

.ana-barra { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ana-alcance { color: var(--text-muted); font-size: 0.85rem; }
.ana-alcance strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ana-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Botao de painel aberto fica "aceso" (cor cheia); fechado, o visual normal. Aceso e nao
   esmaecido: botao apagado parece desabilitado. O estado ja vem no aria-expanded. */
.ana-acoes .btn-secondary[aria-expanded="true"],
.ana-acoes .btn-secondary[aria-expanded="true"]:hover { background: var(--accent); color: #fff; }
/* Folga para o cabecalho fixo nao cobrir o titulo quando a tela desliza ate o painel. */
.ana-graficos, [data-painel] { scroll-margin-top: 80px; }
.ana-graficos { margin-bottom: 0.75rem; }
/* Mesmo visual do .filters select, que a tela antiga usava. */
.ana-cliente select, .ana-fluxo select, .cal-rodape select, .cal-rodape input[type="date"] {
    padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit;
}
/* Painel de graficos: cards, controles e os graficos empilhados. */
.ana-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin-bottom: 0.85rem; align-items: stretch; }
.ana-card { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; cursor: pointer; color: var(--text); font: inherit; }
.ana-card:hover { border-color: var(--accent); }
.ana-card.ativo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ana-card-valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ana-card-config { align-self: center; justify-self: start; background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 0.45rem 0.7rem; cursor: pointer; color: var(--text-muted); font: inherit; font-size: 0.82rem; }
.ana-grafico-controles { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; font-size: 0.85rem; }
.ana-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ana-seg button { background: none; border: 0; padding: 0.35rem 0.75rem; cursor: pointer; color: var(--text-muted); font: inherit; }
.ana-seg button + button { border-left: 1px solid var(--border); }
.ana-seg button.ativo { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.ana-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.75rem; cursor: pointer; color: var(--text-muted); font: inherit; }
.ana-toggle.ativo { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.ana-m2 { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.ana-m2 select { padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; max-width: 220px; }
.ana-grafico + .ana-grafico { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.ana-grafico-titulo { margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ana-graficos.carregando, .ana-publico.carregando, .ana-desempenho.carregando { opacity: .55; transition: opacity .15s; }
/* Painel "Ver desempenho": os cards de conjunto do /desempenho, sem moldura extra em volta. */
.ana-desempenho { margin-bottom: 0.75rem; }
.ana-desempenho[hidden] { display: none; }
.ana-desempenho-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ana-desempenho details.des-explica summary { cursor: pointer; }
.ana-desempenho details.des-explica[open] summary { margin-bottom: 0.6rem; }
/* Publico e posicionamento (Bloco B). */
.ana-publico { margin-bottom: 0.75rem; }
.ana-publico[hidden] { display: none; }
.ana-publico-blocos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.ana-publico-bloco .ana-seg { margin: 0.25rem 0 0.75rem; }
.ana-publico-tabela[hidden] { display: none; }
.ana-publico-linha { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.ana-publico-linha:last-child { border-bottom: 0; }
.ana-publico-topo { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 0.5rem; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.ana-publico-topo span { text-align: right; color: var(--text-muted); }
.ana-publico-barra { position: relative; height: 14px; margin-top: 0.3rem; background: var(--border); border-radius: 4px; overflow: hidden; }
.ana-publico-barra span { display: block; height: 100%; }
.ana-publico-gasto span { background: var(--text-muted); opacity: .45; }
.ana-publico-res span { background: var(--accent); }
.ana-publico-barra em { position: absolute; right: 6px; top: 0; font-size: 0.68rem; line-height: 14px; font-style: normal; color: var(--text); }
.ana-lateral-caixa .ana-publico-blocos { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 768px) {
    .ana-publico-blocos { grid-template-columns: minmax(0, 1fr); }
    .ana-publico-topo { grid-template-columns: 1fr 1fr 1fr; }
    .ana-publico-topo strong { grid-column: 1 / -1; }
    .ana-publico-topo span { text-align: left; }
}
.ana-col-aviso { color: #b3261e; }
:root[data-theme="dark"] .ana-col-aviso { color: #ff8a80; }

.ana-tabela th[data-ordenar] { cursor: pointer; user-select: none; white-space: nowrap; }
.ana-tabela th[data-ordem="asc"]::after { content: " \25B2"; font-size: 0.7em; }
.ana-tabela th[data-ordem="desc"]::after { content: " \25BC"; font-size: 0.7em; }
.ana-tabela td.res-num { white-space: nowrap; }
.ana-col-sel { width: 2.25rem; }
.ana-col-veic { white-space: nowrap; }
.ana-var { display: block; font-size: 0.72rem; font-weight: 600; }
.ana-tipo { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; white-space: normal; line-height: 1.25; }
.ana-tabela .ana-tipo { white-space: nowrap; }
.ana-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-bottom: 0.85rem; }
.ana-destaque { display: flex; flex-direction: column; gap: 0.2rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; }
.ana-tabela th.ana-col-destaque { font-weight: 800; color: var(--text); }
.ana-tabela td.ana-col-destaque, .ana-tabela th.ana-col-destaque { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.ana-var-bom { color: #167c3c; }
.ana-var-ruim { color: #b3261e; }
.ana-var-neutro { color: var(--text-muted); }
:root[data-theme="dark"] .ana-var-bom { color: #4fd486; }
:root[data-theme="dark"] .ana-var-ruim { color: #ff8a80; }
.ana-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); margin-right: 0.4rem; vertical-align: middle; }
.ana-dot-on { background: #1f9d55; }
/* Checkbox e Nome fixos ao rolar a tabela na horizontal, como no app da Meta. */
/* separate, e nao o collapse do resto do sistema: no collapse o traco entre as linhas e
   pintado pela TABELA, numa camada abaixo das celulas, e as duas colunas sticky (com fundo
   proprio) o cobriam quando a linha terminava em fracao de pixel — escala de 125% no
   Windows, zoom, nome quebrando em 2-3 linhas. Separado, cada celula pinta o proprio traco,
   inclusive as sticky. Espacamento zero deixa o desenho igual ao de antes. */
.ana-tabela { border-collapse: separate; border-spacing: 0; }
.ana-tabela .ana-col-sel { position: sticky; left: 0; z-index: 2; background: var(--card); }
.ana-tabela .ana-col-nome { position: sticky; left: 2.25rem; z-index: 1; background: var(--card); min-width: 200px; max-width: 320px; }

.cal { position: relative; }
.cal-vs { color: var(--text-muted); font-size: 0.85em; margin-left: 0.35rem; }
.cal-painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 0.75rem; width: min(720px, calc(100vw - 32px)); }
.cal-corpo { display: flex; gap: 0.75rem; }
.cal-atalhos { list-style: none; margin: 0; padding: 0 0.5rem 0 0; min-width: 150px; border-right: 1px solid var(--border); }
.cal-atalhos button { background: none; border: 0; width: 100%; text-align: left; padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 0.85rem; }
.cal-atalhos button.ativo, .cal-atalhos button:hover { background: var(--accent-soft); }
.cal-meses { display: flex; gap: 1rem; flex: 1; min-width: 0; }
.cal-mes { flex: 1; min-width: 0; }
.cal-mes table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; text-align: center; font-size: 0.8rem; }
.cal-mes th { color: var(--text-muted); font-weight: 600; padding: 0.2rem 0; border: 0; }
.cal-mes td { padding: 1px 0; border: 0; }
.cal-mes td button { width: 100%; height: 2rem; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text); font: inherit; }
.cal-mes td button.no-intervalo { background: var(--accent-soft); border-radius: 0; }
.cal-mes td button.ponta { background: var(--accent); color: #fff; }
.cal-mes td button:disabled { opacity: .35; cursor: default; }
.cal-mes-topo { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 0.3rem; text-transform: capitalize; }
.cal-mes-topo button { background: none; border: 0; cursor: pointer; font-size: 1.2rem; color: var(--text); padding: 0 0.4rem; }
/* No desktop a seta de avancar mora no segundo mes; no celular so o primeiro aparece. */
.cal-so-celular { visibility: hidden; }
.cal-rodape { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.6rem; }
.cal-comparar { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.cal-botoes { margin-left: auto; display: flex; gap: 0.4rem; }

.ana-colunas { border: 1px solid var(--border); border-radius: 12px; padding: 0; width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--card); color: var(--text); }
.ana-colunas::backdrop { background: rgba(0, 0, 0, .45); }
.ana-colunas form { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
.ana-colunas-topo, .ana-colunas-rodape { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; flex-wrap: wrap; }
.ana-colunas-topo { border-bottom: 1px solid var(--border); }
.ana-colunas-rodape { border-top: 1px solid var(--border); }
.ana-colunas-topo h2 { margin: 0; font-size: 1.05rem; }
.ana-colunas-topo input[type="search"] { padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit; min-width: 220px; }
.ana-colunas-botoes { display: flex; gap: 0.4rem; }
.ana-visao-faixa { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0.5rem 0.85rem; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 0.86rem; }
/* Texto corrido (tem <span> no meio): sem o flex da faixa acima, que espalharia os pedacos. */
.ana-recorte { margin-bottom: 0.75rem; padding: 0.5rem 0.85rem; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 0.86rem; }
.ana-colunas-aviso { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0; padding: 0.6rem 1rem; background: var(--accent-soft); color: var(--text); font-size: 0.86rem; }
.ana-colunas-fechar { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 1.6rem; line-height: 1; padding: 0 0.3rem; }
.ana-ordenar-cel { display: none; }
/* min-height: 0 deixa o corpo encolher e rolar; sem isso ele empurra o rodape para fora. */
.ana-colunas-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; overflow: auto; min-height: 0; }
.ana-colunas-catalogo fieldset { border: 0; padding: 0; margin: 0 0 0.75rem; }
.ana-colunas-catalogo legend { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
.ana-colunas-catalogo label { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; font-size: 0.9rem; }
.ana-colunas-ordem ol { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ana-colunas-ordem li { display: flex; align-items: center; gap: 0.2rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.3rem; cursor: grab; background: var(--card); font-size: 0.9rem; }
.ana-colunas-ordem li.arrastando { opacity: .5; }
.ana-colunas-ordem li .ana-col-estrela { color: var(--text-muted); font-size: 1.05rem; }
.ana-colunas-ordem li .ana-col-estrela[aria-pressed="true"] { color: #d99a00; }
.ana-col-rotulo { flex: 1; min-width: 0; }
.ana-colunas-ordem li button { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 0.1rem 0.35rem; font-size: 0.95rem; }

@media (max-width: 768px) {
    /* dvh = altura visivel de fato; 100vh no celular conta a area atras da barra de endereco. */
    .cal-painel { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 0.6rem; }
    .cal-corpo { gap: 0.5rem; }
    .cal-mes td button { height: 1.8rem; }
    .cal-atalhos button { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
    .cal-rodape { margin-top: 0.4rem; padding-top: 0.5rem; }
    .cal-corpo { flex-direction: column; }
    .cal-atalhos { display: flex; flex-wrap: wrap; gap: 0.2rem; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 0.5rem; }
    .cal-atalhos li { flex: 0 0 auto; }
    .cal-atalhos button { width: auto; border: 1px solid var(--border); }
    .cal-mes + .cal-mes { display: none; }
    .cal-so-celular { visibility: visible; }
    .ana-topo-dir { width: 100%; justify-content: space-between; }
    .cal-botao { white-space: normal; text-align: left; font-size: 0.85rem; }
    .cal-vs { display: block; margin-left: 0; }
    .ana-cliente, .ana-cliente select { width: 100%; }
    .ana-colunas-corpo { grid-template-columns: 1fr; }

    /* Janela de colunas/cards em tela cheia: topo e rodape fixos, so a lista rola. */
    .ana-colunas { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .ana-colunas form { height: 100%; max-height: none; }
    .ana-colunas-corpo { flex: 1; }
    .ana-colunas-topo input[type="search"] { min-width: 0; width: 100%; }
    .ana-colunas-rodape .btn { padding-left: 0.8rem; padding-right: 0.8rem; }

    /* Tabela vira cartoes: nome e situacao em cima, metricas em grade de 2. */
    .ana-ordenar-cel { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
    .ana-ordenar-cel label { flex: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
    .ana-ordenar-cel select { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: 0.86rem; }
    /* body na frente: empata com ".shell-ga .card" e o shell-ga.css carrega depois. */
    body .card.ana-tabela-card { padding: 0; background: none; border: 0; box-shadow: none; }
    .ana-tabela-card .res-scroll { overflow: visible; }
    .ana-tabela { min-width: 0; width: 100%; }
    .ana-tabela, .ana-tabela tbody, .ana-tabela tfoot { display: block; }
    .ana-tabela thead { display: none; }
    .ana-tabela tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 0.6rem; position: relative; padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.6rem; }
    /* tbody/tfoot no seletor: precisa ganhar do ".shell-ga td" (shell-ga.css), que da padding. */
    .ana-tabela tbody td, .ana-tabela tfoot td { display: block; padding: 0; border: 0; font-size: 0.9rem; }
    .ana-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 0.7rem; line-height: 1.25; color: var(--text-muted); font-weight: 600; margin-bottom: 0.1rem; }
    .ana-tabela td.res-num { text-align: left; }
    .ana-tabela .ana-tipo { white-space: normal; }
    .ana-destaques { grid-template-columns: 1fr 1fr; }
    .ana-tabela td.ana-col-destaque { order: -1; font-weight: 700; background: none; }
    .ana-tabela .ana-col-nome, .ana-tabela .ana-col-veic { order: -2; }
    .ana-tabela .ana-col-sel, .ana-tabela .ana-col-nome { position: static; background: none; min-width: 0; max-width: none; }
    .ana-tabela .ana-col-nome { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
    .ana-tabela tbody .ana-col-veic { grid-column: 1 / -1; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); }
    .ana-tabela .ana-col-veic::before { display: none !important; }
    /* Checkbox no canto; sem ele (aba Anuncios) a celula some. */
    .ana-tabela td.ana-col-sel { position: absolute; top: 0.75rem; right: 0.75rem; left: auto; width: auto; }
    .ana-tabela td.ana-col-sel:not(:has(input)) { display: none; }
    .ana-tabela tr:has(td.ana-col-sel input) .ana-col-nome { padding-right: 2rem; }
    .ana-tabela tfoot tr { background: var(--accent-soft); border-color: transparent; }
    .ana-tabela tfoot td { border: 0; }
    .ana-tabela tfoot .ana-col-veic { display: none; }
    .ana-tabela .res-thumb { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .grafico-barra { transition: none; }
}


/* ---------- Previa do portal (visao da equipe) ---------- */
/*
 * Tarja e nao card: precisa parecer moldura em volta da tela do cliente, nao mais um
 * bloco DENTRO dela. Se ela se parecesse com o conteudo, a previa passaria a mentir sobre
 * o que o cliente enxerga — que e justamente o que ela existe para evitar.
 */
.previa-tarja {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
}
.previa-topo { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.previa-topo strong { color: var(--accent-hover); }
.previa-topo span { color: var(--text-muted); }
.previa-topo form { margin-left: auto; }
.previa-topo select { padding: 0.35rem 0.55rem; border-radius: 8px; border: 1px solid var(--border); }

.previa-linha { margin: 0.55rem 0 0; line-height: 1.5; }
.previa-rotulo { font-weight: 700; }
/* Aviso e o que explica tela vazia; fica destacado porque e ele que pede acao sua. */
.previa-aviso { color: #a5620a; }
:root[data-theme="dark"] .previa-aviso { color: #ffcb7a; }


/* Enxerto de admin dentro da previa. Cor da tarja, nao da ficha: precisa ficar obvio que
   este controle nao faz parte do que o cliente enxerga. */
.previa-controle select {
    font-size: 0.78rem; padding: 0.25rem 0.4rem;
    border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-hover);
    border-radius: 6px;
}


/* ---------- Canais: fluxo de aquisicao ---------- */
/*
 * Cinco cores fixas em vez de var(--accent): sao series que precisam ser distinguidas
 * entre si, e nao um destaque unico. Os tons foram escolhidos para segurar contraste no
 * claro e no escuro, entao nao ha segunda paleta por tema.
 */
.fluxo-c0 { fill: #474fcf; }
.fluxo-c1 { fill: #2f8f6b; }
.fluxo-c2 { fill: #c9781e; }
.fluxo-c3 { fill: #a93a67; }
.fluxo-c4 { fill: #4a7ea8; }

/* Faixa mais clara que a coluna: a coluna e o fato, a faixa e a ligacao entre dois fatos. */
.fluxo-faixa { opacity: 0.28; }
.fluxo-rotulo { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.fluxo-total { fill: var(--text); font-size: 13px; font-weight: 700; font-family: inherit; }

.fluxo-legenda {
    list-style: none; margin: 0.9rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.85rem;
}
.fluxo-legenda li { display: flex; align-items: center; gap: 0.45rem; }
.fluxo-legenda small { color: var(--text-muted); font-size: 0.72rem; }
.fluxo-cor { width: 11px; height: 11px; border-radius: 3px; flex: none; }
/* A legenda usa as mesmas classes do SVG, que pintam com fill; aqui precisa de background. */
.fluxo-cor.fluxo-c0 { background: #474fcf; }
.fluxo-cor.fluxo-c1 { background: #2f8f6b; }
.fluxo-cor.fluxo-c2 { background: #c9781e; }
.fluxo-cor.fluxo-c3 { background: #a93a67; }
.fluxo-cor.fluxo-c4 { background: #4a7ea8; }

.canal-share { display: block; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
.canal-tipos { margin-top: 0.9rem; font-size: 0.88rem; }
.campos-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; }
.campos-formula { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; }
.campos-lista input[type="search"] { width: 100%; margin-top: 0.35rem; padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit; }
.campos-lista > label { font-weight: 600; font-size: 0.9rem; }
.campos-metricas { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 360px; overflow: auto; }
.campos-metricas button { background: none; border: 0; width: 100%; text-align: left; padding: 0.35rem 0.4rem; border-radius: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 0.85rem; }
.campos-metricas button:hover { background: var(--accent-soft); }
.campos-metricas code { display: block; color: var(--text-muted); font-size: 0.75rem; }
@media (max-width: 768px) { .campos-grade { grid-template-columns: 1fr; } }
.canal-tipos summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
.canal-campo { width: 6.5rem; text-align: right; padding: 0.35rem 0.5rem; }
.canal-travado { color: var(--text-muted); border-bottom: 1px dashed var(--border); cursor: help; }

/* ---------- Criativos ---------- */

.cri-cabecalho { margin-bottom: 1.1rem; }
.cri-cabecalho h3 { margin-bottom: 0.4rem; }
.cri-explica { line-height: 1.5; max-width: 62ch; }

/* Area de soltar arquivo. E um <label> envolvendo um input escondido, entao o clique em
   qualquer ponto dela ja abre o seletor sem precisar de JavaScript para isso. */
.cri-solta {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 1.9rem 1.2rem; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cri-solta:hover { border-color: var(--accent); }
.cri-solta strong { color: var(--text); font-size: 0.98rem; }
.cri-solta span { font-size: 0.85rem; }
.cri-solta-nota { max-width: 46ch; font-size: 0.78rem; margin-top: 0.35rem; }
.cri-solta-ativa { border-color: var(--accent); background: var(--accent-soft); }

/* Fila do upload */
.cri-fila { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
/* display:flex ganha do [hidden] do navegador, que so define display:none. Sem esta
   linha a fila vazia continuaria ocupando a margem de cima. */
.cri-fila[hidden] { display: none; }
.cri-fila-item {
    padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.cri-fila-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cri-fila-nome { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cri-fila-situacao { font-size: 0.78rem; color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
.cri-fila-detalhe { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

.cri-barra { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 0.5rem; }
/* Sem transicao de largura: a barra e alimentada por eventos reais de rede, e suavizar
   faria ela mostrar um numero que ja passou. Numa conexao que oscila isso importa. */
.cri-barra-cheia { display: block; height: 100%; width: 0; background: var(--accent); }

.cri-fila-ok .cri-barra-cheia { background: #2f8f6b; }
.cri-fila-erro .cri-barra-cheia { background: #c0392b; }
.cri-fila-erro .cri-fila-detalhe { color: #c0392b; }

/* Grade de pecas */
.cri-grade {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem;
}
.cri-card {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column; background: var(--bg);
}

/* 4:5 e o meio termo entre 9:16 e 1:1, que sao os dois formatos que aparecem juntos na
   mesma lista. Fixar a altura evita a grade pular conforme a proporcao de cada peca. */
.cri-thumb {
    position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; cursor: pointer;
    background: var(--accent-soft); display: block; width: 100%; overflow: hidden;
}
.cri-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cri-thumb:hover .cri-play { transform: translate(-50%, -50%) scale(1.08); }

.cri-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1rem; padding-left: 3px;
    transition: transform 0.15s ease;
}
.cri-thumb-sem-preview { cursor: pointer; }
.cri-sem-preview {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 0.76rem; color: var(--text-muted); font-style: italic;
}

.cri-corpo { padding: 0.7rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.cri-nome { display: flex; align-items: baseline; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; }
.cri-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cri-renomear { font-size: 0.72rem; flex: none; opacity: 0; transition: opacity 0.12s ease; }
.cri-card:hover .cri-renomear, .cri-renomear:focus { opacity: 1; }

.cri-ficha { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cri-selo { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* O id da Meta e feito para ser copiado e colado no Gerenciador, entao ele e um botao
   que copia — e nao um texto que voce seleciona a mao com o mouse. */
.cri-id {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.7rem; color: var(--text-muted); font-family: inherit;
    border-bottom: 1px dashed var(--border);
}
.cri-id:hover { color: var(--accent); }

.cri-erro { font-size: 0.76rem; color: #c0392b; margin: 0; line-height: 1.4; word-break: break-word; }
.cri-ok { font-size: 0.76rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
:root[data-theme="dark"] .cri-erro { color: #ff8a80; }

.cri-acoes { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.35rem; font-size: 0.8rem; }
.btn-pequeno { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.cri-excluir { color: var(--text-muted); }
.cri-excluir:hover { color: #c0392b; }

/* Player */
.cri-player { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; }
.cri-player[hidden] { display: none; }
.cri-player-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.cri-player-caixa {
    position: relative; background: var(--card); border-radius: 12px;
    max-width: min(92vw, 560px); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.cri-player-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.9rem;
}
.cri-player-fechar { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-muted); }
.cri-player-fechar:hover { color: var(--text); }
.cri-player-midia { display: grid; place-items: center; background: #000; min-height: 200px; overflow: auto; }
.cri-player-midia video, .cri-player-midia img { max-width: 100%; max-height: 74vh; display: block; }
.cri-player-aviso { color: var(--text-muted); background: var(--bg); padding: 1.2rem; margin: 0; font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 768px) {
    .cri-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
    /* No celular o botao de renomear nao tem hover para aparecer. */
    .cri-renomear { opacity: 1; }
}

.cri-conta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.74rem; color: var(--text-muted); }
.cri-conta select { font-size: 0.8rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-family: inherit; }

/* Envio parado: amarelo e nao vermelho de proposito. Vermelho e desfecho, e parado ainda
   pode voltar a andar sozinho — pintar de erro antes da hora ensina a ignorar o vermelho. */
.cri-fila-parado .cri-barra-cheia { background: #c9781e; }
.cri-fila-parado .cri-fila-situacao { color: #a5620a; }
.cri-fila-parado .cri-fila-detalhe { color: #a5620a; }
.cri-cancelar { font-size: 0.74rem; flex: none; color: var(--text-muted); }
.cri-cancelar:hover { color: #c0392b; }

/* "Tem imagem mas o player nao abre" e diferente de "nao tem imagem": aqui a arte esta
   visivel atras, entao o aviso vai no rodape do quadro em vez de no meio dele. */
.cri-sem-player {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.25rem 0.4rem; font-size: 0.68rem; text-align: center;
    background: rgba(0, 0, 0, 0.55); color: #fff;
}

/* ---------- Desempenho dos criativos ---------- */

.des-explica p { margin: 0 0 0.6rem; line-height: 1.55; }
.des-explica p:last-child { margin-bottom: 0; }

.des-cabecalho { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.des-cabecalho h3 { margin: 0.1rem 0 0; }

/* O conjunto vem abaixo e menor que a campanha (que e o titulo), mas sempre presente.
   Nome proprio: .des-conjunto e a classe do card inteiro, e herdar este estilo deixava o
   card todo em caixa alta (incidente de 2026-10-01). */
.des-conjunto-nome {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 0.15rem;
}


.des-resumo { font-size: 0.9rem; margin: 0 0 1.1rem; line-height: 1.5; }

.des-grade {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 0.9rem;
}
/* Sem isto a coluna da grade cresce ate caber o nome inteiro do anuncio (que nao quebra
   linha de proposito) e o card passa da largura da tela no celular; o "..." do nome so
   funciona se o item da grade puder encolher. */
.des-grade > li { min-width: 0; }

.des-card { display: flex; gap: 0.75rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; background: var(--bg); }

.des-thumb {
    position: relative; flex: none; width: 62px; height: 78px; border-radius: 6px;
    overflow: hidden; background: var(--accent-soft);
}
.des-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.des-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.6rem; padding-left: 2px;
}

.des-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.des-nome { font-weight: 600; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.des-selos { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.des-pausado { opacity: .6; }
.des-pausado:hover { opacity: 1; }

/* As duas barras na MESMA escala. E a diferenca de comprimento entre elas que carrega a
   informacao, entao escala independente por barra destruiria a leitura. */
.des-barras { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.1rem; }
.des-barra { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--text-muted); }
.des-barra-rotulo { width: 4.4rem; flex: none; }
.des-barra-trilho { flex: 1; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.des-barra-cheia { display: block; height: 100%; border-radius: 4px; }
.des-barra-valor { width: 3rem; text-align: right; flex: none; font-variant-numeric: tabular-nums; }

.des-entrega { background: var(--text-muted); }
.des-rende { background: #2f8f6b; }
.des-fica-devendo { background: #c9781e; }

.des-indice { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.des-indice strong { font-size: 0.95rem; color: var(--text); }
.des-indice small { display: block; font-size: 0.68rem; }

.des-numeros {
    display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.3rem;
    font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.des-ocultos { margin-top: 1rem; }
.des-ocultos summary { cursor: pointer; font-size: 0.82rem; color: var(--text-muted); }
.des-ocultos summary:hover { color: var(--text); }
.des-ocultos .des-grade { margin-top: 0.8rem; }

@media (max-width: 768px) {
    .des-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Paginas de documento (politica de privacidade) ---------- */
/* Usa as variaveis de tema, e nao cores fixas como a tela de login: esta pagina pode ser
   aberta de dentro do painel, por quem ja escolheu o tema escuro. */

.doc-page { background: var(--bg); }

.doc {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}

.doc-head { margin-bottom: 2.4rem; }
.doc-brand {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--accent); font-weight: 700; font-size: 1.05rem;
    text-decoration: none; margin-bottom: 1.6rem;
}
.doc-mark { width: 30px; height: 30px; display: flex; }
.doc-mark svg { width: 100%; height: 100%; }

.doc h1 {
    margin: 0; font-size: 1.75rem; font-weight: 700;
    letter-spacing: -0.025em; color: var(--link-hover);
}
.doc-sub { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.86rem; }

.doc section { margin-bottom: 2.2rem; }
.doc h2 {
    margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 700;
    color: var(--link-hover);
}
.doc p { margin: 0 0 0.9rem; }
.doc ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.doc li { margin-bottom: 0.4rem; }
.doc strong { color: var(--link-hover); font-weight: 600; }
.doc a { color: var(--accent); }

/* O paragrafo que o leitor precisa ver mesmo se so passar o olho. */
.doc-destaque {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.1rem;
}

.doc-foot {
    margin-top: 3rem; padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
}

/* A barra do gasto e a mais apagada das tres: ela e contexto para as outras duas, nao a
   comparacao principal. */
.des-gasto { background: var(--border); }

/* ---------- Ajustes de componente no celular ---------- */
/* Vieram do bloco de celular do shell classico, mas nunca foram shell: dizem como card,
   tabela e filtro se comportam em tela estreita, e isso vale igual com barra de abas ou
   com pilha de drawers. Deixa-los la faria o estilo GA nascer sem tabela rolavel no
   celular — foi a checagem de seletor repetido entre os dois arquivos que pegou isso. */
@media (max-width: 768px) {
    .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 560px; }
    .filters select { flex: 1 1 100%; }
    .form-row .btn { width: 100%; justify-content: center; }
}


/* ---------- Quadros de tarefas (fase A, 2026-10-01) ---------- */
.quadro-barra { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.quadro-seletor { max-width: 320px; }
/* Mesmo visual do .filters select: estes campos ficam fora de .form-group e .filters. */
.quadro-seletor, .coluna-form input[type="text"], .coluna-form select, .quadro-grupo td select {
    padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit;
}
.quadro-engrenagem { display: inline-flex; color: var(--text-muted); }
.quadro-engrenagem:hover { color: var(--accent); }
.quadro-visoes { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-left: auto; }
.quadro-visoes a { padding: 0.4rem 0.85rem; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; }
.quadro-visoes a + a { border-left: 1px solid var(--border); }
.quadro-visoes a.ativa { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
.quadro-aviso { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; max-width: 360px; }

/*
 * Colunas lado a lado com rolagem horizontal. No celular cada coluna ocupa quase a tela e
 * encaixa ao deslizar: e o jeito de caber um quadro de 5 colunas em 500px sem miniaturizar.
 */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.75rem; align-items: flex-start; }
.kanban-coluna {
    flex: 0 0 280px; background: var(--bg-soft, var(--border)); border-radius: var(--radius);
    padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: calc(100vh - 220px);
}
.kanban-coluna-topo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 0.9rem; padding: 0.2rem 0.3rem; }
.kanban-coluna-topo small { color: var(--text-muted); font-weight: 500; }
.kanban-tipo-concluida .kanban-coluna-topo { color: #167c3c; }
.kanban-tipo-aguardando_cliente .kanban-coluna-topo,
.kanban-tipo-em_aprovacao .kanban-coluna-topo { color: #a5620a; }
:root[data-theme="dark"] .kanban-tipo-concluida .kanban-coluna-topo { color: #4fd486; }
:root[data-theme="dark"] .kanban-tipo-aguardando_cliente .kanban-coluna-topo,
:root[data-theme="dark"] .kanban-tipo-em_aprovacao .kanban-coluna-topo { color: #ffcb7a; }
/* min-height: coluna vazia precisa de area para receber card arrastado. */
.kanban-lista { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; min-height: 40px; }
.kanban-card {
    display: flex; flex-direction: column; gap: 0.45rem; padding: 0.65rem 0.75rem;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); color: var(--text); text-decoration: none; cursor: grab;
}
.kanban-card:hover { border-color: var(--accent); }
.kanban-card-titulo { font-size: 0.9rem; line-height: 1.4; }
.kanban-card-pe { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.kanban-prioridade { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.kanban-prioridade-alta { background: #c0392b; }
.kanban-prioridade-media { background: #e6a23c; }
.kanban-prazo.atrasado { color: #c0392b; font-weight: 600; }
:root[data-theme="dark"] .kanban-prazo.atrasado { color: #ff8a80; }
.kanban-contador { display: inline-flex; align-items: center; gap: 0.2rem; }
.kanban-contador svg { width: 13px; height: 13px; }
.kanban-oculto { display: inline-flex; }
.kanban-oculto svg { width: 14px; height: 14px; }
.kanban-resp {
    margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hover);
    font-size: 0.65rem; font-weight: 700;
}
.kanban-card-fantasma { opacity: 0.4; }
.kanban-novo input { width: 100%; background: transparent; border: 1px dashed var(--border); font-size: 0.85rem; }
.kanban-novo input:focus { background: var(--card); border-style: solid; }

.quadro-grupo > summary { cursor: pointer; list-style: none; }
.quadro-grupo > summary::-webkit-details-marker { display: none; }
.quadro-grupo[open] > summary { margin-bottom: 0.6rem; }

.tcal-topo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.tcal-topo strong { min-width: 170px; text-align: center; }
.tcal-hoje-link { font-size: 0.85rem; }
.tcal-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1rem; align-items: start; }
.tcal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.tcal-semana-nome { padding: 0.4rem; font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: center; }
.tcal-dia { min-height: 110px; padding: 0.3rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.25rem; }
.tcal-dia:nth-child(7n) { border-right: 0; }
.tcal-dia.fora { background: var(--bg-soft, transparent); }
.tcal-dia.fora .tcal-num { opacity: 0.45; }
.tcal-dia.hoje .tcal-num { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 0.4rem; }
.tcal-num { font-size: 0.75rem; color: var(--text-muted); align-self: flex-start; }
/* flex: 1 — o dia inteiro recebe o card arrastado, nao so a faixa ocupada. */
.tcal-cards { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 24px; }
.tcal-card {
    display: block; font-size: 0.75rem; padding: 0.2rem 0.4rem; border-radius: 6px; text-decoration: none;
    background: var(--accent-soft); color: var(--accent-hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab;
}
.tcal-tipo-concluida { background: #e4f8ec; color: #167c3c; text-decoration: line-through; }
.tcal-tipo-aguardando_cliente, .tcal-tipo-em_aprovacao { background: #fff2dc; color: #a5620a; }
:root[data-theme="dark"] .tcal-tipo-concluida { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .tcal-tipo-aguardando_cliente,
:root[data-theme="dark"] .tcal-tipo-em_aprovacao { background: #3a2c10; color: #ffcb7a; }
.tcal-sem-prazo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tcal-sem-prazo .tcal-cards { min-height: 80px; }
.tcal-agenda { display: none; }

@media (max-width: 768px) {
    .tcal-corpo { display: none; }
    .tcal-agenda { display: flex; flex-direction: column; gap: 0.75rem; }
    .tcal-agenda-dia { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
    .tcal-agenda-dia.hoje { border-color: var(--accent); }
    .tcal-agenda-data { font-weight: 700; font-size: 0.85rem; }
    .tcal-agenda .tcal-card { white-space: normal; }
}

.colunas-lista { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.coluna-item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0; }
.coluna-alca { cursor: grab; color: var(--text-muted); user-select: none; padding: 0 0.25rem; }
.coluna-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.coluna-form input[type="text"] { width: 180px; }
.btn-perigo { background: #c0392b; }

/* Confirmacao do painel (app.js), no lugar do confirm() do navegador. */
dialog.confirmar { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); padding: 1.5rem; width: calc(100% - 32px); max-width: 420px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
dialog.confirmar::backdrop { background: rgba(15, 17, 26, .45); }
.confirmar-texto { margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.5; }
.confirmar-botoes { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.btn-perigo:hover { background: #a93226; }

@media (max-width: 768px) {
    .kanban { scroll-snap-type: x mandatory; }
    .kanban-coluna { flex-basis: 85%; scroll-snap-align: start; max-height: none; }
    .quadro-visoes { margin-left: 0; }
}


/* ---------- Card da tarefa (fase B, 2026-10-01) ---------- */
.card-tarefa { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.card-tarefa-principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.card-tarefa-principal > .card, .card-tarefa-lado > .card { margin-bottom: 0; }
.card-tarefa-lado { display: flex; flex-direction: column; gap: 1rem; }
.card-secao-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.card-descricao { line-height: 1.6; }
.card-detalhes dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 0.9rem; margin: 0 0 1rem; font-size: 0.88rem; }
.card-detalhes dt { color: var(--text-muted); }
.card-detalhes dd { margin: 0; }
.card-detalhes select { width: 100%; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: 0.86rem; }
.link-discreto { background: none; border: 0; padding: 0; color: var(--text-muted); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
.link-perigo { background: none; border: 0; padding: 0; color: #c0392b; font: inherit; font-size: 0.8rem; cursor: pointer; }
:root[data-theme="dark"] .link-perigo { color: #ff8a80; }

.card-abas { padding-top: 0; }
.card-abas-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0 -1.35rem 1rem; padding: 0 1.35rem; }
.card-abas-nav a { padding: 0.8rem 0.9rem; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.card-abas-nav a.ativa { color: var(--accent-hover); border-bottom-color: var(--accent); }
.card-abas-nav a.card-aba-interno.ativa { color: #a5620a; border-bottom-color: #e6a23c; }
.card-abas-nav small { color: var(--text-muted); font-weight: 500; }
/* Notas internas com fundo proprio: a diferenca entre as abas tem de ser vista, nao lida. */
.card-aba-conteudo.card-aba-interno { background: #fffaf0; margin: -1rem -1.35rem -1.35rem; padding: 1rem 1.35rem 1.35rem; border-radius: 0 0 var(--radius) var(--radius); }
:root[data-theme="dark"] .card-aba-conteudo.card-aba-interno { background: #241f14; }
.card-aviso { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.85rem; }
.card-aviso-interno { color: #a5620a; font-weight: 600; }
:root[data-theme="dark"] .card-aviso-interno { color: #ffcb7a; }

.card-arquivos { margin-bottom: 1rem; }
.card-arquivos strong { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.card-arquivos-lista, .mensagem-anexos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.anexo { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--text); }
.anexo-imagem img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.anexo-arquivo { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); max-width: 260px; }
.anexo-arquivo svg { width: 16px; height: 16px; flex-shrink: 0; }
.anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.anexo-arquivo small { color: var(--text-muted); white-space: nowrap; }

.mensagens { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mensagem { display: flex; gap: 0.65rem; }
.mensagem-autor-inicial { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; font-size: 0.8rem; }
.mensagem-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mensagem-topo { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.mensagem-topo small { color: var(--text-muted); font-size: 0.75rem; }
.mensagem-texto { line-height: 1.55; overflow-wrap: anywhere; }
.mensagem-acoes { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.8rem; }
.mensagem-acoes summary { cursor: pointer; color: var(--text-muted); }
.mensagem-editar { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.mensagem-editar textarea, .mensagem-nova textarea {
    width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 8px;
    background: var(--input-bg); color: var(--text); font: inherit; font-size: 0.9rem; resize: vertical;
}
.mensagem-nova { display: flex; flex-direction: column; gap: 0.5rem; }
.mensagem-nova-pe { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.anexar-botao { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.anexar-botao svg { width: 16px; height: 16px; }
.anexar-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.anexar-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; flex-wrap: wrap; }
.anexar-item progress { flex: 1; min-width: 80px; height: 6px; }
.anexar-item[data-anexo-estado="erro"] small { color: #c0392b; }
.anexar-tirar { background: none; border: 0; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; line-height: 1; }

.card-horas summary { cursor: pointer; font-weight: 600; }
.card-horas-form { margin-top: 0.85rem; }
.card-horas-lista { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.card-horas-lista li { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: space-between; }
.card-horas-lista small { flex-basis: 100%; color: var(--text-muted); }

@media (max-width: 768px) {
    .card-tarefa { grid-template-columns: 1fr; }
    /* Detalhes primeiro no celular: e o que se confere de relance. */
    .card-tarefa-lado { order: -1; }
    .card-abas-nav { overflow-x: auto; }
}


/* ---------- Novidade e aprovacao (fase C, 2026-10-01) ---------- */
.card-novo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 0.35rem; vertical-align: middle; }
.nav-badge {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.selo { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; align-self: flex-start; }
.selo-aprovou { background: #e4f8ec; color: #167c3c; }
.selo-ajuste { background: #fff2dc; color: #a5620a; }
:root[data-theme="dark"] .selo-aprovou { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .selo-ajuste { background: #3a2c10; color: #ffcb7a; }
.portal-card-topo dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0 0 0.85rem; font-size: 0.9rem; }
.portal-card-topo dt { color: var(--text-muted); }
.portal-card-topo dd { margin: 0; }
.aprovacao-faixa { border-color: #e6a23c; background: #fffaf0; display: flex; flex-direction: column; gap: 0.75rem; }
:root[data-theme="dark"] .aprovacao-faixa { background: #241f14; }
.aprovacao-acoes { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; }
.aprovacao-acoes summary { list-style: none; display: inline-block; }
.aprovacao-acoes summary::-webkit-details-marker { display: none; }

/* Na barra de baixo do celular o item e uma coluna (icone em cima, rotulo embaixo): o numero
   vai sobre o canto do icone, e nao no fim da linha, onde caia para fora da barra. */
@media (max-width: 768px) {
    .sidebar-nav a { position: relative; }
    .sidebar-nav a .nav-badge { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; display: inline-flex; }
}

/* ---------- Apagar tarefas (2026-10-01) ---------- */
.apagar-barra { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.col-marcar { width: 34px; }
.col-marcar input { width: auto; }
.card-apagar { display: inline-block; margin-top: 0.75rem; }
.apagar-aviso { border-color: #c0392b; background: #fdecea; color: #8e2a1f; }
:root[data-theme="dark"] .apagar-aviso { background: #3a1a1a; color: #ff8a80; }

/* ---------- Card: avatar, miniaturas e visualizador (2026-10-02) ---------- */
.kanban-resp, .mensagem-autor-inicial { overflow: hidden; }
.kanban-resp img, .mensagem-autor-inicial img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumbs { display: flex; gap: 4px; align-items: center; }
.card-thumbs img { width: 44px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--border); }
.card-thumbs-mais { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
/* Previa maior ao passar o mouse: posicao fixa, para escapar da rolagem da coluna. */
.thumb-previa {
    position: fixed; z-index: 60; pointer-events: none; max-width: 260px; max-height: 260px;
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); background: var(--card);
}
.visualizador {
    position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 15, 0.88);
    display: flex; align-items: center; justify-content: center; touch-action: pan-y;
}
.visualizador img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.visualizador button {
    position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 999px;
    width: 44px; height: 44px; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.visualizador button:hover { background: rgba(255, 255, 255, 0.24); }
.visualizador-fechar { top: 16px; right: 16px; }
.visualizador-ant { left: 16px; top: 50%; transform: translateY(-50%); }
.visualizador-prox { right: 16px; top: 50%; transform: translateY(-50%); }
.visualizador-legenda { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 0.85rem; }
.visualizador-legenda a { color: #fff; margin-left: 0.75rem; }

/* ---------- Video nos anexos (2026-10-02) ---------- */
.anexo-video { display: inline-flex; flex-direction: column; gap: 0.3rem; max-width: 360px; }
.anexo-video video { width: 100%; max-height: 240px; border-radius: 8px; background: #000; }
.anexo-video small { color: var(--text-muted); }

/* Abas de Plataformas (Meta Ads | Google Analytics). */
.plat-abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.plat-aba { padding: .55rem .9rem; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.plat-aba.ativa { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* Plataformas > Google Analytics: niveis da arvore de origens. */
.site-origem td:first-child { padding-left: 1.6rem; }
.site-campanha td:first-child { padding-left: 3.2rem; color: var(--text-muted); }
.site-grupo td:first-child { font-weight: 600; }

/* Primeira coluna da arvore com largura propria: os nomes de origem e campanha sao o
   que se le primeiro, e espremidos viravam tres linhas. */
.site-origens th:first-child, .site-origens td:first-child { min-width: 260px; text-align: left; }
.site-origens td:first-child .btn-link { text-align: left; padding: 0; }
.site-taxa { display: block; font-size: .75rem; color: var(--text-muted); }

/* GA4 — layout do "Tempo real": mapa no topo com o resumo por cima, grade de cards. */
.ga4-hero { position: relative; margin-bottom: 1rem; }
.ga4-mapa { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.mapa-br { display: block; width: 100%; height: 440px; }
.mapa-uf { fill: var(--accent); stroke: var(--card); stroke-width: .6; vector-effect: non-scaling-stroke; }
.mapa-uf-vazio { fill: var(--border); fill-opacity: 1; }
/* Hover da bolinha: cresce pelo transform (o zoom mexe no atributo r, entao um nao briga com o
   outro) e o transform-box fill-box faz crescer a partir do proprio centro, nao do canto do SVG. */
.mapa-cidade { fill: var(--accent); fill-opacity: .55; stroke: var(--card); cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .18s ease-out, fill-opacity .18s; }
.mapa-cidade:hover { fill-opacity: 1; transform: scale(1.4); filter: drop-shadow(0 0 4px rgba(0, 0, 0, .35)); }
.mapa-uf { transition: fill-opacity .18s; }
.mapa-uf:hover { fill-opacity: .95; }
@media (prefers-reduced-motion: reduce) { .mapa-cidade { transition: none; } }
/* As 3 cidades de mais sessoes: anel que cresce e some, como um radar. */
.mapa-pulso { fill: var(--accent); pointer-events: none; transform-box: fill-box; transform-origin: center; animation: mapa-pulso 2s ease-out infinite; }
@keyframes mapa-pulso { from { transform: scale(1); opacity: .55; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-pulso { animation: none; transform: scale(1.8); opacity: .25; } }
.ga4-mapa-modo { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .25rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .2rem; }
.ga4-mapa-modo a { padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--text-muted); text-decoration: none; }
.ga4-mapa-modo a.ativo { background: var(--accent); color: #fff; }
/* touch-action none: no celular o dedo arrasta o mapa em vez de rolar a pagina (como no GA). */
.mapa-br { cursor: grab; touch-action: none; user-select: none; }
.mapa-br.arrastando { cursor: grabbing; }
.ga4-mapa-zoom { position: absolute; right: .75rem; bottom: 2.25rem; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ga4-mapa-zoom button { width: 34px; height: 34px; border: 0; background: none; color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.ga4-mapa-zoom button + button { border-top: 1px solid var(--border); }
.ga4-mapa-zoom button:hover { background: var(--border); }
.ga4-mapa-aviso { position: absolute; bottom: .75rem; right: 1rem; margin: 0; font-size: .8rem; color: var(--text-muted); }
.ga4-resumo { margin-bottom: 1rem; }
.ga4-resumo-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.ga4-resumo-item { display: flex; flex-direction: column; gap: .15rem; }
.ga4-resumo-serie { margin-top: .9rem; }
.sparkline { display: block; width: 100%; height: 48px; }
/* Resumo e mapa na mesma celula da grade, em vez de position:absolute: com muitos eventos o
   resumo fica mais alto que o mapa, e so assim o bloco cresce junto em vez de invadir os cards. */
@media (min-width: 900px) {
    .ga4-hero { display: grid; }
    .ga4-hero > .ga4-resumo, .ga4-hero > .ga4-mapa { grid-area: 1 / 1; }
    .ga4-resumo { position: relative; z-index: 1; align-self: start; width: 340px; margin: 1rem; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
    .ga4-mapa { padding-left: 370px; display: flex; flex-direction: column; }
    .ga4-mapa .mapa-br { flex: 1 1 440px; min-height: 440px; height: auto; }
}
.ga4-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.ga4-duplo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ga4-card { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.ga4-card-titulo { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; }
.ga4-card-top { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .7rem; }
.ga4-card-pos { font-weight: 700; color: var(--text-muted); }
.ga4-card-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga4-card-num { margin-left: auto; font-size: 1.5rem; font-weight: 600; }
.ga4-card-vazio { color: var(--text-muted); font-size: .9rem; margin: .5rem 0 0; }
.ga4-card-dica { color: var(--text-muted); font-size: .78rem; margin: .4rem 0 0; font-style: italic; }
.ga4-card-lista { width: 100%; min-width: 0; font-size: .85rem; }
.ga4-card-lista th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: .3rem .2rem; }
.ga4-card-lista td { padding: .45rem .2rem .55rem; position: relative; border-bottom: 0; }
.ga4-card-lista td:first-child { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga4-barra { position: absolute; left: .2rem; bottom: .2rem; height: 3px; border-radius: 2px; background: var(--accent); }
.ga4-ver-todos { margin-top: auto; padding-top: .6rem; align-self: flex-end; }
.ga4-prop { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: .5rem; }
.ga4-prop-i0 { background: var(--accent); }
.ga4-prop-i1 { background: color-mix(in srgb, var(--accent) 60%, var(--card)); }
.ga4-prop-i2 { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.ga4-prop-i3 { background: var(--border); }
.ga4-prop-legenda { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; }
.ga4-prop-legenda span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; }
.ga4-todos { border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: inherit; padding: 1rem; width: min(640px, calc(100vw - 32px)); max-height: 80vh; }
.ga4-todos::backdrop { background: rgba(0, 0, 0, .4); }
.ga4-todos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ga4-todos-topo h4 { margin: 0; }
.ga4-calor-rolagem { overflow-x: auto; }
.ga4-calor { border-collapse: separate; border-spacing: 2px; font-size: .7rem; min-width: 560px; width: 100%; }
.ga4-calor th { padding: 0 .2rem; color: var(--text-muted); font-weight: 500; border: 0; text-align: left; }
.ga4-calor td { height: 18px; padding: 0; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--i) * 100%), var(--border)); }
/* Colunas pela largura do CONTEUDO (container query), nao da janela: o layout classico limita
   a largura, e a 1700px de janela o card ainda nao cabia nome + sessoes + evento ("Rio do
   Sul/SC" saia cortado). Em tres colunas, Sistema e Navegador viram cards soltos
   (display: contents) e o dense os encaixa nas lacunas que o mapa de calor deixaria. */
.ga4-grade-caixa { container-type: inline-size; }
@container (min-width: 560px) {
    .ga4-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ga4-card-largo { grid-column: span 2; }
    .ga4-duplo { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 900px) {
    .ga4-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; }
    .ga4-duplo { display: contents; }
}
@container (min-width: 1300px) {
    .ga4-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ga4-duplo { display: grid; }
}
@media (max-width: 640px) {
    .mapa-br { height: 300px; }
}

/* Analise nova: blocos por fonte lado a lado e o caminho Meta -> site. */
.geral-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.geral-bloco .section-title a { color: inherit; text-decoration: none; }
.jornada-passos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.jornada-passos li { flex: 1 1 160px; display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); position: relative; }
.jornada-passos li + li::before { content: '→'; position: absolute; left: -.55rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.jornada-pct { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 767px) { .jornada-passos li + li::before { content: none; } }

/* Logos de plataforma (plataforma_icone) e a lista de Aquisicao e trafego. */
.plat-ico { flex: none; vertical-align: middle; }
.page-title .plat-ico { margin-right: .5rem; vertical-align: -3px; }
.aq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.aq-item { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--text); font-weight: 600; }
.aq-item svg { width: 28px; height: 28px; flex: none; }
.aq-item:hover { border-color: var(--accent); }

/* Logo do cliente: topo de toda tela, cabecalho dos relatorios e cadastro. */
.marca-topo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .78rem; }
.marca-topo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.marca-topo-uplift { background: transparent; }
.marca-topo-uplift .brand-mark { margin: 0; }
.marca-topo-grande { width: 72px; height: 72px; font-size: 1.4rem; border-radius: 14px; }
.logo-cliente { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.ana-topo > .marca-topo { margin-right: .25rem; }
/* Logo de verdade costuma ser largo: altura fixa e largura livre (ate um teto), sem fundo.
   O quadrado colorido fica so para as iniciais. */
.marca-topo:has(img) { width: auto; max-width: 140px; background: transparent; border-radius: 6px; }
.marca-topo img { width: auto; max-width: 140px; height: 100%; background: transparent; }
.marca-topo-grande:has(img) { max-width: 220px; }
.marca-topo-grande img { max-width: 220px; }

.ana-fluxo { display: inline-flex; align-items: center; }
.ana-fluxo label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-muted); }

/* Icone de traco no titulo da pagina (o mesmo do menu), no tamanho do titulo. */
.page-title > svg:not(.plat-ico) { width: 24px; height: 24px; margin-right: .5rem; vertical-align: -3px; color: var(--accent); }
.section-title .plat-ico { vertical-align: -3px; margin-right: .2rem; }

/* Celular: o logo do cliente ja esta no topo; repetir no cabecalho do relatorio so ocupa
   a linha do seletor. */
@media (max-width: 767px) {
    .ana-topo > .marca-topo { display: none; }
}

/* Marca do Uplift maior na barra lateral do desktop. */
@media (min-width: 768px) {
    .sidebar .brand .brand-mark { width: 38px; height: 38px; }
    .sidebar .brand .brand-name { font-size: 1.35rem; }
}

/* Apelido da conta vinculada, editavel na linha. */
.apelido-fonte { display: flex; gap: .4rem; align-items: center; }
.apelido-fonte input { min-width: 0; width: 11rem; padding: .3rem .5rem; }

/* "Atualizado ha" dentro da linha de filtros (Desempenho, Canais): centrado com os campos. */
.filters .ana-atualizado { align-self: center; }

/* Contas vinculadas do cliente: no celular, um cartao por conta. Plataforma e situacao na
   primeira linha; conta e apelido embaixo; botoes numa linha que quebra se nao couber. */
.fonte-plat .plat-ico { vertical-align: -3px; margin-right: .2rem; }
@media (max-width: 767px) {
    .fontes-tabela thead { display: none; }
    /* min-width 0: a regra geral do celular da 560px as tabelas para rolarem de lado; em
       cartoes isso so empurraria tudo para fora da tela. */
    .fontes-tabela, .fontes-tabela tbody { display: block; min-width: 0; }
    .fontes-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; padding: .85rem; margin-bottom: .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
    .fontes-tabela td { display: block; padding: 0; border: 0; min-width: 0; }
    .fontes-tabela .fonte-plat { grid-row: 1; grid-column: 1; font-weight: 600; }
    .fontes-tabela .fonte-situacao { grid-row: 1; grid-column: 2; }
    .fontes-tabela .fonte-conta, .fontes-tabela .fonte-apelido { grid-column: 1 / -1; overflow-wrap: anywhere; }
    .fontes-tabela .apelido-fonte input { flex: 1; width: auto; min-width: 0; }
    .fontes-tabela td.actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding-top: .6rem; border-top: 1px solid var(--border); white-space: normal; }
    .fontes-tabela td.actions > * + * { margin-left: 0; }
    .fontes-tabela td.empty { grid-column: 1 / -1; }
}

/* Notificacoes flutuantes (partials/flash.php + toast.js). Desktop: canto superior direito,
   abaixo da barra do topo. Celular: logo acima da barra de baixo, na largura da tela. */
.toasts { position: fixed; top: 72px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .8rem; border-radius: 10px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-left: 4px solid; box-shadow: 0 8px 24px rgba(20, 20, 45, .18); font-size: .9rem; line-height: 1.4; animation: toast-entra .25s ease-out; }
.toast.saindo { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.toast-success { border-left-color: #167c3c; }
.toast-error { border-left-color: #c0392b; }
.toast-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .8rem; }
.toast-success .toast-icone { background: #167c3c; }
.toast-error .toast-icone { background: #c0392b; }
/* Data e local da rodada (jogo a jogo) e cabecalho da grade do lancar jogos. */
.agenda-todos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem; border-radius: 10px; background: var(--accent-soft); }
.agenda-cabeca, .agenda-linha { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.3fr); gap: .5rem; align-items: center; }
.agenda-cabeca, .grade-cabeca { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary, inherit); margin: .75rem 0 .25rem; }
.agenda-linha { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.agenda-linha input, .agenda-linha select, .agenda-todos input, .agenda-todos select,
.grade-linha input, .grade-linha select { padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; min-width: 0; }
.grade-cabeca { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 0.7fr 1.2fr; gap: 0.4rem; }
@media (max-width: 768px) {
    .agenda-cabeca, .grade-cabeca { display: none; }
    .agenda-linha { grid-template-columns: 1fr 1fr; }
    .agenda-jogo { grid-column: 1 / -1; }
    .agenda-linha select { grid-column: 1 / -1; }
}

.zona-refazer { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; }
.zona-refazer .form-em-linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.zona-refazer input[type=number] { width: 5.5rem; padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; }
input[readonly] { background: var(--accent-soft); cursor: not-allowed; }
.acrescentar-jogos { margin: 1rem 0; }
.acrescentar-jogos > summary { cursor: pointer; color: var(--accent-hover); font-weight: 600; font-size: .9rem; }

/* Pagina da categoria: as vagas de cada grupo, uma por linha (tabela por vagas). */
.vagas-do-grupo { list-style: none; margin: .5rem 0 0; padding: 0; }
.vagas-do-grupo li { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vagas-do-grupo li:last-child { border-bottom: 0; }
.vaga-numero { min-width: 1.8rem; color: var(--text-secondary, inherit); font-variant-numeric: tabular-nums; }
.vaga-equipe { flex: 1; min-width: 0; }
.por-na-vaga { display: flex; gap: .35rem; flex: 1; min-width: 0; }
.por-na-vaga select { flex: 1; min-width: 0; }

/* Nova fase: a lista de grupos, cada um com nome e vagas. */
.grupo-linha { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.grupo-linha [data-grupo-nome] { flex: 1; min-width: 0; }
.grupo-vagas { display: flex; gap: .35rem; align-items: center; }
.grupo-vagas input { width: 5rem; }
.grupo-linha .link-perigo { font-size: 1.2rem; padding: 0 .3rem; }

/* Elenco rapido: equipe, tipo e proxima no topo; busca a esquerda e elenco a direita. */
.rapido-topo { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.rapido-campo { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--text-secondary, inherit); }
.rapido-campo select { padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; min-width: 10rem; }
.rapido-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .rapido-colunas { grid-template-columns: 1fr; } }
.rapido-busca { width: 100%; font-size: 1.05rem; padding: .7rem .9rem; }
.rapido-aviso { min-height: 1.4em; margin: .5rem 0; font-size: .9rem; color: #167c3c; }
.rapido-aviso.erro { color: #c0392b; }
.rapido-lista { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.rapido-lista li { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .75rem; border-radius: 8px; cursor: pointer; }
.rapido-lista li.escolhido { background: var(--accent-soft); }
.rapido-lista .rapido-novo { font-weight: 600; color: var(--accent-hover); }
.rapido-marcas { display: flex; gap: .3rem; flex-wrap: wrap; }
.rapido-elenco { list-style: none; margin: 0 0 1rem; padding: 0; }
.rapido-elenco li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }

/* Tela de Pessoas: cabecalho com a foto e a paginacao da lista. */
.pessoa-cabecalho { display: flex; gap: 1rem; align-items: center; }
.pessoa-foto { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; flex: none; }
.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.toast-info { border-left-color: #1a56db; }
.toast-info .toast-icone { background: #1a56db; }
.toast-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-fechar { flex: none; background: none; border: 0; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.toast-fechar:hover { color: var(--text); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
    .toasts { top: auto; right: 12px; left: 12px; width: auto; bottom: calc(var(--barra-inferior-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)); }
    @keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Plataformas > Instagram (perfil com metricas) ---------- */
.ig-perfil { display: flex; gap: 1.6rem; align-items: center; margin: .4rem 0 1.2rem; }
.ig-foto { flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); }
.ig-foto img { width: 100%; height: 100%; object-fit: cover; }
.ig-usuario { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.ig-contagens { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .35rem 0; color: var(--text); }
.ig-contagens strong { font-weight: 700; }
.ig-nome { font-weight: 600; color: var(--text); }
.ig-bio { font-size: .88rem; color: var(--text-muted); max-width: 46rem; }
/* Stories: bolinhas com o anel no gradiente do Instagram. */
.ig-stories { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding: .2rem 0 1rem; margin-bottom: .6rem; }
.ig-story { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: var(--text); font-size: .78rem; flex: none; }
.ig-anel { width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); display: block; }
.ig-anel-foto { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--card); overflow: hidden; background: var(--accent-soft); }
.ig-anel-foto img { width: 100%; height: 100%; object-fit: cover; }
.ig-story-num { display: inline-flex; gap: .2rem; align-items: center; color: var(--text-muted); }
.ig-stories-rotulo { align-self: center; color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
/* Fileira: no ar (troca pelo aovivo) e arquivados lado a lado, rolando junto no celular. */
.ig-stories-linha { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding: .2rem 0 1rem; margin-bottom: .6rem; }
.ig-stories-linha .ig-stories { overflow: visible; padding: 0; margin: 0; }
.ig-stories-sep { flex: none; align-self: stretch; width: 1px; background: var(--border); margin: 0 .2rem 1.4rem; }
.ig-anel-arquivado { background: #c4c4c4; }
.ig-arquivados .ig-anel-foto img { filter: saturate(.85); }
.ig-ver-todos-miolo { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-muted); font-size: .95rem; }
.ig-stories-rotulo small { font-size: .72rem; }
.ig-arquivo { padding: .9rem 1.1rem; margin-bottom: 1rem; }
.ig-arquivo .section-title { margin: 0; }
.ig-grafico-topo .ig-visao { flex-wrap: wrap; } .ig-arquivo { min-width: 0; overflow: hidden; }
.ig-story-data { position: absolute; left: 6px; bottom: 6px; font-size: .74rem; font-weight: 700; background: rgba(0,0,0,.55); padding: .1rem .4rem; border-radius: 999px; color: #fff; }
.ig-grade-stories .ig-post-alcance { bottom: auto; top: 6px; }
/* Cards do Instagram: cada um abre o grafico daquela metrica. 4 por linha no computador. */
.ig-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); scroll-margin-top: 80px; }
.ig-card { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ig-card:hover { border-color: var(--accent); }
.ig-card.ativo { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ig-carregando { color: var(--text-muted); }
.ig-grafico.carregando, .ig-publico.carregando { opacity: .55; transition: opacity .15s; }
.ig-grafico { padding: .9rem 1.1rem; margin-bottom: 1rem; }
.ig-grafico-topo { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ig-grafico-topo .ana-grafico-titulo { margin: 0; }
/* Interacoes por tipo: cards pequenos, tambem clicaveis para o grafico. */
.ig-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ig-mini-card { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; }
.ig-mini-card strong { font-size: 1.05rem; }
.ig-mini-card { min-width: 0; } .ig-mini-card .res-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-mini-card:hover, .ig-mini-card.ativo { border-color: var(--accent); }
.ig-mini-card.ativo { box-shadow: inset 0 -3px 0 var(--accent); }
/* Cores das proporcoes e do publico: as mesmas nos dois temas. */
.ig-c1 { background: var(--accent); } .ig-c2 { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.ig-c3 { background: #0ea5e9; } .ig-c4 { background: #94a3b8; } .ig-c5 { background: #ec4899; }
.ig-c6 { background: #f59e0b; } .ig-c7 { background: #10b981; }
.ig-origem, .ig-publico { padding: .9rem 1.1rem; margin-bottom: 1rem; }
.ig-origem .section-title, .ig-publico .section-title { margin-top: 0; }
.ig-proporcao { margin: .8rem 0; }
.ig-proporcao-titulo { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem; }
.ig-proporcao-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--accent-soft); }
.ig-proporcao-barra span { display: block; height: 100%; }
.ig-proporcao-legenda, .ig-piramide-legenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .35rem; font-size: .85rem; }
.ig-proporcao-legenda i, .ig-piramide-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.ig-formatos, .ig-publico-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 2rem; margin-top: 1rem; }
.ig-linha-barra { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; align-items: center; gap: .6rem; font-size: .86rem; margin: .3rem 0; }
.ig-linha-barra > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-linha-trilho { height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.ig-linha-trilho span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ig-piramide { display: grid; grid-template-columns: 1fr 3.4rem 1fr; align-items: center; gap: .4rem; margin: .3rem 0; font-size: .82rem; }
.ig-piramide-lado { display: flex; height: 10px; }
.ig-piramide-lado span { display: block; height: 100%; border-radius: 3px; }
.ig-piramide-lado.ig-esq { justify-content: flex-end; }
.ig-piramide-idade { text-align: center; color: var(--text-muted); }
.ig-posts-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.ig-visao { display: flex; gap: .25rem; }
.ig-visao a { padding: .35rem .8rem; border-radius: 8px; text-decoration: none; color: var(--text-muted); font-weight: 600; }
.ig-visao a.ativa { background: var(--accent-soft); color: var(--accent); }
/* Grade como o perfil: 3 colunas quadradas, alcance por cima, o resto ao passar o mouse. */
/* 6 por linha no computador (tela de metricas, nao de rolar fotos); 4 no tablet; 3 no celular, como o app. */
.ig-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 1100px) { .ig-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ig-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ig-post { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--accent-soft); display: block; color: #fff; text-decoration: none; }
.ig-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; }
.ig-post-tipo { position: absolute; top: 6px; right: 8px; font-size: .9rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ig-post-alcance { position: absolute; left: 6px; bottom: 6px; display: inline-flex; gap: .25rem; align-items: center; font-size: .78rem; font-weight: 700; background: rgba(0,0,0,.55); padding: .15rem .45rem; border-radius: 999px; }
.ig-post-numeros { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .8rem; background: rgba(0,0,0,.5); font-weight: 700; font-size: .85rem; opacity: 0; transition: opacity .15s; }
.ig-post-numeros span { display: inline-flex; gap: .25rem; align-items: center; }
.ig-post:hover .ig-post-numeros, .ig-post:focus .ig-post-numeros { opacity: 1; }
/* a:hover (0,1,1) pintava os numeros do post de azul no hover: ilegivel sobre a foto. */
.ig-post:hover, .ig-post:focus { color: #fff; text-decoration: none; }
.ig-nota-views { margin-top: .6rem; }
.ig-lista-post { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.ig-lista-thumb { flex: none; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--accent-soft); }
.ig-lista-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ig-lista th a { color: inherit; text-decoration: none; }
.ig-grade-stories { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ig-grade-stories .ig-post { aspect-ratio: 9 / 16; }
.ig-painel { padding: 1.2rem; }
.ig-painel-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.ig-painel-img { width: 100%; max-height: 420px; object-fit: contain; background: #000; border-radius: 8px; }
.ig-painel-data { color: var(--text-muted); font-size: .85rem; }
.ig-painel-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0; }
.ig-painel-numeros div { border: 1px solid var(--border); border-radius: 8px; padding: .55rem .7rem; }
.ig-painel-numeros dt { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ig-painel-numeros dd { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text); }
.ig-painel-legenda { white-space: pre-line; font-size: .9rem; }
@media (max-width: 767px) {
    .ig-perfil { gap: 1rem; }
    .ig-foto { width: 72px; height: 72px; }
    .ig-cards { grid-template-columns: 1fr 1fr; }
    .ig-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ig-grafico-topo .ig-visao a { padding: .3rem .55rem; }
    .ig-contagens { gap: .9rem; font-size: .9rem; }
    /* Sem mouse no celular: os numeros ficam sempre visiveis, por baixo. */
    .ig-post-numeros { opacity: 1; inset: auto 0 0 0; height: auto; padding: .25rem; background: rgba(0,0,0,.55); gap: .5rem; font-size: .7rem; justify-content: space-around; }
    .ig-post-alcance { bottom: auto; top: 6px; }
}
/* Lista: a legenda e o que identifica o post; largura propria e peso normal. */
.ig-lista td:first-child { min-width: 320px; }
.ig-lista-legenda { font-weight: 400; font-size: .86rem; line-height: 1.35; }

/* Central de Leads */
.leads-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.leads-total { margin-right: .6rem; }
.leads-chip { border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; text-decoration: none; color: inherit; }
.leads-chip span { color: var(--text-muted); margin-left: .3rem; }
.leads-chip.ativo { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.leads-filtros { display: flex; gap: .5rem; align-items: center; margin: 0 0 .8rem; }
.leads-filtros input[type=search] { flex: 1; max-width: 360px; }
.lead-linha { cursor: pointer; }
.lead-linha[aria-expanded=true] td { border-bottom: 0; }
.lead-wa { margin-left: .4rem; font-size: .8rem; }
.lead-respostas dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.lead-respostas dt { color: var(--text-muted); text-transform: capitalize; }
.lead-respostas dd { margin: 0; }
.leads-paginas { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }

/* Celular: cada lead vira cartao (o rotulo de cada celula vem do data-rotulo). */
@media (max-width: 767px) {
    .leads-tabela thead { display: none; }
    .leads-tabela .lead { display: block; border-bottom: 1px solid var(--border); padding: .5rem 0; }
    .leads-tabela .lead-linha, .leads-tabela .lead-respostas { display: block; }
    .leads-tabela .lead-respostas[hidden] { display: none; }
    .leads-tabela .lead-linha td, .leads-tabela .lead-respostas td { display: flex; gap: .6rem; border: 0; padding: .15rem .5rem; }
    .leads-tabela .lead-linha td::before { content: attr(data-rotulo); min-width: 6.5rem; color: var(--text-muted); }
    .leads-tabela .lead-linha td.actions::before { content: ''; }
}
.leads-filtros input[type=search] { padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; }
.lead-apagar { margin-top: .6rem; }
.lead-apagar .btn-link { font-size: .8rem; color: var(--text-muted); }
.leads-tabela th { white-space: nowrap; }
.lead-anuncio { text-decoration: none; color: inherit; display: inline-block; }
.lead-anuncio:hover span:last-child { text-decoration: underline; }
.lead-camp { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.lead-camp .res-criativo { align-items: center; }
.lead-camp .res-criativo > span:last-child { white-space: normal; min-width: 0; }
@media (max-width: 767px) {
    .leads-tabela .lead-camp { flex: 1; }
    .leads-tabela .lead-camp .res-criativo { display: flex; min-width: 0; }
    .leads-tabela .lead-camp .res-criativo > span:last-child { overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
    /* Em cartao a tabela nao pode medir pelo conteudo: senao a caixa rola de lado. */
    .leads-tabela { display: block; width: 100%; min-width: 0; }
}
.lat-leads p { margin: .3rem 0; }
.lat-leads-pergunta { color: var(--text-muted); text-transform: capitalize; }
.lat-leads-recentes { margin: .5rem 0; padding-left: 1rem; }
.leads-conf { margin: 0 0 .8rem; padding: .6rem 1rem; }
.leads-conf summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.leads-conf-alerta .leads-conf-dif { color: #c0392b; font-weight: 700; }
.leads-conf-anuncio td { color: var(--text-muted); font-size: .9rem; }
.leads-conf-anuncio td:first-child { padding-left: 1.6rem; }
/* Status do lead: cor pelo tipo da etapa */
.lead-status { border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; }
.lead-status-aberto { border-color: var(--border); }
.lead-status-ganho { border-color: #2e9e5b; color: #1f7a45; background: #e8f6ee; }
.lead-status-perdido { border-color: #e2a3a3; color: #a33a3a; background: #fbeeee; }
.leads-chip.lead-status-ganho.ativo, .leads-chip.lead-status-perdido.ativo { font-weight: 700; }
.lead-historico { margin: .8rem 0 .4rem; }
.lead-evento { margin: .25rem 0; }
.lead-evento .res-foot { margin-right: .4rem; }
.lead-nota { display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0; }
.lead-nota textarea { flex: 1; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; }
.etapa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.etapa-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.etapa-form input[type=text] { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; }
.etapa-nova { margin-top: .6rem; }

/* GA4 — grafico grande no estilo da Pagina inicial do GA: abas com numero em cima. */
.ga4-grafico { margin-bottom: 1.5rem; scroll-margin-top: 1rem; }
.ga4-grafico-abas { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin: -.25rem 0 1rem; }
.ga4-grafico-aba { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 120px; padding: .6rem .9rem .7rem; border: 0; border-bottom: 3px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ga4-grafico-aba:hover { background: var(--border); }
.ga4-grafico-aba.ativa { border-bottom-color: var(--accent); }
.ga4-grafico-aba.ativa .res-label { color: var(--accent); }
.ga4-grafico-valor { font-size: 1.35rem; font-weight: 600; }
a.ga4-resumo-serie { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
a.ga4-resumo-serie:hover .res-label { color: var(--accent); }

/* GA4 — pagina de um recorte: busca e tabela que ordena pelo cabecalho. */
.ga4-recorte-cab { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ga4-recorte-titulo { margin: 0; font-size: 1.25rem; }
.ga4-recorte-busca { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.ga4-recorte-busca input { flex: 0 1 320px; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: inherit; font: inherit; }
.ga4-recorte-contagem { color: var(--text-muted); font-size: .85rem; }
.ga4-recorte-tabela { min-width: 0; }
.ga4-ordenar { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.ga4-ordenar:hover { color: var(--accent); }
/* Search Console: aviso de atraso e nome longo cortado. */
.busca-aviso { margin: -.5rem 0 1rem; }
.busca-rotulo { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th[aria-sort] .ga4-ordenar { color: var(--accent); }
th[aria-sort="descending"] .ga4-ordenar::after { content: " ↓"; }
th[aria-sort="ascending"] .ga4-ordenar::after { content: " ↑"; }

/* Jornada: mapa de caminhos. Caixas e setas em SVG; cores das variaveis do tema. */
.jornada-moldura { position: relative; padding: .5rem .5rem 3.25rem; overflow: hidden; }
/* Altura pela proporcao do desenho (sem faixa vazia em volta), com teto para mapa grande. */
.jornada-svg { display: block; width: 100%; height: auto; max-height: 78vh; cursor: grab; touch-action: none; user-select: none; }
.jornada-svg.arrastando { cursor: grabbing; }
.jornada-coluna { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); }
.jornada-caixa rect { fill: var(--card); stroke: var(--border); stroke-width: 1.5; }
.jornada-caixa:hover rect { stroke: var(--accent); }
.jornada-caixa-titulo { font-size: 13px; font-weight: 600; fill: var(--text); }
.jornada-caixa-valor { font-size: 18px; font-weight: 700; fill: var(--text); }
.jornada-caixa-extra { font-size: 11px; fill: var(--text-muted); }
.jornada-caixa-var { font-size: 11px; font-weight: 600; }
.jornada-caixa-var.sobe { fill: #1a9c5b; }
.jornada-caixa-var.desce { fill: #d64545; }
.jornada-meta rect { stroke: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.jornada-seta { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-linecap: round; }
.jornada-seta:hover { stroke-opacity: .7; }
.jornada-seta.tracejada { stroke: var(--text-muted); stroke-dasharray: 6 5; }
.jornada-seta-rotulo { font-size: 11px; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg, var(--card)); stroke-width: 4px; stroke-linejoin: round; }
.jornada-nao-rastreado { font-size: 12px; fill: var(--text-muted); font-style: italic; }
.jornada-legenda { color: var(--text-muted); font-size: .8rem; margin: .5rem 0 1.5rem; }
.jornada-moldura .ga4-mapa-zoom { bottom: .75rem; }
.jornada-cartao { display: flex; gap: .6rem; align-items: baseline; text-decoration: none; color: var(--accent); font-weight: 600; }
.jornada-cartao span { color: var(--text-muted); font-weight: 400; font-size: .9rem; }
.jornada-no-lista { padding-left: 1rem; font-size: .9rem; }
@media (max-width: 640px) { .jornada-svg { min-height: 260px; } }

/* Modo apresentacao (ver ClienteAtual::apresentacao). A tarja fica no topo de toda tela,
   com cor propria para ninguem esquecer que o modo esta ligado. */
.apresentacao-tarja {
    display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0;
    margin-left: 0.8rem; padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover);
    font-size: 0.82rem; white-space: nowrap;
}
.apresentacao-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.apresentacao-cliente { overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.apresentacao-tarja form { margin: 0; }
.apresentacao-sair {
    border: none; border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer;
    background: var(--accent); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 500;
}
.apresentacao-sair:hover { background: var(--accent-hover); }
.apresentacao-explica { color: var(--text-muted); margin-top: 0; }
@media (max-width: 768px) {
    .apresentacao-tarja { margin-left: 0.3rem; }
    .apresentacao-rotulo { display: none; }
    .apresentacao-cliente { max-width: 110px; }
}

/* Seletor de cliente travado: continua no lugar e legivel (o disabled do navegador
   apagaria o texto), com um cadeado no lugar da seta. */
select[data-travado] {
    opacity: 1; color: var(--text); cursor: not-allowed;
    -webkit-appearance: none; appearance: none;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f90ab' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
}

/* ------------------------------------------------------------------ dashboard
   Global (/) e do cliente (/portal, /?cliente=X). Spec 2026-10-07-dashboard.
   So variaveis do tema: claro e escuro saem de graca. */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-cliente { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 1.05rem; }
.dash-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.dash-logo img { width: 100%; height: 100%; object-fit: cover; }
.dash-voltar { font-size: .85rem; color: var(--text-muted); width: 100%; }
.dash-alertas { display: flex; flex-direction: column; gap: 6px; }
.dash-alerta { display: block; padding: 10px 12px; border-radius: var(--radius); background: #fdecef;
    border: 1px solid #f4c3cc; color: #8a2236; text-decoration: none; }
.dash-tudo-ok { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: #e7f6ef; border: 1px solid #b9e3cf; color: #17643f; }
.dash-aprova { display: block; padding: 10px 12px; border-radius: var(--radius); background: #fff6e0;
    border: 1px solid #f1d58a; color: #7a5a00; text-decoration: none; }
[data-theme="dark"] .dash-alerta { background: #3a1820; border-color: #6b2a39; color: #f4b6c3; }
[data-theme="dark"] .dash-tudo-ok { background: #13301f; border-color: #24583a; color: #9fdcbc; }
[data-theme="dark"] .dash-aprova { background: #3a3014; border-color: #6b5a22; color: #f1d58a; }
.dash-destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dash-kpi { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; margin: 0; }
.dash-kpi:hover { border-color: var(--accent); }
.dash-kpi-rotulo { font-size: .8rem; color: var(--text-muted); }
.dash-kpi-valor { font-size: 1.45rem; font-weight: 700; color: var(--link-hover); }
.dash-kpi-sub { font-size: .75rem; color: var(--text-muted); }
.dash-kpi svg { width: 100%; height: 28px; margin-top: 4px; }
.dash-var { font-size: .8rem; font-weight: 600; }
.dash-var-bom { color: #1f9d6b; }
.dash-var-ruim { color: #d1435b; }
.dash-var-neutro { color: var(--text-muted); }
.dash-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-plat { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-plat-topo { display: flex; align-items: center; gap: 8px; }
.dash-plat-topo strong { flex: 1; }
.dash-plat-topo a { font-size: .85rem; }
.dash-plat-titulo { margin: 0; font-size: .8rem; color: var(--text-muted); }
.dash-plat-linha { margin: 0; font-size: .9rem; }
.dash-lista { margin: 0; padding-left: 18px; font-size: .9rem; }
.dash-lista li { display: flex; justify-content: space-between; gap: 8px; }
.dash-lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-posts a { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--text-muted); text-decoration: none; }
.dash-posts img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.dash-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.dash-barras i { display: block; height: 6px; border-radius: 3px; background: var(--accent); opacity: .75; margin-top: 2px; }
.dash-andamento ul { margin: 0; padding-left: 18px; }
/* Andamento + Ultimas do Feed lado a lado (dashboard-feed). */
.dash-rodape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dash-rodape-so { grid-template-columns: 1fr; }
.dash-rodape > .card { margin: 0; }
.dash-rodape .section-title { margin-top: 0; }
.dash-feed .section-title { display: flex; align-items: center; gap: 8px; }
.dash-feed-novos { background: var(--accent-soft); color: var(--accent); }
.dash-feed-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dash-feed-lista a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.dash-feed-lista img, .dash-feed-ico { width: 48px; height: 48px; flex: none; border-radius: 8px; object-fit: cover; }
.dash-feed-ico { display: grid; place-items: center; background: var(--accent-soft); font-size: 1.3rem; }
.dash-feed-texto { display: grid; min-width: 0; }
.dash-feed-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--link-hover); }
.dash-feed-texto small { color: var(--text-muted); }
.dash-feed-tudo { display: inline-block; margin-top: 12px; font-size: .85rem; }
.dash-carteira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-cli { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-cli-topo { display: flex; align-items: center; gap: 8px; }
.dash-cli-topo .dash-logo { width: 28px; height: 28px; font-size: .75rem; }
.dash-cli-nome { flex: 1; font-weight: 600; color: var(--link-hover); text-decoration: none; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-cli-plats { display: flex; gap: 4px; }
.dash-cli-gasto { font-size: 1.3rem; font-weight: 700; color: var(--link-hover); }
.dash-cli svg { width: 100%; height: 26px; }
.dash-cli-nums { display: flex; gap: 14px; font-size: .75rem; color: var(--text-muted); }
.dash-cli-nums strong { display: block; font-size: .95rem; color: var(--text); }
.dash-cli-visto { font-size: .75rem; color: var(--text-muted); }
.dash-sem-fonte { font-size: .85rem; color: var(--text-muted); margin: 0; }
.dash-meu-dia ul { margin: 0 0 8px; padding-left: 18px; }
@media (max-width: 900px) {
    .dash-carteira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dash-grade, .dash-carteira, .dash-rodape { grid-template-columns: 1fr; }
    .dash-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Feed (spec 2026-10-07-feed-design) ------------------------------------------------- */
.feed-caixa, .feed-post { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.feed-caixa-titulo { width: 100%; font-size: 16px; }
.feed-caixa-corpo { display: none; margin-top: 12px; }
.feed-caixa.aberta .feed-caixa-corpo { display: grid; gap: 12px; }
.feed-caixa textarea { width: 100%; }
.feed-caixa-linha { display: flex; flex-wrap: wrap; gap: 12px; }
.feed-caixa-linha label { display: grid; gap: 4px; flex: 1 1 200px; font-size: 13px; color: var(--text-muted); }
.feed-tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.feed-tipo input { position: absolute; opacity: 0; }
.feed-tipo span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; }
.feed-tipo input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.feed-tipo input:focus-visible + span { outline: 2px solid var(--accent); }
.feed-caixa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feed-visivel { margin-left: auto; font-size: 13px; font-weight: 600; }
.feed-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.feed-filtros input[type="search"] { flex: 1 1 180px; }
.feed-post-topo { display: flex; gap: 10px; align-items: flex-start; }
.feed-post-topo .avatar { width: 40px; height: 40px; flex: none; }
.feed-post-quem { display: grid; gap: 2px; flex: 1; min-width: 0; }
.feed-post-quem small { color: var(--text-muted); }
.feed-post-cliente { color: var(--text-muted); font-size: 13px; }
.feed-selo-interno { font-weight: 600; }
.feed-post-menu { position: relative; }
.feed-post-menu summary { list-style: none; cursor: pointer; padding: 0 6px; font-size: 20px; }
.feed-post-menu > div { position: absolute; right: 0; z-index: 5; display: grid; gap: 6px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); white-space: nowrap; }
.feed-post-titulo { margin: 12px 0 4px; font-size: 17px; }
.feed-post-texto { white-space: normal; overflow-wrap: anywhere; }
.feed-fotos { display: grid; gap: 4px; margin-top: 12px; border-radius: var(--radius); overflow: hidden; }
.feed-fotos-2 { grid-template-columns: 1fr 1fr; }
.feed-fotos-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.feed-fotos-3 .feed-foto:first-child { grid-row: span 2; }
.feed-fotos-4 { grid-template-columns: 1fr 1fr; }
.feed-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--border); }
.feed-fotos-1 .feed-foto { aspect-ratio: auto; max-height: 520px; }
.feed-fotos-3 .feed-foto:first-child { aspect-ratio: auto; }
.feed-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-fotos-1 .feed-foto img { object-fit: contain; max-height: 520px; }
.feed-foto-oculta { display: none; }
.feed-foto-mais { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; font-size: 28px; font-weight: 700; }
.feed-arquivos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.feed-arquivo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; }
.feed-arquivo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-arquivo small { color: var(--text-muted); white-space: nowrap; }
.feed-post-rodape { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed-curtir { background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.feed-curtir.ativo { color: var(--accent); }
.feed-curtidas { color: var(--text-muted); font-size: 13px; }
.feed-mais { display: block; margin: 0 auto 24px; }
.feed-vazio { color: var(--text-muted); text-align: center; padding: 32px 0; }
/* Captura comprida (mapa de calor): cortada no topo, com selo, em vez de virar um fiapo. */
.feed-foto-longa img { object-fit: cover; object-position: top; }
.feed-fotos-1 .feed-foto-longa { aspect-ratio: auto; height: 520px; }
.feed-fotos-1 .feed-foto-longa img { object-fit: cover; max-height: none; height: 100%; }
.feed-foto-selo { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 8px;
    background: rgb(0 0 0 / .65); color: #fff; font-size: .8rem; text-align: center; }
.feed-fotos-2 .feed-foto-selo, .feed-fotos-3 .feed-foto-selo, .feed-fotos-4 .feed-foto-selo { font-size: .7rem; padding: 4px 6px; }
@media (max-width: 600px) {
    .feed-caixa, .feed-post { padding: 12px; border-radius: 0; border-left: 0; border-right: 0; }
    .feed-visivel { margin-left: 0; flex-basis: 100%; }
}

/* Coluna central: o shell classico nao tem largura estreita, e foto em 1000 px vira cartaz. */
.feed-coluna { max-width: 680px; margin: 0 auto; }
.feed-caixa input[type="text"], .feed-caixa textarea, .feed-caixa select, .feed-caixa input[type="datetime-local"],
.feed-filtros select, .feed-filtros input[type="search"] {
    padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text); font-size: 0.9rem; font-family: inherit;
}
.feed-caixa input:focus, .feed-caixa textarea:focus, .feed-caixa select:focus, .feed-filtros input:focus, .feed-filtros select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.feed-caixa .feed-caixa-titulo { font-size: 1rem; padding: 0.65rem 0.8rem; }
.feed-caixa textarea { resize: vertical; }

/* Links automaticos (texto_com_links) dentro de texto livre: cor de destaque e sublinhado,
   senao parecem so texto em negrito, porque --link e a mesma cor do texto. */
.feed-post-texto a, .mensagem-texto a, .card-descricao a {
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; overflow-wrap: anywhere;
}
.feed-post-texto a:hover, .mensagem-texto a:hover, .card-descricao a:hover { color: var(--accent-hover); }

/* Calendario da edicao: fichas das datas, programacao do dia e andamento da categoria. */
.fichas-datas .ficha { text-decoration: none; }
.ficha-passada { opacity: .65; }
.ficha-vazia strong { color: var(--text-muted); }
.programacao-cabeca, .programacao-linha { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, 1.3fr) auto; gap: .5rem; align-items: center; }
.programacao-cabeca { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: .75rem 0 .25rem; }
.programacao-linha { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.programacao-linha.tirada .agenda-jogo { text-decoration: line-through; opacity: .6; }
.programacao-linha input, .programacao-linha select, .encaixar-linha input[type="time"], .encaixar-linha select, .encaixar-filtros input, .encaixar-filtros select {
    padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; min-width: 0; }
.agenda-jogo .form-hint { display: block; }
.encaixar { margin-top: 1.5rem; }
.encaixar-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .75rem; }
.encaixar .agenda-todos { margin-bottom: .5rem; }
.encaixar-lista { max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--border); }
.encaixar-linha { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, .7fr) minmax(0, 1.3fr); gap: .5rem; align-items: center; padding: .4rem .25rem; border-bottom: 1px solid var(--border); }
.encaixar-linha[hidden] { display: none; }
.encaixar-linha.marcada { background: var(--accent-soft); }
.encaixar-jogo { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.encaixar-jogo .form-hint { display: block; }
.andamento td.num, .andamento th.num { text-align: right; }
.andamento-atras td { background: var(--accent-soft); }
.andamento-sem-data { margin-top: .75rem; }
.andamento-sem-data ul { margin: .5rem 0; padding-left: 1.1rem; }
@media (max-width: 640px) {
    .programacao-cabeca { display: none; }
    .programacao-linha, .encaixar-linha { grid-template-columns: 1fr 1fr; }
    .programacao-linha .agenda-jogo, .encaixar-jogo, .programacao-linha .opcao-marcavel { grid-column: 1 / -1; }
}

/* Montar a tabela: faixa das datas, data em foco, candidatos, equilibrio e planilha. A cor da
   categoria chega por --cor-categoria; laranja = melhor evitar, cinza = choque no dia. */
.montagem-topo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.montagem-abas { display: flex; gap: .25rem; }
.montagem-aba { padding: .45rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.montagem-aba.ativa { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.montagem-resumo { margin: 0; color: var(--text-muted); }
.montagem-resumo.falta-espaco { color: #c0392b; font-weight: 600; }
.montagem-aviso { min-height: 1.4em; margin: 0 0 .5rem; color: var(--text-muted); }
.montagem-aviso.erro { color: #c0392b; }
.montagem.enviando { cursor: progress; }
.montagem-cabeca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.montagem-cabeca h2 { margin: 0; font-size: 1.05rem; }
.montagem-faixa { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; }
.montagem-data { flex: 0 0 auto; min-width: 5.6rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.montagem-data b { font-size: .85rem; }
.montagem-data.foco { outline: 2px solid var(--accent); background: var(--accent-soft); }
.montagem-data.cheia .montagem-barra i { background: #2e9e5b; }
.montagem-data.passou { border-color: #e08a1e; }
.montagem-data.passou .montagem-barra i { background: #e08a1e; }
/* Dias sem data: tracejados, com "sem data" apagado (o Dia N fica em cima de todos). */
.montagem-data small { font-size: .7rem; color: var(--text-muted); }
.montagem-data.sem-data { border-style: dashed; }
.montagem-data.sem-data b { color: var(--text-muted); font-weight: 600; font-style: italic; }
.montagem-dia-controles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.montagem-dar-data { display: inline-flex; gap: .35rem; align-items: center; }
.montagem-dar-data input, .data-do-dia input, .dias-sem-data input { padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; }
.ficha-sem-data { border-style: dashed; }
.ficha-sem-data strong { color: var(--text-muted); font-style: italic; }
.ficha-numero { font-size: .75rem; color: var(--text-muted); }
.data-do-dia { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.data-do-dia form { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.dias-sem-data { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dias-sem-data h3 { margin: 0 0 .25rem; font-size: 1rem; }
.dias-sem-data-campos { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.dias-sem-data-campos input { width: 5.5rem; margin-left: .35rem; }
.montagem-barra { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.montagem-barra i { display: block; height: 100%; background: var(--accent); }
[data-painel-aba][hidden] { display: none; }
.montagem-colunas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.montagem-coluna { min-width: 0; }
.montagem-capacidade { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .9rem; }
.montagem-capacidade input { width: 4.2rem; padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; }
.montagem-jogo { display: flex; width: 100%; gap: .5rem; align-items: center; justify-content: space-between; padding: .45rem .6rem; margin-top: .4rem; border: 1px solid var(--border); border-left: 5px solid var(--cor-categoria, var(--border)); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; text-align: left; }
button.montagem-jogo { cursor: pointer; }
button.montagem-jogo:hover { background: var(--accent-soft); }
.montagem-jogo-texto { display: flex; flex-direction: column; min-width: 0; }
.montagem-jogo-texto .form-hint { margin: 0; }
.montagem-jogo.marca-laranja { background: #fff4e5; border-color: #f0b070; border-left-color: var(--cor-categoria, #f0b070); }
.montagem-jogo.marca-cinza { opacity: .5; }
.montagem-motivos { font-size: .8rem; color: #a05a00; }
.montagem-jogo.marca-cinza .montagem-motivos, .montagem-jogo:not(.marca-laranja) .montagem-motivos { color: var(--text-muted); }
.montagem-vaga { padding: .45rem .6rem; margin-top: .4rem; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: .85rem; }
.montagem-tirar { border: 0; background: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: .2rem .4rem; }
.montagem-tirar:hover { color: #c0392b; }
.montagem-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.montagem-filtros { display: flex; flex-wrap: wrap; gap: .35rem; }
.montagem-filtros select, .montagem-filtros input, .montagem-cabeca > select { padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; min-width: 0; }
.montagem-equilibrio { width: 100%; margin-bottom: .75rem; font-size: .85rem; table-layout: fixed; }
.montagem-equilibrio th:first-child, .montagem-equilibrio td:first-child { width: 60%; overflow-wrap: anywhere; }
.montagem-equilibrio caption { text-align: left; font-weight: 600; padding: .25rem 0; }
.montagem-equilibrio th, .montagem-equilibrio td { padding: .2rem .35rem; }
.montagem-equilibrio .num, .montagem-planilha .num { text-align: right; }
.montagem-equilibrio .btn-link { padding: 0; text-align: left; }
.cor-categoria { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
tr.situacao-atras td { background: #fde8e8; }
tr.situacao-adiantada td { background: #fff4e5; }
.montagem-planilha { overflow-x: auto; }
.montagem-planilha table { border-collapse: collapse; font-size: .8rem; }
.montagem-planilha th, .montagem-planilha td { border: 1px solid var(--border); padding: .25rem .4rem; text-align: center; white-space: nowrap; }
.montagem-planilha tr > th:first-child { text-align: left; position: sticky; left: 0; background: var(--card); }
.montagem-planilha .foco { outline: 2px solid var(--accent); outline-offset: -2px; }
.montagem-planilha td.marcada { background: var(--accent-soft); }
.montagem-planilha td.colada { background: #fff4e5; }
.montagem-celula { border: 0; background: none; color: var(--text-muted); cursor: pointer; width: 100%; font: inherit; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .montagem-jogo.marca-laranja, :root:not([data-theme="light"]) tr.situacao-adiantada td, :root:not([data-theme="light"]) .montagem-planilha td.colada { background: #3a2a12; }
    :root:not([data-theme="light"]) tr.situacao-atras td { background: #3a1c1c; }
    :root:not([data-theme="light"]) .montagem-motivos { color: #f0b070; }
}
:root[data-theme="dark"] .montagem-jogo.marca-laranja, :root[data-theme="dark"] tr.situacao-adiantada td, :root[data-theme="dark"] .montagem-planilha td.colada { background: #3a2a12; }
:root[data-theme="dark"] tr.situacao-atras td { background: #3a1c1c; }
:root[data-theme="dark"] .montagem-motivos { color: #f0b070; }
@media (max-width: 900px) {
    .montagem-colunas { grid-template-columns: 1fr; }
}

/* Lista da montagem (calendario oficial): uma secao por data, uma linha por jogo com a cor da categoria. */
.lista-numeracao { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.lista-numeracao .form-hint { margin: 0; flex: 1 1 18rem; }
.lista-dia { padding: .5rem 0 .75rem; border-top: 1px solid var(--border); }
.lista-dia h3 { margin: .25rem 0 .4rem; font-size: 1rem; }
.lista-jogos { list-style: none; margin: 0; padding: 0; }
.lista-jogo { display: grid; grid-template-columns: 3.2rem 4.6rem minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .3rem .4rem; border-left: 4px solid var(--cor-categoria); margin-top: .25rem; }
.lista-hora, .lista-numero { font-variant-numeric: tabular-nums; }
.lista-numero { color: var(--text-muted); }
.lista-categoria, .lista-local { color: var(--text-muted); font-size: .9rem; }
.lista-confronto { font-weight: 600; }
.lista-sem-data .lista-hora { visibility: hidden; }
@media (max-width: 640px) {
    .lista-jogo { grid-template-columns: 3.2rem minmax(0, 1fr); }
    .lista-jogo .lista-numero, .lista-jogo .lista-categoria { grid-column: 2; }
    .lista-jogo .lista-confronto, .lista-jogo .lista-local { grid-column: 2; }
}
/* Mexer na tabela (rascunho da aba Lista): jogo escolhido, lugares vazios, o que mudou. */
.mexer-topo { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mexer-total { font-size: 1.05rem; }
.mexer-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.mexer-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.mexer-form input { padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; }
.mexer-form input[type="number"] { width: 4rem; }
.mexer-cabeca-dia { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; }
.mexer-cabeca-dia h3 { margin: .25rem 0; font-size: 1rem; }
.mexer-por-aqui { padding: .2rem .7rem; font-size: .85rem; }
.mexer-acoes summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; margin: .2rem 0; }
.mexer-acoes[open] { padding: .25rem .5rem; border: 1px dashed var(--border); border-radius: 8px; margin: .3rem 0; }
.mexer-linha { display: flex; gap: .4rem; align-items: center; }
.mexer-linha .mexer-jogo { flex: 1 1 auto; min-width: 0; }
.mexer-hora { flex: 0 0 auto; width: 6.2rem; margin-top: .4rem; padding: .3rem .3rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; }
.mexer-jogo.selecionado { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.mexer-jogo.mudou { border-style: dashed; }
div.mexer-jogo { opacity: .75; }
.mexer-vazio { display: block; width: 100%; padding: .45rem .6rem; margin-top: .4rem; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--text-muted); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.mexer-vazio:hover { border-color: var(--accent); color: var(--text); }
.mexer-sem-data { background: var(--accent-soft); border-radius: 8px; padding: .5rem; }
.mexer-texto { width: 100%; padding: .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; }
[data-mexer].enviando { cursor: progress; opacity: .7; }
.mexer-ferramentas { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; margin: .25rem 0 .5rem; }
.mexer-ferramentas .mexer-form { margin: 0; }
.mexer-regra { display: block; margin: .2rem 0; font-size: .9rem; }
.mexer-nota summary { color: #a05a00; }
.mexer-linhas { margin: .3rem 0 .3rem 1.1rem; padding: 0; font-size: .88rem; }
.mexer-linhas li { margin: .1rem 0; }
.mexer-aviso-restante { color: #a05a00; list-style: none; margin-left: -1.1rem !important; }
.mexer-painel { margin: .5rem 0 .75rem; padding: .75rem; border: 2px solid var(--accent); border-radius: 10px; background: var(--card); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.mexer-painel > strong { display: block; margin-bottom: .4rem; }
.mexer-opcao { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--border); }
.mexer-opcao .mexer-linhas { flex-basis: 100%; }
.mexer-alfinete { flex: 0 0 auto; margin-top: .4rem; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; padding: .25rem .35rem; filter: grayscale(1); opacity: .35; }
.mexer-alfinete:hover { opacity: .8; }
.mexer-alfinete.preso { filter: none; opacity: 1; border-color: var(--border); background: var(--accent-soft); }
.mexer-jogo[draggable="true"] { cursor: grab; }
.mexer-jogo.arrastando { opacity: .4; }
.alvo-arrastar.mexer-linha { box-shadow: 0 -3px 0 var(--accent); }
.alvo-arrastar.mexer-dia { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }
.mexer-restricoes-resumo { font-size: .8rem; color: #a05a00; }
.mexer-chip { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .2rem .1rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--accent-soft); }
.mexer-chip.nao { background: #fde8e8; }
.mexer-chip-tirar { border: 0; background: none; cursor: pointer; color: var(--text-muted); padding: 0 .2rem; }
.mexer-acoes select { padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; max-width: 14rem; }
.mexer-versoes { margin: .5rem 0 .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; }
.mexer-versoes h3 { margin: 0 0 .4rem; font-size: 1rem; }
.mexer-versoes select { padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .85rem; max-width: 16rem; }
.mexer-lista-versoes { list-style: none; margin: .5rem 0 0; padding: 0; }
.mexer-lista-versoes li { padding: .5rem 0; border-top: 1px solid var(--border); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mexer-chip.nao { background: #3a1c1c; }
    :root:not([data-theme="light"]) .mexer-nota summary, :root:not([data-theme="light"]) .mexer-aviso-restante, :root:not([data-theme="light"]) .mexer-restricoes-resumo { color: #f0b070; }
}
:root[data-theme="dark"] .mexer-chip.nao { background: #3a1c1c; }
:root[data-theme="dark"] .mexer-nota summary, :root[data-theme="dark"] .mexer-aviso-restante, :root[data-theme="dark"] .mexer-restricoes-resumo { color: #f0b070; }
@media (max-width: 640px) {
    .mexer-hora { width: 5.4rem; }
    .mexer-botoes { width: 100%; }
}
.campo-cor { width: 4rem; height: 2.4rem; padding: .15rem; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); }
.programacao-linha, .encaixar-linha { border-left: 4px solid var(--cor-categoria, transparent); padding-left: .5rem; }

/* "+ Datas" de clicar: dois meses lado a lado (um no celular), cada dia uma caixinha escondida
   atras do numero; marcado = cor de destaque; ja no calendario = verde, sem clique. */
.calendario-navegacao { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .25rem; }
.calendario-meses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mes-calendario h3 { margin: 0 0 .4rem; font-size: 1rem; text-align: center; }
.mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.mes-semana { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: .75rem; text-transform: uppercase; padding: .2rem 0; cursor: pointer; border-radius: 6px; }
.mes-semana:hover { background: var(--accent-soft); color: var(--text); }
.mes-dia { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border); font-size: .9rem; cursor: pointer; user-select: none; }
.mes-dia input { position: absolute; opacity: 0; pointer-events: none; }
.mes-dia:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.mes-dia:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mes-dia.hoje { border-color: var(--accent); }
.mes-dia.existente { background: #e3f6e9; border-color: #8fd1a5; color: #185c33; cursor: default; }
.datas-escolhidas { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 0; min-height: 1.5rem; }
.etiqueta-data { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: .15rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mes-dia.existente { background: #17331f; border-color: #2e6b44; color: #9fe0b5; }
}
:root[data-theme="dark"] .mes-dia.existente { background: #17331f; border-color: #2e6b44; color: #9fe0b5; }
@media (max-width: 640px) {
    .calendario-meses { grid-template-columns: 1fr; }
    .calendario-meses .mes-calendario:not([hidden]) ~ .mes-calendario:not([hidden]) { display: none; }
}
.montagem-mesmo-dia { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .5rem; color: var(--text-muted); font-size: .9rem; }
.montagem-mesmo-dia select { padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; }
.montagem-sem-jogos { margin: -.5rem 0 .75rem; }

/* Inicio: atalhos do que a pessoa pode ver; o que pede atencao ganha a borda da cor de destaque. */
.inicio-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.inicio-atalho {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0;
    text-decoration: none;
    color: var(--text);
}
.inicio-atalho:hover { border-color: var(--accent); }
.inicio-atalho-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--link-hover);
}
.inicio-atencao { border-left: 4px solid var(--accent); }

/* Campo de imagem com a miniatura atual ao lado (brasao da entidade, imagem da modalidade). */
.campo-com-imagem, .celula-com-imagem { display: flex; align-items: center; gap: 0.75rem; }

/* Escolha do icone da modalidade: cada opcao e um cartaozinho com o desenho e o nome. */
.escolha-de-icone { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.escolha-de-icone .opcao-de-icone {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0; font-weight: 500;
    width: 6.5rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: center;
}
.opcao-de-icone input { margin: 0; }
.opcao-de-icone:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opcao-de-icone .marca-modalidade svg { width: 26px; height: 26px; }

/* Edicao: abas Montagem e Jogos, e a aba Jogos (jogos por dia; spec 2026-10-21, secao 2). */
.abas-da-pagina { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
.abas-da-pagina a { padding: 0.6rem 0.9rem; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-da-pagina a.ativa { color: var(--text); border-bottom-color: var(--accent); }
.filtros-jogos { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; font-size: .85rem; color: var(--text-muted); }
.filtros-jogos label { display: flex; align-items: center; gap: .35rem; }
.filtros-jogos select { padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; min-width: 0; }
.jogos-do-dia { padding-top: .75rem; }
.jogos-do-dia-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.jogos-do-dia-cabeca h2 { font-size: 1rem; margin: 0; }
.jogo-da-lista { display: grid; grid-template-columns: 3.2rem 3.4rem 1fr 4.5rem 1fr 7.5rem 8.5rem; gap: .5rem; align-items: center; padding: .55rem .25rem; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .9rem; }
a.jogo-da-lista:hover { background: var(--accent-soft); }
.jogo-da-lista .cor-categoria { background: var(--cor-categoria); }
.jogo-hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.jogo-numero { color: var(--text-muted); font-size: .8rem; }
.jogo-placar { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.jogo-visitante { text-align: right; }
.jogo-mandante, .jogo-visitante { overflow-wrap: anywhere; }
.jogo-acao { text-align: right; }
.jogo-da-lista.sem-equipe .jogo-mandante, .jogo-da-lista.sem-equipe .jogo-visitante { color: var(--text-muted); font-style: italic; }
@media (max-width: 640px) {
    .jogo-da-lista { grid-template-columns: 3rem 1fr 3.5rem 1fr; row-gap: .25rem; }
    .jogo-numero { display: none; }
    .jogo-situacao { grid-column: 2; }
    .jogo-acao { grid-column: 3 / 5; }
}

/* Administrar jogo (spec 2026-10-21, secoes 3 e 4): placar preso no topo do painel, os seis
   passos em sequencia (details), a linha de lancar e a linha do tempo. */
.placar-do-jogo { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .75rem; align-items: center; padding: .65rem .9rem; margin-bottom: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 6px rgba(20, 20, 45, .06); }
.placar-do-jogo .placar-equipe { font-weight: 600; overflow-wrap: anywhere; }
.placar-do-jogo .placar-equipe:first-child { text-align: right; }
.placar-do-jogo .placar-numeros { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.placar-do-jogo .placar-numeros small { display: block; font-size: .75rem; font-weight: 500; }
.passo-do-jogo { border: 1px solid var(--border); border-radius: 12px; margin-bottom: .6rem; background: var(--card); }
.passo-do-jogo > summary { display: flex; align-items: baseline; gap: .6rem; padding: .7rem .9rem; cursor: pointer; font-weight: 600; list-style: none; }
.passo-do-jogo > summary::-webkit-details-marker { display: none; }
.passo-do-jogo[open] > summary { border-bottom: 1px solid var(--border); }
.passo-numero { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hover); font-size: .8rem; flex: none; }
.passo-resumo { margin-left: auto; color: var(--text-muted); font-weight: 500; font-size: .85rem; text-align: right; }
.passo-corpo { padding: .8rem .9rem; }
.passo-corpo h3 { font-size: .9rem; margin: .5rem 0; }
.passo-botao { align-self: end; }
.escalacao-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .75rem; }
.escala-filtro { flex: 1; min-width: 12rem; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; }
.escalacao-equipes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.escalacao-lista { list-style: none; margin: 0; padding: 0; }
.escalacao-lista li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; color: var(--text-muted); }
.escalacao-lista li.escalado { color: var(--text); }
.escala-marca { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit; padding: 0 .2rem; }
.escala-nome { flex: 1; overflow-wrap: anywhere; }
.linha-de-lance { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 2fr) minmax(9rem, 1.2fr) minmax(8rem, 1fr) 6.5rem auto; gap: .5rem; align-items: end; }
.lance-campo { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--text-muted); position: relative; }
.lance-campo select, .lance-campo input { padding: .45rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; min-width: 0; }
.lance-campo select:focus, .lance-campo input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.lance-sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 3; list-style: none; margin: 2px 0 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(20, 20, 45, .14); font-size: .9rem; color: var(--text); }
.lance-sugestoes:empty { display: none; }
.lance-sugestoes li { padding: .4rem .6rem; cursor: pointer; }
.lance-sugestoes li.marcado { background: var(--accent); color: #fff; }
.lance-aviso { grid-column: 1 / -1; margin: 0; min-height: 1.1em; font-size: .85rem; color: #a5620a; }
.lance-ajuda { margin: .2rem 0 .8rem; line-height: 1.8; }
.lance-ajuda kbd { font: inherit; font-size: .75rem; padding: 0 .3rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--input-bg); }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo li { display: grid; grid-template-columns: 1fr 5.5rem 1fr 1.5rem; gap: .5rem; align-items: center; padding: .35rem .25rem; border-top: 1px solid var(--border); font-size: .9rem; }
.linha-do-tempo li:focus { outline: 2px solid var(--accent); border-radius: 6px; }
.lance-tempo { text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.lance-visitante { text-align: right; }
.lance-apagar { justify-self: end; }
.suspensoes-do-jogo { list-style: none; margin: 0 0 .5rem; padding: 0; }
.suspensoes-do-jogo li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .35rem 0; border-top: 1px solid var(--border); }
.suspensoes-do-jogo li > span:first-child { flex: 1; min-width: 12rem; }
.suspensoes-do-jogo li.a-confirmar { background: rgba(230, 162, 60, .08); }
.passo-alteracoes { margin-top: .9rem; }
.passo-alteracoes > summary { cursor: pointer; }
.passo-alteracoes form, .passo-alteracoes section { margin-top: .75rem; }
.wo-do-jogo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.placar-situacao { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.placar-iniciar .btn { padding: .3rem .7rem; font-size: .85rem; }
.placar-iniciar .btn-link { font-size: .8rem; }
.penaltis-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.penaltis-lado h3 { display: flex; justify-content: space-between; align-items: baseline; }
.penaltis-total { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.penaltis-cobrancas { margin: 0 0 .6rem; padding-left: 1.6rem; }
.penaltis-cobrancas li { padding: .2rem 0; border-top: 1px solid var(--border); }
.penaltis-cobrancas li > * { vertical-align: middle; }
.penalti-marca { display: inline-block; width: 1.2rem; font-weight: 700; }
.penalti-convertido .penalti-marca { color: #2e8540; }
.penalti-perdido .penalti-marca { color: #c0392b; }
.penalti-quem { margin-right: .3rem; }
.penalti-quem .form-hint { font-size: inherit; }
.penaltis-lancar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.penaltis-lancar select { flex: 1 1 100%; padding: .45rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; min-width: 0; }
.penaltis-lancar .btn { flex: 1; padding: .4rem .6rem; }
@media (max-width: 640px) {
    .placar-do-jogo { grid-template-columns: 1fr auto 1fr; }
    .placar-do-jogo .placar-situacao { grid-column: 1 / -1; justify-self: center; }
    .penaltis-colunas { grid-template-columns: 1fr; }
    .escalacao-equipes { grid-template-columns: 1fr; }
    .linha-de-lance { grid-template-columns: 1fr 1fr; }
    .lance-quem { grid-column: 1 / -1; }
    .linha-do-tempo li { grid-template-columns: 1fr 4.5rem 1fr 1.5rem; font-size: .85rem; }
}

/* ---------- Site e Anuncios (conteudo do site, parte 2) ---------- */
.secao-titulo { margin: 1.5rem 0 0.6rem; font-size: 0.95rem; }
.editor { border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem; border-bottom: 1px solid var(--border); }
.editor-barra button { border: 0; background: none; color: var(--text); font: inherit; font-size: 0.85rem; padding: 0.25rem 0.55rem; border-radius: 6px; cursor: pointer; }
.editor-barra button:hover { background: var(--accent-soft); }
.editor-texto { min-height: 9rem; max-height: 28rem; overflow-y: auto; padding: 0.6rem 0.75rem; outline: none; color: var(--text); line-height: 1.5; }
.editor-texto:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.editor-texto p { margin: 0 0 0.6rem; }
fieldset:disabled .editor-barra { display: none; }
.grade-de-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.grade-de-fotos li { display: flex; flex-direction: column; gap: 0.3rem; }
.grade-de-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--border); }
.grade-de-fotos input { font-size: 0.85rem; padding: 0.3rem 0.45rem; }
.aviso-tipo { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.aviso-tipo-normal { background: #dff4f4; color: #137474; }
.aviso-tipo-alerta { background: #fdebd8; color: #b25d0c; }
:root[data-theme="dark"] .aviso-tipo-normal { background: #12302f; color: #5fd0d0; }
:root[data-theme="dark"] .aviso-tipo-alerta { background: #3a2610; color: #ffb066; }
.anuncio-na-lista { display: flex; align-items: center; gap: 0.6rem; }
.anuncio-na-lista img { width: 64px; height: 40px; object-fit: contain; border-radius: 4px; background: var(--border); }
.parte-do-hotsite { padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--border); }
.linha-do-hotsite { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.linha-do-hotsite fieldset { display: contents; }
.linha-do-hotsite input { flex: 1 1 12rem; }
.campo-curto { max-width: 8rem; }
@media (max-width: 640px) { .col-secundaria { display: none; } }

/* Configuracao > Sumulas: as opcoes do modelo e a previa em PDF lado a lado; no celular, uma embaixo da outra. */
.modelo-de-sumula { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.previa-da-sumula { width: 100%; height: 80vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
@media (max-width: 900px) {
    .modelo-de-sumula { grid-template-columns: 1fr; }
    .previa-da-sumula { height: 70vh; }
}