:root {
  --fundo: #f4f6f5; --superficie: #ffffff; --superficie-2: #f8faf9; --borda: #dde3e0; --borda-forte: #c4cdc9;
  --texto: #17211d; --texto-2: #4c5a54; --texto-3: #74827c;
  --primaria: #0f5c4c; --primaria-hover: #0b4a3d; --primaria-suave: #e3f0ec;
  --ok: #1d7a4e; --ok-suave: #e3f3ea; --alerta: #a05a00; --alerta-suave: #fbf0dc;
  --erro: #b42318; --erro-suave: #fdecea; --info: #2459a8; --info-suave: #e6eefa;
  --s-enviados: #1d7a5f; --s-prontos: #3a6fd0; --s-pendentes: #d29014; --s-descartados: #98a29e; --s-verificar: #c8432f;
  --raio: 10px; --sombra: 0 1px 2px rgba(16,24,20,.06), 0 1px 3px rgba(16,24,20,.05);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
/* Tema: automático (segue o sistema), claro ou escuro — escolhido por pessoa em Minha conta */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #111614; --superficie: #19201d; --superficie-2: #1e2622; --borda: #2c3632; --borda-forte: #3b4742;
    --texto: #e6ece9; --texto-2: #b0bcb6; --texto-3: #85928c;
    --primaria: #4fb89c; --primaria-hover: #63c7ab; --primaria-suave: #1d322b;
    --ok: #5cc28e; --ok-suave: #1b3227; --alerta: #e0a645; --alerta-suave: #362a15;
    --erro: #f07a6c; --erro-suave: #3a1f1c; --info: #7ea6ec; --info-suave: #1d2a40;
    --s-enviados: #45b391; --s-prontos: #6b95e6; --s-pendentes: #e0a645; --s-descartados: #6d7873; --s-verificar: #ec6f5a;
    --sombra: none; color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
    --fundo: #111614; --superficie: #19201d; --superficie-2: #1e2622; --borda: #2c3632; --borda-forte: #3b4742;
    --texto: #e6ece9; --texto-2: #b0bcb6; --texto-3: #85928c;
    --primaria: #4fb89c; --primaria-hover: #63c7ab; --primaria-suave: #1d322b;
    --ok: #5cc28e; --ok-suave: #1b3227; --alerta: #e0a645; --alerta-suave: #362a15;
    --erro: #f07a6c; --erro-suave: #3a1f1c; --info: #7ea6ec; --info-suave: #1d2a40;
    --s-enviados: #45b391; --s-prontos: #6b95e6; --s-pendentes: #e0a645; --s-descartados: #6d7873; --s-verificar: #ec6f5a;
    --sombra: none; color-scheme: dark;
}
/* Cor de destaque */
:root[data-cor="azul"] { --primaria: #1f5fbf; --primaria-hover: #194f9f; --primaria-suave: #e4edfb; }
:root[data-cor="grafite"] { --primaria: #3d4a55; --primaria-hover: #2f3a43; --primaria-suave: #e8ecef; }
:root[data-cor="vinho"] { --primaria: #8a2442; --primaria-hover: #721d37; --primaria-suave: #f7e6ec; }
:root[data-cor="laranja"] { --primaria: #b5530f; --primaria-hover: #96440c; --primaria-suave: #fbeadc; }
:root[data-tema="escuro"][data-cor="azul"] { --primaria: #7aa7ef; --primaria-hover: #93b8f3; --primaria-suave: #1c2a40; }
:root[data-tema="escuro"][data-cor="grafite"] { --primaria: #a9b6c1; --primaria-hover: #bec9d2; --primaria-suave: #262d33; }
:root[data-tema="escuro"][data-cor="vinho"] { --primaria: #e48aa6; --primaria-hover: #eba1b8; --primaria-suave: #3a1e28; }
:root[data-tema="escuro"][data-cor="laranja"] { --primaria: #eea067; --primaria-hover: #f2b384; --primaria-suave: #3a2a1c; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"][data-cor="azul"] { --primaria: #7aa7ef; --primaria-hover: #93b8f3; --primaria-suave: #1c2a40; }
  :root[data-tema="auto"][data-cor="grafite"] { --primaria: #a9b6c1; --primaria-hover: #bec9d2; --primaria-suave: #262d33; }
  :root[data-tema="auto"][data-cor="vinho"] { --primaria: #e48aa6; --primaria-hover: #eba1b8; --primaria-suave: #3a1e28; }
  :root[data-tema="auto"][data-cor="laranja"] { --primaria: #eea067; --primaria-hover: #f2b384; --primaria-suave: #3a2a1c; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.pequeno { font-size: 12px; }
.sutil { color: var(--texto-3); margin: 0; }
.dica { color: var(--texto-3); font-size: 12.5px; margin: 6px 0; }
.ok { color: var(--ok); } .alerta { color: var(--alerta); }

/* topo */
.topo { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 58px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.marca-icone, .auth-marca svg { color: var(--primaria); }
.marca-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--primaria-suave); }
.marca strong, .auth-marca strong { display: block; font-size: 14px; line-height: 1.2; }
.marca small, .auth-marca small { color: var(--texto-3); font-size: 11.5px; }
.menu { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.menu a { color: var(--texto-2); padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-weight: 500; }
.menu a:hover { background: var(--superficie-2); text-decoration: none; }
.menu a.ativo { color: var(--primaria); background: var(--primaria-suave); }
.conta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.conta form { margin: 0; }
.faixa-ambiente { background: var(--alerta-suave); color: var(--alerta); text-align: center; font-size: 12px; padding: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.conteudo { max-width: 1280px; margin: 0 auto; padding: 24px; }
.rodape { text-align: center; color: var(--texto-3); font-size: 11.5px; padding: 16px 0 24px; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

/* cartões */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra); }
.cartao.estreito { max-width: 560px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cartao-topo h2 { margin: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grade-2 > .cartao { margin-bottom: 0; }
.grade-2 + * { margin-top: 18px; }

/* status e indicadores */
.status-linha { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.status-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; flex: 1; }
.status-item .rotulo { font-size: 11.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.status-item .selo { align-self: flex-start; }
.alerta-caixa { border-color: var(--erro) !important; background: var(--erro-suave) !important; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis.compacto { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--texto); box-shadow: var(--sombra); }
a.kpi:hover { border-color: var(--primaria); text-decoration: none; }
.kpi span { color: var(--texto-2); font-size: 12.5px; font-weight: 500; }
.kpi strong { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi strong.menor { font-size: 16px; }
.kpi strong em { font-style: normal; font-size: 16px; color: var(--texto-3); margin-left: 2px; }
.kpi small { color: var(--texto-3); font-size: 12px; }
.kpi.destaque { border-color: var(--s-prontos); }

/* selos */
.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); white-space: nowrap; }
.selo.grande { font-size: 13px; padding: 4px 12px; }
.selo-ok, .selo-enviado, .selo-ativo { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.selo-pronto, .selo-em_execucao, .selo-enviando { background: var(--info-suave); color: var(--info); border-color: transparent; }
.selo-pendente, .selo-parcial, .selo-aguardando { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.selo-falha, .selo-verificar, .selo-interrompida { background: var(--erro-suave); color: var(--erro); border-color: transparent; }
.motivo { display: block; color: var(--texto-3); font-size: 11.5px; margin-top: 2px; }

/* botões e formulários */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: 600 13px var(--fonte); cursor: pointer; white-space: nowrap; }
.botao:hover { background: var(--superficie-2); text-decoration: none; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria, #fff); }
.botao.primario:hover { background: var(--primaria-hover); }
.botao.perigo { color: var(--erro); }
.botao.pequeno { padding: 5px 10px; font-size: 12px; }
.botao.largo { width: 100%; padding: 10px; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--primaria); font: inherit; cursor: pointer; padding: 0; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline-flex; gap: 6px; margin: 0; align-items: center; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label, .filtros label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.form label small { font-weight: 400; color: var(--texto-3); }
input, select, textarea { font: 14px var(--fonte); color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 10px; min-width: 0; }
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: 0; border-color: var(--primaria); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primaria); }
.grade-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.grade-form .largo { grid-column: 1 / -1; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
label.check { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 500 !important; color: var(--texto) !important; flex-wrap: wrap; }
label.check small { width: 100%; padding-left: 24px; }
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.filtros .cresce { flex: 1; min-width: 220px; }
input.curto { width: 130px; } input.longo { width: 100%; min-width: 320px; }

/* abas e tabela */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; overflow-x: auto; }
.abas a { padding: 9px 12px; color: var(--texto-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { text-decoration: none; color: var(--texto); }
.abas a.ativo { color: var(--primaria); border-bottom-color: var(--primaria); }
.contador { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 11.5px; text-align: center; color: var(--texto-2); }
.barra-acao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.barra-acao #selecionados { margin-right: auto; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 14px; }
.cartao .tabela-rolagem { box-shadow: none; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); white-space: nowrap; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .vazio { text-align: center; color: var(--texto-3); padding: 28px; }
.tabela .acoes { white-space: nowrap; }
.tabela .quebra { word-break: break-all; max-width: 280px; }
.col-check { width: 36px; }

/* avisos */
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid transparent; }
.aviso-ok { background: var(--ok-suave); color: var(--ok); }
.aviso-erro { background: var(--erro-suave); color: var(--erro); }

/* gráficos */
.grafico { width: 100%; min-height: 120px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--texto-3); font: 11px var(--fonte); }
.grafico .rotulo-barra { fill: var(--texto-2); font-size: 12px; }
.grafico .valor { fill: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico .grade { stroke: var(--borda); stroke-width: 1; }
.grafico .vazio { color: var(--texto-3); text-align: center; padding: 40px 0; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }
.dica-grafico { position: fixed; pointer-events: none; background: var(--texto); color: var(--fundo); padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.45; z-index: 10; white-space: nowrap; display: none; }
.segmentado { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 8px; overflow: hidden; background: var(--superficie); }
.segmentado a { padding: 6px 12px; color: var(--texto-2); font-weight: 600; font-size: 12.5px; }
.segmentado a + a { border-left: 1px solid var(--borda-forte); }
.segmentado a.ativo { background: var(--primaria-suave); color: var(--primaria); }
.segmentado a:hover { text-decoration: none; }

/* log */
.log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.log li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); align-items: baseline; flex-wrap: wrap; }
.log li:last-child { border-bottom: 0; }
.log time { font-family: var(--mono); color: var(--texto-3); font-size: 12px; }
.log .nivel { font-size: 11px; font-weight: 700; width: 46px; }
.log-info .nivel { color: var(--info); } .log-aviso .nivel { color: var(--alerta); } .log-erro .nivel { color: var(--erro); }
.log-erro { background: var(--erro-suave); }

/* configurações */
.sumario { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; font-weight: 600; }
.campos { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 12.5px; }
.previa-email { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--superficie-2); margin-bottom: 8px; }
.previa-assunto { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.previa-email pre { margin: 0; padding: 14px; white-space: pre-wrap; font: 13.5px/1.55 var(--fonte); }
.dados { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0 0 16px; }
.dados dt { color: var(--texto-3); }
.dados dd { margin: 0; }

/* conexão com o Bling */
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.bloco { border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; background: var(--superficie-2); }
.bloco h3 { display: flex; align-items: center; gap: 8px; }
.passo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primaria); color: #fff; font-size: 12px; }
.campo-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.campo-status small { color: var(--texto-3); font-size: 12px; }
.rotulo-campo { font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.pilha-botoes { display: flex; flex-direction: column; gap: 8px; }
.pilha-botoes form { margin: 0; }
.botao.desabilitado { opacity: .5; pointer-events: none; }
.dados.compacto { grid-template-columns: 110px 1fr; font-size: 13px; margin-bottom: 12px; }

/* o que buscar */
.grade-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
fieldset.bloco { margin: 0; min-width: 0; }
fieldset.bloco legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.lista-checks { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.lista-checks small { color: var(--texto-3); }
.lista-checks label.check { flex-wrap: nowrap; align-items: center; }
.lista-checks label.check small { width: auto; padding-left: 0; margin-left: auto; font-size: 11px; }
details summary { cursor: pointer; color: var(--primaria); font-weight: 600; margin-top: 10px; }
details textarea { width: 100%; margin-top: 6px; }

.resumo-filtros { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; font-size: 12.5px; color: var(--texto-2); }

#lojas h3 { margin-top: 20px; }
.lista-lojas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form label.loja-opcao, .loja-opcao { display: grid; flex-direction: initial; font-size: 13.5px; color: var(--texto); grid-template-columns: 20px minmax(160px, 1.2fr) 120px 2fr; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); cursor: pointer; }
.loja-opcao.marcada { border-color: var(--primaria); background: var(--primaria-suave); }
.loja-nome { font-weight: 600; } .loja-nome small { font-weight: 400; color: var(--texto-3); }
.loja-id { color: var(--texto-3); } .loja-info { font-size: 12.5px; color: var(--texto-2); }
@media (max-width: 900px) { .form label.loja-opcao, .loja-opcao { grid-template-columns: 20px 1fr; } .loja-id, .loja-info { grid-column: 2; } }

/* telas de acesso */
.auth { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 24px 16px; }
.auth-cartao { width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 28px; box-shadow: var(--sombra); }
.auth-cartao h1 { font-size: 19px; margin-bottom: 14px; }
.auth-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-links { font-size: 12.5px; text-align: center; margin: 16px 0 0; color: var(--texto-3); }
.auth .aviso { max-width: 400px; }

@media (max-width: 1150px) { .grade-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .topo { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px 16px; }
  .menu { order: 3; flex: 1 1 100%; }
  .conta { margin-left: auto; }
  .conteudo { padding: 16px; }
  .grade-2, .grade-3, .grade-form, .grade-filtros { grid-template-columns: 1fr; }
  input.longo { min-width: 220px; }
}

/* ---------- cockpit ---------- */
.cockpit { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra); }
.cockpit-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cockpit-topo h2 { margin: 0 0 2px; font-size: 16px; }
.cockpit-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fluxo { margin: 6px 0 10px; }
.fluxo-svg { width: 100%; height: auto; max-height: 210px; display: block; }
.fluxo .anel { fill: none; stroke: var(--borda); stroke-width: 3; transform-origin: center; transform-box: fill-box; }
.fluxo .disco { fill: var(--superficie-2); stroke: var(--borda-forte); stroke-width: 2; transition: fill .4s, stroke .4s; }
.fluxo .no { color: var(--texto-2); }
.fluxo .icone-fill { fill: currentColor; }
.fluxo .no-sigla { font: 700 22px var(--fonte); fill: var(--texto); letter-spacing: -.5px; }
.fluxo .rotulo-no { font: 600 13px var(--fonte); fill: var(--texto-2); }
.fluxo .rotulo-ligacao { font: 600 12px var(--fonte); fill: var(--primaria); }
.fluxo .ligacao { fill: none; stroke: var(--borda-forte); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; }
.fluxo .pacotes { opacity: 0; transition: opacity .3s; }
.fluxo .pacotes circle { fill: var(--s-prontos); }
.fluxo .pacotes path { stroke: var(--s-enviados); fill: var(--superficie); }
/* estados */
.fluxo:not([data-estado="desconectado"]) .no-bling .disco { stroke: var(--ok); fill: var(--ok-suave); }
.fluxo[data-estado="desconectado"] .no-bling .disco { stroke: var(--erro); fill: var(--erro-suave); }
.fluxo[data-estado="desconectado"] .l1 { stroke: var(--erro); stroke-dasharray: 6 8; }
.fluxo[data-estado="desconectado"] .rotulo-ligacao, .fluxo[data-estado="pausado"] .rotulo-ligacao { fill: var(--erro); }
.fluxo[data-estado="pausado"] .l1 { stroke: var(--alerta); stroke-dasharray: 6 8; }
.fluxo[data-estado="pausado"] .rotulo-ligacao { fill: var(--alerta); }
.fluxo[data-estado="buscando"] .l1 { stroke: var(--s-prontos); animation: correr 0.8s linear infinite; }
.fluxo[data-estado="buscando"] .p1 { opacity: 1; }
.fluxo[data-estado="buscando"] .no-bling .anel, .fluxo[data-estado="buscando"] .no-painel .anel { stroke: var(--s-prontos); animation: pulsar 1.4s ease-out infinite; }
.fluxo[data-estado="buscando"] .no-painel .disco { stroke: var(--s-prontos); fill: var(--info-suave); }
.fluxo[data-estado="enviando"] .l2 { stroke: var(--s-enviados); animation: correr 0.8s linear infinite; }
.fluxo[data-estado="enviando"] .p2 { opacity: 1; }
.fluxo[data-estado="enviando"] .no-cliente .anel, .fluxo[data-estado="enviando"] .no-painel .anel { stroke: var(--s-enviados); animation: pulsar 1.4s ease-out infinite; }
.fluxo[data-estado="enviando"] .no-cliente .disco { stroke: var(--s-enviados); fill: var(--ok-suave); }
.fluxo[data-estado="ocioso"] .no-painel .disco { stroke: var(--primaria); }
@keyframes correr { to { stroke-dashoffset: -24; } }
@keyframes pulsar { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fluxo * { animation: none !important; } .fluxo .pacotes { display: none; } }
.ck-cartoes { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 12px; }
a.ck-cartao { color: var(--texto); } a.ck-cartao:hover { text-decoration: none; border-color: var(--primaria); }
.ck-cartao { display: flex; gap: 12px; align-items: center; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie-2); }
.ck-cartao .rotulo { display: block; font-size: 11.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ck-cartao strong { display: block; font-size: 15px; }
.ck-cartao small { color: var(--texto-3); font-size: 12px; }
.ck-luz { width: 12px; height: 12px; border-radius: 50%; background: var(--texto-3); flex: none; }
.ck-cartao.ok .ck-luz { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.ck-cartao.erro .ck-luz { background: var(--erro); box-shadow: 0 0 0 4px var(--erro-suave); animation: piscar 1.2s infinite; }
.ck-cartao.alerta .ck-luz { background: var(--alerta); box-shadow: 0 0 0 4px var(--alerta-suave); }
@keyframes piscar { 50% { opacity: .35; } }
.ck-and-texto { flex: 1; min-width: 0; }
.ck-girando { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--borda); flex: none; }
.ck-cartao.ativo .ck-girando { border-color: var(--s-prontos); border-right-color: transparent; animation: girar .9s linear infinite; }
.ck-cartao.ativo { border-color: var(--s-prontos); background: var(--info-suave); }
@keyframes girar { to { transform: rotate(360deg); } }
.barra { height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; margin: 6px 0 4px; }
.barra-cheia { height: 100%; background: linear-gradient(90deg, var(--s-prontos), var(--s-enviados)); border-radius: 999px; transition: width .6s ease;
  background-size: 200% 100%; animation: brilho 2s linear infinite; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: 0 0; } }
.mini-barra { width: 80px; height: 6px; background: var(--borda); border-radius: 999px; overflow: hidden; }
.mini-barra div { height: 100%; background: var(--s-enviados); }
@media (max-width: 900px) { .ck-cartoes { grid-template-columns: 1fr; } }

/* ---------- andamento da execução ---------- */
.andamento-cartao { border-color: var(--s-prontos); background: var(--info-suave); }
.andamento-cartao.parando { border-color: var(--alerta); background: var(--alerta-suave); }
.and-linha { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.and-icone { position: relative; width: 44px; height: 44px; flex: none; color: var(--s-prontos); }
.and-icone svg:first-child { position: absolute; inset: 0; animation: girar 1.2s linear infinite; }
.and-trilho { fill: none; stroke: var(--borda); stroke-width: 4; }
.and-arco { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 40 126; }
.and-caminhao { position: absolute; left: 12px; top: 12px; animation: sacudir .5s ease-in-out infinite alternate; }
@keyframes sacudir { from { transform: translateX(-1px); } to { transform: translateX(1.5px); } }
.and-texto { flex: 1; min-width: 220px; }
.and-texto .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 600; }
.and-texto strong { display: block; }
.and-pct { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--s-prontos); min-width: 80px; text-align: right; }

/* ---------- editor do e-mail ---------- */
.formato-email label { padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; display: inline-flex !important; flex-direction: row !important; gap: 6px; align-items: center; color: var(--texto-2) !important; }
.formato-email label + label { border-left: 1px solid var(--borda-forte); }
.formato-email label:has(input:checked) { background: var(--primaria-suave); color: var(--primaria) !important; }
.editor-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--borda-forte); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--superficie-2); }
.editor-barra button, .editor-barra select, .editor-barra .cor { font: 600 12.5px var(--fonte); padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--texto); cursor: pointer; }
.editor-barra button:hover, .editor-barra .cor:hover { background: var(--superficie); border-color: var(--borda); }
.editor-barra select { border-color: var(--borda); background: var(--superficie); max-width: 190px; }
.editor-barra .cor { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 4px; }
.editor-barra .cor input { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
.editor-barra .sep { width: 1px; height: 20px; background: var(--borda-forte); margin: 0 4px; }
.editor { min-height: 260px; max-height: 520px; overflow: auto; border: 1px solid var(--borda-forte); border-radius: 0 0 8px 8px; padding: 18px 22px; background: #fff; color: #17211d; font: 15px/1.55 Arial, Helvetica, sans-serif; }
.editor:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.editor h1 { font-size: 24px; } .editor h2 { font-size: 20px; } .editor h3 { font-size: 17px; }
.editor a { color: #0f5c4c; }
.editor a.botao-email, .previa-doc a[style*="display:inline-block"] { display: inline-block; background: #0f5c4c; color: #fff !important; padding: 10px 20px; border-radius: 8px; font-weight: bold; text-decoration: none; }
.editor blockquote { border-left: 4px solid #0f5c4c; margin: 0 0 14px; padding: 6px 14px; background: #f1f6f4; }
.editor img, .previa-doc img { max-width: 100%; height: auto; }
.previa-linha { margin-top: 18px; }
.previa-doc { padding: 22px 26px; background: #fff; color: #17211d; font: 15px/1.55 Arial, Helvetica, sans-serif; }

/* ---------- gestão de e-mails ---------- */
.dados.largo { grid-template-columns: 120px 1fr; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 4px 0 14px 12px; }
.linha-tempo li::before { content: ""; position: absolute; left: -26px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--texto-3); border: 2px solid var(--superficie); }
.linha-tempo li.lt-enviado::before, .linha-tempo li.lt-conferido_saiu::before { background: var(--ok); }
.linha-tempo li.lt-falha::before, .linha-tempo li.lt-verificar::before { background: var(--erro); }
.linha-tempo time { display: block; font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.conteudo-enviado { white-space: pre-wrap; font: 13.5px/1.55 var(--fonte); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; margin: 0; }
.o365 { display: grid; grid-template-columns: minmax(280px, 560px) 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.o365-fluxo { width: 100%; height: auto; }
.o-caixa { fill: var(--superficie-2); stroke: var(--borda-forte); stroke-width: 1.5; }
.o-ti { fill: var(--primaria-suave); stroke: var(--primaria); } .o-ms { fill: var(--info-suave); stroke: var(--info); }
.o365-fluxo text { fill: var(--texto); font-weight: 600; }
.o-seta { stroke: var(--texto-3); stroke-width: 2; fill: none; } .o-ponta { fill: var(--texto-3); }
.checklist { list-style: none; padding: 0; margin: 0 0 12px; }
.checklist li { padding: 5px 0 5px 26px; position: relative; font-size: 13.5px; }
.checklist li::before { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.checklist li.ok::before { content: "✓"; background: var(--ok-suave); color: var(--ok); }
.checklist li.pendente::before { content: "!"; background: var(--alerta-suave); color: var(--alerta); }
@media (max-width: 900px) { .o365 { grid-template-columns: 1fr; } }

/* ---------- manual ---------- */
.manual { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.manual-indice { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; font-size: 13px; }
.manual-indice strong { margin-bottom: 6px; }
.manual-indice a { color: var(--texto-2); padding: 4px 8px; border-radius: 6px; }
.manual-indice a:hover { background: var(--primaria-suave); color: var(--primaria); text-decoration: none; }
.manual-corpo section { scroll-margin-top: 76px; }
.manual-corpo h2 { font-size: 17px; }
.manual-corpo h3 { margin-top: 16px; }
.manual-corpo li { margin-bottom: 6px; }
.manual-dica { background: var(--primaria-suave); border-left: 4px solid var(--primaria); padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-top: 10px; }
.diagrama { width: 100%; height: auto; margin: 8px 0 12px; }
.d-caixa { fill: var(--superficie-2); stroke: var(--borda-forte); stroke-width: 1.5; }
.d-destaque { fill: var(--primaria-suave); stroke: var(--primaria); }
.d-titulo { font: 700 20px var(--fonte); fill: var(--texto); text-anchor: middle; }
.d-texto { font: 13px var(--fonte); fill: var(--texto-2); text-anchor: middle; }
.d-linha { stroke: var(--texto-3); stroke-width: 2.5; fill: none; }
.d-tracejada { stroke-dasharray: 6 6; }
.d-ponta { fill: var(--texto-3); }
.d-num { fill: var(--primaria); } .d-num-t { font: 700 15px var(--fonte); fill: #fff; text-anchor: middle; }
.funil rect { fill: var(--info-suave); stroke: var(--s-prontos); stroke-width: 1.2; }
.funil rect.f-fim { fill: var(--ok-suave); stroke: var(--ok); }
.funil text { font: 600 14px var(--fonte); fill: var(--texto); text-anchor: middle; }
.estados text { font: 700 15px var(--fonte); text-anchor: middle; fill: var(--texto); }
.e-pend { fill: var(--alerta-suave); stroke: var(--alerta); } .e-pronto { fill: var(--info-suave); stroke: var(--info); }
.e-ok { fill: var(--ok-suave); stroke: var(--ok); } .e-desc { fill: var(--superficie-2); stroke: var(--borda-forte); }
.e-erro { fill: var(--erro-suave); stroke: var(--erro); }
.passos { counter-reset: p; list-style: none; padding: 0; }
.passos li { counter-increment: p; position: relative; padding: 4px 0 10px 40px; }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--primaria); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.linha-dia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.etapa-dia { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; background: var(--superficie-2); position: relative; }
.etapa-dia .hora { display: inline-block; font: 700 11px var(--fonte); text-transform: uppercase; color: var(--primaria); background: var(--primaria-suave); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.etapa-dia strong { display: block; } .etapa-dia p { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); }
.botao.mock { pointer-events: none; }
.legenda-cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.legenda-cockpit > div { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; background: var(--superficie-2); font-size: 13px; }
.legenda-cockpit p { margin: 4px 0 0; color: var(--texto-2); }
.mini-no { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid; margin-bottom: 6px; }
.mini-no.verde { border-color: var(--ok); background: var(--ok-suave); } .mini-no.vermelho { border-color: var(--erro); background: var(--erro-suave); }
.mini-no.laranja { border-color: var(--alerta); background: var(--alerta-suave); }
.mini-fluxo { display: flex; gap: 6px; height: 28px; align-items: center; margin-bottom: 6px; }
.mini-fluxo i { width: 9px; height: 9px; border-radius: 50%; animation: piscar 1.2s infinite; }
.mini-fluxo i:nth-child(2) { animation-delay: .4s; } .mini-fluxo i:nth-child(3) { animation-delay: .8s; }
.mini-fluxo.azul i { background: var(--s-prontos); } .mini-fluxo.verde i { background: var(--s-enviados); border-radius: 2px; width: 12px; }
.mock-andamento { display: flex; gap: 14px; align-items: center; border: 1px solid var(--s-prontos); background: var(--info-suave); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 10px; }
.mock-andamento > div { flex: 1; } .mock-andamento strong { display: block; } .mock-andamento b { font-size: 26px; color: var(--s-prontos); }
.mock-andamento .rotulo { text-transform: uppercase; font-size: 11px; color: var(--texto-3); font-weight: 600; }
.ck-girando.gira { border-color: var(--s-prontos); border-right-color: transparent; animation: girar .9s linear infinite; }
.mock-editor { border: 1px solid var(--borda-forte); border-radius: 8px; overflow: hidden; margin: 8px 0 12px; max-width: 640px; }
.mock-barra { display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 10px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); font-size: 12px; }
.mock-doc { padding: 14px 18px; background: #fff; color: #17211d; font: 14px/1.7 Arial, sans-serif; }
.mock-doc .g { font-size: 18px; }
.mock-botao { display: inline-block; margin-top: 8px; background: #0f5c4c; color: #fff; padding: 6px 14px; border-radius: 6px; font-weight: bold; }
.novidade { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.novidade summary { font-weight: 700; cursor: pointer; }
.novidade ul { margin: 8px 0 4px; } .novidade li.nv-1 { margin-left: 18px; list-style: circle; font-size: 13px; }
@media (max-width: 1000px) { .manual { grid-template-columns: 1fr; } .manual-indice { position: static; } .linha-dia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .linha-dia { grid-template-columns: 1fr; } }

/* ---------- agendamentos ---------- */
.linha-apagada td { opacity: .6; }
.chave { width: 40px; height: 22px; border-radius: 999px; border: 0; background: var(--borda-forte); position: relative; cursor: pointer; padding: 0; }
.chave span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.chave.ligada { background: var(--primaria); } .chave.ligada span { left: 21px; }
.grade-form .largo-2 { grid-column: span 2; }
label.check.alinhar { align-self: end; padding-bottom: 8px; }
.dias-semana { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dias-semana .dia { flex-direction: row !important; }
.dias-semana .dia input { display: none; }
.dias-semana .dia span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda-forte); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--texto-2); }
.dias-semana .dia input:checked + span { background: var(--primaria); border-color: var(--primaria); color: #fff; }
fieldset.bloco + fieldset.bloco { margin-top: 12px; }
#form-agendamento fieldset.bloco { padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); }
.resumo-previa { max-width: 680px; }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.form label.modo { flex-direction: row !important; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; cursor: pointer; background: var(--superficie-2); color: var(--texto) !important; font-weight: 400 !important; }
.form label.modo:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.modo strong { display: block; font-size: 13.5px; } .modo small { color: var(--texto-2); font-size: 12px; }
@media (max-width: 900px) { .modos { grid-template-columns: 1fr; } }

/* ---------- tema ---------- */
:root[data-tema="escuro"] { --sobre-primaria: #0f1412; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --sobre-primaria: #0f1412; } }
.botao-tema { display: inline-grid; place-items: center; background: none; border: 1px solid var(--borda); border-radius: 8px; width: 32px; height: 30px; cursor: pointer; color: var(--texto-2); font-size: 15px; line-height: 1; }
.botao-tema:hover { border-color: var(--primaria); color: var(--primaria); }
.temas { display: flex; gap: 8px; flex-wrap: wrap; }
.form label.tema-opcao { flex-direction: row !important; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; cursor: pointer; color: var(--texto) !important; }
.form label.tema-opcao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.amostra { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda-forte); }
.exemplo-ag { display: grid; gap: 8px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 12px 14px; margin: 8px 0 12px; font-size: 13.5px; }
.exemplo-ag .rotulo-campo { display: inline-block; min-width: 130px; }
.mock-resumo { border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; max-width: 560px; background: var(--superficie-2); margin: 8px 0 12px; }
.mr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.mr-kpis span { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; }
.mr-kpis small { display: block; font-size: 11px; color: var(--texto-3); } .mr-kpis b { font-size: 18px; } .mr-kpis b.r { color: var(--erro); }
.mr-barras { display: grid; gap: 4px; margin-bottom: 6px; } .mr-barras i { display: block; height: 8px; border-radius: 3px; background: var(--s-enviados); }

/* ---------- Agendamento rodando no cockpit ---------- */
.fluxo { position: relative; }
.ck-auto { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--info-suave); color: var(--info); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.ck-auto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: piscar 1.2s ease-in-out infinite; }

/* ---------- Infográfico dos agendamentos ---------- */
.ag-quadro .cartao-topo { align-items: flex-start; }
.ag-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.ag-cartao { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color .3s, box-shadow .3s; }
.ag-cartao.est-rodando { border-color: var(--s-prontos); box-shadow: 0 0 0 3px var(--info-suave); }
.ag-cartao.est-desligado, .ag-cartao.est-agendador_desligado { opacity: .72; }
.ag-cab { display: flex; gap: 10px; align-items: flex-start; }
.ag-cab > div { min-width: 0; flex: 1; }
.ag-cab strong { display: block; font-size: 14px; overflow-wrap: anywhere; line-height: 1.3; }
.ag-cab small { display: block; color: var(--texto-3); font-size: 12px; }
.ag-icone { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--primaria-suave); color: var(--primaria); }
.tipo-envio .ag-icone { background: var(--ok-suave); color: var(--ok); }
.tipo-resumo .ag-icone { background: var(--info-suave); color: var(--info); }
.est-rodando .ag-icone svg { animation: girar 1.6s linear infinite; }
.tipo-envio.est-rodando .ag-icone svg, .tipo-resumo.est-rodando .ag-icone svg { animation: piscar 1s ease-in-out infinite; }
.ag-estado { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-2); }
.est-rodando .ag-estado { background: var(--info-suave); color: var(--info); border-color: transparent; }
.est-aguardando .ag-estado { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.est-pausado .ag-estado { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.est-limite .ag-estado, .est-agendador_desligado .ag-estado { background: var(--erro-suave); color: var(--erro); border-color: transparent; }
.ag-quando { font-size: 12px; color: var(--texto-2); }
.ag-crono { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borda); }
.ag-crono small { display: block; font-size: 12px; color: var(--texto-3); }
.ag-tempo { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.ag-anel { width: 40px; height: 40px; flex: none; transform: rotate(-90deg); }
.ag-anel circle { fill: none; stroke-width: 4; }
.ag-anel .t { stroke: var(--borda); }
.ag-anel .p { stroke: var(--primaria); stroke-linecap: round; transition: stroke-dasharray .9s linear; }
.ag-crono.quase { border-color: var(--alerta); }
.ag-crono.quase .ag-anel .p { stroke: var(--alerta); }
.ag-crono.quase .ag-tempo { color: var(--alerta); animation: piscar 1s ease-in-out infinite; }
.ag-crono.rodando { color: var(--info); font-weight: 600; border-color: var(--s-prontos); }
.ag-crono.vencido .ag-tempo { font-family: var(--fonte); font-size: 15px; }
.ag-crono.parado { color: var(--texto-3); font-size: 13px; }
.ag-pulso { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--s-prontos); flex: none; }
.ag-pulso::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--s-prontos); animation: pulsar 1.3s ease-out infinite; }
.ag-ultima { font-size: 12px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ag-ultima .rotulo { font-weight: 600; color: var(--texto-3); }
.ag-ultima small { color: var(--texto-3); }

.ag-linha { border-top: 1px solid var(--borda); padding-top: 12px; }
.ag-linha-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.legenda span.vazada::before { background: transparent; border: 2px dashed var(--texto-3); width: 8px; height: 8px; }
.ag-timeline { --ag-rotulo: 170px; position: relative; padding-bottom: 4px; }
.ag-eixo { position: relative; height: 18px; margin-left: var(--ag-rotulo); border-bottom: 1px solid var(--borda); }
.ag-hora { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--texto-3); }
.ag-hora:first-child { transform: none; }
.ag-hora:last-child { transform: translateX(-100%); }
.ag-faixa { display: grid; grid-template-columns: var(--ag-rotulo) 1fr; align-items: center; min-height: 28px; border-bottom: 1px dashed var(--borda); }
.ag-faixa-nome { font-size: 12px; color: var(--texto-2); padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-trilho { position: relative; height: 28px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--borda) calc(12.5% - 1px), var(--borda) 12.5%); }
.ag-ponto { position: absolute; top: 8px; height: 12px; min-width: 6px; border-radius: 4px; background: var(--texto-3); transform: translateX(-3px); }
.ag-ponto.r-ok { background: var(--ok); }
.ag-ponto.r-parcial { background: var(--alerta); }
.ag-ponto.r-falha, .ag-ponto.r-interrompida { background: var(--erro); }
.ag-ponto.r-rodando { background: var(--s-prontos); animation: piscar 1s ease-in-out infinite; }
.ag-ponto.vazada { width: 12px !important; height: 12px; border-radius: 50%; background: transparent; border: 2px dashed var(--texto-3); transform: translateX(-6px); }
a.ag-ponto:hover { outline: 2px solid var(--primaria); outline-offset: 1px; }
.ag-agora { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--erro); pointer-events: none; }
.ag-agora span { position: absolute; top: -2px; left: 4px; font-size: 10px; font-weight: 700; color: var(--erro); text-transform: uppercase; background: var(--superficie); padding: 0 3px; border-radius: 3px; }
@media (max-width: 640px) {
  .ag-timeline { --ag-rotulo: 92px; }
  .ag-hora:nth-child(even) { display: none; }
  .ag-tempo { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-auto::before, .ag-pulso::after, .ag-ponto.r-rodando, .est-rodando .ag-icone svg, .ag-crono.quase .ag-tempo { animation: none; }
}

/* ---------- Consumo da API do Bling (R13) ---------- */
/* Cores categóricas (paleta validada: separação para daltonismo e contraste por tema). Cor fixa por série. */
:root { --cat-0: #98a29e; --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #6250d6; --cat-8: #e34948; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --cat-0: #6d7873; --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767; }
}
:root[data-tema="escuro"] { --cat-0: #6d7873; --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.uso-hoje { border-left: 4px solid var(--ok); }
.uso-hoje.atencao { border-left-color: var(--alerta); }
.uso-hoje.bloqueado { border-left-color: var(--erro); }
.uso-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.uso-numero strong { font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.uso-numero span { color: var(--texto-2); }
.uso-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--ok-suave); color: var(--ok); }
.atencao .uso-estado { background: var(--alerta-suave); color: var(--alerta); }
.bloqueado .uso-estado { background: var(--erro-suave); color: var(--erro); }
.uso-medidor { position: relative; height: 14px; border-radius: 7px; background: var(--superficie-2); border: 1px solid var(--borda); margin: 14px 0 26px; }
.uso-cheio { height: 100%; border-radius: 7px; background: var(--ok); transition: width .6s ease; }
.atencao .uso-cheio { background: var(--alerta); }
.bloqueado .uso-cheio { background: var(--erro); }
.uso-marca { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--borda-forte); }
.uso-marca i { position: absolute; top: 20px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--texto-3); }
.uso-marca:last-child i { transform: translateX(-100%); }
.uso-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.uso-fatos > div { display: flex; flex-direction: column; gap: 2px; }
.uso-fatos strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.uso-fatos small { color: var(--texto-3); font-size: 11.5px; }
.uso-legenda { margin: 4px 0 10px; }
.uso-grafico .uso-limite { stroke: var(--texto-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.uso-grafico .uso-limite-rotulo { fill: var(--texto-2); font-weight: 600; }
.uso-grafico .uso-area:hover { fill: var(--texto); fill-opacity: .05; }
.uso-tabela { margin-top: 10px; }
.uso-tabela summary { cursor: pointer; color: var(--primaria); font-size: 13px; }
.uso-tabela .tabela { margin-top: 8px; }
.dica-grafico .ponto { width: 8px; height: 8px; }
.ck-cartao .uso-mini { height: 6px; border-radius: 3px; background: var(--superficie-2); border: 1px solid var(--borda); margin-top: 6px; overflow: hidden; }
.ck-cartao .uso-mini i { display: block; height: 100%; background: var(--ok); transition: width .6s; }
.ck-cartao.alerta .uso-mini i { background: var(--alerta); }
.ck-cartao.erro .uso-mini i { background: var(--erro); }
@media (max-width: 640px) { .uso-numero strong { font-size: 26px; } }

/* ---------- Simulação e resultado incerto (revisão TI) ---------- */
.selo-simulado { background: var(--superficie-2); color: var(--texto-2); border: 1px dashed var(--borda-forte); }
.lt-simulado strong, .lt-bloqueado strong { color: var(--texto-2); }
.lt-incerto strong { color: var(--alerta); }