/*
 * GuiaISP - Consulta Leads — interface.
 *
 * Ferramenta de trabalho de quem faz isto trinta vezes por dia (especificação, seção 18):
 * claro no conteúdo, denso sem ser apertado, números tabulares, e cor só com significado.
 * Vermelho é restrição ativa. Âmbar é contestação. O resto é neutro — inclusive "nada
 * consta", que não é aprovação e por isso não é verde.
 *
 * Fonte hospedada aqui (Instrument Sans, licença OFL). Nada de CDN de fonte: um cadastro
 * que vende proteção de dado não manda o IP de cada atendente para terceiro.
 */

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --tinta: #101828;
    --tinta-2: #475467;
    --tinta-3: #667085;
    --tinta-4: #98a2b3;
    --linha: #eaecf0;
    --linha-forte: #d0d5dd;
    --fundo: #f5f6f8;
    --superficie: #ffffff;
    --superficie-2: #f9fafb;

    --lateral: #0b1620;
    --lateral-2: #13222d;
    --lateral-texto: #9fb0bd;
    --lateral-forte: #eef3f6;

    --acento: #0e6e82;
    --acento-escuro: #0a5666;
    --acento-suave: #e7f3f5;

    --restricao: #c0342b;
    --restricao-suave: #fdf1f0;
    --restricao-borda: #f4c9c5;
    --contestacao: #a85a07;
    --contestacao-suave: #fef5e6;
    --contestacao-borda: #f6d9a8;
    --sinal: #2c5a86;
    --sinal-suave: #eef4fa;
    --sinal-borda: #cfe0f0;
    --entregue: #0b6b4f;
    --entregue-suave: #e8f6f0;

    --raio: 10px;
    --raio-p: 7px;
    --sombra: 0 1px 2px rgba(16, 24, 40, 0.05);
    --fonte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 14px/1.5 var(--fonte);
    word-spacing: 0.02em;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

/* O espaço da Instrument Sans é estreito; com tracking negativo as palavras colam. */
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; word-spacing: 0.06em; }
h1 { font-size: 24px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-escuro); }

.num,
.kpi-valor,
.tabela td,
.dados dd,
.fato strong,
.veredito strong,
time { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.texto-suave { color: var(--tinta-3); }
.nota-rodape { margin-top: 14px; font-size: 12px; }
.vazio { color: var(--tinta-3); padding: 8px 0; }

/* ------------------------------------------------------------------ marca */

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 650;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--lateral-forte);
}
.marca:hover { color: #fff; }
.marca-simbolo { width: 30px; height: 30px; flex: none; }
.marca-texto { display: grid; line-height: 1.15; }
.marca-texto strong { font-size: 15px; font-weight: 650; }
.marca-texto strong .marca-isp { color: #5fb3c6; }
.marca-texto > span { font-size: 12px; font-weight: 500; color: var(--lateral-texto); letter-spacing: 0; }
.marca-simbolo rect { fill: #5fb3c6; }
.marca-simbolo path { stroke: var(--lateral); stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* ------------------------------------------------------------------ botões e campos */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    border-radius: var(--raio-p);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s;
}
.botao-primario { background: var(--acento); color: #fff; }
.botao-primario:hover { background: var(--acento-escuro); color: #fff; }
.botao-primario:disabled { background: var(--tinta-4); cursor: not-allowed; }
.botao-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); box-shadow: var(--sombra); }
.botao-secundario:hover { background: var(--superficie-2); color: var(--tinta); }
.botao-bloco { width: 100%; height: 42px; }

.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo label { font-size: 13px; font-weight: 550; color: var(--tinta-2); }

input,
select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    box-shadow: var(--sombra);
    transition: border-color .12s, box-shadow .12s;
}
input::placeholder { color: var(--tinta-4); }
input:focus,
select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(14, 110, 130, .15); }
input[aria-invalid="true"] { border-color: var(--restricao); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 52, 43, .15); }

.erro-campo { font-size: 12px; color: var(--restricao); }
.erro-formulario {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--restricao);
    background: var(--restricao-suave);
    border: 1px solid var(--restricao-borda);
    border-radius: var(--raio-p);
}
.ajuda { font-size: 12px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ selos */

.situacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    font-size: 12px;
    font-weight: 550;
    line-height: 18px;
    color: var(--tinta-2);
    background: #f2f4f7;
    border-radius: 999px;
    white-space: nowrap;
}
.situacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-4); }
.situacao-ativa { color: var(--restricao); background: var(--restricao-suave); }
.situacao-ativa::before { background: var(--restricao); }
.situacao-contestada { color: var(--contestacao); background: var(--contestacao-suave); }
.situacao-contestada::before { background: var(--contestacao); }
.situacao-notificada::before,
.situacao-aguardando_notificacao::before { background: var(--sinal); }
.situacao-baixada,
.situacao-removida,
.situacao-expirada { color: var(--tinta-3); }
.situacao-grande { font-size: 13px; padding: 5px 12px 5px 10px; }

.pilula {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 550;
    color: var(--tinta-2);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
}
.pilula-alerta { color: var(--restricao); border-color: var(--restricao-borda); background: var(--restricao-suave); }

/* ------------------------------------------------------------------ tela de entrada */

.acesso { background: var(--superficie); }

.acesso-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}

.acesso-marca {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 40px 56px;
    background: var(--lateral);
    color: var(--lateral-texto);
}

.acesso-texto { max-width: 460px; }
.acesso-texto h1 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 650;
    letter-spacing: -0.015em;
    word-spacing: 0.12em;
    color: #fff;
}
.acesso-texto p { margin-top: 16px; font-size: 16px; line-height: 1.55; }

.amostra {
    width: 100%;
    max-width: 380px;
    padding: 20px;
    color: var(--tinta);
    background: var(--superficie);
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .45);
}
.amostra-topo { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tinta-3); }
.amostra-valor { margin-top: 14px; font-size: 30px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.amostra-sub { color: var(--tinta-3); font-size: 13px; }
.amostra-linha {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    font-size: 13px;
    border-top: 1px solid var(--linha);
}
.amostra-linha span { color: var(--tinta-3); }

.acesso-formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
}
.acesso-formulario form { width: 100%; max-width: 360px; display: grid; gap: 16px; }
.acesso-formulario h2 { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.acesso-sub { margin-top: -10px; color: var(--tinta-3); }
.acesso-rodape { margin-top: 32px; font-size: 12px; color: var(--tinta-4); }

/* ------------------------------------------------------------------ estrutura da aplicação */

.app {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    min-height: 100vh;
}

.lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px 14px 14px;
    background: var(--lateral);
}
.lateral .marca { padding: 0 8px 22px; }

.navegacao { display: grid; gap: 2px; }
.navegacao a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px;
    font-weight: 550;
    color: var(--lateral-texto);
    border-radius: var(--raio-p);
}
.navegacao a:hover { color: var(--lateral-forte); background: var(--lateral-2); }
.navegacao a.ativo { color: #fff; background: var(--lateral-2); box-shadow: inset 2px 0 0 #5fb3c6; }
.navegacao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: none; }

.conta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 8px 4px;
    border-top: 1px solid var(--lateral-2);
}
.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    font-size: 12px;
    font-weight: 650;
    color: var(--lateral);
    background: #cfe7ec;
    border-radius: 50%;
}
.conta-texto { display: grid; min-width: 0; line-height: 1.3; }
.conta-texto strong { font-size: 13px; color: var(--lateral-forte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-texto span { font-size: 12px; color: var(--lateral-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta form { margin: 0 0 0 auto; }
.sair {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--lateral-texto);
    background: none;
    border: 0;
    border-radius: var(--raio-p);
    cursor: pointer;
}
.sair:hover { color: #fff; background: var(--lateral-2); }
.sair svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.principal { min-width: 0; }

.cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1240px;
    padding: 32px 40px 24px;
}
.sobretitulo { margin-bottom: 4px; font-size: 13px; color: var(--tinta-3); }
.sobretitulo a { color: var(--tinta-3); }
.sobretitulo a:hover { color: var(--acento); }
.cabecalho-acoes { display: flex; align-items: center; gap: 10px; }

.conteudo {
    display: grid;
    gap: 20px;
    align-content: start;
    max-width: 1240px;
    padding: 0 40px 56px;
}

/* ------------------------------------------------------------------ cartões */

.cartao {
    min-width: 0;
    padding: 20px 22px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.cartao > h2 { margin-bottom: 14px; }
.cartao-suave { background: var(--superficie-2); box-shadow: none; }
.cartao-suave h2 + .lista-simples,
.cartao-suave h2 + p { margin-top: 10px; }
.cartao-suave h2:not(:first-child) { margin-top: 22px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.cartao-sub { margin-top: 4px; font-size: 13px; color: var(--tinta-3); max-width: 520px; }
.cartao-tabela { padding: 0; overflow-x: auto; }
.cartao-topo-tabela { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--linha); }
.link-discreto { font-size: 13px; font-weight: 550; }

.estado-vazio { padding: 40px 24px; text-align: center; }
.estado-vazio h2 { margin-bottom: 6px; }
.estado-vazio p { color: var(--tinta-3); max-width: 460px; margin: 0 auto; }
.vazio-tabela { padding: 24px 22px; }

.lista-simples { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--tinta-2); }
.lista-simples li { position: relative; padding-left: 16px; }
.lista-simples li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 2px; background: var(--tinta-4); }

/* ------------------------------------------------------------------ painel */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.kpi {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px 20px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.kpi-alerta { border-color: var(--restricao-borda); }
.kpi-rotulo { font-size: 13px; font-weight: 550; color: var(--tinta-2); }
.kpi-valor { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.kpi-valor-restricao { color: var(--restricao); }
.kpi-de { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }
.kpi-nota { font-size: 12px; color: var(--tinta-3); }

.barra { height: 6px; margin: 4px 0 2px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }

.grade-painel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
        "consulta distribuicao"
        "atividade distribuicao";
    gap: 16px;
    align-items: start;
}
.area-consulta { grid-area: consulta; }
.area-distribuicao { grid-area: distribuicao; }
.area-atividade { grid-area: atividade; }

.consulta-rapida {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.area-consulta .link-discreto { display: inline-block; margin-top: 14px; }

.distribuicao { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.distribuicao a {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 6px;
    margin: 0 -6px;
    color: var(--tinta);
    border-radius: 6px;
}
.distribuicao a:hover { background: var(--superficie-2); color: var(--tinta); }
.distribuicao .zerado a { color: var(--tinta-4); }
.distribuicao-rotulo { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.distribuicao-barra { height: 8px; background: #f2f4f7; border-radius: 999px; overflow: hidden; }
.distribuicao-barra span { display: block; height: 100%; background: var(--tinta-4); border-radius: 999px; }
.distribuicao-barra.status-ativa span { background: var(--restricao); }
.distribuicao-barra.status-contestada span { background: var(--contestacao); }
.distribuicao-barra.status-notificada span,
.distribuicao-barra.status-aguardando_notificacao span { background: var(--sinal); }
.distribuicao-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.distribuicao-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 12px;
    font-size: 13px;
    color: var(--tinta-3);
    border-top: 1px solid var(--linha);
}
.distribuicao-rodape strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.atividade {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    margin: 0 -6px;
    color: var(--tinta);
    border-radius: 6px;
}
.atividade + .atividade { border-top: 1px solid var(--linha); border-radius: 0; }
.atividade:hover { background: var(--superficie-2); color: var(--tinta); }
.atividade-marca { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-4); }
.atividade-marca.status-ativa { background: var(--restricao); }
.atividade-marca.status-contestada { background: var(--contestacao); }
.atividade-marca.status-notificada { background: var(--sinal); }
.atividade-texto { display: grid; min-width: 0; line-height: 1.35; }
.atividade-texto strong { font-weight: 550; }
.atividade-texto span { font-size: 12px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atividade time { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }

/* ------------------------------------------------------------------ consulta */

.grade-consulta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.formulario { display: grid; gap: 22px; }
.campos { display: grid; gap: 14px; }
.campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grupo { margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--linha); display: grid; gap: 12px; }
.grupo legend { padding: 0; font-weight: 600; float: left; width: 100%; }
.grupo legend + * { clear: both; }
.opcional { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--tinta-4); }

.formulario-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--linha);
}
.formulario-rodape .ajuda { max-width: 480px; }

.veredito {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 26px;
    border-radius: 12px;
    border: 1px solid var(--linha);
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.veredito-rotulo { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.veredito-titulo { margin-top: 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.veredito-documento { margin-top: 4px; font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.veredito-lado { display: grid; justify-items: end; gap: 2px; }
.veredito-lado span { font-size: 13px; color: var(--tinta-3); }
.veredito-lado strong { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; }
.veredito-nota { max-width: 380px; font-size: 13px; color: var(--tinta-3); }

.veredito-restricao { background: var(--restricao-suave); border-color: var(--restricao-borda); }
.veredito-restricao .veredito-rotulo,
.veredito-restricao .veredito-lado strong { color: var(--restricao); }
.veredito-limpo { border-left: 4px solid var(--tinta-4); }
.veredito-limpo .veredito-rotulo { color: var(--tinta-2); }

.fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fato {
    display: grid;
    gap: 4px;
    padding: 14px 18px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}
.fato span { font-size: 12px; color: var(--tinta-3); }
.fato strong { font-size: 17px; font-weight: 600; }
.fato-contestacao { background: var(--contestacao-suave); border-color: var(--contestacao-borda); }
.fato-contestacao strong { color: var(--contestacao); }

.destaque-equipamento { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-color: var(--restricao-borda); }
.destaque-equipamento h2 { margin-bottom: 2px; }
.destaque-numeros { display: grid; justify-items: end; }
.destaque-numeros strong { font-size: 26px; font-weight: 650; color: var(--restricao); line-height: 1.1; }
.destaque-numeros span { font-size: 13px; color: var(--tinta-3); }

.sinal {
    display: grid;
    gap: 6px;
    padding: 18px 22px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}
.sinal-aceso { background: var(--sinal-suave); border-color: var(--sinal-borda); }
.sinal-aceso h2 { color: var(--sinal); }
.aviso-legal { margin-top: 6px; font-size: 12px; color: var(--tinta-2); }
.nota-avulsa { font-size: 13px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ tabelas */

.tabela { width: 100%; border-collapse: collapse; }
.tabela th,
.tabela td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linha); }
.tabela th:first-child,
.tabela td:first-child { padding-left: 22px; }
.tabela th:last-child,
.tabela td:last-child { padding-right: 22px; }
.tabela thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 550;
    color: var(--tinta-3);
    background: var(--superficie-2);
    white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela td.num:first-child { text-align: left; }
.tabela-clicavel tbody tr { position: relative; }
.tabela-clicavel tbody tr:hover { background: var(--superficie-2); }
.linha-link { font-weight: 600; color: var(--tinta); }
.linha-link::after { content: ""; position: absolute; inset: 0; }
.linha-link:hover { color: var(--acento); }
.sub { display: block; font-size: 12px; color: var(--tinta-3); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    font-weight: 550;
    color: var(--tinta-2);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
}
.filtro span { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.filtro:hover { color: var(--tinta); border-color: var(--linha-forte); }
.filtro.ativo { color: #fff; background: var(--tinta); border-color: var(--tinta); }
.filtro.ativo span { color: #d0d5dd; }

/* ------------------------------------------------------------------ detalhe da pendência */

.grade-detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}
.coluna-principal,
.coluna-lateral { display: grid; gap: 16px; min-width: 0; }

.resumo { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.resumo-valor { display: grid; gap: 2px; }
.resumo-valor span { font-size: 12px; color: var(--tinta-3); }
.resumo-valor strong { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.resumo .dados-grade { flex: 1; min-width: 280px; }

.aviso-visibilidade {
    margin-top: 16px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--sinal);
    background: var(--sinal-suave);
    border: 1px solid var(--sinal-borda);
    border-radius: var(--raio-p);
}

.dados { margin: 0; display: grid; gap: 10px; }
.dados div { display: grid; gap: 2px; min-width: 0; }
.dados dt { font-size: 12px; color: var(--tinta-3); }
.dados dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.dados-grade { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 20px; }
.dados-compactos { grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.dados-compactos dd { font-size: 13px; }
.dado-largo { grid-column: 1 / -1; }

.titular-nome { font-size: 16px; font-weight: 600; }

.linha-tempo { margin: 0; padding: 0; list-style: none; }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding-bottom: 18px; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--linha);
}
.linha-tempo-marca {
    position: relative;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--superficie);
    border: 3px solid var(--tinta-4);
}
.linha-tempo .status-ativa .linha-tempo-marca { border-color: var(--restricao); }
.linha-tempo .status-contestada .linha-tempo-marca { border-color: var(--contestacao); }
.linha-tempo .status-notificada .linha-tempo-marca { border-color: var(--sinal); }
.linha-tempo div { display: grid; line-height: 1.4; }
.linha-tempo strong { font-weight: 600; }
.linha-tempo span { font-size: 12px; color: var(--tinta-3); }

.notificacao + .notificacao { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.notificacao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notificacao-detalhe { margin: 6px 0 0; font-size: 13px; color: var(--restricao); }

.entrega { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; }
.entrega-entregue { color: var(--entregue); background: var(--entregue-suave); }
.entrega-enviada { color: var(--sinal); background: var(--sinal-suave); }
.entrega-aguardando_postagem { color: var(--contestacao); background: var(--contestacao-suave); }
.entrega-falha,
.entrega-devolvida { color: var(--restricao); background: var(--restricao-suave); }

.entregas { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--linha); display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.entregas span { color: var(--tinta-3); font-variant-numeric: tabular-nums; margin-right: 6px; }

.cartao-contestacao { border-color: var(--contestacao-borda); background: var(--contestacao-suave); }
.cartao-contestacao h2 { color: var(--contestacao); }
.citacao { font-style: italic; color: var(--tinta-2); }

/* ------------------------------------------------------------------ telas menores */

@media (max-width: 1180px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-painel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "consulta" "distribuicao" "atividade"; }
    .grade-consulta,
    .grade-detalhe { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .acesso-grade { grid-template-columns: minmax(0, 1fr); }
    .acesso-marca { padding: 28px 24px; gap: 28px; }
    .acesso-texto h1 { font-size: 30px; }
    .amostra { display: none; }

    .app { grid-template-columns: minmax(0, 1fr); }
    .lateral {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        padding: 12px 16px;
    }
    .lateral .marca { padding: 0; }
    .navegacao { display: flex; order: 3; width: 100%; overflow-x: auto; }
    .navegacao a.ativo { box-shadow: inset 0 -2px 0 #5fb3c6; }
    .conta { margin: 0 0 0 auto; padding: 0; border: 0; }
    .conta-texto { display: none; }

    .cabecalho { padding: 20px 16px 16px; }
    .conteudo { padding: 0 16px 40px; }
    .campos-3 { grid-template-columns: minmax(0, 1fr); }
    .consulta-rapida { grid-template-columns: minmax(0, 1fr); }
    .formulario-rodape { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
    .kpis,
    .fatos { grid-template-columns: minmax(0, 1fr); }
    .distribuicao a { grid-template-columns: 120px minmax(0, 1fr) 24px; }
    .veredito-lado { justify-items: start; }
}

/* ================================================================== registro, filas, MFA e portal */

textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-p);
    resize: vertical;
}
textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(14, 110, 130, .15); }
select[aria-invalid="true"] { border-color: var(--restricao); }

.botao-restricao { background: var(--restricao); color: #fff; }
.botao-restricao:hover { background: #a02b23; color: #fff; }
.botao-link { font: inherit; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer; }
.botao-link:hover { text-decoration: underline; }

.navegacao .contador {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    font-weight: 650;
    color: var(--lateral);
    background: #cfe7ec;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.navegacao .contador-alerta { background: #f6d9a8; }

.aviso { padding: 12px 16px; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--superficie); }
.aviso p + p { margin-top: 4px; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso-ok { color: #0b5666; background: var(--acento-suave); border-color: #bfe0e6; }
.aviso-erro { color: var(--restricao); background: var(--restricao-suave); border-color: var(--restricao-borda); }
.aviso-contestacao { color: var(--contestacao); background: var(--contestacao-suave); border-color: var(--contestacao-borda); font-size: 13px; }

.faixa-explicacao { color: var(--tinta-2); max-width: 760px; }

.faixa-acao {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--contestacao-suave);
    border: 1px solid var(--contestacao-borda);
    border-radius: var(--raio);
}
.faixa-acao strong { color: var(--contestacao); }
.faixa-acao a { font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ formulário de registro */

.form-pendencia { display: grid; gap: 16px; }
.secao-form { display: grid; gap: 16px; }
.secao-form header { display: grid; gap: 2px; }
.campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.campo-dobro { grid-column: span 2; }

/* Equipamento só aparece para débito de comodato; prova de fraude, só para fraude. */
.grupo-equipamento,
.campo-fraude { display: none; }
.form-pendencia:has(#tipo option[value="equipamento_comodato"]:checked) .grupo-equipamento { display: grid; }
.form-pendencia:has(#motivo_encerramento option[value="fraude_confirmada"]:checked) .campo-fraude { display: grid; }

.barra-acoes {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
}
.barra-acoes-botoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ detalhe: ações e contestação */

.acoes { display: grid; gap: 12px; }
.acoes > h2 { margin-bottom: 2px; }
.acao-extra { border-top: 1px solid var(--linha); padding-top: 12px; }
.acao-extra summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); list-style: none; }
.acao-extra summary::-webkit-details-marker { display: none; }
.acao-extra summary::before { content: "›"; display: inline-block; width: 14px; transition: transform .12s; }
.acao-extra[open] summary::before { transform: rotate(90deg); }
.acao-extra form { margin-top: 12px; }
.formulario-compacto { display: grid; gap: 12px; }

.cartao-contestacao { display: grid; gap: 12px; }
.cartao-contestacao .cartao-topo { margin-bottom: 0; }
blockquote.citacao {
    margin: 0;
    padding: 10px 14px;
    background: var(--superficie);
    border-left: 3px solid var(--contestacao);
    border-radius: 0 var(--raio-p) var(--raio-p) 0;
}
.pilula-contestacao { color: var(--contestacao); background: var(--superficie); border-color: var(--contestacao-borda); }
.responder { display: grid; gap: 12px; }
.responder-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.situacao-prova { color: #0b5666; background: var(--acento-suave); }
.situacao-prova::before { background: var(--acento); }

/* ------------------------------------------------------------------ fila de devoluções */

.cartoes-devolucao { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.devolucao { display: grid; gap: 14px; align-content: start; }
.devolucao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.devolucao-equipamento { font-size: 18px; font-weight: 650; }
.devolucao-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.devolucao-botoes .botao { min-height: 46px; height: auto; padding: 8px 14px; white-space: normal; line-height: 1.25; text-align: center; }

/* ------------------------------------------------------------------ página de cartão central (MFA, portal) */

.pagina-cartao { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.cartao-central { width: 100%; max-width: 440px; display: grid; gap: 20px; }
.marca-escura { color: var(--tinta); }
.marca-escura:hover { color: var(--tinta); }
.marca-escura .marca-texto > span { color: var(--tinta-3); }
.marca-escura .marca-simbolo path { stroke: #fff; }
.marca-escura .marca-simbolo rect { fill: var(--acento); }
.marca-escura .marca-isp { color: var(--acento); }
.cartao-central-conteudo { display: grid; gap: 16px; padding: 28px; }
.cartao-central-conteudo h1 { font-size: 22px; }
.cartao-central-rodape { text-align: center; font-size: 13px; color: var(--tinta-3); }

.mfa-qr { display: grid; place-items: center; padding: 12px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); }
.mfa-qr svg { width: 200px; height: 200px; }
.mfa-chave { display: grid; gap: 4px; text-align: center; font-size: 12px; color: var(--tinta-3); }
.mfa-chave code { font-size: 15px; letter-spacing: .08em; color: var(--tinta); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

.rotulo-portal { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.portal-nota { text-align: center; }
.acesso-titular { margin-top: 10px; font-size: 13px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ portal: registros */

.pagina-portal { background: var(--fundo); }
.portal-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
}
.portal-topo form { margin: 0; }
.portal { max-width: 860px; margin: 0 auto; padding: 32px 24px 64px; display: grid; gap: 22px; }
.portal h1 { margin-top: -12px; }
.portal-secao { display: grid; gap: 14px; }
.portal-titulo-secao { font-size: 17px; }

.registro { display: grid; gap: 12px; }
.registro-topo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.registro-topo h2 { font-size: 17px; }
.registro-valor { display: grid; justify-items: end; }
.registro-valor strong { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.registro-valor span { font-size: 12px; color: var(--tinta-3); }
.registro-situacao { font-weight: 600; color: var(--tinta-2); }
.registro-situacao-ativa { color: var(--restricao); }
.registro-situacao-contestada { color: var(--contestacao); }

@media (max-width: 900px) {
    .campos-2,
    .campos-4 { grid-template-columns: minmax(0, 1fr); }
    .campo-dobro { grid-column: auto; }
    .devolucao-botoes { grid-template-columns: minmax(0, 1fr); }
    .registro-valor { justify-items: start; }
}

/* ------------------------------------------------------------------ plataforma */

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.selo-plataforma {
    margin: -12px 8px 18px;
    padding: 4px 9px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f6d9a8;
    background: rgba(246, 217, 168, .1);
    border: 1px solid rgba(246, 217, 168, .25);
    border-radius: 999px;
}

.busca-lista { display: flex; gap: 8px; max-width: 520px; }
.busca-lista input { flex: 1; }

.valor-fixo { height: 40px; display: flex; align-items: center; font-weight: 500; color: var(--tinta-2); }

.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.usuarios { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.usuario { padding: 12px 0; border-top: 1px solid var(--linha); }
.usuario:first-child { border-top: 0; padding-top: 0; }
.usuario-inativo strong { color: var(--tinta-3); }
.usuario-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.usuario-topo .sub { display: block; font-size: 13px; color: var(--tinta-3); }
.usuario-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.usuario .acao-extra { margin-top: 10px; border-top: 0; padding-top: 0; }
.usuario-acoes { display: grid; gap: 10px; margin-top: 10px; }
.usuario-acoes form { margin: 0; }
.formulario-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.formulario-linha input,
.formulario-linha select { flex: 1 1 220px; width: auto; }

.tabela-historico { margin-top: 16px; }

.acesso-esqueci { margin-top: 4px; font-size: 13px; text-align: center; }

@media (max-width: 1180px) {
    .kpis-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Contato novo na pendência: só os campos do canal escolhido. */
.form-contato .contato-email,
.form-contato .contato-whatsapp,
.form-contato .contato-correio { display: none; }
.form-contato:has(#canal-contato option[value="email"]:checked) .contato-email { display: block; }
.form-contato:has(#canal-contato option[value="whatsapp"]:checked) .contato-whatsapp { display: block; }
.form-contato:has(#canal-contato option[value="correio"]:checked) .contato-correio { display: grid; }

/* Cartas na operação */
.cartas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.carta { padding: 14px 0; border-top: 1px solid var(--linha); display: grid; gap: 10px; }
.carta:first-child { border-top: 0; padding-top: 0; }
.carta-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.carta-topo .sub { display: block; font-size: 13px; color: var(--tinta-3); }
.carta-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.carta-acoes form { margin: 0; }
.carta-acoes .acao-extra { border-top: 0; padding-top: 8px; flex-basis: 100%; }
.carta-atrasada strong { color: var(--restricao); }
.carta-acoes .formulario-linha input { flex: 0 1 190px; }
.carta-acoes .acao-extra .formulario-linha input { flex: 1 1 320px; }
.carta-acoes > .formulario-linha { flex: 1 1 560px; }

/* Orientação ao atendente na consulta: o que fazer com o resultado. */
.orientacao { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--restricao); background: var(--restricao-suave); border: 1px solid var(--restricao-borda); border-radius: var(--raio-p); }
.orientacao-neutra { color: var(--tinta-2); background: var(--superficie-2); border-color: var(--linha); }

/* Créditos: pacotes à venda e extrato. */
.pacotes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.pacote { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linha); }
.pacote:first-child { border-top: 0; padding-top: 0; }
.pacote .formulario-linha { flex-wrap: nowrap; }
.pacote-preco { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quantidade-negativa { color: var(--tinta-3); }
.lancamento-credito .campos { align-items: end; }
.cartao-tabela > .nota-rodape { margin: 0; padding: 12px 22px 16px; }
.carta-acoes .formulario-linha input[name="referencia"] { flex: 1 1 300px; }

/* Ambiente piloto: aviso fixo no topo de cada tela que envia, consulta ou fala com o titular. */
.faixa-piloto { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; color: var(--contestacao); background: var(--contestacao-suave); border: 1px solid var(--contestacao-borda); border-radius: var(--raio-p); }

/* Adesão pelo site */
.adesao-beneficios { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; color: var(--tinta-2); }
.adesao-beneficios li { padding-left: 16px; position: relative; }
.adesao-beneficios li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 2px; background: var(--acento); }
.adesao-beneficios strong { color: var(--tinta); }
.caixa-aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.caixa-aceite input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--acento); }
.documento-legal { max-width: 760px; line-height: 1.6; }
.documento-legal h1 { margin-top: 0; font-size: 26px; }
.documento-legal h2 { font-size: 18px; margin-top: 12px; }
.documento-legal blockquote { margin: 0; padding: 12px 16px; background: var(--contestacao-suave); border: 1px solid var(--contestacao-borda); border-radius: var(--raio-p); color: var(--contestacao); }
.documento-legal blockquote p { margin: 0; }
@media (max-width: 720px) {
    .adesao-beneficios { grid-template-columns: minmax(0, 1fr); }
}
/* Página inicial do site */
.site { max-width: 1040px; }
.site-topo-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.site-abertura { display: grid; gap: 12px; max-width: 760px; }
.site-abertura h1 { margin-top: 0; font-size: 30px; }
.site-abertura .texto-suave { font-size: 16px; }
.site-caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.site-caminho { display: grid; gap: 14px; padding: 24px; }
.site-caminho h2 { font-size: 20px; }
.site-caminho .faixa-piloto { margin: 0; }
.site-beneficios { grid-template-columns: minmax(0, 1fr); }
.site-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.site-rodape { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 8px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-3); }
.site-rodape a { color: var(--tinta-2); }
@media (max-width: 760px) {
    .site-caminhos { grid-template-columns: minmax(0, 1fr); }
    .site-abertura h1 { font-size: 24px; }
    .portal-topo { gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
}

/* Voltar ao início nas telas em cartão */
.cartao-central-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.link-voltar { font-size: 13px; font-weight: 600; color: var(--acento); text-decoration: none; }
.link-voltar:hover { text-decoration: underline; }

/* Cadastro rápido: empresa pela Receita */
.empresa-receita { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 8px 12px; border-radius: var(--raio-p); font-size: 13px; }
.empresa-receita:empty { padding: 0; min-height: 0; }
.empresa-receita strong { font-size: 14px; }
.empresa-buscando { color: var(--tinta-3); background: var(--superficie-2); }
.empresa-ok { color: var(--tinta); background: var(--acento-suave); border: 1px solid #bfe0e6; }
.empresa-erro { color: var(--restricao); background: var(--restricao-suave); border: 1px solid var(--restricao-borda); }
.empresa-aviso { color: var(--contestacao); background: var(--contestacao-suave); border: 1px solid var(--contestacao-borda); }
.empresa-manual { margin: 4px 0 8px; }
.empresa-manual .campos { margin-top: 12px; }
.aviso-pendente { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
    color: var(--tinta); background: var(--contestacao-suave); border-color: var(--contestacao-borda); }
.aviso-pendente p { margin: 0; }

/* Mapa de recolhimento */
.mapa-recolhimento { padding: 0; overflow: hidden; }
.mapa { height: 440px; background: var(--superficie-2); }
.mapa-legenda { list-style: none; margin: 0; padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-2); border-top: 1px solid var(--linha); }
.mapa-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.mapa-ponto { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linha-forte); }
.mapa-ponto-numero { background: #0e6e82; }
.mapa-ponto-logradouro { background: #2c5a86; }
.mapa-ponto-cep { background: #a85a07; }
.mapa-balao { display: grid; gap: 2px; font: 13px/1.4 var(--fonte); }
.mapa-balao a { margin-top: 4px; color: var(--acento); font-weight: 600; }
.lista-recolhimento { list-style: none; margin: 0; padding: 0; }
.lista-recolhimento li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--linha); }
.lista-recolhimento li:first-child { border-top: 0; }
.lista-recolhimento .sub { margin: 2px 0 0; }
.lista-recolhimento-acoes { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; justify-content: flex-end; }
.recolhimento-ajuda { margin: 0 18px 8px; }
@media (max-width: 720px) {
    .mapa { height: 320px; }
    .lista-recolhimento li { flex-direction: column; gap: 8px; }
    .lista-recolhimento-acoes { justify-content: flex-start; }
}

/* Assistente de IA na adesão */
.assistente { padding: 0; }
.assistente > summary { padding: 14px 18px; font-weight: 600; cursor: pointer; color: var(--acento-escuro); }
.assistente[open] > summary { border-bottom: 1px solid var(--linha); }
.assistente-aviso { margin: 12px 18px 0; }
.assistente-conversa { list-style: none; margin: 0; padding: 12px 18px 0; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.assistente-conversa:empty { display: none; }
.assistente-mensagem { padding: 9px 12px; border-radius: var(--raio-p); white-space: pre-line; max-width: 88%; overflow-wrap: anywhere; }
.assistente-usuario { justify-self: end; background: var(--acento-suave); color: var(--tinta); }
.assistente-assistente { justify-self: start; background: var(--superficie-2); border: 1px solid var(--linha); color: var(--tinta); }
.assistente-aguarde { color: var(--tinta-3); }
.assistente-erro { color: var(--contestacao); background: var(--contestacao-suave); border-color: var(--contestacao-borda); }
.assistente-form { display: flex; gap: 10px; align-items: flex-end; padding: 12px 18px 16px; }
.assistente-form textarea { flex: 1; min-width: 0; resize: vertical; }
@media (max-width: 560px) {
    .assistente-form { flex-direction: column; align-items: stretch; }
    .assistente-mensagem { max-width: 100%; }
}
.adesao-analise { border-color: var(--contestacao-borda); }
.adesao-analise .subtitulo, .secao-form .subtitulo { font-size: 13px; font-weight: 650; color: var(--tinta-2); margin: 0 0 6px; }
.texto-ok { color: var(--acento); font-weight: 600; }
.texto-alerta { color: var(--restricao); font-weight: 600; }

/* Importação por planilha */
.faixa-importar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: var(--acento); }
.faixa-importar form { margin: 0; }
.kpi-valor-texto { font-size: 22px; }
.avisos-importacao { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.avisos-importacao .sub { display: block; font-size: 12px; color: var(--tinta-3); }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--tinta-2); }
.passos strong { color: var(--tinta); }

/* Conector de ERP */
.form-conector .grupo[class*="credencial-"] { display: none; }
.form-conector:has(#sistema option[value="sgp"]:checked) .credencial-sgp,
.form-conector:has(#sistema option[value="ixc"]:checked) .credencial-ixc,
.form-conector:has(#sistema option[value="mk"]:checked) .credencial-mk,
.form-conector:has(#sistema option[value="hubsoft"]:checked) .credencial-hubsoft,
.form-conector:has(#sistema option[value="voalle"]:checked) .credencial-voalle,
.form-conector:has(#sistema option[value="rbx"]:checked) .credencial-rbx { display: grid; }
.diagnostico { border-top: 1px solid var(--linha); padding-top: 12px; display: grid; gap: 8px; }
.campos-reconhecidos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; font-size: 13px; }
.campo-ok::before { content: "✓ "; color: var(--acento); font-weight: 700; }
.campo-falta { color: var(--restricao); }
.campo-falta::before { content: "✗ "; font-weight: 700; }
.rotulo-campo { font-size: 13px; font-weight: 600; color: var(--tinta-2); }

/* PIX dos créditos */
.pix { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; border-color: var(--acento); }
.pix-qrcode { width: 180px; height: 180px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fff; }
.pix-dados { flex: 1 1 320px; display: grid; gap: 6px; }
.pix-dados label { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.pix-codigo { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; resize: none; }
.credencial-nova dl { gap: 6px; }
.credencial-nova code { word-break: break-all; font-size: 13px; }
.documento-legal pre { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px; overflow-x: auto; font-size: 12px; }
.documento-legal table { border-collapse: collapse; font-size: 13px; }
.documento-legal th, .documento-legal td { border-bottom: 1px solid var(--linha); padding: 6px 10px; text-align: left; }