/* Visual Reizo (claro, conceito Ponto Zero) — vale em todas as telas.

   Carregado DEPOIS de `reizo.css` e só vale dentro de `body.visual-novo`.

   Estratégia: o `reizo.css` inteiro já consome tokens (`--sup-1`,
   `--texto`, `--marca`...). Redefinir esses tokens aqui repinta o sistema
   de uma vez; as regras abaixo dos tokens cuidam só do que a troca de cor
   não resolve — raio, pílula, sombra.

   Fontes: Urbanist no texto, nos títulos e no logotipo; Space Grotesk nos
   números pequenos. Hospedadas aqui (static/fontes), sem servidor externo. */

@font-face { font-family: "Urbanist"; font-weight: 400; font-display: swap; src: url("fontes/Urbanist-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 500; font-display: swap; src: url("fontes/Urbanist-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 600; font-display: swap; src: url("fontes/Urbanist-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 700; font-display: swap; src: url("fontes/Urbanist-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("fontes/SpaceGrotesk-500-latin.woff2") format("woff2"); }

body.visual-novo {
    /* Paleta da marca */
    --tinta: #0B1020;
    --tinta-h: #1B2338;
    --acento: #0E6B73;
    --acento-h: #0A5559;
    --acento-texto: #0E6B73;   /* 6:1 sobre branco: passa como texto */
    --acento-bg: #DDF0F1;
    --acento-claro: #3FB3B8;   /* o acento sobre a Tinta (login, fundos escuros) */
    --papel: #F4F5F7;
    --nevoa: #A7B0C0;          /* texto de apoio sobre a Tinta */

    /* Os tokens antigos, apontados para a paleta nova */
    --fundo: var(--papel);
    --sup-1: #FFFFFF;
    --sup-2: #EDEEF1;
    --sup-3: #E3E5EA;
    --borda: #DDE0E6;
    --borda-2: #E9EBEF;
    --texto: var(--tinta);
    --texto-2: #5B6475;
    --texto-3: #6B7384;
    --marca: var(--acento-texto);
    --marca-h: var(--tinta);
    --marca-bg: var(--acento-bg);
    --aviso: #9A6412;
    --aviso-bg: #FCF1DE;
    --erro: #B42328;
    --erro-bg: #FDE8E8;
    --sobre-marca: #FFFFFF;
    --foco: var(--acento);
    --raio-sm: 8px;
    --raio-md: 12px;
    --sombra: 0 6px 16px rgba(11, 16, 32, .07);
    --fonte: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-titulo: var(--fonte);
    --fonte-mono: "Space Grotesk", ui-monospace, monospace;

    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    color-scheme: light;
}

/* Tema único por enquanto: o botão sol/lua trocaria só os tokens antigos. */
body.visual-novo .alternar-tema { display: none; }

/* ── Botões: pílula; tinta é o primário, petróleo só na ação principal ── */
body.visual-novo button,
body.visual-novo .botao {
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font-weight: 500;
}
body.visual-novo button:hover,
body.visual-novo .botao:hover { background: var(--tinta-h); color: #fff; }
body.visual-novo button.secundario,
body.visual-novo .botao.secundario {
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--borda);
}
body.visual-novo button.secundario:hover,
body.visual-novo .botao.secundario:hover { background: var(--fundo); color: var(--tinta); }
body.visual-novo button.acao-principal { background: var(--acento); color: #fff; }
body.visual-novo button.acao-principal:hover { background: var(--acento-h); color: #fff; }
body.visual-novo button:active,
body.visual-novo .botao:active { transform: scale(.98); }
body.visual-novo :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14, 107, 115, .35); }

/* ── Lateral ── */
body.visual-novo .lateral { background: var(--fundo); border-right: 1px solid var(--borda-2); }
body.visual-novo .lateral .marca { color: var(--tinta); }
body.visual-novo .empresa-menu {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--borda-2);
    border-radius: 12px;
    color: var(--tinta);
    font-weight: 600;
}
body.visual-novo .grupo-nav { color: #8A91A0; }
body.visual-novo .lateral nav a { border-radius: 8px; color: var(--texto-2); }
body.visual-novo .lateral nav a:hover { background: var(--sup-2); color: var(--tinta); }
body.visual-novo .lateral nav a.ativo {
    background: #fff;
    color: var(--tinta);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(11, 16, 32, .06), 0 1px 2px rgba(11, 16, 32, .04);
}
body.visual-novo .subnav a.ativo { color: var(--tinta); box-shadow: inset 2px 0 0 var(--acento); border-radius: 0; }
body.visual-novo .lateral .rodape { border-top-color: var(--borda-2); }

/* ── Cabeçalho da página ── */
body.visual-novo .cabecalho-pagina h1 { font-weight: 600; }

/* ── Fila ── */
body.visual-novo .dica-fila { background: #fff; border: 1px solid var(--borda-2); border-radius: 12px; }

body.visual-novo .fila-crm {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}
body.visual-novo .resumo-fila {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
body.visual-novo .resumo-fila > div,
body.visual-novo .resumo-fila > a {
    background: #fff;
    border: 1px solid var(--borda-2);
    border-radius: 12px;
    padding: 16px;
}
body.visual-novo .resumo-fila span { font-size: 12px; color: var(--texto-3); }
body.visual-novo .resumo-fila strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
}
body.visual-novo .resumo-fila .destaque { background: var(--acento); border-color: transparent; color: #fff; }
body.visual-novo .resumo-fila .destaque span { color: rgba(255, 255, 255, .8); }
body.visual-novo .painel-metricas { margin-bottom: 24px; }
/* No Dashboard todo cartão leva a algum lugar — e mostra isso. Antes três
   eram links e nove não, com a mesma cara. */
body.visual-novo .painel-metricas > a { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
body.visual-novo .painel-metricas > a:hover { border-color: var(--acento); box-shadow: var(--sombra); }
body.visual-novo .painel-metricas > a span::after { content: " →"; color: var(--acento); opacity: 0; transition: opacity .15s; }
body.visual-novo .painel-metricas > a:hover span::after,
body.visual-novo .painel-metricas > a:focus-visible span::after { opacity: 1; }
body.visual-novo .painel-metricas small { display: block; margin-top: 8px; font-size: 12px; color: var(--texto-3); }
body.visual-novo .painel-metricas small.sobe { color: var(--acento-texto); }
body.visual-novo .painel-metricas small.desce { color: var(--erro); }
body.visual-novo .nota-metricas { margin: 10px 2px 0; font-size: 13px; color: var(--texto-3); }

/* "Precisa de você agora": a mesma caixa de "Esperando sua decisão" de
   Cobranças — é a única coisa com cor de atenção no Dashboard. */
body.visual-novo .bloco-agora { margin-bottom: 28px; }
body.visual-novo .lista-agora { display: grid; margin-top: 12px; }
body.visual-novo .lista-agora a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--borda-2); color: var(--texto); text-decoration: none;
}
body.visual-novo .lista-agora a:first-child { border-top: 0; }
body.visual-novo .lista-agora strong { font-size: 17px; }
body.visual-novo .lista-agora .acao {
    flex: none; padding: 7px 16px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 500; font-size: 13px;
}
body.visual-novo .lista-agora a:hover .acao { background: var(--tinta-h); }

body.visual-novo .coluna-fila { background: var(--sup-2); border: 0; border-radius: 12px; padding: 10px; }
body.visual-novo .coluna-fila.solta-aqui { background: var(--acento-bg); box-shadow: inset 0 0 0 2px var(--acento); }
body.visual-novo .coluna-topo { padding: 6px 8px 10px; border: 0; }
body.visual-novo .coluna-titulo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tinta);
}
body.visual-novo .coluna-fila[data-coluna="em_triagem"] .coluna-titulo::before { background: var(--acento); }
body.visual-novo .coluna-fila[data-coluna="aguardando_atendimento"] .coluna-titulo::before { background: #E8A33D; }
body.visual-novo .coluna-contagem {
    background: #fff;
    color: var(--tinta);
    border-radius: 999px;
    font-family: var(--fonte-mono);
}

body.visual-novo .card-fila {
    background: #fff;
    border: 1px solid var(--borda-2);
    border-left-width: 1px;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(11, 16, 32, .05);
}
body.visual-novo .card-fila:hover { background: #fff; box-shadow: 0 6px 16px rgba(11, 16, 32, .07); }
/* A faixa é reforço; o tempo continua escrito no selo, que é o que um
   daltônico lê. */
body.visual-novo .card-fila.atrasado { box-shadow: inset 3px 0 0 #E8A33D; }
body.visual-novo .card-fila.critico { box-shadow: inset 3px 0 0 #E5484D; }

body.visual-novo .card-topo { align-items: center; justify-content: flex-start; gap: 10px; }
body.visual-novo .card-topo .tag { margin-left: auto; }
body.visual-novo .iniciais {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--acento-bg);
    color: var(--tinta);
    font-size: 11px;
    font-weight: 600;
}
body.visual-novo .card-nome { color: var(--tinta); }
body.visual-novo .card-nome:hover { color: var(--tinta); }
body.visual-novo .card-mensagem { font-style: normal; color: var(--texto-2); }

body.visual-novo .card-rodape { justify-content: flex-start; gap: 6px; margin-top: 10px; }
body.visual-novo .espera,
body.visual-novo .card-dono,
body.visual-novo .tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: var(--sup-2);
    color: var(--texto-2);
}
body.visual-novo .espera:not(.atrasada):not(.critica) { background: var(--acento-bg); color: var(--acento-texto); }
body.visual-novo .espera.sem-pendencia { background: var(--sup-2); color: var(--texto-2); }
body.visual-novo .espera.atrasada { background: var(--aviso-bg); color: var(--aviso); }
body.visual-novo .espera.critica,
body.visual-novo .tag.urgente { background: var(--erro-bg); color: var(--erro); }
body.visual-novo .card-dono.com-dono { background: var(--tinta); color: #fff; }
body.visual-novo .card-rodape .card-ficha { margin-left: auto; color: var(--acento-texto); }

body.visual-novo .card-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda-2);
}
body.visual-novo .card-acoes button { height: 28px; padding: 0 12px; font-size: 11px; }

body.visual-novo .aviso-fila { background: var(--tinta); color: #fff; border: 0; border-radius: 12px; }

@media (max-width: 1100px) {
    body.visual-novo .resumo-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    body.visual-novo .fila-crm { grid-template-columns: 1fr; }
    /* Numa coluna só, quem espera gente vem primeiro: no celular a ordem do
       ciclo (agente → espera → equipe) fazia rolar até achar o que exige ação. */
    body.visual-novo .fila-crm .resumo-fila { order: -2; }
    body.visual-novo .fila-crm .coluna-fila[data-coluna="aguardando_atendimento"] { order: -1; }
}

/* ── Agente: os dois painéis lado a lado, mesma largura e mesma altura ── */
body.visual-novo .grade-agente { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 900px) { body.visual-novo .grade-agente { grid-template-columns: 1fr; } }

/* Painéis empilhados direto na página (Conhecimento, Retomadas...) encostavam
   um no outro. Só filhos diretos do main: dentro de grade o espaço é o gap. */
body.visual-novo main > .painel + .painel { margin-top: 16px; }

/* Fila: por que o agente passou a conversa para a equipe (antes: aba Protocolos). */
body.visual-novo .card-motivo { margin: 6px 0 0; padding: 6px 8px; font-size: 12px; background: var(--fundo); border-radius: 8px; color: var(--tinta); }

/* Retomadas: situação, quantas saíram e o texto que o contato recebe. */
body.visual-novo .resumo-retomadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.visual-novo .rotulo-previa { margin: 0 0 6px; font-size: 12px; color: var(--texto-3); }
body.visual-novo .previa-retomada {
    max-width: 85%;
    padding: 10px 12px;
    background: #DCF8C6;
    border-radius: 12px 12px 12px 2px;
    white-space: pre-wrap;
    color: var(--tinta);
}

/* Avaliar a resposta do agente é secundário na conversa: a regra geral de
   botão (pílula Tinta) deixava "Útil" mais forte que "Assumir". */
body.visual-novo .feedback-resposta > form > button,
body.visual-novo .feedback-resposta summary {
    background: transparent; color: var(--texto-3); border: 0; border-radius: 6px;
    padding: 2px 8px; font-size: 11px; font-weight: 500; height: auto;
}
body.visual-novo .feedback-resposta > form > button:hover,
body.visual-novo .feedback-resposta summary:hover { background: var(--acento-bg); color: var(--acento-texto); }

/* "Usar em" dos modelos: opções à vista em vez da lista do navegador (a seta
   do datalist parecia um defeito). "+ Outro" abre o campo de texto. */
body.visual-novo .escolha-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
body.visual-novo .escolha-chips legend {
    width: 100%; margin: 0 0 6px; padding: 0;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2);
}
body.visual-novo .formulario .escolha-chips label { position: relative; display: inline-flex; flex-direction: row; gap: 0; }
body.visual-novo .escolha-chips input[type="radio"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.visual-novo .escolha-chips label span {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
    border: 1px solid var(--borda); border-radius: 999px; background: var(--sup-1);
    font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--texto-2);
    transition: background .15s, border-color .15s, color .15s;
}
body.visual-novo .escolha-chips label:hover span { border-color: var(--acento); color: var(--tinta); }
body.visual-novo .escolha-chips input:checked + span { border-color: var(--acento); background: var(--acento-bg); color: var(--acento-texto); font-weight: 600; }
body.visual-novo .escolha-chips input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
body.visual-novo .escolha-chips .campo-outra { display: none; flex-basis: 100%; }
body.visual-novo .escolha-chips:has(#finalidade-outra:checked) .campo-outra { display: block; }