/* ── Complementos ao design system (ares.css) ───────────────────────────
   Só o que o DS ainda não cobre. Sempre usando os tokens do :root, para
   acompanhar tema claro/escuro automaticamente.
─────────────────────────────────────────────────────────────────────── */

/* ── `hidden` volta a esconder ───────────────────────────────────────
   O navegador esconde `[hidden]` com `display: none`, mas essa regra é da
   folha do próprio navegador: qualquer `.classe { display: flex }` nossa
   ganha dela, por ser folha de autor. O resultado é um elemento marcado
   como escondido que continua na tela — foi o que deixou a janela do
   atendimento fixa mesmo sem atendimento nenhum.

   Uma regra aqui resolve o caso inteiro, agora e no que vier depois. O
   `!important` existe para devolver ao atributo o comportamento que ele
   já deveria ter. */
[hidden] { display: none !important; }

/* Aviso de erro — o DS tem .notice-ok e .notice-warn, faltava o crítico. */
.notice-erro {
    background: var(--critical-soft);
    color: var(--critical);
    border: 1px solid var(--critical);
}

/* ── Card "continuar como" (acesso salvo no dispositivo) ──────────────── */
.conta-salva {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.conta-salva-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
}

.conta-salva-info { flex: 1; min-width: 0; }

.conta-salva-nome {
    font-size: .91rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conta-salva-hint {
    font-size: .78rem;
    color: var(--text-soft);
    margin-top: 1px;
}

.conta-salva svg { width: 17px; height: 17px; color: var(--text-mute); flex-shrink: 0; }

/* Linha de ações secundárias abaixo do botão "Continuar" */
.acoes-conta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}
.acoes-conta form { margin: 0; }

/* Botão que se comporta como link (usado em ações que exigem POST/CSRF) */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .86rem;
    color: var(--brand);
    cursor: pointer;
}
.link-btn:hover { color: var(--brand-hover); }

/* Linha "lembrar de mim" + "esqueci minha senha" */
.linha-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

/* ── Sessão expirada ─────────────────────────────────────────────────── */
.expirada-ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}
.expirada-ic svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════════
   ÍCONES (sprite de _icones.html)
   Os <symbol> não trazem stroke/fill: o estilo vem daqui, então o ícone
   herda a cor do texto de onde estiver.
   ══════════════════════════════════════════════════════════════════════ */
.ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ic-sm { width: 13px; height: 13px; }
.ic-lg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════════════
   SHELL — barra superior (base_app.html)
   A navegação da ferramenta é horizontal, como no header.php do PHP.
   ══════════════════════════════════════════════════════════════════════ */
.tela-app { min-height: 100vh; }

.barra {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    background: var(--app-bg);
    -webkit-backdrop-filter: var(--app-blur);
    backdrop-filter: var(--app-blur);
    border-bottom: 1px solid var(--border);
}

.barra-marca { flex-shrink: 0; display: flex; align-items: center; }
/* A altura sai da linha mais fina do desenho: em 56 px o descritivo fica com
   7,5 px, que é onde ele começa a ser lido. Abaixo disso a marca até cabe,
   mas o "Intelligence & Consulting" vira um borrão. */
.barra-marca .logo-full { height: 56px; width: auto; max-width: none; }
@media (max-width: 620px) {
    .barra-marca .logo-full { height: 34px; }
}

.barra-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.barra-user { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ── Item de navegação (link ou gatilho de menu) ─────────────────────── */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }

/* Item ativo: recebe o mesmo gradiente do botão primário do login */
.nav-link.ativo {
    background: linear-gradient(120deg, #6366f1, #8b5cf6, #3b82f6, #6366f1);
    background-size: 220% 100%;
    animation: btnFlow 6s ease-in-out infinite;
    color: #fff;
}
.nav-link.ativo:hover { color: #fff; }

/* ── Menus suspensos ─────────────────────────────────────────────────── */
.menu { position: relative; }

.menu-lista {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 218px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.menu-lista.direita { left: auto; right: 0; }

/* Sem z-index, a lista aberta pintava na ordem do HTML: qualquer filtro
   que viesse depois no documento passava por cima dela (era o que quebrava
   o "Toda a equipe" em Scripts & Planos). 40 fica acima do conteúdo da
   página e abaixo da barra do topo (50), das sobreposições (60) e dos
   modais (100+), então nada some por trás nem cobre o que não deve. */
.menu-lista { z-index: 40; }

/* O menu inteiro sobe junto enquanto está aberto. Protege o caso em que o
   vizinho de baixo cria o próprio contexto de empilhamento, situação em
   que só o z-index da lista não bastaria. */
.menu:hover, .menu:focus-within, .menu.open { z-index: 41; }

.menu:hover .menu-lista,
.menu:focus-within .menu-lista {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.menu-lista a, .menu-lista button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--surface-2); color: var(--text); }
.menu-lista .separador { height: 1px; margin: 5px 4px; background: var(--border); }

/* Avatar do usuário na barra */
.barra-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Sino de notificações */
.sino { position: relative; }
.sino-contador {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--critical);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
}

/* Painel do sino */
.sino-painel { width: 330px; padding: 0; }

.sino-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
}
.sino-topo form { margin: 0; }
.sino-topo .link-btn { font-size: .76rem; }

.sino-lista { max-height: 340px; overflow-y: auto; padding: 6px; }

.sino-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    transition: background .13s ease;
}
.sino-item:hover { background: var(--surface-2); color: var(--text); }

.sino-data {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    padding: 5px 0;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.sino-data b { font-size: .95rem; font-weight: 700; }

.sino-texto { min-width: 0; }
.sino-titulo {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}
.sino-meta { display: block; font-size: .72rem; color: var(--text-mute); margin-top: 2px; }
.sino-vazio { padding: 22px 16px; text-align: center; font-size: .82rem; color: var(--text-mute); }

.sino-rodape {
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.sino-rodape a { font-size: .82rem; font-weight: 600; }

/* Mensagens de retorno das ações */
.avisos { margin-bottom: 18px; }

.icon-btn .ic { width: 17px; height: 17px; }
#btn-tema .ic-claro { display: none; }
#btn-tema .ic-escuro { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #btn-tema .ic-claro { display: block; }
    :root:not([data-theme="light"]) #btn-tema .ic-escuro { display: none; }
}
:root[data-theme="dark"] #btn-tema .ic-claro { display: block; }
:root[data-theme="dark"] #btn-tema .ic-escuro { display: none; }
:root[data-theme="light"] #btn-tema .ic-claro { display: none; }
:root[data-theme="light"] #btn-tema .ic-escuro { display: block; }

/* Área de conteúdo abaixo da barra.
   position/z-index seguem o que o DS faz em .app e .auth-wrap: sem isso o
   conteúdo fica atrás do fundo de galáxia (body::before/::after, z-index 0).

   O z-index precisa ser MAIOR que o do rodapé: o popover do calendário é
   absoluto e passa da altura do .pagina. Com os dois empatados, o rodapé
   vinha depois no HTML e cobria o topo do popover — os botões dali
   simplesmente não recebiam clique. */
.pagina {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 26px 24px 40px;
}

.rodape {
    position: relative;
    z-index: 1;
    padding: 10px 24px 30px;
    text-align: center;
    font-size: .78rem;
    color: var(--text-mute);
}
.rodape strong {
    font-weight: 600;
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 1100px) {
    .barra { flex-wrap: wrap; gap: 10px; }
    .barra-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
    .barra-user { margin-left: auto; }
}

/* Nos tamanhos em que a navegação vira linha própria com rolagem: o
   overflow-x também corta na vertical o que sai da linha, e era isso que
   escondia os submenus. A lista deixa de se ancorar no `.menu` e passa a
   se ancorar na `.barra`, que fica fora da área rolável. */
@media (max-width: 1100px) {
    /* flex-basis 100%: o `flex: 1` da regra geral tem base 0, que anula o
       width 100% e deixava o menu espremido ao lado dos botões. */
    .barra-nav { flex: 0 0 100%; flex-wrap: nowrap; scrollbar-width: none; }
    .barra-nav::-webkit-scrollbar { display: none; }
    .barra-nav .menu { position: static; }
    .barra-nav .menu-lista { top: 100%; left: 16px; right: auto; }
}
@media (max-width: 620px) {
    .barra { padding: 8px 12px; gap: 8px; }
    .barra-nav { margin: 0 -12px; padding: 0 12px 2px; gap: 2px; }
    .barra-nav .nav-link { padding: 8px 11px; font-size: .84rem; }
    .barra-nav .menu-lista { left: 12px; right: 12px; min-width: 0; }
    /* Só avatar e ícones: o nome completo e o "Sair" escrito não cabiam ao
       lado da marca numa tela de 390px, e a página rolava 18px para o lado. */
    .barra-user { gap: 4px; }
    .barra-user > .menu > .nav-link { font-size: 0; gap: 0; padding: 4px; }
    .barra-user > .menu > .nav-link > .ic-sm { display: none; }
    .barra-user .barra-avatar { font-size: .8rem; }
    .barra-user > form button { font-size: 0; gap: 0; padding: 8px; }
    /* Lista fechada sai do layout: invisível ela ainda somava na largura da
       página (era o que fazia /meus-resultados/ rolar 84px). */
    .menu:not(:hover):not(:focus-within):not(.open) > .menu-lista { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   INÍCIO — cabeçalho de boas-vindas
   ══════════════════════════════════════════════════════════════════════ */
.hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.hero-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 5px;
}

.hero h2 { font-size: 1.6rem; margin: 0 0 7px; }
.hero h2 span {
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-motivo { font-size: .88rem; color: var(--text-soft); margin: 0; }

.hero-agora { text-align: right; flex-shrink: 0; }
.hero-agora strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.hero-agora span { font-size: .82rem; color: var(--text-soft); }

@media (max-width: 640px) { .hero-agora { text-align: left; } }

/* ══════════════════════════════════════════════════════════════════════
   INÍCIO — cartões de widget
   ══════════════════════════════════════════════════════════════════════ */
.widget {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.widget[hidden] { display: none; }

.widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.widget-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.widget-titulo .ic { width: 13px; height: 13px; color: var(--brand); }

.widget-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--brand);
}
.widget-link .ic { width: 12px; height: 12px; }

/* Estado vazio padrão de qualquer widget */
.widget-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 10px;
    text-align: center;
    font-size: .82rem;
    color: var(--text-mute);
}
.widget-vazio .ic { width: 22px; height: 22px; opacity: .35; }

/* ══════════════════════════════════════════════════════════════════════
   PAINEL — grade de 3 colunas, cada card ocupando de 1 a 3
   Uma grade só (em vez das 3 filas independentes do PHP): assim um card
   largo fica no meio do fluxo, onde o usuário soltou, e a posição é uma
   ordem simples em vez de coluna + índice.
   ══════════════════════════════════════════════════════════════════════ */
.painel {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}
.painel > .widget { grid-column: span min(var(--span, 1), 3); }

@media (max-width: 1080px) {
    .painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .painel > .widget { grid-column: span min(var(--span, 1), 2); }
}
@media (max-width: 760px) {
    .painel { grid-template-columns: minmax(0, 1fr); }
    .painel > .widget { grid-column: span 1; }
}

/* ── Modo de edição ──────────────────────────────────────────────────── */
.hero-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hero-botoes { display: flex; align-items: center; gap: 8px; }
.btn-sm .ic { width: 14px; height: 14px; }

.edicao-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 11px 16px;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .84rem;
}
.edicao-aviso[hidden] { display: none; }
.edicao-aviso b { font-weight: 700; }
.edicao-estado { margin-left: auto; font-size: .78rem; font-weight: 600; opacity: .85; }
.edicao-estado.erro { color: var(--critical); }

/* Controles de edição ficam escondidos até entrar no modo */
.widget-acoes { display: flex; align-items: center; gap: 10px; }
.widget-editar { display: none; align-items: center; gap: 6px; }
body.editando .widget-editar { display: flex; }

/* No modo de edição o card ganha contorno tracejado e some o link "ver todos",
   para o cabeçalho não ficar disputando espaço com os controles. */
body.editando .widget {
    border-style: dashed;
    border-color: var(--border-strong);
}
body.editando .widget-link { display: none; }
body.editando .widget[draggable="true"] { cursor: grab; }
body.editando .widget.arrastando { opacity: .45; cursor: grabbing; }

.span-botoes {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.span-btn {
    width: 22px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: none;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-mute);
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.span-btn:hover { color: var(--text); }
.span-btn.ativo {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
}

.widget-ocultar, .widget-pegar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-mute);
    cursor: pointer;
}
.widget-ocultar:hover { color: var(--critical); background: var(--surface-2); }
.widget-pegar { cursor: grab; }

/* ── Gaveta de personalização ────────────────────────────────────────── */
.gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
}
.gaveta-fundo[hidden] { display: none; }

.gaveta {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 91;
    display: flex;
    flex-direction: column;
    width: 330px;
    max-width: 92vw;
    height: 100vh;
    padding: 20px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    animation: gavetaEntra .22s cubic-bezier(.22, 1, .36, 1);
}
.gaveta[hidden] { display: none; }

@keyframes gavetaEntra {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

.gaveta-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.gaveta-dica { font-size: .8rem; color: var(--text-soft); margin: 0 0 16px; }

.gaveta-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

.gaveta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: .86rem;
    cursor: pointer;
    transition: background .13s ease;
}
.gaveta-item:hover { background: var(--surface-2); }
.gaveta-item span { flex: 1; }
.gaveta-item .ic { color: var(--brand); }
.gaveta-item.fixo { opacity: .6; cursor: default; }
.gaveta-item input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

.gaveta-rodape { padding-top: 16px; border-top: 1px solid var(--border); }
.gaveta-rodape .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .gaveta, .cal-pop, .cal-seletor { animation: none; }
    .cal-titulo .ic { transition: none; }
}

/* ── Ações rápidas (carrossel) ───────────────────────────────────────── */
.acoes-wrap { display: flex; align-items: center; gap: 12px; }

.acoes-seta {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.acoes-seta:hover {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    border-color: transparent;
    color: #fff;
}
.acoes-seta .ic { width: 15px; height: 15px; }

.acoes-trilho {
    flex: 1;
    min-width: 0;
    /* Grade de colunas iguais em vez de fila de itens de largura fixa.
       Com poucas ações sobrava um vão à direita, porque os cards não
       cresciam. `minmax(max-content, 1fr)` faz cada coluna ocupar uma
       fatia igual do espaço livre sem nunca ficar menor que o texto —
       então, quando as ações passarem a caber, ele volta a rolar. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px;
}
.acoes-trilho::-webkit-scrollbar { display: none; }

.acao {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 104px;
    padding: 15px 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-soft);
    font-size: .77rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: transform .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.acao .ic { width: 20px; height: 20px; }
.acao:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: var(--glow);
}

/* Ação em destaque: o gradiente do botão primário */
.acao.destaque {
    background: linear-gradient(120deg, #6366f1, #8b5cf6, #3b82f6, #6366f1);
    background-size: 220% 100%;
    animation: btnFlow 6s ease-in-out infinite;
    border-color: transparent;
    color: #fff;
}
.acao.destaque:hover { color: #fff; box-shadow: 0 8px 26px rgba(99, 102, 241, .45); }

/* ── KPIs ────────────────────────────────────────────────────────────── */
.kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kpi {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.kpi-valor {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 5px;
}
/* Sem dado ainda: o traço fica neutro para não parecer um indicador. */
.kpi-valor.vazio { color: var(--text-mute); }
.kpi-valor.marca { color: var(--brand); }
.kpi-valor.violeta { color: var(--brand-2); }
.kpi-valor.atencao { color: var(--attention); }
.kpi-rotulo {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.kpi-sub { font-size: .62rem; color: var(--text-mute); margin-top: 2px; }

/* ── Campanha & progresso ────────────────────────────────────────────── */
.campanha-listra {
    height: 4px;
    margin: -18px -20px 16px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #3b82f6, #6366f1);
    background-size: 220% 100%;
    animation: btnFlow 6s ease-in-out infinite;
}

/* ── Últimas vendas ──────────────────────────────────────────────────── */
.mini-tabela { width: 100%; border-collapse: collapse; }
.mini-tabela th {
    padding: 0 0 8px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mute);
    text-align: left;
}
.mini-tabela td {
    padding: 10px 0;
    font-size: .82rem;
    border-top: 1px solid var(--border);
}
.mini-tabela td:last-child, .mini-tabela th:last-child { text-align: right; color: var(--text-soft); }

/* ── Anotações ───────────────────────────────────────────────────────── */
.nota-nova { display: flex; gap: 9px; align-items: stretch; }

.nota-nova textarea {
    flex: 1;
    resize: none;
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .85rem;
}
.nota-nova textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.nota-add {
    flex-shrink: 0;
    width: 44px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, #6366f1, #8b5cf6, #3b82f6, #6366f1);
    background-size: 220% 100%;
    animation: btnFlow 6s ease-in-out infinite;
    color: #fff;
    cursor: pointer;
}
.nota-add:hover { filter: brightness(1.06); }

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

.nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .83rem;
    line-height: 1.45;
}
.nota span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nota button {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    color: var(--text-mute);
    cursor: pointer;
}
.nota button:hover { color: var(--critical); }

/* ── Comunicados / notícias ──────────────────────────────────────────── */
.lista-itens { display: flex; flex-direction: column; }

.item-lista {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.item-lista:first-child { border-top: none; padding-top: 0; }

.item-ponto {
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    flex-shrink: 0;
}
.item-titulo { font-size: .85rem; font-weight: 600; line-height: 1.35; }
.item-meta { font-size: .72rem; color: var(--text-mute); margin-top: 3px; }

/* ── Promoções ───────────────────────────────────────────────────────── */
.promo {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.promo-listra { height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.promo-corpo { padding: 13px 15px; }
.promo-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.promo-valor {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 6px 0 2px;
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.promo-nome { font-size: .84rem; color: var(--text-soft); }

/* ── Clima ───────────────────────────────────────────────────────────── */
.clima { display: flex; align-items: center; gap: 16px; }
.clima .ic-clima { width: 46px; height: 46px; color: var(--attention); stroke-width: 1.6; }
.clima-temp { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.clima-desc { font-size: .82rem; color: var(--text-soft); margin-top: 3px; }
.clima-local { font-size: .74rem; color: var(--text-mute); margin-top: 2px; }
.clima-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ── Calendário ──────────────────────────────────────────────────────── */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cal-passo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
}
.cal-passo:hover { background: var(--surface-2); color: var(--text); }

/* O título abre o seletor de mês/ano */
.cal-titulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
    cursor: pointer;
    transition: background .13s ease;
}
.cal-titulo:hover { background: var(--surface-2); }
.cal-titulo .ic { color: var(--text-mute); transition: transform .16s ease; }
.cal-titulo[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* ── Seletor de mês e ano ────────────────────────────────────────────── */
.cal-seletor {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    animation: popEntra .16s cubic-bezier(.22, 1, .36, 1);
}
.cal-seletor[hidden] { display: none; }

.cal-seletor-ano {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cal-seletor-ano strong { font-size: .92rem; font-variant-numeric: tabular-nums; }

.cal-seletor-meses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.cal-mes-opcao {
    padding: 7px 4px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: background .13s ease, color .13s ease;
}
.cal-mes-opcao:hover { background: var(--surface); color: var(--text); }
.cal-mes-opcao.ativo {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
}

.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.cal-dow {
    padding-bottom: 6px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-mute);
}

/* A célula é só o alvo de clique — ela estica junto com a coluna quando o
   card ocupa 2 ou 3 colunas. O destaque visual fica no .cal-num, que tem
   tamanho fixo; sem essa separação, o `border-radius: 50%` da célula larga
   virava uma elipse. */
.cal-dia {
    position: relative;
    display: grid;
    place-items: center;
    height: 34px;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-mute);
}
.cal-dia.mes-atual { color: var(--text); }
.cal-dia.fim-semana { color: var(--brand); }
.cal-dia.feriado { color: var(--brand-2); font-weight: 700; }

.cal-num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background .13s ease;
}

a.cal-dia:hover { color: var(--text); }
a.cal-dia:hover .cal-num { background: var(--surface-2); }

.cal-dia.hoje { color: #fff; font-weight: 700; }
.cal-dia.hoje .cal-num {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
}
a.cal-dia.hoje:hover { color: #fff; }
a.cal-dia.hoje:hover .cal-num {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    filter: brightness(1.1);
}

.cal-dia.selecionado { color: var(--text); }
.cal-dia.selecionado .cal-num { box-shadow: inset 0 0 0 1.5px var(--brand); }

/* Marca de que o dia tem aviso */
.cal-marca {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-mute);
}
.cal-marca.equipe { background: linear-gradient(120deg, var(--brand), var(--brand-2)); }
.cal-dia.hoje .cal-marca { background: #fff; }

/* ── Agenda do dia ───────────────────────────────────────────────────
   Com JS a agenda vira um popover que sobrepõe o conteúdo abaixo, sem
   empurrar nada. Sem JS, ela é renderizada em fluxo, abaixo da grade.
─────────────────────────────────────────────────────────────────────── */
.cal-widget { position: relative; }

/* Enquanto o popover está aberto, o card do calendário sobe acima dos vizinhos */
.widget:has(.cal-widget.com-pop) { position: relative; z-index: 30; }

.cal-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: -6px;
    right: -6px;
    z-index: 31;
    /* Sem altura máxima: o popover cresce com a quantidade de avisos, em vez
       de criar uma barra de rolagem interna. Como ele é absoluto, crescer não
       empurra o layout — só sobrepõe mais, e a própria página rola se
       precisar. */
    padding: 16px 18px 18px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow), 0 0 0 1px var(--brand-soft);
    animation: popEntra .16s cubic-bezier(.22, 1, .36, 1);
}
.cal-pop[hidden] { display: none; }

@keyframes popEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Versão em fluxo (sem JS) */
.cal-agenda-inline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.agenda-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .84rem;
}
.agenda-fechar { color: var(--text-mute); display: grid; place-items: center; }
.agenda-fechar:hover { color: var(--text); }

.agenda-vazio { font-size: .8rem; color: var(--text-mute); margin: 0 0 12px; }
.agenda-lista { margin-bottom: 4px; }
.agenda-erro { font-size: .78rem; padding: 9px 12px; }

.evento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-mute);
}
.evento-reuniao  { border-left-color: var(--brand); }
.evento-campanha { border-left-color: var(--brand-2); }
.evento-material { border-left-color: var(--attention); }

.evento-corpo { flex: 1; min-width: 0; }
.evento-titulo { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.evento-desc { font-size: .78rem; color: var(--text-soft); margin-top: 3px; }
.evento-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: .72rem;
    color: var(--text-mute);
}
.evento-meta .badge { font-size: .66rem; padding: 2px 8px; }

.evento-apagar {
    border: none;
    background: none;
    padding: 2px;
    color: var(--text-mute);
    cursor: pointer;
}
.evento-apagar:hover { color: var(--critical); }

/* Formulário de novo aviso */
.evento-form { margin-top: 12px; }
.evento-form .field { margin-bottom: 8px; }
.evento-form input, .evento-form textarea, .evento-form select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .84rem;
}
.evento-form input:focus, .evento-form textarea:focus, .evento-form select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.evento-form textarea { resize: vertical; }

.evento-form-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.evento-form-linha select { flex: 1; min-width: 118px; width: auto; }
.evento-form-linha .btn { flex-shrink: 0; }

.cal-feriados { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cal-feriado { display: flex; align-items: flex-start; gap: 8px; font-size: .74rem; }
.cal-feriado i {
    width: 5px;
    height: 5px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brand-2);
    flex-shrink: 0;
}
.cal-feriado b { font-weight: 600; }
.cal-feriado span { color: var(--text-mute); }

/* ══════════════════════════════════════════════════════════════════════
   TRANSIÇÕES DE ENTRADA
   Cada bloco entra em sequência. --i é o índice, definido no template.
   ══════════════════════════════════════════════════════════════════════ */
.surge {
    opacity: 0;
    animation: surgir .5s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes surgir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .surge { animation: none; opacity: 1; }
    .acao, .acoes-seta, .nav-link { transition: none; }
    .nav-link.ativo, .acao.destaque, .campanha-listra, .nota-add { animation: none; }
}

/* ── Página de ferramenta ainda não migrada ──────────────────────────── */
.em-construcao {
    max-width: 460px;
    margin: 40px auto;
    padding: 34px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}
.em-construcao .ic-aviso {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 16px;
    padding: 14px;
    border-radius: 50%;
    background: var(--attention-soft);
    color: var(--attention);
    box-sizing: content-box;
}
.em-construcao p { color: var(--text-soft); font-size: .89rem; margin: 8px 0 22px; }



/* ══════════════════════════════════════════════════════════════════════
   PERFIL E USUÁRIOS
   O grosso vem do DS (.setor-block, .team-grid, .member-card, .swatches,
   .form-grid, .check-row). Aqui só o que falta.
   ══════════════════════════════════════════════════════════════════════ */
.perfil-grid { align-items: start; }
@media (max-width: 900px) { .perfil-grid { grid-template-columns: 1fr; } }

.perfil-foto-linha {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.perfil-foto {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    font-size: 1.9rem;
    font-weight: 600;
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }

.perfil-foto-acoes { min-width: 0; }
/* O input de arquivo fica escondido atrás do <label> com cara de botão. */
.perfil-foto-acoes input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.perfil-dica { font-size: .76rem; margin: 6px 0 0; }
.perfil-erro { font-size: .78rem; color: var(--critical); margin: 5px 0 0; }
.perfil-remover { margin-top: 14px; }

.perfil-dados { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.perfil-dados > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.perfil-dados dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.perfil-dados dd { margin: 0; font-size: .89rem; font-weight: 500; }

.usuarios-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.usuarios-acoes { display: flex; gap: 10px; }

.senha-gerada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.senha-gerada code {
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.acoes-divisor { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

/* Cores das amostras do seletor de setor — as mesmas do .setor-block */
.swatch.cor-indigo { color: var(--brand); }
.swatch.cor-violeta { color: var(--brand-2); }
.swatch.cor-azul { color: #3b82f6; }
.swatch.cor-ceu { color: #38bdf8; }
.swatch.cor-roxo { color: #a855f7; }
.swatch.cor-neutro { color: var(--text-mute); }

/* O DS estiliza .field input; os selects do formulário seguem junto */
.form-grid select, .form-grid input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .91rem;
}
.form-grid select:focus, .form-grid input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}


/* Sobreposições ficam no fim do <body>, fora do .pagina, para não herdarem
   o contexto de empilhamento dele — senão a barra superior (z-index 50)
   apareceria por cima do modal. */
.sobreposicoes { position: relative; z-index: 60; }

/* ══════════════════════════════════════════════════════════════════════
   MODAIS E CONFIRMAÇÃO
   O DS traz .modal-backdrop/.modal-box/.switch/.pw-row prontos; aqui só
   os ajustes de quem usa.
   ══════════════════════════════════════════════════════════════════════ */
.modal-body .form-grid { gap: 0 18px; }
.modal-body .field { margin-bottom: 16px; }
.modal-body textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .91rem;
    resize: vertical;
}
.modal-body textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* O interruptor do DS espera o input logo antes do .track */
.switch-field .switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.pw-row .btn { height: 44px; }
.pw-row .ic { width: 16px; height: 16px; }

/* Botão de apagar aviso: alvo de clique maior, com estado visível.
   Antes eram 17px — pequeno demais para acertar de primeira. */
.evento-apagar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    transition: background .13s ease, color .13s ease;
}
.evento-apagar:hover { background: var(--critical-soft); color: var(--critical); }
.evento-apagar:active { transform: scale(.94); }

.setor-descricao { font-size: .78rem; }


/* ══════════════════════════════════════════════════════════════════════
   MEU PERFIL
   O avatar com hover para trocar a foto é o .avatar-edit do DS; o input
   de arquivo fica escondido atrás dele.
   ══════════════════════════════════════════════════════════════════════ */
.perfil-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.perfil-acoes { display: flex; align-items: center; gap: 10px; }
.perfil-acoes .icon-btn { position: relative; text-decoration: none; }

.perfil-layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 860px) { .perfil-layout { grid-template-columns: 1fr; } }

/* Layout genérico "painel estreito + painel largo" — formulário enxuto de
   um lado, conteúdo/atividade do outro. Reaproveitado pelo MarketScope. */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } }
/* Item de grid não encolhe abaixo do conteúdo sem isto: a tabela do
   estimador segurava o card em 820px e a página rolava para o lado. */
.split-layout > * { min-width: 0; }

/* Selo de ícone com gradiente da marca, ao lado do título da página. */
.page-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}
.page-icone .ic { color: #fff; }
.page-head-titulo { display: flex; align-items: center; gap: 12px; }

.perfil-cartao { text-align: center; }
.perfil-cartao form { margin: 0; }

/* O input de arquivo é acionado pelo <label class="avatar-edit"> */
.perfil-cartao input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.perfil-nome { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.perfil-cargo { font-size: .85rem; color: var(--text-soft); margin-top: 2px; }
.perfil-setor { margin-top: 12px; }

.perfil-dados-compacto {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════
   NOTIFICAÇÕES
   ══════════════════════════════════════════════════════════════════════ */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.filtro {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: .84rem;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.filtro:hover { border-color: var(--brand); color: var(--text); }
.filtro.ativo {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    border-color: transparent;
    color: #fff;
}

.lista-notificacoes { display: flex; flex-direction: column; gap: 10px; }

.notificacao {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    transition: border-color .15s ease, transform .15s ease;
}
.notificacao:hover {
    border-color: var(--brand);
    color: var(--text);
    transform: translateY(-1px);
}
/* Ainda não lida e ainda por vir: ganha destaque na lateral */
.notificacao.nova { border-left: 3px solid var(--brand); }

.notificacao-data {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    padding: 7px 0;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.notificacao-data b { font-size: 1.05rem; font-weight: 700; }

.notificacao-corpo { flex: 1; min-width: 0; }
.notificacao-titulo { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.notificacao-desc { display: block; font-size: .82rem; margin-top: 3px; }
.notificacao-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--text-mute);
}
.notificacao-meta .badge { font-size: .68rem; padding: 3px 9px; }

.notificacao-ponto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
}


/* ══════════════════════════════════════════════════════════════════════
   MENU DO USUÁRIO E LINHA DO TEMPO
   ══════════════════════════════════════════════════════════════════════ */
.menu-usuario { min-width: 250px; }

.menu-cabeca {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 11px 13px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border);
}
.menu-cabeca-texto { min-width: 0; line-height: 1.3; }
.menu-cabeca-texto b { display: block; font-size: .88rem; }
.menu-cabeca-texto span { font-size: .74rem; color: var(--text-mute); }
.menu-cabeca-texto .menu-plano {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-fraco, rgba(99, 102, 241, .12));
    color: var(--accent, #6366f1);
    font-size: .68rem;
    font-weight: 600;
}

/* Contador de não lidas dentro do item de menu */
.menu-contador {
    margin-left: auto;
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--critical);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
}

.linha-tempo { display: flex; flex-direction: column; }

.atividade {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0 15px 26px;
    border-bottom: 1px solid var(--border);
}
.atividade:last-child { border-bottom: none; }

/* Fio vertical ligando os pontos */
.atividade::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.atividade:first-child::before { top: 22px; }
.atividade:last-child::before { bottom: calc(100% - 22px); }

.atividade-marca {
    position: absolute;
    left: 0;
    top: 18px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
}

.atividade-corpo { flex: 1; min-width: 0; }
.atividade-titulo { font-size: .9rem; font-weight: 600; }
.atividade-desc { font-size: .82rem; color: var(--text-soft); margin-top: 3px; }

.atividade-quando {
    flex-shrink: 0;
    font-size: .78rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .atividade { flex-direction: column; gap: 6px; }
}


/* ── Presença e tempo online ─────────────────────────────────────────
   O .presence vem do DS; aqui só o estado intermediário, que ele não
   previa, e o resumo de horas.
─────────────────────────────────────────────────────────────────────── */
.presence.ausente .dot {
    background: var(--attention);
    box-shadow: 0 0 0 3px var(--attention-soft);
}
.member-card .presence { font-size: .72rem; }

.resumo-tempo { margin-bottom: 18px; }
.resumo-rotulo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.resumo-valor {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 6px;
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.perfil-link-atividades { width: 100%; justify-content: center; margin-top: 16px; }


/* ── Meus resultados ─────────────────────────────────────────────────── */
.periodo-nav { display: flex; align-items: center; gap: 10px; }
.periodo-atual {
    font-size: .92rem;
    font-weight: 600;
    min-width: 130px;
    text-align: center;
}
.icon-btn.desabilitado { opacity: .35; cursor: default; }

.kpis-grandes { margin-bottom: 18px; }
.kpis-grandes .kpi-valor { font-size: 2.1rem; }

.resultados-linha { align-items: start; }
@media (max-width: 900px) { .resultados-linha { grid-template-columns: 1fr; } }

.ranking-destaque {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.ranking-posicao {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ranking-texto { font-size: .84rem; color: var(--text-soft); }


/* ══════════════════════════════════════════════════════════════════════
   GRÁFICO DE LINHAS
   SVG puro, sem biblioteca. O viewBox é 100 de largura e o preserveAspect
   é "none", então o desenho estica para qualquer tela; a espessura do
   traço é mantida com vector-effect.
   ══════════════════════════════════════════════════════════════════════ */
.gr-cartao {
    padding: 20px 22px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.gr-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.gr-titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.gr-legenda { display: flex; gap: 16px; flex-wrap: wrap; }
.gr-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--text-soft);
}
.gr-item i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gr-item b { color: var(--text); font-variant-numeric: tabular-nums; }

.gr-area { position: relative; padding-left: 30px; }
.gr-svg { display: block; width: 100%; height: 240px; overflow: visible; }

.gr-grade {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 3 5;
}

.gr-linha {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.gr-preenchimento { opacity: .10; }

/* ── A animação ─────────────────────────────────────────────────────
   Duas coisas ao mesmo tempo: a linha nasce achatada na base e cresce até
   a forma real (o "subindo e fazendo as curvas"), enquanto uma cortina a
   revela da esquerda para a direita (o "sendo traçada").

   Por que cortina e não `stroke-dasharray`: as linhas usam
   `vector-effect: non-scaling-stroke`, necessário porque o SVG estica com
   `preserveAspectRatio="none"` e sem ele o traço engordaria junto. Só que
   isso faz o tracejado ser medido em pixels de tela, ignorando o
   `pathLength` — a linha saía picotada. A cortina não depende de unidade
   nenhuma.

   As duas durações são propositalmente próximas: a curva termina de
   formar quase junto com o fim da revelação, senão o olho vê a linha
   pronta sendo descoberta, que é bem menos interessante. */
.gr-linhas {
    transform: scaleY(0);
    transform-origin: 0 100%;
    transform-box: fill-box;
    animation: grSubir 1.25s cubic-bezier(.34, 1.12, .5, 1) both;
    animation-delay: .1s;
}
@keyframes grSubir {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.gr-cortina {
    animation: grCortina 1.35s cubic-bezier(.35, .1, .25, 1) both;
    animation-delay: .1s;
}
@keyframes grCortina {
    from { width: 0; }
}

/* Cada série entra logo depois da anterior, para o olho acompanhar. */
.gr-linha {
    opacity: 0;
    animation: grAparecer .4s ease forwards;
    animation-delay: calc(.1s + var(--i, 0) * .13s);
}
@keyframes grAparecer { to { opacity: 1; } }

.gr-preenchimento {
    opacity: 0;
    animation: grAparecerArea .9s ease forwards;
    animation-delay: calc(.35s + var(--i, 0) * .13s);
}

@keyframes grAparecerArea { to { opacity: .10; } }

.gr-escala {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px;
}
.gr-escala span {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: .68rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.gr-eixo-x {
    position: relative;
    height: 18px;
    margin-left: 30px;
    margin-top: 6px;
}
.gr-eixo-x span {
    position: absolute;
    transform: translateX(-50%);
    font-size: .68rem;
    color: var(--text-mute);
    white-space: nowrap;
}

.gr-vazio { padding: 40px 10px; }

@media (prefers-reduced-motion: reduce) {
    .gr-linhas { animation: none; transform: none; }
    .gr-cortina { animation: none; }
    .gr-linha { opacity: 1; animation: none; }
    .gr-preenchimento { opacity: .10; animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DETALHAMENTO — lista com filtros laterais
   ══════════════════════════════════════════════════════════════════════ */
/* ── Detalhamento ───────────────────────────────────────────────────
   Os filtros deixaram a coluna lateral e viraram uma barra sobre a lista:
   a tabela é o conteúdo, e era ela que estava espremida. */
.detalhamento { display: block; }
.detalhamento.carregando .det-lista { opacity: .45; transition: opacity .15s ease; }

.det-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.det-barra .spacer { flex: 1; }

.det-busca {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}
.det-busca > .ic {
    position: absolute;
    left: 12px;
    color: var(--text-mute);
    pointer-events: none;
}
.det-busca .input { padding-left: 38px; padding-right: 34px; }
.det-busca-limpar {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
}
.det-busca-limpar:hover { background: var(--border-strong); color: var(--text); }

.det-filtro-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.det-filtro-btn:hover { border-color: var(--brand); }
.det-menu.open .det-filtro-btn { border-color: var(--brand); }
.det-contador {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .68rem;
}

.det-opcoes { min-width: 220px; padding: 6px; }
.det-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    color: var(--text-soft);
    cursor: pointer;
}
.det-opcao:hover { background: var(--surface-2); color: var(--text); }
.det-opcao input { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }

.det-limpar { font-size: .8rem; }
.det-lista { min-height: 120px; }
.det-data {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    color: var(--text-soft);
}
.det-descricao { font-weight: 600; display: block; }
.det-detalhe {
    display: block;
    font-size: .78rem;
    color: var(--text-mute);
    margin-top: 2px;
}
.det-cpf {
    font-variant-numeric: tabular-nums;
    color: var(--text-mute);
    white-space: nowrap;
}

/* A linha inteira reage ao mouse — a tabela é uma lista de coisas
   clicáveis, e o realce diz isso antes do clique. */
.det-lista table.ares tbody tr { transition: background .12s; }
.det-lista table.ares tbody tr:hover { background: var(--surface-2); }
.det-lista table.ares tbody tr:last-child td { border-bottom: 0; }

/* A coluna do tipo não deve crescer mais que o selo que carrega. */
.det-lista table.ares td:nth-child(3) { width: 1%; white-space: nowrap; }

/* ── Alternador de visão ─────────────────────────────────────────────── */
.resultados-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.alternador {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.alternador-btn {
    padding: 7px 15px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.alternador-btn:hover { color: var(--text); }
.alternador-btn.ativo {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
}

/* ── Melhores dias ───────────────────────────────────────────────────── */
.melhores-dias { display: flex; flex-direction: column; gap: 12px; }
.melhor-linha { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.melhor-cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.melhor-nome { font-weight: 600; }
.melhor-pico { color: var(--text-mute); font-size: .78rem; }
.melhor-total {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-valor.ceu { color: #38bdf8; }

/* Pulinho do contador quando chega notificação nova */
.sino-contador.pulsa { animation: sinoPulsa .5s ease; }
@keyframes sinoPulsa {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
    .sino-contador.pulsa { animation: none; }
}

/* Placar da equipe */
.placar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.placar li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
}
.placar li:nth-child(odd) { background: var(--surface-2); }
.placar-pos {
    width: 30px;
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.placar-nome { flex: 1; min-width: 0; }
.placar-total { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   Sugestor de Planos
   ══════════════════════════════════════════════════════════════════════ */
.sug-wrap { max-width: 620px; margin: 0 auto; }
.sug-head { text-align: center; margin-bottom: 26px; }
.sug-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 6px;
}

.sug-busca { padding: 32px 28px; }
.sug-busca-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.sug-busca-ic {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    /* No PHP este quadrado era vermelho; aqui segue o gradiente da marca. */
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3);
}
.sug-busca-head h2 { margin: 0 0 3px; font-size: 1.1rem; font-weight: 800; }
.sug-busca-head p { margin: 0; font-size: .82rem; color: var(--text-soft); }

/* ── As duas portas da Venda Guiada ─────────────────────────────────
   CPF ou telefone. Mesma pinta das tags do comparativo de concorrentes
   (`.riv-tag`): é o mesmo gesto: escolher entre poucos: e inventar um
   segundo desenho para ele só faria a tela parecer de outro sistema. */
.vg-portas { display: flex; gap: 6px; margin-bottom: 12px; }
.vg-porta {
    padding: 6px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vg-porta:hover { border-color: var(--brand); color: var(--brand); }
.vg-porta-ativa {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.sug-campo { display: flex; gap: 12px; align-items: center; }
/* O giro pertence ao campo, não à linha: solto na linha ele caía sobre o
   texto do botão. */
.sug-caixa { position: relative; flex: 1; min-width: 0; }
.sug-campo .input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: .1em;
    padding: 14px 44px 14px 20px;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
}
/* Com JavaScript a busca dispara sozinha e o botão some (o JS o esconde).
   Sem JavaScript ele fica, e o formulário continua funcionando. */
.sug-enviar { flex: none; }

/* Buscando: o texto some e o giro ocupa o centro do campo. Ver dois
   estados ao mesmo tempo — número e spinner — só polui. */
.sug-caixa.buscando .input { color: transparent; caret-color: transparent; }
.sug-caixa.buscando .input::placeholder { color: transparent; }

.sug-girando {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: sug-girar .7s linear infinite;
    pointer-events: none;
}
@keyframes sug-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sug-girando { animation-duration: 2s; }
}

.sug-erro { margin: 14px 0 0; }

.sug-vazio, .sug-cliente, .sug-ponto { margin-top: 18px; }
.sug-cliente-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Um bloco por operadora ─────────────────────────────────────────
   Cliente com ponto na Station e ponto na AC vê dois blocos, cada um
   com o endereço da sua instalação. */
.sug-ponto { --accent: var(--brand); }
.sug-ponto[data-operadora="ac_telecom"] { --accent: var(--brand-2); }

.sug-ponto-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sug-ponto-topo .bar { width: 4px; height: 30px; flex: none; }
.sug-ponto-topo .spacer { flex: 1; }
.sug-ponto-titulo h2 { margin: 0; font-size: 1.05rem; }
.sug-ponto-titulo span { font-size: .8rem; }
.sug-ponto-total { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sug-ponto-total .muted { font-size: .78rem; font-weight: 400; }

.sug-endereco {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: .82rem;
    color: var(--text-soft);
}
.sug-endereco .ic { color: var(--accent); flex: none; }

.sug-oferta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sug-oferta h3 { margin: 0; font-size: .95rem; }
.sug-plano h4 { margin: 0; font-size: 1rem; }
.sug-vazio { text-align: center; }
.sug-vazio h2, .sug-cliente h2 { margin: 0 0 4px; font-size: 1.05rem; }

.sug-cliente-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.sug-contratos { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.sug-contrato {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.sug-contrato-plano { display: flex; flex-direction: column; gap: 2px; }
.sug-contrato-dados { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sug-preco { font-weight: 700; font-variant-numeric: tabular-nums; }

.sug-oferta-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sug-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.sug-plano {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
/* O primeiro da lista é o mais próximo do plano atual — o mais fácil de
   fechar. O destaque diz isso sem precisar de texto. */
.sug-plano-destaque {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
}
.sug-plano h3 { margin: 0; font-size: 1rem; }
.sug-plano-preco {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sug-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sug-beneficios li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    color: var(--text-soft);
}
.sug-beneficios .ic { color: var(--brand); flex: none; }

.sug-scripts { margin-top: auto; }
.sug-scripts summary { cursor: pointer; font-size: .85rem; color: var(--brand); }
.sug-script { margin-top: 10px; font-size: .85rem; }
.sug-script p { margin: 3px 0 0; color: var(--text-soft); }

.sug-cpf { font-variant-numeric: tabular-nums; letter-spacing: .02em; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   Catálogo de planos e grupos
   ══════════════════════════════════════════════════════════════════════ */
.cat-vazio { text-align: center; }
.cat-vazio h2 { margin: 0 0 6px; font-size: 1.05rem; }
.cat-vazio p { max-width: 52ch; margin: 0 auto 18px; }

.cat-codigo { font-size: .78rem; }

/* ── Regiões como dropdown ──────────────────────────────────────────
   <details> nativo: as cores de destaque são as mesmas do .setor-block. */
.cat-bloco {
    --accent: var(--brand);
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.cat-bloco[data-cor="indigo"]  { --accent: var(--brand); }
.cat-bloco[data-cor="violeta"] { --accent: var(--brand-2); }
.cat-bloco[data-cor="neutro"]  { --accent: var(--text-mute); }

/* ── Cadastro de operadoras ────────────────────────────────────────
   Um cartão por rede, com a régua de upgrade à vista. A régua muda o
   comportamento do Sugestor, então ela não fica escondida atrás de um
   clique em "editar". */
.op-lista { display: grid; gap: 14px; }
.op-card-off { opacity: .72; }
.op-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.op-identidade { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-identidade h2 { margin: 0; font-size: 1.02rem; }
.op-uso { display: flex; gap: 6px; font-size: .8rem; color: var(--text-soft); }
.op-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.op-acoes .campo-nota { margin: 0; margin-right: auto; }
.field-check label { display: flex; align-items: center; gap: 8px; }
.cat-bloco-alerta { --accent: var(--attention); border-color: var(--attention-soft); }

.cat-bloco-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;          /* tira o triângulo padrão */
    user-select: none;
}
.cat-bloco-topo::-webkit-details-marker { display: none; }
.cat-bloco-topo:hover { background: var(--surface-2); }
.cat-bloco-topo h2 { margin: 0; font-size: 1.05rem; }
.cat-bloco-topo .bar { width: 4px; height: 22px; flex: none; }
.cat-bloco-topo .count { font-size: .78rem; color: var(--text-mute); }
.cat-bloco-topo .spacer { flex: 1; }

.cat-seta {
    flex: none;
    color: var(--text-mute);
    transition: transform .18s ease;
}
.cat-bloco[open] > .cat-bloco-topo .cat-seta { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cat-seta { transition: none; } }

.cat-bloco > .cat-planos {
    padding: 0 16px 16px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.cat-planos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.cat-plano {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}
.cat-plano:hover { border-color: var(--brand); transform: translateY(-1px); }
.cat-plano-off { opacity: .55; }
.cat-plano-topo { display: flex; justify-content: space-between; gap: 10px; }
.cat-plano-preco { font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-plano-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-plano-regioes { display: flex; gap: 5px; flex-wrap: wrap; }

/* A lista de regiões no cabeçalho recua antes de espremer o resto. */
.cat-bloco-topo .cat-codigo {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 820px) {
    .cat-bloco-topo .cat-codigo { display: none; }
}

.cat-ficha { align-items: start; gap: 18px; }
.campo-nota { font-size: .78rem; margin: 4px 0 0; }

/* ── Escolha de regiões (lista emprestada do RBX) ────────────────────
   Cada item é um <label>, e `.field label { display: block }` do design
   system vence por especificidade — daí o seletor mais específico aqui. */
.rbx-painel { margin: 18px 0; }

.rbx-rotulo { display: flex; align-items: center; gap: 8px; }
.rbx-obrigatorio {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--attention);
    background: var(--attention-soft);
}
.rbx-explica { margin: 0 0 12px; font-size: .82rem; line-height: 1.5; }
.rbx-derivado { margin: 0 0 4px; }

.rbx-busca-linha { position: relative; display: flex; align-items: center; }
.rbx-busca-linha > .ic {
    position: absolute;
    left: 12px;
    color: var(--text-mute);
    pointer-events: none;
}
.rbx-busca { padding-left: 38px; padding-right: 38px; }
.rbx-limpar {
    position: absolute;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
}
.rbx-limpar:hover { background: var(--border-strong); color: var(--text); }

.rbx-lista {
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    gap: 3px;
    padding: 8px;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    scrollbar-width: thin;
}
.rbx-aviso { padding: 10px 4px; margin: 0; font-size: .84rem; }

.rbx-grupo-titulo {
    position: sticky;
    top: -8px;
    z-index: 1;
    margin: 6px 0 2px;
    padding: 6px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--surface-2);
}
.rbx-grupo-titulo:first-child { margin-top: 0; }

.rbx-lista label.rbx-item {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rbx-lista label.rbx-item:hover { border-color: var(--border-strong); }
.rbx-lista label.rbx-item input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.rbx-item-nome { flex: 1; min-width: 0; }
.rbx-item-meta { flex: none; font-size: .72rem; color: var(--text-mute); }
.rbx-item-ativo {
    border-color: var(--brand) !important;
    background: var(--brand-soft);
    font-weight: 600;
}

.rbx-contador {
    margin: 8px 2px 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand);
}
.rbx-contador-vazio { color: var(--attention); font-weight: 500; }

/* Barra de ação da ficha do plano */
.cat-salvar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.cat-salvar .btn-primary { gap: 7px; padding-left: 22px; padding-right: 22px; }

.scripts-bloco { margin: 18px 0; }
.scripts-bloco h3 {
    margin: 0 0 8px;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.script-item {
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.script-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.script-item p { margin: 6px 0 0; font-size: .85rem; color: var(--text-soft); }

/* ── As duas metades de um script ──────────────────────────────────
   A mensagem é o que o cliente recebe, a dica é de quem conduz. Antes
   eram um parágrafo só, e o colaborador copiava as duas juntas. Aqui a
   diferença é visual: a mensagem em bloco claro, a dica recuada e com
   uma barra ao lado, do jeito que uma nota de rodapé se comporta. */
.script-etiqueta {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 2px;
}
.script-mensagem { margin-top: 10px; }
.script-mensagem p { color: var(--text); }
.script-dicas {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--border-strong);
}
.script-dicas .script-etiqueta { color: var(--brand); }
.script-dicas p { font-size: .82rem; }

/* A explicação embaixo do campo, no formulário. */
.field-ajuda {
    margin: 4px 0 0;
    font-size: .76rem;
    color: var(--text-soft);
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   A janela do atendimento
   ══════════════════════════════════════════════════════════════════════
   Ela vive em duas larguras: encaixada na página (~440px) e solta numa
   janela do sistema (~420px, e o usuário pode encolher mais). O desenho
   parte da mais apertada — o que couber lá cabe nas duas.
   ══════════════════════════════════════════════════════════════════════ */
.sug-janela {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    width: min(440px, calc(100vw - 40px));
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(var(--app), var(--app)) padding-box,
        linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
    box-shadow: 0 18px 60px rgba(10, 12, 30, .45);
    overflow: hidden;
    animation: sug-entrar .22s ease-out;
    /* referência para a caixa de motivos, que cobre a janela */
    position: fixed;
}
@keyframes sug-entrar {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .sug-janela { animation: none; }
}

/* ── Cabeçalho ──────────────────────────────────────────────────────
   Uma linha só, sem quebra: texto empilhado à esquerda, ações à direita.
   O texto encolhe (min-width: 0) para as ações nunca serem empurradas. */
.sug-janela-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 11px 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.sug-janela-ponto {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    animation: sug-pulsar 1.8s ease-in-out infinite;
}
@keyframes sug-pulsar { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sug-janela-ponto { animation: none; } }

.sug-janela-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;          /* deixa o texto encolher em vez de empurrar */
    line-height: 1.25;
}
.sug-janela-texto strong {
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sug-janela-cpf {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    opacity: .8;
    white-space: nowrap;
}

.sug-janela-acoes { display: flex; align-items: center; gap: 6px; flex: none; }

.sug-janela-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.sug-janela-btn:hover { background: rgba(255, 255, 255, .32); }
.sug-janela-btn-so-icone { width: 28px; padding: 0; justify-content: center; }
.sug-janela-btn .ic { flex: none; }

/* A seta de voltar toma o lugar do texto: quem entrou no detalhe de um
   plano precisa achar a saída sem procurar. */
.sug-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--brand);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.sug-voltar:hover { background: #fff; }

/* ── Corpo ──────────────────────────────────────────────────────────── */
.sug-janela-corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 14px 14px;
    scrollbar-width: thin;
}
/* Dentro da janela os cartões perdem a moldura: a janela já é a moldura. */
.sug-janela-corpo .card {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 14px 0;
}
.sug-janela-corpo .sug-planos { grid-template-columns: 1fr; }
.sug-janela-corpo .sug-cliente h2 {
    font-size: clamp(.92rem, 3.4vw, 1.05rem);
    line-height: 1.3;
}
.sug-janela-corpo .sug-cliente .muted { font-size: clamp(.76rem, 2.8vw, .85rem); }
.sug-janela-corpo .sug-cliente-topo { gap: 10px; }
.sug-janela-corpo .sug-cliente-tags { gap: 5px; }
.sug-janela-corpo .sug-ponto + .sug-ponto { border-top: 1px solid var(--border); }

/* Minimizada: só a barra, como a reunião reduzida ao canto. */
.sug-janela-min .sug-janela-corpo,
.sug-janela-min .sug-motivos { display: none; }
.sug-janela-min .sug-janela-btn-so-icone .ic { transform: rotate(180deg); }

.sug-janela-chamando { animation: sug-chacoalhar .4s ease; }
@keyframes sug-chacoalhar {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .sug-janela-chamando { animation: none; } }

/* ── O X que encerra ────────────────────────────────────────────────
   Encerrar é destrutivo do ponto de vista do atendimento, então o botão
   avisa disso pela cor — mas só no hover, para não competir com o resto
   do cabeçalho o tempo todo. */
.sug-janela-x:hover {
    background: rgba(244, 63, 94, .9);
}

/* ── A pergunta do motivo ───────────────────────────────────────────
   Cobre a janela inteira em vez de virar um modal da página: dentro da
   janela solta, um modal da página apareceria atrás dela, onde o
   colaborador não está olhando. */
.sug-motivos {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--app);
}
.sug-motivos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.sug-motivos-topo strong { font-size: .95rem; }
.sug-motivos-x {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
}
.sug-motivos-x:hover { background: var(--surface); color: var(--text); }

.sug-motivos-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.sug-motivos-corpo > p:first-child { margin: 0 0 4px; font-size: .84rem; }
.sug-motivos-salvar { width: 100%; justify-content: center; margin-top: 10px; }

/* Campo de CPF travado enquanto o atendimento não é registrado */
.sug-caixa .input:disabled { opacity: .55; cursor: not-allowed; }

/* ── Solta numa janela do sistema ───────────────────────────────────
   Ocupa o vidro inteiro, sem borda nem sombra: a moldura passa a ser a
   da janela do sistema operacional. */
.sug-flutuante {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--app);
}
.sug-flutuante .fx { display: none; }   /* o fundo animado não cabe aqui */

.sug-janela-solta {
    position: relative;
    /* `inset: auto` zera o `right`/`bottom` de 20px que a janela encaixada
       usa. Sem isto ela era empurrada 20px para a esquerda e para cima,
       cortando a primeira letra de cada linha e o topo do cabeçalho. */
    inset: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}
.sug-janela-solta .sug-janela-topo { cursor: default; }

/* ── Estreita ───────────────────────────────────────────────────────
   A janela solta pode ser encolhida à vontade pelo usuário, e o mesmo
   vale para telas pequenas. Abaixo deste ponto tudo diminui junto: o
   texto do botão vira só ícone, os espaços encolhem e os tipos caem um
   degrau. A media query enxerga a largura da própria janela solta, que
   é um documento com viewport próprio. */
@media (max-width: 460px) {
    .sug-janela-topo { padding: 9px 10px; gap: 8px; }
    .sug-janela-texto strong { font-size: .78rem; }
    .sug-janela-cpf { font-size: .7rem; }

    /* O rótulo sai; o ícone e o `title` bastam quando não há espaço. */
    .sug-janela-btn-rotulo { display: none; }
    .sug-janela-btn { width: 26px; height: 26px; padding: 0; justify-content: center; }
    .sug-janela-acoes { gap: 4px; }
    .sug-voltar { padding: 0 10px 0 8px; font-size: .76rem; }

    .sug-janela-corpo { padding: 0 10px 10px; }
    .sug-janela-corpo .card { padding: 10px 0; }
    .sug-janela-corpo .sug-cliente h2 { font-size: .94rem; }
    .sug-ponto-titulo h2 { font-size: .94rem; }
    .sug-ponto-total { font-size: .94rem; }
    .sug-plano-preco { font-size: 1.15rem; }
    .sug-endereco { font-size: .78rem; padding: 7px 9px; }
    .sug-contrato { padding: 10px 11px; }

    .sug-motivos-topo { padding: 11px 12px; }
    .sug-motivos-corpo { padding: 12px; }
    .motivo { padding: 12px 13px; font-size: .85rem; }
}

/* ── Navegação travada ──────────────────────────────────────────────
   Com atendimento aberto, os caminhos de saída somem. O `inert` no HTML
   é quem desliga a interação; isto só deixa isso visível. */
.atendimento-aberto .barra-nav,
.atendimento-aberto .barra-user .menu,
.atendimento-aberto .rodape,
[inert] {
    opacity: .3;
    filter: grayscale(.6);
    user-select: none;
}
.atendimento-aberto .sug-busca { opacity: .5; pointer-events: none; }

.motivos { display: grid; gap: 8px; margin: 16px 0; }
.motivo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, transform .12s;
}
.motivo:hover { border-color: var(--brand); transform: translateX(2px); }
.motivo .ic { color: var(--text-mute); flex: none; }
.motivo:hover .ic { color: var(--brand); }

/* Selo que explica a barra apagada durante um atendimento */
.barra-travada {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--attention-soft);
    color: var(--attention);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.barra-travada[hidden] { display: none; }


/* ── Detalhe de um plano, dentro da mesma janela ─────────────────────
   Trocar o conteúdo em vez de abrir outro pop-up: dois pop-ups
   empilhados no meio de uma ligação é receita de confusão. */
.sug-detalhe { padding: 14px 0 4px; }
.sug-detalhe[hidden] { display: none; }

.sug-detalhe-topo {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.sug-detalhe-topo h3 { margin: 0 0 2px; font-size: 1.15rem; }
.sug-detalhe-topo p { margin: 0; }
.sug-detalhe-topo .sug-plano-preco { font-size: 1.5rem; margin-bottom: 2px; }

.sug-detalhe-bloco { margin-top: 18px; }
.sug-detalhe-bloco h4 {
    margin: 0 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.sug-detalhe-bloco p { margin: 0; font-size: .87rem; color: var(--text-soft); }
.sug-detalhe-bloco .sug-script {
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border-left: 3px solid var(--brand);
}
.sug-detalhe-bloco .sug-script strong { font-size: .88rem; }

.sug-script-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sug-copiar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 4px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}
.sug-copiar:hover { border-color: var(--brand); color: var(--brand); }
.sug-copiado {
    border-color: var(--brand) !important;
    background: var(--brand-soft);
    color: var(--brand);
}

.sug-abrir-detalhe {
    margin-top: auto;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
}

.sug-compacto { padding: 16px 0; display: grid; gap: 12px; justify-items: start; }
.sug-compacto p { margin: 0; font-size: .86rem; }
.sug-compacto-cpf {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.sug-compacto-cpf .ic { color: var(--brand); }


/* Janela aberta enquanto a RBX ainda responde */
.sug-carregando {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 48px 16px;
    text-align: center;
}
.sug-carregando .sug-girando {
    position: static;
    margin: 0;
    width: 26px;
    height: 26px;
}
.sug-carregando p { margin: 0; font-size: .86rem; }


/* ── Aceite dentro do plano ─────────────────────────────────────────
   "Aceitou o upgrade" solto no rodapé não dizia qual dos três planos foi
   fechado. O botão passou para dentro do cartão, onde a resposta é óbvia. */
.sug-plano-acoes {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}
.sug-plano-acoes .btn { width: 100%; justify-content: center; }
.sug-plano-acoes .sug-abrir-detalhe { justify-content: space-between; }
.sug-aceitar { gap: 6px; }

/* No detalhe do plano ele fecha a tela: largura cheia e fôlego em volta. */
.sug-aceitar-detalhe {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    padding: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   O Sugestor na Inteligência
   ══════════════════════════════════════════════════════════════════════ */
.sug-inteligencia .section-title { display: flex; align-items: center; gap: 8px; }
.sug-inteligencia .section-title .ic { color: var(--brand); }
.sug-inteligencia .kpis { margin: 4px 0 0; }

.sug-motivos-titulo {
    margin: 24px 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.sug-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sug-barras li {
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr auto;
    align-items: center;
    gap: 12px;
}
.sug-barra-rotulo { font-size: .84rem; }
.sug-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
/* A barra cresce do zero até a fatia real, uma depois da outra — o olho
   acompanha a ordem e percebe qual motivo pesa mais. A largura final vem
   inline, do servidor; aqui é só o caminho até ela. */
.sug-barra-cheia {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform-origin: 0 50%;
    animation: sugBarraCrescer .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.15s + var(--i, 0) * .1s);
}
@keyframes sugBarraCrescer {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Os números do bloco sobem junto com as barras. */
.sug-inteligencia .kpi {
    animation: sugKpiEntrar .5s ease both;
    animation-delay: calc(var(--i, 0) * .07s);
}
@keyframes sugKpiEntrar {
    from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .sug-barra-cheia, .sug-inteligencia .kpi { animation: none; }
}
.sug-barra-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.sug-barras-nota { font-size: .78rem; margin: 14px 0 0; }

@media (max-width: 640px) {
    .sug-barras li { grid-template-columns: 1fr auto; }
    .sug-barras li .sug-barra { grid-column: 1 / -1; }
}

/* ── O roteiro do atendimento ───────────────────────────────────────
   A linha do tempo do que o colaborador fez com aquele cliente. */
.det-abre-roteiro {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.det-abre-roteiro:hover .det-descricao { color: var(--brand); }
.det-ver-roteiro {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--brand);
    opacity: 0;
    transition: opacity .12s;
}
.det-abre-roteiro:hover .det-ver-roteiro,
.det-abre-roteiro:focus-visible .det-ver-roteiro { opacity: 1; }

.modal-roteiro { max-width: 620px; }

.roteiro-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.roteiro-topo h3 { margin: 0 0 2px; font-size: 1rem; }
.roteiro-topo p { margin: 0; font-size: .8rem; }

.roteiro-linha { list-style: none; margin: 0; padding: 0; }
.roteiro-passo {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0 14px 4px;
}
/* O fio que liga os passos — some no último. */
.roteiro-passo::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 26px;
    bottom: -4px;
    width: 2px;
    background: var(--border);
}
.roteiro-passo:last-child::before { display: none; }

.roteiro-marca {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border-strong);
}
.roteiro-abriu .roteiro-marca { background: var(--brand); border-color: var(--brand); }
.roteiro-copiou .roteiro-marca { border-color: var(--brand-2); }
.roteiro-fechou .roteiro-marca { background: var(--attention); border-color: var(--attention); }

.roteiro-conteudo { flex: 1; min-width: 0; }
.roteiro-conteudo strong { font-size: .88rem; }
.roteiro-conteudo p { margin: 4px 0 6px; font-size: .82rem; color: var(--text-soft); }
.roteiro-texto {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border-left: 2px solid var(--brand-2);
}
.roteiro-quando {
    flex: none;
    font-size: .74rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.roteiro-vazio { padding: 24px 0; text-align: center; }
.roteiro-resumo { padding-top: 12px; border-top: 1px solid var(--border); }
.roteiro-resumo p { margin: 0; font-size: .8rem; }

/* ── Números com gradiente ──────────────────────────────────────────
   O KPI é a primeira coisa que se olha na tela; o gradiente dá a ele o
   mesmo acabamento dos botões e da marca.

   `background-clip: text` pinta o texto com o gradiente. O `color`
   transparente é o que revela a pintura — e vem depois da cor sólida do
   design system, que fica de reserva para quem não suporta a propriedade. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .kpi-valor.marca,
    .kpi-valor.violeta,
    .kpi-valor.atencao,
    .kpi-valor.ceu,
    .kpi-valor.gradiente {
        background-image: linear-gradient(135deg, var(--de), var(--para));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* Sem isto, descendentes de letra (o "%", por exemplo) herdam a
           cor transparente e somem. */
        -webkit-text-fill-color: transparent;
    }

    .kpi-valor.marca    { --de: var(--brand);      --para: var(--brand-2); }
    .kpi-valor.violeta  { --de: var(--brand-2);    --para: #c084fc; }
    .kpi-valor.atencao  { --de: var(--attention);  --para: #fbbf24; }
    .kpi-valor.ceu      { --de: #38bdf8;           --para: #22d3ee; }
    .kpi-valor.gradiente { --de: var(--brand); --para: var(--brand-2); }
}

/* Os números sem classe de cor (conversão, totais) ganham o gradiente da
   marca, para a fileira inteira ficar coerente. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .kpis-grandes .kpi-valor:not(.marca):not(.violeta):not(.atencao):not(.ceu):not(.vazio),
    .sug-inteligencia .kpi-valor:not(.marca):not(.violeta):not(.atencao):not(.ceu):not(.vazio) {
        background-image: linear-gradient(135deg, var(--text), var(--text-soft));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* Aviso de cliente já trabalhado no mês */
.sug-ja-atendido {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--attention-soft);
    border-left: 3px solid var(--attention);
    border-radius: var(--radius-sm);
    background: var(--attention-soft);
}
.sug-ja-atendido .ic { color: var(--attention); flex: none; margin-top: 2px; }
.sug-ja-atendido strong { font-size: .86rem; }
.sug-ja-atendido p { margin: 3px 0 0; font-size: .8rem; }

/* ── Leitura do gráfico sob o mouse ─────────────────────────────────
   A curva mostra a tendência; a caixa dá o número exato do dia, que é o
   que serve para analisar. */
.gr-alvo { fill: transparent; cursor: crosshair; }

.gr-agulha {
    stroke: var(--border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.gr-pontos circle {
    stroke: var(--app);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.gr-leitura {
    position: absolute;
    z-index: 4;
    min-width: 172px;
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--app);
    box-shadow: var(--shadow);
    pointer-events: none;
}
.gr-leitura strong { display: block; font-size: .8rem; margin-bottom: 7px; }
.gr-leitura ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gr-leitura li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--text-soft);
}
.gr-leitura li i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
}
.gr-leitura li span { flex: 1; }
.gr-leitura li b { color: var(--text); font-variant-numeric: tabular-nums; }
.gr-leitura-total {
    display: block;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
    font-size: .74rem;
    font-weight: 600;
    color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════
   Scripts & Planos — o que está dando resultado
   ══════════════════════════════════════════════════════════════════════ */
.desempenho-grade { gap: 18px; align-items: start; }
.desempenho-periodo { font-weight: 700; font-size: .92rem; }
.desempenho-dica {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    font-size: .82rem;
}
.desempenho-dica .ic { color: var(--brand); }
.desempenho-quem { max-height: 320px; overflow-y: auto; }
.det-opcao-ativa { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.pizza-nota { font-size: .8rem; margin: -4px 0 16px; }
.pizza-corpo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pizza-svg { width: 168px; height: 168px; flex: none; overflow: visible; }

.pizza-fatia {
    cursor: pointer;
    stroke: var(--app);
    stroke-width: 1;
    transform-origin: 50% 50%;
    transition: transform .15s ease, filter .15s ease;
    /* Cada fatia entra girando: a pizza se monta em vez de aparecer. */
    animation: pizzaEntrar .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * .07s);
}
.pizza-fatia:hover,
.pizza-fatia:focus-visible {
    transform: scale(1.045);
    filter: brightness(1.15);
}

/* Clicar não pode deixar contorno.
 *
 * A fatia é focável para funcionar no teclado, e o foco padrão do
 * navegador contorna a CAIXA do elemento, não o seu desenho — numa fatia
 * de rosca isso vira um retângulo atravessando o gráfico. `:focus-visible`
 * sozinho não resolvia: o clique dá `:focus` sem dar `:focus-visible`, e o
 * `outline: none` que estava só lá dentro nunca chegava a valer. */
.pizza-fatia:focus { outline: none; }

/* Quem navega por teclado precisa do aviso, mas no formato da fatia: o
 * contorno vai na borda do próprio caminho, e não numa moldura. */
.pizza-fatia:focus-visible {
    stroke: var(--text);
    stroke-width: 2.5;
}

.pizza-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    border-radius: 8px;
}
@keyframes pizzaEntrar {
    from { opacity: 0; transform: scale(.72) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pizza-fatia { animation: none; }
}

.pizza-furo { fill: var(--app); pointer-events: none; }
.pizza-total {
    text-anchor: middle;
    font-size: 15px;
    font-weight: 700;
    fill: var(--text);
    pointer-events: none;
}
.pizza-total-rotulo {
    text-anchor: middle;
    font-size: 5.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--text-mute);
    pointer-events: none;
}

.pizza-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; display: grid; gap: 3px; }
.pizza-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-soft);
    font: inherit;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}
.pizza-item:hover { background: var(--surface-2); color: var(--text); }
.pizza-item i { width: 9px; height: 9px; flex: none; border-radius: 3px; }
.pizza-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pizza-item b { font-variant-numeric: tabular-nums; }
.pizza-item-qtd { font-size: .74rem; color: var(--text-mute); min-width: 22px; text-align: right; }
.pizza-vazia { padding: 32px 0; }

/* ── A caixa dos argumentos ─────────────────────────────────────────
   Sem rolagem por dentro: ela cresce com o conteúdo. Quem está lendo um
   argumento não deveria ter de procurar o resto dele numa janelinha. */
.modal-scripts {
    max-width: 860px;
    max-height: none;
}
.modal-scripts .modal-body { max-height: none; overflow: visible; }

/* ── Detalhe do plano (caixa do cartão do comparativo) ──────────────────
   Cresce com o conteúdo, como a de argumentos: a lista costuma ter três
   nomes, e uma janela de altura fixa deixaria dois terços em branco. */
.modal-plano { max-width: 720px; max-height: none; }
.modal-plano .modal-body { max-height: none; overflow: visible; }

.pdet-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    font-size: .82rem;
}

.pdet-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
@media (max-width: 640px) {
    .pdet-colunas { grid-template-columns: 1fr; gap: 22px; }
}

.pdet-coluna h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-soft);
}
.pdet-coluna h4 .ic { color: var(--text-mute); }

.pdet-linha + .pdet-linha { margin-top: 14px; }
.pdet-linha-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.pdet-linha-topo strong { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.pdet-num {
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}

.pdet-barra {
    height: 5px;
    border-radius: 3px;
    background: var(--surface-inset);
    overflow: hidden;
}
.pdet-barra-cheia {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--brand);
}
/* O argumento usa o âmbar da taxa no gráfico: é a mesma leitura, o
   aproveitamento, e trocar de cor entre os dois lugares faria parecer
   grandeza diferente. */
.pdet-barra-arg { background: var(--attention); }

.pdet-meta { display: block; margin-top: 5px; font-size: .73rem; line-height: 1.4; }
.pdet-resto { margin: 14px 0 0; font-size: .74rem; }
.pdet-sem-dado { margin: 20px 0 0; font-size: .8rem; line-height: 1.5; }

.scripts-plano { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }

.scripts-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 720px) {
    .scripts-colunas { grid-template-columns: 1fr; }
}

.scripts-coluna h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.scripts-bons h4 .ic { color: var(--brand); }
.scripts-ruins h4 .ic { color: var(--critical); }

.scripts-linha {
    padding: 11px 13px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.scripts-linha-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.scripts-linha-topo strong { font-size: .86rem; }
.scripts-uso { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.scripts-barra {
    height: 5px;
    margin: 7px 0 5px;
    border-radius: 999px;
    background: var(--surface-inset);
    overflow: hidden;
}
.scripts-barra-cheia { display: block; height: 100%; border-radius: 999px; }
.scripts-barra-boa { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.scripts-barra-ma { background: linear-gradient(90deg, var(--critical), #fb7185); }
.scripts-meta { font-size: .74rem; }
.scripts-sem-dado { margin: 16px 0 0; font-size: .84rem; }

/* ── Detalhamento por argumento ─────────────────────────────────────
   O que a pizza mostra em proporção, aqui sai em número. */
.desempenho-tabela { margin-top: 18px; }
.desempenho-tabela table.ares td.num,
.desempenho-tabela table.ares th.num {
    text-align: right;
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tab-bom { color: var(--brand); font-weight: 700; }
.tab-ruim { color: var(--critical); font-weight: 700; }

.tab-aproveita {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}
.tab-aproveita .scripts-barra { flex: 1; margin: 0; }
.tab-aproveita b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* A linha apontada pela fatia da pizza — o realce apaga sozinho, para não
   deixar rastro de uma navegação já concluída. */
.tab-realce { animation: tabRealce 2.4s ease forwards; }
@keyframes tabRealce {
    0%, 60% { background: var(--brand-soft); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .tab-realce { animation: none; background: var(--brand-soft); }
}


/* ── Interruptor da barra de filtros ───────────────────────────────────
   O "Filtrar" abre e fecha a fileira de dropdowns para a direita. */
.dfil-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .16s ease, color .16s ease;
}
.dfil-rotulo:hover { border-color: var(--brand); color: var(--brand); }
.dfil-seta { transition: transform .2s ease; }
.dfil-barra-fechada .dfil-seta { transform: rotate(-90deg); }

/* Os campos abrem para o lado, e não para baixo: a barra é uma fileira, e
   crescer na vertical empurraria a tabela inteira a cada abertura. */
/* A caixa de fora anima só a ALTURA, pela grade: `1fr` aberta, `0fr`
   fechada. É o único jeito de animar até a altura natural do conteúdo sem
   chutar um `max-height`, que ou corta os campos numa tela estreita ou
   deixa a transição travada esperando um valor que nunca chega.

   A largura fica quieta durante todo o movimento. Animá-la era o que
   fazia a barra descer e voltar: com a largura crescendo do zero, os sete
   dropdowns quebravam em sete linhas, a barra esticava, e só quando a
   largura terminava eles voltavam a caber numa linha só. */
.dfil-campos-caixa {
    display: grid;
    grid-template-rows: 1fr;
    flex: 1 1 auto;
    min-width: 0;
    opacity: 1;
    transition: grid-template-rows .28s ease, opacity .18s ease;
}
.dfil-campos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* `min-height: 0` é o que deixa a linha da grade encolher abaixo do
       tamanho do conteúdo: sem isso a grade não fecha. */
    min-height: 0;
    overflow: hidden;
}
.dfil-barra-fechada .dfil-campos-caixa {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .dfil-campos-caixa { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dfil-campos, .dfil-seta { transition: none; }
}

/* ── Estimador: marcação de cobertura ──────────────────────────────────
   O botão que decide se a área entra na soma do Diagnóstico Comercial. */
.est-cobertura-nota { margin: -4px 0 14px; font-size: .8rem; line-height: 1.5; }

.est-domicilios b { font-variant-numeric: tabular-nums; }
.est-precisao { display: block; font-size: .7rem; }
.est-precisao-alta { color: var(--brand); }
.est-precisao-media { color: var(--attention); }
.est-precisao-baixa { color: var(--critical); }

.est-celula-cobertura form { margin: 0; }
.est-form-excluir { display: inline-block; margin: 0; }
/* Retângulo de canto arredondado, como o resto: nunca círculo. */
.est-excluir {
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    color: var(--text-mute);
}
.est-excluir:hover { color: var(--critical); border-color: var(--critical); }
.celula-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Retângulo de canto arredondado, nunca círculo. */
.est-marca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.est-marca:hover { border-color: var(--brand); color: var(--brand); }
.est-marca .ic { opacity: .35; }
.est-marca-ligada {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}
.est-marca-ligada .ic { opacity: 1; }

/* ── Monitor da equipe ─────────────────────────────────────────────────
   Uma linha por pessoa, com os títulos longos em sigla. */
.mon-periodos {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 16px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.mon-periodo {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.mon-periodo:hover { background: var(--surface); color: var(--text); }
.mon-periodo-ativo,
.mon-periodo-ativo:hover {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.mon-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.mon-numero {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.mon-rotulo { font-size: .72rem; font-weight: 600; color: var(--text-mute); }
.mon-numero strong {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.mon-de { font-size: .9rem; font-weight: 600; color: var(--text-mute); }

/* ── Setores e cartões ─────────────────────────────────────────────── */
.mon-setor { margin-bottom: 26px; }
.mon-setor-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
}
.mon-setor-titulo .muted { font-size: .76rem; font-weight: 500; }
.mon-setor-marca {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--brand);
}
.mon-setor-online {
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .7rem;
    font-weight: 700;
}
.mon-setor-tempo { margin-left: auto; }

.mon-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
}
.mon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 15px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mon-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.mon-card-online { border-color: var(--brand); }

.mon-card-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.mon-card-topo:hover .mon-card-nome b { color: var(--brand); }
.mon-foto {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    overflow: hidden;
}
.mon-foto img { width: 100%; height: 100%; object-fit: cover; }
.mon-card-nome { display: flex; flex-direction: column; min-width: 0; }
.mon-card-nome b {
    font-size: .86rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mon-card-nome .muted { font-size: .7rem; }

.mon-card-linhas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: .74rem;
}
.mon-card-linhas > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.mon-card-linhas dt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-mute);
}
.mon-card-linhas dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mon-ausente { color: var(--attention); }

/* A sigla: o navegador já mostra o título ao parar o mouse; o tracejado é
   o que avisa que há algo a ler ali. */
.mon-card-linhas abbr {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* O ponto de estado é sinal, e não botão: é o único círculo que fica. */
.mon-ponto {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
}
.mon-ponto-on { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.mon-card-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 11px -15px 0;
    padding: 9px 15px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-size: .72rem;
    color: var(--text-mute);
}
.mon-usos {
    padding: 1px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.mon-usos:hover, .mon-usos:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}

/* A quebra abre presa ao cartão: `pointer-events: none` impede que ela
   entre debaixo do cursor e feche a si mesma. */
.mon-quebra {
    position: absolute;
    z-index: 6;
    left: 12px; right: 12px;
    bottom: 46px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    font-size: .72rem;
    line-height: 1.4;
    color: var(--text-soft);
    text-align: left;
    pointer-events: none;
}
.mon-quebra[hidden] { display: none; }
.mon-quebra b { color: var(--text); font-variant-numeric: tabular-nums; }

.mon-nota { margin-top: 6px; line-height: 1.55; }

/* ── Mercado da região (cobertura, base, concorrência) ─────────────────
   O container do topo do Diagnóstico Comercial. */
.merc-cartao { margin-bottom: 18px; }

.merc-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.merc-numero {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.merc-numero-gap { border-color: var(--brand); background: var(--brand-soft); }

.merc-rotulo { font-size: .74rem; font-weight: 600; color: var(--text-mute); }
.merc-numero strong {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.merc-numero-gap strong { color: var(--brand); }
.merc-vazio { color: var(--text-mute); }
/* Enquanto o número não chegou do servidor, ele recua: sem spinner: a
   troca é rápida e uma engrenagem girando pesaria mais que o dado. */
.merc-carregando { color: var(--text-mute); opacity: .5; }
.merc-nota { font-size: .72rem; line-height: 1.4; }

.merc-precisao { font-weight: 700; }
/* A faixa vem junto do número, menor: o número é a medida, a palavra é só
   a tradução dele. */
.merc-precisao-faixa { font-size: .9em; font-weight: 600; opacity: .8; }
.merc-precisao-alta { color: var(--brand); }
.merc-precisao-media { color: var(--attention); }
.merc-precisao-baixa { color: var(--critical); }

.merc-analises { list-style: none; margin: 12px 0 0; padding: 0; }
.merc-analises li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 7px 0;
    font-size: .78rem;
    border-top: 1px solid var(--border);
}
.merc-analise-nome { font-weight: 600; }

.merc-topo-concorrencia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0 10px;
}
.merc-subtitulo { margin: 0; font-size: .95rem; font-weight: 700; }
.merc-add { display: inline-flex; align-items: center; gap: 6px; }

/* ── Cartões dos concorrentes ──────────────────────────────────────────
   Um por rival. O cartão responde de longe; abrir traz o plano a plano. */
.merc-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}
.merc-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.merc-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* O cartão inteiro é o botão que abre a comparação; as ações ficam por
   cima dele, fora do fluxo, para não virarem botão dentro de botão. */
.merc-card-abrir {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 14px 16px;
    padding-right: 76px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.merc-card-abrir:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.merc-card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .92rem;
}
.merc-card-resumo { font-size: .76rem; line-height: 1.45; color: var(--text-soft); }
.merc-card-pe { font-size: .7rem; }
.merc-card-erro {
    margin: 0;
    padding: 0 16px 12px;
    font-size: .72rem;
    color: var(--critical);
}

.merc-card-acoes {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
}
.merc-card-acoes form { margin: 0; }
/* Retângulo de canto arredondado, nunca círculo. */
.merc-acao {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-mute);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.merc-acao:hover { color: var(--brand); border-color: var(--brand); }
.merc-acao-perigo:hover { color: var(--critical); border-color: var(--critical); }

/* ── A caixa de comparação ─────────────────────────────────────────────
   Sem rolagem por desenho: os botões de versão trocam o painel em vez de
   empilhar todas as versões numa lista longa. */
.modal-rival { max-width: 720px; max-height: none; }
.modal-rival .modal-body { max-height: none; overflow: visible; }

.riv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.riv-tag {
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.riv-tag:hover { border-color: var(--brand); color: var(--brand); }
.riv-tag-ativa {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.riv-painel-oculto { display: none; }

.riv-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    align-items: stretch;
}
.riv-cabecalho {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
}
.riv-lado {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: .8rem;
}
.riv-lado-rival { background: var(--surface); }
.riv-preco { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Um degrau pode receber mais de um plano do concorrente. O segundo em
   diante ganha um traço em cima para não se confundir com o primeiro. */
.riv-rival + .riv-rival { margin-top: 9px; }
.riv-rival-extra { padding-top: 9px; border-top: 1px dashed var(--border-strong); }
.riv-rival-topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.riv-etiqueta {
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 700;
}
.riv-diferenca { margin-top: 3px; font-size: .72rem; font-weight: 700; }
.riv-ganhando { color: var(--brand); }
.riv-perdendo { color: var(--critical); }
.riv-igual { color: var(--text-mute); }
.riv-sem-rival { font-size: .76rem; line-height: 1.4; }

@media (max-width: 620px) {
    .riv-colunas { grid-template-columns: 1fr; }
    .riv-cabecalho:nth-of-type(2) { margin-top: 10px; }
}

/* O formulário do concorrente. */
.merc-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    font-size: .84rem;
    cursor: pointer;
}
.merc-check input { margin-top: 3px; flex-shrink: 0; }

.merc-avancado summary {
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 10px;
}
.merc-avancado summary:hover { color: var(--brand); }

.modal-rodape {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}

/* Tabela larga rola dentro do cartão em vez de esticar a página. */
.merc-tabela-wrap { overflow-x: auto; }
.merc-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.merc-tabela th, .merc-tabela td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.merc-tabela thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-mute);
    white-space: nowrap;
}
.merc-tabela tbody th { font-weight: 700; }

/* ── Anel dos argumentos ───────────────────────────────────────────────
   Substituiu o histórico mês a mês. Os rótulos vivem dentro do SVG porque
   nascem na ponta de uma linha-guia: posição que só existe nas
   coordenadas do desenho. Escalam junto com ele, o que aqui é desejável:
   o anel inteiro cresce e encolhe como uma peça só. */
.rosca-cartao { margin-top: 18px; }
/* O desenho já tem margem interna de sobra no próprio viewBox; somar
   espaço aqui só afastava o anel do título sem servir para nada. */
.rosca-corpo { margin: -10px 0 -14px; }
.rosca-svg { width: 100%; height: auto; display: block; }

.rosca-guia {
    fill: none;
    stroke-width: 1.2;
    opacity: .55;
    vector-effect: non-scaling-stroke;
    /* Aparece depois do traço da fatia que ela acompanha. */
    animation: roscaSurgir .3s ease backwards;
    animation-delay: calc(600ms + var(--i) * 70ms);
}

/* A varredura: cada fatia entra desenhando-se do início ao fim, uma depois
   da outra. `pathLength="100"` no SVG normaliza o comprimento, então o
   mesmo par de valores serve para a fatia de 40% e para a de 1%. */
.rosca-fatia {
    cursor: pointer;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: opacity .14s ease;
    animation: roscaVarrer .55s cubic-bezier(.32, .72, .36, 1) forwards;
    animation-delay: calc(var(--i) * 70ms);
}
/* O anel inteiro é focável por teclado, mas o retângulo padrão do
   navegador em cima de um arco (ou de um texto) fica um traço preto solto
   no meio do desenho. O realce aqui é o mesmo do mouse: as outras fatias
   recuam e a caixa abre. */
.rosca-fatia:focus,
.rosca-rotulo:focus,
.rosca-legenda-item:focus { outline: none; }
.rosca-fatia:focus-visible { filter: brightness(1.08); }
.rosca-legenda-item:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

@keyframes roscaVarrer {
    to { stroke-dashoffset: 0; }
}
@keyframes roscaSurgir {
    from { opacity: 0; }
    to { opacity: .55; }
}

/* Quem pede menos movimento recebe o anel já pronto, sem a varredura. */
@media (prefers-reduced-motion: reduce) {
    .rosca-fatia, .rosca-guia { animation: none; }
    .rosca-fatia { stroke-dashoffset: 0; }
    .rosca-guia { opacity: .55; }
}

.rosca-rotulo {
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .14s ease;
    animation: roscaSurgirTexto .3s ease backwards;
    animation-delay: calc(600ms + var(--i) * 70ms);
}
@keyframes roscaSurgirTexto {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rosca-rotulo { animation: none; }
}

/* Quem não está em foco recua, em vez de a fatia em foco crescer: crescer
   mexeria na geometria e faria o anel tremer sob o mouse. */
.rosca-apagada { opacity: .22; }
/* O rótulo em foco cresce um pouco em vez de mudar de cor: a cor dele já é
   a da fatia, e trocá-la desfaria justamente a ligação entre os dois. */
.rosca-realce { font-size: 14.5px; }

.rosca-total {
    fill: var(--text);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    dominant-baseline: middle;
}
.rosca-total-rotulo {
    fill: var(--text-mute);
    font-size: 13px;
    dominant-baseline: middle;
}

/* O cartão é a régua de posição da caixa flutuante. */
.rosca-cartao { position: relative; }
.rosca-fichas { display: none; }

/* A caixa que abre sobre o desenho enquanto o mouse está numa fatia.
   `pointer-events: none` é o que impede o pisca-pisca: sem isso a caixa
   entra debaixo do cursor, tira o mouse da fatia e se fecha sozinha. */
.rosca-balao {
    position: absolute;
    z-index: 5;
    max-width: 320px;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    pointer-events: none;
    animation: roscaSurgirTexto .12s ease;
}
.rosca-balao[hidden] { display: none; }

.rosca-balao-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    font-size: .86rem;
    line-height: 1.3;
}
.rosca-balao-topo i {
    width: 11px; height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}
.rosca-balao-numero {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-soft);
}
.rosca-balao-resumo {
    margin: 8px 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* A legenda embaixo do desenho. Clicável: acende a fatia correspondente,
   que é como se acha um argumento sem caçar o rótulo na volta do anel. */
.rosca-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.rosca-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.rosca-legenda-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.rosca-legenda-item i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.rosca-legenda-item b { font-variant-numeric: tabular-nums; color: var(--text); }

@media (max-width: 700px) {
    .rosca-rotulo { font-size: 15px; }
    .rosca-total { font-size: 34px; }
}

/* ── Barra de filtros do detalhamento ───────────────────────────────────
   Os filtros ganham faixa própria, separada da tabela: são controles, não
   conteúdo. */
.dfil-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dfil-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-mute);
}

.dfil-barra .det-filtro-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    font-size: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.dfil-barra .det-filtro-btn:hover { border-color: var(--brand); }

/* Filtro ligado se anuncia sozinho — sem isto, saber o que está filtrado
   exige abrir os três dropdowns um a um. */
.det-filtro-ativo {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}
.det-filtro-seta { opacity: .55; margin-left: 2px; transition: transform .18s; }
.menu:hover .det-filtro-seta,
.menu:focus-within .det-filtro-seta { transform: rotate(180deg); }

.det-opcao-check { margin-left: auto; color: var(--brand); opacity: 0; }
.det-opcao-ativa .det-opcao-check { opacity: 1; }

.det-opcoes-dica {
    margin: 2px 8px 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    font-size: .74rem;
    color: var(--text-mute);
}
.det-opcoes-marcaveis { max-height: 320px; overflow-y: auto; }

/* A marca é um quadrado, e não um círculo: quadrado diz "posso marcar
   vários", redondo diria "escolha um". */
.det-opcao-marcavel { gap: 9px; }
.det-marca {
    flex: none;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.det-marca .ic { width: 11px; height: 11px; }
.det-opcao-marcavel:hover .det-marca { border-color: var(--brand); }
.det-opcao-ativa .det-marca {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.dfil-limpar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 7px 10px;
    font-size: .8rem;
    color: var(--text-mute);
    border-radius: 9px;
    text-decoration: none;
    transition: color .15s, background .15s, opacity .15s;
}
.dfil-limpar:hover { color: var(--critical); background: var(--surface); }

/* Sem filtro não há o que limpar. O botão continua no lugar, apagado, para
   que a barra não mude de largura a cada clique. */
.dfil-limpar-off { opacity: .3; pointer-events: none; }

.dfil-girando {
    width: 15px;
    height: 15px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: detGirar .6s linear infinite;
}
@keyframes detGirar { to { transform: rotate(360deg); } }

/* A troca é rápida; um apagão leve basta para dizer que algo mudou. */
#det-resultado { transition: opacity .18s; }
.det-trocando { opacity: .45; }

/* ── Comparativo entre planos ───────────────────────────────────────────
   Um cartão por plano marcado, lado a lado. */
.comp {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.comp-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.comp-topo h3 { margin: 0; font-size: 1rem; }
.comp-topo span { font-size: .8rem; }

.comp-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
}
.comp-card {
    position: relative;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    animation: compEntrar .32s ease backwards;
    animation-delay: calc(var(--i) * 55ms);
}
.comp-card-melhor { border-color: var(--brand); background: var(--brand-soft); }

/* O cartão do comparativo entre planos é um <button>: precisa desmontar o
   visual que o navegador dá a botão e voltar a parecer cartão. */
.comp-card-abre {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease,
                box-shadow .16s ease;
}
.comp-card-abre:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.comp-card-melhor.comp-card-abre:hover { border-color: var(--brand); }
.comp-card-abre:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* A dica de que o cartão abre. Some do fluxo até o mouse chegar: numa
   grade de oito cartões, oito "Ver detalhes" sempre visíveis viram ruído. */
.comp-abrir {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--brand);
    opacity: 0;
    transition: opacity .16s ease;
}
.comp-abrir .ic { width: 13px; height: 13px; }
.comp-card-abre:hover .comp-abrir,
.comp-card-abre:focus-visible .comp-abrir { opacity: 1; }

/* Sem hover: no toque: a dica fica sempre visível: não há estado
   intermediário para revelá-la. */
@media (hover: none) {
    .comp-abrir { opacity: 1; }
}

.comp-selo {
    position: absolute;
    top: -9px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: var(--brand);
    border-radius: 20px;
}
.comp-nome { margin: 0 0 10px; font-size: .9rem; font-weight: 700; }

.comp-numero {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}
.comp-numero span { font-size: 1.1rem; }
.comp-legenda { margin: 2px 0 12px; font-size: .74rem; color: var(--text-mute); }

/* A barra mede volume; o número mede conversão. Um sem o outro engana:
   100% de dois atendimentos não é melhor que 40% de cinquenta. */
.comp-barra {
    height: 6px;
    margin-bottom: 14px;
    background: var(--surface);
    border-radius: 4px;
    overflow: hidden;
}
.comp-barra-cheia {
    display: block;
    height: 100%;
    width: var(--l);
    background: var(--brand);
    border-radius: 4px;
    animation: compEncher .5s cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(var(--i) * 55ms + 120ms);
}

.comp-numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    margin: 0 0 12px;
}
.comp-numeros div { min-width: 0; }
.comp-numeros dt { margin-bottom: 1px; font-size: .7rem; color: var(--text-mute); }
.comp-numeros dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.comp-campeao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: .8rem;
}
.comp-campeao span:first-child { font-size: .7rem; }
.comp-campeao b { line-height: 1.3; }
.comp-campeao-num { font-size: .72rem; color: var(--text-mute); }
.comp-campeao-vazio { font-style: italic; }

.comp-vazio {
    margin: 0;
    padding: 18px 0;
    font-size: .82rem;
    color: var(--text-mute);
    text-align: center;
}

@keyframes compEntrar {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes compEncher { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
    .comp-card, .comp-barra-cheia { animation: none; }
    .dfil-girando { animation-duration: 1.4s; }
}
@media (max-width: 640px) {
    .dfil-barra { gap: 6px; padding: 9px; }
    .dfil-limpar { margin-left: 0; }
}

/* ── Caixa de um argumento ──────────────────────────────────────────────
   Aberta pela fatia da pizza dos que não fecharam. Como toda caixa desta
   tela, ela cresce com o conteúdo em vez de rolar. */
.sdet-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: .82rem;
}
.sdet-marca {
    padding: 3px 9px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 20px;
}

.sdet-placar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--surface-2);
    border-radius: 10px;
}
.sdet-numero { display: flex; flex-direction: column; }
.sdet-numero b {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sdet-numero span { font-size: .72rem; color: var(--text-mute); margin-top: 3px; }

.sdet-numeros { display: flex; gap: 20px; margin: 0; }
.sdet-numeros dt { font-size: .7rem; color: var(--text-mute); margin-bottom: 2px; }
.sdet-numeros dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sdet-texto { margin-bottom: 14px; }

/* O motivo da recusa ao lado do argumento: é o par que ensina. Perder por
   preço pede outro texto que perder por falta de interesse. */
.sdet-motivos h4 {
    margin: 0 0 8px;
    font-size: .78rem;
    color: var(--text-mute);
    font-weight: 600;
}
.sdet-motivos ul { list-style: none; margin: 0; padding: 0; }
.sdet-motivos li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .85rem;
    border-bottom: 1px solid var(--border);
}
.sdet-motivos li:last-child { border-bottom: 0; }
.sdet-motivos b { font-variant-numeric: tabular-nums; }

/* ══ Venda Guiada ═══════════════════════════════════════════════════════
   A tela de entrada não aparece aqui de propósito: ela usa as classes da
   tela do Sugestor (`.sug-wrap`, `.sug-busca`, `.sug-campo`), porque é a
   mesma cena — um CPF que abre um atendimento. O que segue é só o que
   acontece dentro da janela flutuante. */
/* ── O passo dentro da janela ─────────────────────────────────────────── */
.vg-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.vg-progresso-conta {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
    white-space: nowrap;
}
.vg-progresso-barra {
    flex: 1;
    height: 4px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.vg-progresso-cheia {
    display: block;
    height: 100%;
    width: var(--l);
    background: var(--brand);
    border-radius: 3px;
    transition: width .3s ease;
}

.vg-titulo {
    margin: 0 0 6px;
    font-size: 1.02rem;
    line-height: 1.35;
}
/* Copiar a pergunta — o atendimento por mensagem é tão comum quanto o por
   voz, e reescrever a pergunta à mão a cada cliente é onde ela se degrada. */
.vg-copiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 5px 10px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-mute);
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.vg-copiar:hover { color: var(--brand); border-color: var(--brand); }
.vg-copiar.sug-copiado {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}

.vg-ajuda {
    margin: 0 0 14px;
    font-size: .8rem;
    color: var(--text-mute);
    line-height: 1.45;
}

.vg-opcoes { display: grid; gap: 8px; }
.vg-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.vg-opcao:hover { border-color: var(--brand); background: var(--surface); }
.vg-opcao:active { transform: scale(.99); }
.vg-opcao:disabled { opacity: .6; cursor: progress; }
.vg-opcao-ativa { border-color: var(--brand); background: var(--brand-soft); }

.vg-opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vg-opcao-texto b { font-size: .9rem; }
.vg-opcao-texto span { font-size: .75rem; }
.vg-opcao .ic { flex: none; opacity: .5; }

/* ── O que já foi respondido ──────────────────────────────────────────── */
.vg-resumo {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.vg-desfazer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    margin-bottom: 10px;
    font-size: .76rem;
    color: var(--text-mute);
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.vg-desfazer:hover { color: var(--brand); border-color: var(--brand); }

.vg-respostas { display: grid; gap: 7px; margin: 0; }
.vg-respostas div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .76rem;
}
.vg-respostas dt { color: var(--text-mute); min-width: 0; }
.vg-respostas dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }

/* ── A recomendação ───────────────────────────────────────────────────── */
.vg-recomendado {
    position: relative;
    padding: 18px 16px 16px;
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: 12px;
}
.vg-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    margin-bottom: 10px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--brand);
    border-radius: 20px;
}
.vg-plano-nome { margin: 0 0 2px; font-size: 1.15rem; }
.vg-plano-preco {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vg-plano-preco span { font-size: .78rem; font-weight: 600; color: var(--text-mute); }

.vg-beneficios { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.vg-beneficios li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
}
.vg-beneficios .ic { color: var(--brand); flex: none; }

.vg-aviso { margin: 0 0 12px; font-size: .8rem; }

/* O motivo da escolha vem junto porque o cliente vai perguntar "por que
   esse?" — e recomendação sem resposta a isso é palpite. */
.vg-porques {
    margin-bottom: 14px;
    padding: 11px 12px;
    background: var(--surface);
    border-radius: 9px;
}
.vg-porques h4 {
    margin: 0 0 7px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
}
.vg-porques ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.vg-porques li { font-size: .8rem; line-height: 1.45; }

/* ── Os scripts do plano indicado ──────────────────────────────────
   Um por vez, em sanfona: a janela é estreita e cinco mensagens abertas
   ao mesmo tempo viram parede de texto. O primeiro já abre, porque é o
   que o colaborador vai falar em seguida. */
.vg-scripts { margin-bottom: 14px; }
.vg-scripts-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.vg-scripts-topo h4 {
    margin: 0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
}
.vg-scripts-selo { font-size: .68rem; color: var(--text-soft); }

.vg-script {
    background: var(--surface);
    border-radius: 9px;
    margin-bottom: 6px;
    overflow: hidden;
}
.vg-script > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    cursor: pointer;
    list-style: none;
    font-size: .82rem;
    font-weight: 600;
}
.vg-script > summary::-webkit-details-marker { display: none; }
.vg-script-ordem {
    flex: none;
    width: 18px; height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
}
.vg-script-titulo { flex: 1; min-width: 0; }
.vg-script-seta {
    flex: none;
    color: var(--text-mute);
    transition: transform .16s ease;
}
.vg-script[open] .vg-script-seta { transform: rotate(180deg); }

.vg-script-corpo { padding: 0 11px 11px; }
.vg-script-etiquetas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vg-script-mensagem p {
    margin: 4px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    white-space: normal;
}

.vg-fechar { width: 100%; justify-content: center; }

.vg-alternativas { margin-top: 16px; }
.vg-alternativas h4 {
    margin: 0 0 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
}
.vg-alternativa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.vg-alternativa-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vg-alternativa-texto b { font-size: .86rem; }
.vg-alternativa-texto span { font-size: .74rem; }

.vg-vazio { padding: 18px 4px; text-align: center; }
.vg-vazio h3 { margin: 0 0 6px; font-size: 1rem; }
.vg-vazio p { font-size: .82rem; line-height: 1.5; }

.vg-nao-fechou {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: .76rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .vg-progresso-cheia { transition: none; }
}

/* ══ Registrar Venda ════════════════════════════════════════════════════
   Mesma casca das outras ferramentas (`sug-wrap`, `sug-busca`), mas o
   conteúdo é um formulário — e formulário precisa de mais largura que um
   campo de CPF sozinho. */
.rv-wrap { max-width: 720px; }

.rv-recibo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.rv-recibo span { font-size: .8rem; }

/* O tipo abre o formulário porque muda o resto dele: só o upgrade pede o
   plano anterior. */
.rv-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}
.rv-tipo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rv-tipo:hover { border-color: var(--brand); }
.rv-tipo input { margin-top: 2px; accent-color: var(--brand); flex: none; }
.rv-tipo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-tipo b { font-size: .88rem; }
.rv-tipo span span { font-size: .74rem; line-height: 1.35; }
.rv-tipo:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.rv-grade { margin-top: 18px; }
.rv-grade select.input { width: 100%; box-sizing: border-box; }
.rv-grade textarea.input { width: 100%; box-sizing: border-box; resize: vertical; }

.campo-erro {
    margin: 5px 0 0;
    font-size: .76rem;
    color: var(--critical);
}

.rv-enviar { margin-top: 18px; width: 100%; justify-content: center; }

/* ── O recibo dos últimos lançamentos ─────────────────────────────────
   Sem ele o colaborador fica na dúvida se gravou e lança de novo — que é
   como nasce a duplicata que a regra do CPF depois barra. */
.rv-recentes { margin-top: 18px; }
.rv-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.rv-lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.rv-lista li:last-child { border-bottom: 0; }

.rv-item-tipo {
    flex: none;
    padding: 3px 9px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 20px;
}
.rv-item-venda { color: var(--brand); background: var(--brand-soft); }
.rv-item-upgrade { color: var(--ok, var(--brand)); background: var(--surface-2); }

.rv-item-texto { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rv-item-texto b { font-size: .86rem; }
.rv-item-texto span { font-size: .74rem; }

.rv-apagar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--text-mute);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.rv-apagar:hover {
    color: var(--critical);
    border-color: var(--critical);
    background: var(--critical-soft);
}

@media (max-width: 640px) {
    .rv-tipos { grid-template-columns: 1fr; }
    .rv-lista li { flex-wrap: wrap; }
}

/* ══ Reverter Cancelamento ══════════════════════════════════════════════
   A entrada usa a casca do Sugestor. O que segue é o miolo da janela e a
   aba de edição dos argumentos. */
.ret-wrap { max-width: 760px; }
.ret-sem-script { margin-top: 18px; }

/* ── Dentro da janela ────────────────────────────────────────────────── */
.ret-cliente {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.ret-cliente-nome {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;
    font-size: .95rem;
}
.ret-cliente-plano { margin: 0; font-size: .8rem; }

.ret-bloco { margin-bottom: 18px; }
.ret-titulo {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
}
.ret-ajuda { margin: 0 0 10px; font-size: .78rem; line-height: 1.45; }
.ret-vazio { margin: 0; font-size: .8rem; }
.ret-aviso { margin: 0; font-size: .8rem; line-height: 1.45; }

/* O histórico vem antes do motivo porque é ele que ajuda a achar o motivo
   de verdade — três chamados de sinal desmentem "estou saindo por preço". */
.ret-chamados { list-style: none; margin: 0; padding: 0; }
.ret-chamados li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.ret-chamados li:last-child { border-bottom: 0; }
.ret-chamado-data {
    flex: none;
    font-size: .72rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.ret-chamado-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ret-chamado-texto b { font-size: .84rem; }
.ret-chamado-texto span { font-size: .76rem; line-height: 1.4; }
.ret-chamado-solucao { color: var(--text-soft); font-style: italic; }
.ret-chamado-aberto {
    flex: none;
    padding: 2px 8px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--critical);
    background: var(--critical-soft);
    border-radius: 20px;
}

.ret-motivos { display: grid; gap: 7px; }
.ret-motivo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    text-align: left;
    font-size: .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ret-motivo:hover { border-color: var(--brand); background: var(--surface); }
.ret-motivo:disabled { opacity: .6; cursor: progress; }
.ret-motivo .ic { flex: none; opacity: .5; }
.ret-motivo-ativo {
    border-color: var(--brand);
    background: var(--brand-soft);
    font-weight: 600;
}

.ret-script {
    padding: 12px 13px;
    margin-bottom: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ret-script-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.ret-script-topo b { font-size: .86rem; }
.ret-copiar {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-mute);
    background: none;
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.ret-copiar:hover { color: var(--brand); border-color: var(--brand); }
.ret-copiar.sug-copiado {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* O desfecho bom fica no fim do painel, depois dos argumentos: ele acontece
   depois de argumentar. Os outros dois saem pelo X da janela. */
.ret-fechar {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.ret-desconto { margin-bottom: 12px; }
.ret-desconto .input { width: 140px; }
.ret-manteve { width: 100%; justify-content: center; }
.ret-nao-ficou {
    margin: 11px 0 0;
    font-size: .76rem;
    text-align: center;
}

/* ── A aba de argumentos (só gestão) ──────────────────────────────────── */
.ret-scripts { margin-top: 18px; }
.ret-scripts-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ret-grupo {
    border: 1px solid var(--border);
    border-radius: 11px;
    margin-bottom: 8px;
    overflow: hidden;
}
.ret-grupo summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    cursor: pointer;
    font-size: .88rem;
    background: var(--surface-2);
    list-style: none;
}
.ret-grupo summary::-webkit-details-marker { display: none; }
.ret-seta { transition: transform .18s; opacity: .55; }
.ret-grupo[open] .ret-seta { transform: rotate(180deg); }
.ret-conta {
    margin-left: auto;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-mute);
    background: var(--surface);
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}

.ret-lista { list-style: none; margin: 0; padding: 4px 13px 10px; }
.ret-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.ret-lista li:last-child { border-bottom: 0; }
.ret-inativo { opacity: .55; }

.ret-item-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ret-item-texto b { font-size: .85rem; }
.ret-item-texto span { font-size: .75rem; line-height: 1.4; }

.ret-selo-off {
    flex: none;
    padding: 2px 8px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--surface-2);
    border-radius: 20px;
}

.ret-editar,
.ret-apagar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--text-mute);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.ret-editar:hover { color: var(--brand); border-color: var(--brand); }
.ret-apagar:hover {
    color: var(--critical);
    border-color: var(--critical);
    background: var(--critical-soft);
}

.ret-grupo .ret-vazio { padding: 4px 13px 12px; }

@media (max-width: 640px) {
    .ret-chamados li { flex-wrap: wrap; }
    .ret-scripts-topo { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════
   Campos: select nativo, seletor com busca e envio de arquivo
   ══════════════════════════════════════════════════════════════════ */

/* ── Select nativo ────────────────────────────────────────────────
   A seta do navegador cola na borda e muda de forma em cada sistema.
   Trocamos por uma nossa, desenhada no proprio fundo do campo, com
   folga ate a borda e espaco reservado no padding para o texto nunca
   passar por baixo dela. */
.field select,
select.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361637a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23969ab4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .field select,
    :root:not([data-theme="light"]) select.input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23969ab4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}
.field select::-ms-expand, select.input::-ms-expand { display: none; }

/* ── Seletor com busca (combo) ─────────────────────────────────────
   Monta em cima de um <select> comum: sem JavaScript o select nativo
   continua na tela e o POST e o mesmo. O JS so troca a aparencia e
   deixa procurar pelo nome por extenso ("Rio de Janeiro" -> RJ). */
.combo { position: relative; }
.combo-campo { position: relative; display: block; }

/* Dois níveis de classe de propósito: precisa ganhar de `.field input`,
   que senão devolve o padding curto e a seta volta a encostar no texto. */
.combo .combo-entrada { padding-right: 40px; cursor: text; }
.combo .combo-entrada::placeholder { color: var(--text-mute); }

.combo-seta {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    color: var(--text-soft);
    pointer-events: none;
    transition: transform .2s ease, color .2s ease;
}
.combo.aberto .combo-seta { transform: rotate(180deg); color: var(--brand); }

.combo-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 244px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.combo.aberto .combo-lista { opacity: 1; visibility: visible; transform: none; }

.combo-lista::-webkit-scrollbar { width: 0; }
.combo-lista { scrollbar-width: none; }

.combo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--text);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.combo-item:hover,
.combo-item.marcado { background: var(--brand-soft); color: var(--brand); }

/* A sigla e o dado real que vai no formulario, entao ela lidera visualmente. */
.combo-sigla {
    flex: none;
    min-width: 30px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}
.combo-nome { color: var(--text-soft); }
.combo-item:hover .combo-nome,
.combo-item.marcado .combo-nome { color: inherit; }
.combo-item[aria-selected="true"] .combo-sigla { color: var(--brand); }

.combo-vazio { padding: 12px; font-size: .82rem; color: var(--text-soft); }

/* ── Envio de arquivo ──────────────────────────────────────────────
   O input nativo mostra "Nenhum arquivo escolhido" com um botao cinza
   que nao aceita estilo. Ele fica escondido (mas focavel pelo teclado)
   e a area abaixo faz o papel dele, aceitando clique e arrastar. */
.arquivo-campo { position: relative; }

.arquivo-campo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.arquivo-alvo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.arquivo-alvo:hover { border-color: var(--brand); background: var(--brand-soft); }
.arquivo-campo input[type="file"]:focus-visible + .arquivo-alvo {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.arquivo-campo.arrastando .arquivo-alvo {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.arquivo-texto { min-width: 0; }
.arquivo-titulo {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    /* Nome de arquivo longo nao pode empurrar o card: corta com reticencias. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arquivo-dica { display: block; font-size: .76rem; color: var(--text-soft); margin-top: 2px; }
.arquivo-campo.tem-arquivo .arquivo-alvo { border-style: solid; border-color: var(--brand); }
.arquivo-campo.tem-arquivo .arquivo-dica { color: var(--brand); }

/* ── Cartoes de numero (stat) ──────────────────────────────────────
   Rotulo em cima, numero embaixo. O brilho de fundo respira devagar,
   atras do texto (z-index), entao nunca atrapalha a leitura. */
.stat > * { position: relative; z-index: 1; }
.stat .label, .stat .value { display: block; }
.stat .label { line-height: 1.2; }
.stat .value { margin-top: 2px; }

.stat::after {
    z-index: 0;
    animation: statBrilho 7s ease-in-out infinite;
}
/* Segundo foco de luz, em contratempo, para o fundo nunca parecer parado. */
.stat::before {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -60px;
    width: 150px;
    height: 150px;
    z-index: 0;
    background: radial-gradient(circle, var(--stat-glow, rgba(139, 92, 246, .38)), transparent 70%);
    opacity: .5;
    animation: statBrilho 9s ease-in-out infinite reverse;
}

@keyframes statBrilho {
    0%, 100% { transform: scale(1); opacity: .85; }
    50%      { transform: scale(1.35); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .stat::after, .stat::before { animation: none; }
}

/* ── Ações do cabeçalho de cada setor ──────────────────────────────
   Discretas: só ganham cor quando o mouse chega, para não competir com
   o nome do setor nem poluir a tela cheia de blocos. */
.setor-acoes { display: flex; align-items: center; gap: 4px; }
.setor-acoes form { margin: 0; }
.setor-acoes .icon-btn { color: var(--text-mute); }
.setor-acoes .icon-btn:hover { color: var(--brand); }
.setor-acoes .setor-apagar:hover { color: var(--critical); }

/* A foto do colaborador no lugar da inicial, na barra do topo. O gradiente
   continua atrás como fundo de quem ainda não subiu foto. */
.barra-avatar { overflow: hidden; }
.barra-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mural de comunicados ──────────────────────────────────────────
   Lista em coluna: comunicado é texto para ler, não card de vitrine. */
.mural { display: flex; flex-direction: column; gap: 14px; }
.mural-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mural-topo h2 { font-size: 1.02rem; margin: 0; }
.mural-topo .spacer { flex: 1; }
.mural-texto { margin: 10px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }
.mural-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: .78rem;
    color: var(--text-mute);
    flex-wrap: wrap;
}
/* O fixado ganha a listra da marca à esquerda, sem mudar de tamanho. */
.mural-fixado { border-left: 3px solid var(--brand); }

/* Lista compacta dentro de um widget do painel. */
.widget-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.widget-lista a {
    display: block;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    transition: background .12s ease;
}
.widget-lista a:hover { background: var(--surface-2); }
.widget-lista-titulo {
    display: block;
    font-size: .84rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-lista-titulo .dot { background: var(--brand); margin-right: 6px; }
.widget-lista-meta { display: block; font-size: .74rem; color: var(--text-mute); margin-top: 2px; }

/* Nota de origem no card do comparativo: diz quanto do número veio de venda
   lançada à mão, que entra sempre como fechada e por isso puxa a conversão
   para cima. Sem isso o aproveitamento seria lido como mérito do argumento. */
.comp-origem { font-size: .74rem; line-height: 1.4; margin: 10px 0 0; }


/* Lista longa (equipe inteira) precisa rolar dentro do menu. */
.det-opcoes-altas { max-height: 340px; overflow-y: auto; }
.det-opcoes-altas::-webkit-scrollbar { width: 0; }
.det-opcoes-altas { scrollbar-width: none; }

/* Cabeçalho de setor dentro do seletor de pessoas. */
.det-grupo-titulo {
    margin: 10px 0 4px;
    padding: 0 11px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.det-grupo-titulo:first-of-type { margin-top: 4px; }

/* Segunda linha do card de comparativo: setor da pessoa, mês por extenso. */
.comp-detalhe { font-size: .74rem; margin: -6px 0 10px; }
.comp-vazio { font-size: .8rem; margin: 10px 0 0; }

/* ── Abas da área de equipe ────────────────────────────────────────
   O alternador do DS é feito de <button>; aqui são links, porque cada aba
   é uma página própria e precisa funcionar sem JavaScript. */
.equipe-abas .alternador-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.equipe-abas .alternador-btn.ativo {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* ── Painel de uso da equipe ───────────────────────────────────────── */
.uso-linha {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) repeat(3, minmax(0, .8fr));
    gap: 14px;
    align-items: center;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border);
}
.uso-linha:last-child { border-bottom: none; }
@media (max-width: 900px) {
    .uso-linha { grid-template-columns: 1fr 1fr; }
}

.uso-quem { display: flex; align-items: center; gap: 11px; min-width: 0; }
.uso-nome { font-size: .88rem; font-weight: 600; }
.uso-setor { font-size: .74rem; color: var(--text-mute); }

/* Bolinha de presença: verde online, âmbar ausente, apagado offline. */
.uso-presenca { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-mute); }
.uso-presenca-online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.uso-presenca-ausente { background: var(--attention); }

.uso-barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.uso-barra-cheia {
    display: block; height: 100%; width: var(--l, 0%);
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.uso-tempo { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.uso-num { text-align: center; }
.uso-num b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.uso-num span { font-size: .7rem; color: var(--text-mute); }

.uso-cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) repeat(3, minmax(0, .8fr));
    gap: 14px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-strong);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.uso-cabecalho span:not(:first-child):not(:nth-child(2)) { text-align: center; }
@media (max-width: 900px) { .uso-cabecalho { display: none; } }

/* Quem não abriu nada no período: é o primeiro nome que a gestão procura. */
.uso-linha-parada .uso-nome { color: var(--text-mute); }
.uso-selo-parado {
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--attention-soft);
    color: var(--attention);
    font-weight: 700;
}

/* ── Barra da área de equipe: abas acima, ações abaixo ──────────────── */
.equipe-barra {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.equipe-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.equipe-abas { align-self: flex-start; }

/* A grade da tabela de uso acompanha quantas ferramentas o tenant tem. */
.uso-linha, .uso-cabecalho {
    grid-template-columns:
        minmax(0, 1.6fr) minmax(0, 1fr)
        repeat(var(--cols, 3), minmax(0, .8fr));
}
@media (max-width: 900px) {
    .uso-linha, .uso-cabecalho { grid-template-columns: 1fr 1fr; }
}
.uso-quem .uso-nome { color: var(--text); text-decoration: none; display: block; }
.uso-quem .uso-nome:hover { color: var(--brand); }
.uso-quem a.barra-avatar { text-decoration: none; }

/* ── Sala de Aula no perfil ────────────────────────────────────────── */
.perfil-aulas { grid-column: 1 / -1; }

.aulas-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.aulas-numero { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aulas-numero span { font-size: 1rem; color: var(--text-mute); font-weight: 500; }
.aulas-info { flex: 1; min-width: 0; }

.aulas-lista { list-style: none; margin: 0; padding: 0; }
.aulas-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
}
.aulas-item:last-child { border-bottom: none; }
.aulas-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aulas-estado { font-size: .76rem; color: var(--text-mute); flex: none; }

.aulas-marca {
    display: grid; place-items: center;
    width: 20px; height: 20px; flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-mute);
}
.aulas-marca-ok { background: var(--brand-soft); color: var(--brand); }

/* ── Campanhas (Planejamento Comercial) ───────────────────────────── */
.camp-lista { display: flex; flex-direction: column; gap: 16px; }
.camp-bloco { margin: 26px 0; }

.camp-topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.camp-topo .spacer { flex: 1; }
.camp-titulo { margin: 0; font-size: 1.02rem; }
.camp-meta { font-size: .78rem; margin: 3px 0 0; }
.camp-descricao { font-size: .85rem; color: var(--text-soft); margin: 14px 0 0; line-height: 1.55; }

.camp-secao {
    margin: 20px 0 4px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.camp-nota { margin: 0 0 10px; }

/* Campanha por ranking: pódio e tabela de colocação. */
.rk-premios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.rk-premio {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 13px 15px;
}
.rk-premio b { display: block; margin-top: 5px; font-size: .92rem; font-weight: 600; }
.rk-lugar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-mute);
    white-space: nowrap;
}
.rk-lugar .ic { width: 18px; height: 18px; }
.rk-lugar.lugar-1 { color: #b08214; }
.rk-lugar.lugar-2 { color: #7c8794; }
.rk-lugar.lugar-3 { color: #a3663a; }

.rk-tabela { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .87rem; }
.rk-tabela th {
    text-align: left;
    padding: 9px 10px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
}
.rk-tabela td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.rk-tabela tbody tr:last-child td { border-bottom: none; }
.rk-tabela .rk-num { text-align: right; font-variant-numeric: tabular-nums; }
.rk-tabela .rk-col-pos { width: 78px; }
.rk-podio td { background: var(--surface-2); }

/* Os prêmios lado a lado: individual, coletivo e o total possível. */
.camp-premios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.camp-premio {
    padding: 13px 15px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.camp-premio b { display: block; font-size: 1.15rem; margin: 3px 0; font-variant-numeric: tabular-nums; }
.camp-premio-rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 700; }
.camp-premio-valor { font-size: .76rem; color: var(--text-soft); }
.camp-premio .uso-barra { margin-top: 9px; }

/* Alvo atingido ganha a cor da marca: é o sinal que a equipe procura. */
.camp-premio-batido { border-color: var(--brand); background: var(--brand-soft); }
.camp-premio-batido b, .camp-premio-batido .camp-premio-rotulo { color: var(--brand); }
.camp-premio-total { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }
.camp-premio-total b { color: #fff; font-size: 1.3rem; }
.camp-premio-total .camp-premio-rotulo,
.camp-premio-total .camp-premio-valor { color: rgba(255, 255, 255, .82); }

/* Placar pessoa a pessoa dentro do cartão. */
.camp-pessoas { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 8px; }
.camp-pessoa {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: .84rem;
}
.camp-pessoa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-pessoa-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.camp-pessoa-falta { font-size: .75rem; }
.camp-pessoa-ok .camp-pessoa-nome { font-weight: 600; }
@media (max-width: 700px) {
    .camp-pessoa { grid-template-columns: 1fr auto; }
    .camp-pessoa .uso-barra { grid-column: 1 / -1; }
}

/* O meu progresso, na visão individual. */
.camp-eu { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.camp-eu-num { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.camp-eu-num span { font-size: 1rem; color: var(--text-mute); font-weight: 500; }
.camp-eu-barra { flex: 1; min-width: 0; }

.camp-ficha { align-items: start; }
.widget-barra { display: block; margin-top: 6px; }

/* ── Contexto extra na leitura do gráfico ──────────────────────────── */
.gr-var {
    margin-left: 6px;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gr-var-sobe { color: #22c55e; }
.gr-var-cai { color: #f87171; }

/* Bloco de apoio: separado das séries por uma linha, porque responde outra
   pergunta. Sem a separação, vira uma lista só e o que é desenhado se
   confunde com o que é contexto. */
.gr-extras {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.gr-extras li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: .74rem;
    opacity: .82;
}
.gr-extras b { font-variant-numeric: tabular-nums; }

/* Faixa do gráfico que leva a algum lugar avisa o cursor. */
.gr-alvo-clicavel { cursor: pointer; }

/* Dentro do painel do hambúrguer os dropdowns ocupam a largura toda, e a
   lista abre para a esquerda para não sair da tela pela borda direita. */
.fil-painel .fil-campo { min-width: 0; width: 100%; }
.fil-painel .fil-lista { right: 0; left: auto; min-width: 100%; }

/* Tabela do relatório: números alinhados à direita e barra de volume sob
   o nome, para o ranking se ler sem comparar dígito a dígito. */
.rel-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Placar por vendedor compacto: com dezesseis nomes, a tabela larga
   dominava a tela e empurrava os gráficos para longe. Altura limitada com
   rolagem própria mantém o cartão do tamanho dos vizinhos. */
.vend-tabela { max-height: 320px; overflow-y: auto; }
.vend-tabela::-webkit-scrollbar { width: 5px; }
.vend-tabela::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.vend-tabela .rel-tabela { font-size: .78rem; }
.vend-tabela th { padding: 5px 7px; font-size: .62rem; position: sticky; top: 0;
    background: var(--surface); z-index: 1; }
.vend-tabela td { padding: 6px 7px; }
.vend-nome { font-weight: 600; max-width: 118px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.vend-tabela .rel-selo { padding: 1px 6px; font-size: .66rem; }


/* ── Dropdown de marcação múltipla ──────────────────────────────────
   Vive aqui, e não no <style> do relatório, porque a Sala de Aula também
   usa: preso lá, o mesmo componente aparecia sem estilo fora do BI. */
.fil-menu {
    position:relative
}

.fil-menu>summary {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    
  border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    
  background:var(--surface);
    cursor:pointer;
    font-size:.85rem;
    list-style:none
}

.fil-menu>summary::-webkit-details-marker {
    display:none
}

.fil-menu[open]>summary {
    border-color:var(--brand)
}

.fil-resumo {
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.fil-menu>summary .ic {
    color:var(--text-mute);
    transition:transform .18s
}

.fil-menu[open]>summary .ic {
    transform:rotate(180deg)
}


/* A lista flutua: dentro do fluxo ela empurrava a faixa de números para
   baixo toda vez que alguém abria um filtro. */
.fil-lista {
    position:absolute;
    z-index:60;
    top:calc(100% + 6px);
    left:0;
    min-width:240px;
    
  max-height:300px;
    overflow-y:auto;
    padding:7px;
    border-radius:var(--radius-md);
    
  background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow)
}

.fil-item {
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 9px;
    border-radius:7px;
    
  font-size:.84rem;
    cursor:pointer
}

.fil-item:hover {
    background:var(--surface-2)
}

.fil-item input {
    width:15px;
    height:15px;
    accent-color:var(--brand);
    cursor:pointer
}

.fil-separador {
    height:1px;
    background:var(--border);
    margin:5px 0
}

.fil-aplicar {
    align-self:flex-end
}


/* O marcador nativo do <details> (a setinha) aparecia junto do nosso
   ícone, e em alguns navegadores fora da caixa. */
.fil-menu > summary { list-style: none; }
.fil-menu > summary::marker,
.fil-menu > summary::-webkit-details-marker { display: none; content: ""; }

/* Na barra lateral da Sala de Aula o dropdown ocupa a largura toda. */
.filtro-setor { width: 100%; }
.filtro-setor > summary { width: 100%; }
.filtro-setor .fil-lista { left: 0; right: 0; min-width: 0; }
.filtro-setor .fil-item { white-space: nowrap; }

/* Ações do módulo: só no modo Gerenciar, sobre o card. */
.mod-card-wrap { position: relative; }
.mod-card-acoes { display: none; }
body.edit-mode .mod-card-acoes {
    display: flex; gap: 4px; position: absolute; top: 8px; right: 8px; z-index: 3;
    padding: 3px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.mod-card-acoes form { margin: 0; }
.mod-card-acoes .mod-apagar:hover { color: var(--critical); }

/* Editar aula dentro do módulo: some da vista até o modo Gerenciar ligar. */
.aula-editar { display: none; width: 30px; height: 30px; margin-left: 8px; }
body.edit-mode .aula-editar { display: inline-grid; }

/* ── Gestão dentro do módulo ────────────────────────────────────────
   Os controles só aparecem com o Gerenciar ligado. */
.mod-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mod-topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mod-gestao { display: none; gap: 8px; align-items: center; }
.mod-gestao form { margin: 0; }
body.edit-mode .mod-gestao { display: flex; }
.mod-apagar:hover, .aula-apagar:hover { color: var(--critical); }

.aula-gestao { display: none; gap: 4px; align-items: center; margin-left: 10px; }
.aula-gestao form { margin: 0; }
.aula-gestao .icon-btn { width: 32px; height: 32px; }
body.edit-mode .aula-gestao { display: flex; }

/* ── Editor do módulo, aberto na página ─────────────────────────────
   Ao contrário do modal da entrada, aqui há largura: a descrição e os
   setores ocupam a linha inteira e os campos curtos dividem o espaço. */
.mod-editor {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.mod-editor-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
}
.mod-editor-topo h2 { margin: 0; font-size: 1.05rem; }
.mod-editor-grade {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mod-editor-grade .campo-largo { grid-column: 1 / -1; }
.mod-editor-pe {
    display: flex; justify-content: flex-end;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
    .mod-editor-grade { grid-template-columns: 1fr; }
}

/* ── Retenção: régua de contrapropostas ─────────────────────────────────
   A escolha do que oferecer virou lista de opções no lugar do campo livre
   de desconto. Cada linha carrega a leitura de margem daquele contrato, e
   a que deixa o plano no prejuízo se anuncia antes do clique. */
.ret-ofertas { width: 100%; }
.ret-oferta-lista { list-style: none; margin: 8px 0 0; padding: 0;
                    display: flex; flex-direction: column; gap: 6px; }
.ret-oferta { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
              padding: 10px 12px; border: 1px solid var(--border);
              border-radius: var(--radius-md); background: var(--surface);
              transition: border-color .18s, background .18s; }
.ret-oferta:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ret-oferta input { margin-top: 3px; flex: 0 0 auto; }
.ret-oferta span { display: flex; flex-direction: column; gap: 2px; }
.ret-oferta b { font-size: .9rem; }
.ret-oferta small { font-size: .76rem; line-height: 1.35; }
.ret-oferta-alerta { border-color: var(--critical); }
.ret-margem-ok { color: var(--brand); font-weight: 600; }
.ret-margem-ruim { color: var(--critical); font-weight: 600; }

.ret-lista { list-style: none; margin: 12px 0 0; padding: 0;
             display: flex; flex-direction: column; gap: 8px; }
.ret-lista li { display: flex; align-items: center; gap: 10px;
                padding: 10px 12px; border: 1px solid var(--border);
                border-radius: var(--radius-md); }
.ret-lista li > a { flex: 1; display: flex; flex-direction: column; gap: 2px;
                    text-decoration: none; color: inherit; }
.ret-lista li > a span { font-size: .78rem; }
.ret-lista form { display: inline; }

.ret-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ret-tabela th { text-align: left; padding: 9px 10px; font-size: .72rem;
                 text-transform: uppercase; letter-spacing: .05em;
                 color: var(--text-mute); border-bottom: 1px solid var(--border); }
.ret-tabela td { padding: 10px; border-bottom: 1px solid var(--border); }
.ret-tabela tbody tr:last-child td { border-bottom: none; }
.ret-linha-alerta td { background: color-mix(in srgb, var(--critical) 8%, transparent); }

/* ── Retenção: o roteiro dentro da janela ───────────────────────────────
   A pergunta da vez fica em destaque e as respostas possíveis viram botões
   largos: quem está com o cliente na linha não procura, clica. */
.ret-fala { border: 1px solid var(--brand); border-radius: var(--radius-md);
            padding: 12px 14px; margin-bottom: 12px;
            background: color-mix(in srgb, var(--brand) 6%, transparent); }
.ret-pergunta { border: 1px solid var(--border); border-radius: var(--radius-md);
                padding: 14px; margin-bottom: 14px; background: var(--surface); }
.ret-etapa { display: inline-block; font-size: .66rem; text-transform: uppercase;
             letter-spacing: .08em; color: var(--brand); font-weight: 700;
             margin-bottom: 6px; }
.ret-pergunta-texto { font-size: 1rem; line-height: 1.45; margin: 0; flex: 1; }
.ret-instrucao { font-size: .78rem; color: var(--text-mute); margin: 8px 0 0;
                 padding-left: 10px; border-left: 2px solid var(--border-strong); }
.ret-etiqueta-resposta, .ret-etiqueta-dicas {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-mute); margin: 14px 0 8px; }
.ret-opcoes { display: flex; flex-direction: column; gap: 6px; }
.ret-opcao { text-align: left; font-family: inherit; font-size: .88rem;
             color: var(--text); background: var(--surface-2);
             border: 1px solid var(--border); border-radius: var(--radius-sm);
             padding: 11px 13px; cursor: pointer;
             transition: border-color .18s, background .18s, transform .18s; }
.ret-opcao:hover { border-color: var(--brand); background: var(--surface);
                   transform: translateX(2px); }
.ret-opcao:disabled { opacity: .5; cursor: default; }

/* ── Início: clima e notícias do Rio ────────────────────────────────────
   Dois serviços de fora, dois cards de leitura rápida. Nada aqui é clicável
   além do link da notícia: é informação de contexto para quem atende, não
   mais uma ferramenta para operar. */
.clima { display: flex; flex-direction: column; gap: 12px; }
.clima-agora { display: flex; align-items: center; gap: 14px; }
.clima-temp { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em;
              line-height: 1; color: var(--brand); }
.clima-texto { display: flex; flex-direction: column; gap: 2px; }
.clima-texto b { font-size: .95rem; }
.clima-texto span { font-size: .76rem; color: var(--text-mute); }
.clima-dados { display: flex; gap: 16px; font-size: .8rem; color: var(--text-mute); }
.clima-dados b { color: var(--text); font-weight: 650; }
.clima-dias { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.clima-dia { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.clima-dia-nome { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--text-mute); }
.clima-dia-texto { font-size: .74rem; color: var(--text-mute); }
.clima-dia-temp { font-size: .82rem; font-weight: 600; }

.noticias { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 2px; }
.noticias li { border-bottom: 1px solid var(--border); }
.noticias li:last-child { border-bottom: none; }
.noticias a { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px;
              text-decoration: none; color: inherit; }
.noticias a:hover .noticia-titulo { color: var(--brand); }
.noticia-titulo { font-size: .86rem; line-height: 1.35; }
.noticia-quando { font-size: .7rem; color: var(--text-mute); }
.noticias-fonte { font-size: .7rem; color: var(--text-mute); margin-top: 8px; }