/* ── 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; }
.barra-marca .logo-full { height: 42px; width: auto; max-width: none; }

.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; }

.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; }
}

/* ══════════════════════════════════════════════════════════════════════
   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;
    display: flex;
    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; } }

.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); }

/* 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); }

.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); }
.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); }

/* ══════════════════════════════════════════════════════════════════════
   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; }

.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); }
}


/* ── Resultado mês a mês ────────────────────────────────────────────────
   Barras empilhadas: a coluna é o volume, a divisão é o aproveitamento. */
.hist-cartao { margin-top: 18px; }

.hist-grafico {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 220px;
    padding-top: 22px;
    border-bottom: 1px solid var(--border);
}
.hist-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 6px;
}

/* A pilha ocupa toda a altura útil; as barras crescem a partir da base. */
.hist-pilha {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 58px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}
.hist-barra {
    display: block;
    height: var(--h);
    min-height: 0;
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: histSubir .5s cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(var(--i) * 70ms);
}
.hist-barra-boa { background: var(--brand); border-radius: 0 0 4px 4px; }
.hist-barra-ma { background: var(--critical); opacity: .75; }

/* Uma barra vazia não é uma barra: sem isto, o `border-radius` deixaria um
   risco de cor no mês em que ninguém atendeu. */
.hist-barra[style*="--h: 0%"] { display: none; }

.hist-valor {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hist-rotulo {
    font-size: .74rem;
    color: var(--text-mute);
    text-transform: capitalize;
    white-space: nowrap;
}
.hist-aprov {
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.hist-col-atual .hist-rotulo { color: var(--text); font-weight: 700; }

.hist-legenda {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: .82rem;
    color: var(--text-mute);
}
.hist-legenda li { display: flex; align-items: center; gap: 7px; }
.hist-legenda i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}
.hist-cor-boa { background: var(--brand); }
.hist-cor-ma { background: var(--critical); opacity: .75; }

@keyframes histSubir {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hist-barra { animation: none; }
}
@media (max-width: 640px) {
    .hist-grafico { height: 170px; gap: 5px; }
    .hist-aprov { display: none; }
}

/* ── 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); }

.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; }

.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; }
}