/* ══════════════════════════════════════════════════════════════════════════
   Painel da régua de pós-venda
   Paleta validada com o validador de daltonismo (OKLab ΔE) contra as duas
   superfícies reais deste painel. Os dois estados de identidade — "em dia"
   (azul) e "processando" (verde-água) — passam em todos os pares nos dois
   temas. Amarelo/vermelho são tokens de STATUS: sempre acompanhados de ícone
   e rótulo, nunca cor sozinha.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --plano:        #f4f4f1;
  --superficie:   #ffffff;
  --superficie-2: #fafaf8;
  --no-bg:        #ffffff;
  --no-borda:     rgba(11, 11, 11, 0.11);

  --tinta:        #0b0b0b;
  --tinta-2:      #52514e;
  --tinta-fraca:  #898781;

  --grade:        #e1e0d9;
  --eixo:         #c3c2b7;
  --borda:        rgba(11, 11, 11, 0.10);
  --anel-trilha:  #e8e7e0;
  --pontos:       rgba(11, 11, 11, 0.10);
  --trilho:       #d9d8d0;

  /* estados — ver comentário do topo */
  --st-em-dia:      #2a78d6;
  --st-atrasado:    #fab219;
  --st-processando: #1baf7a;
  --st-travado:     #d03b3b;
  --st-finalizado:  #0ca30c;
  /* Cancelado é cinza de propósito: não é problema (vermelho) nem conclusão
     (verde) — é um pedido que saiu por vontade do cliente. O ícone ✕ e o
     rótulo carregam o significado; a cor só separa do verde ao lado. */
  --st-cancelado:   #6f6e78;

  --sombra-1: 0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 14px rgba(11, 11, 11, 0.05);
  --sombra-no: 0 1px 2px rgba(11, 11, 11, 0.06), 0 6px 18px rgba(11, 11, 11, 0.07);
  --raio: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --plano:        #0b0c0f;
    --superficie:   #15161b;
    --superficie-2: #1b1d23;
    --no-bg:        #1a1c22;
    --no-borda:     rgba(255, 255, 255, 0.13);

    --tinta:        #ffffff;
    --tinta-2:      #c3c2b7;
    --tinta-fraca:  #898781;

    --grade:        #24262c;
    --eixo:         #33363e;
    --borda:        rgba(255, 255, 255, 0.10);
    --anel-trilha:  #2a2d35;
    --pontos:       rgba(255, 255, 255, 0.10);
    --trilho:       #2e313a;

    --st-em-dia:      #3987e5;
    --st-atrasado:    #fab219;
    --st-processando: #199e70;
    --st-travado:     #d03b3b;
    --st-finalizado:  #0ca30c;
    --st-cancelado:   #9a99a5;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 26px rgba(0, 0, 0, 0.34);
    --sombra-no: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.42);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --plano:        #0b0c0f;
  --superficie:   #15161b;
  --superficie-2: #1b1d23;
  --no-bg:        #1a1c22;
  --no-borda:     rgba(255, 255, 255, 0.13);

  --tinta:        #ffffff;
  --tinta-2:      #c3c2b7;
  --tinta-fraca:  #898781;

  --grade:        #24262c;
  --eixo:         #33363e;
  --borda:        rgba(255, 255, 255, 0.10);
  --anel-trilha:  #2a2d35;
  --pontos:       rgba(255, 255, 255, 0.10);
  --trilho:       #2e313a;

  --st-em-dia:      #3987e5;
  --st-atrasado:    #fab219;
  --st-processando: #199e70;
  --st-travado:     #d03b3b;
  --st-finalizado:  #0ca30c;
  --st-cancelado:   #9a99a5;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 26px rgba(0, 0, 0, 0.34);
  --sombra-no: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.42);
}

/* ─────────────────────────────  base  ───────────────────────────── */

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

/* Sem isto, qualquer elemento com display explícito (inline-flex, grid…)
   ignora o atributo [hidden] e continua aparecendo — vazio. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
code {
  font: 500 0.92em ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  color: var(--tinta-2);
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:where(button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--st-em-dia);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─────────────────────────────  topo  ───────────────────────────── */

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 34px);
  background: color-mix(in srgb, var(--plano) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: 12px; }

/*
 * Marca do SendTrace: um rastro de disparos subindo, com o ponto ativo à
 * frente. É a mesma leitura das conexões animadas do canvas — o pacote que
 * anda e deixa rastro. Um losango genérico não dizia nada sobre o produto.
 *
 * Os pontos crescem e ganham opacidade em direção à ponta: mesmo em 16 px, no
 * favicon, a direção continua legível — que é o único detalhe que precisa
 * sobreviver nesse tamanho.
 */
.marca-selo { width: 28px; height: 28px; flex: none; display: block; }
.marca-selo .rastro-linha { stroke: var(--st-processando); }
.marca-selo .rastro-eco   { fill: var(--st-processando); }
.marca-selo .rastro-ponta { fill: var(--st-em-dia); }

.topo h1, .login-marca h1 { font-family: inherit; }
/* O nome é a única palavra com peso alto no topo: precisa ganhar do resto. */
.marca-nome { letter-spacing: -0.015em; }
.marca-nome b { font-weight: 680; }

.topo h1 { font-size: 15.5px; font-weight: 640; letter-spacing: -0.012em; }
.marca-sub { font-size: 11.5px; color: var(--tinta-fraca); margin-top: 1px; }

.topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pilula-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  font-size: 11.5px; font-weight: 500; color: var(--tinta-2);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px;
}
.pulso {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tinta-fraca);
}
.pilula-live[data-estado="ok"] .pulso {
  background: var(--st-processando);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-processando) 60%, transparent);
  animation: bater 2.4s ease-out infinite;
}
.pilula-live[data-estado="erro"] .pulso { background: var(--st-travado); }
.pilula-live[data-estado="demo"] .pulso { background: var(--st-atrasado); }

@keyframes bater {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-processando) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.btn {
  appearance: none;
  padding: 6px 12px;
  font: 500 12px/1.35 inherit; color: var(--tinta-2);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px;
  cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.btn:hover { background: var(--superficie-2); color: var(--tinta); border-color: var(--eixo); }
.btn-icone { padding: 6px 10px; font-size: 13px; }
.btn[aria-pressed="true"] {
  color: var(--plano);
  background: var(--tinta); border-color: var(--tinta);
}
.btn-fantasma { background: transparent; }
.btn:disabled { opacity: .42; cursor: default; }

.campo-sel select, .campo select, .campo input {
  appearance: none;
  padding: 6px 26px 6px 10px;
  font: 500 12px/1.35 inherit; color: var(--tinta-2);
  background: var(--superficie) no-repeat right 9px center/9px 6px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 13px center, right 9px center;
  background-repeat: no-repeat;
  border: 1px solid var(--borda); border-radius: 9px; cursor: pointer;
}
.campo input {
  background-image: none; cursor: text; padding-right: 10px; width: 100%;
}

/*
 * Seletor de produto do topo. Com um produto escolhido ele fica MARCADO: o
 * recorte vale para a página inteira, e um controle discreto faria alguém ler
 * "1.240 na régua" como o total da operação quando é o total de um produto só.
 */
.campo-produto select { max-width: 210px; text-overflow: ellipsis; }
.campo-produto select[data-ativo="sim"] {
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--st-em-dia) 55%, var(--borda));
  background-color: color-mix(in srgb, var(--st-em-dia) 10%, var(--superficie));
}
.campo-produto select:disabled { opacity: .45; cursor: default; }

/* ────────────────────────────  faixas  ──────────────────────────── */

.faixa {
  padding: 10px clamp(16px, 3vw, 34px);
  font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px solid var(--borda);
}
.faixa--demo {
  color: var(--tinta-2);
  background: color-mix(in srgb, var(--st-atrasado) 13%, var(--plano));
}
.faixa--erro {
  color: var(--tinta);
  background: color-mix(in srgb, var(--st-travado) 15%, var(--plano));
}
.faixa strong { color: var(--tinta); }

/* ───────────────────────────  conteúdo  ─────────────────────────── */

.conteudo {
  max-width: 1560px; margin: 0 auto;
  padding: clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 34px) 56px;
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  transition: opacity .18s ease;
}

/* Item de grid tem min-width:auto, então o conteúdo mais largo (a tabela, o
   SVG do canvas) empurraria todas as seções e faria a PÁGINA rolar na
   horizontal. O scroll tem que ficar dentro do container de cada um. */
.conteudo > *, .grade-3 > *, .linha-heroi > *, .kpis > * { min-width: 0; }
/* Recarga não pisca esqueleto: segura o render anterior levemente apagado. */
body[data-recarregando="sim"] .conteudo { opacity: .68; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: clamp(14px, 1.5vw, 20px);
}

.cartao-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
}
.cartao-cabeca h2 { font-size: 13.5px; font-weight: 640; letter-spacing: -0.008em; }
.cartao-sub {
  font-size: 12px; color: var(--tinta-fraca); margin-top: 3px; max-width: 62ch;
}

.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.span-2 { grid-column: span 2; }

/* ──────────────────────  herói + indicadores  ───────────────────── */

.linha-heroi { display: grid; grid-template-columns: minmax(230px, 1fr) 3fr; gap: clamp(14px, 1.6vw, 20px); }

.heroi { display: flex; flex-direction: column; justify-content: center; }
.heroi-rotulo { font-size: 12px; color: var(--tinta-fraca); }
.heroi-valor {
  /* Figuras proporcionais de propósito: tabular-nums deixa números grandes soltos. */
  font-size: clamp(46px, 5vw, 62px); font-weight: 650; letter-spacing: -0.035em;
  line-height: 1.02; margin: 6px 0 4px;
}
.heroi-nota { font-size: 12px; color: var(--tinta-2); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }

.kpi {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra-1);
  padding: 14px 15px 13px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; cursor: pointer;
  transition: border-color .14s, transform .14s;
}
.kpi:hover { border-color: var(--eixo); transform: translateY(-1px); }
.kpi-topo { display: flex; align-items: center; gap: 6px; }
.kpi-ico { font-size: 10px; line-height: 1; }
.kpi-rotulo { font-size: 11.5px; color: var(--tinta-2); }
.kpi-valor { font-size: 26px; font-weight: 640; letter-spacing: -0.02em; }
.kpi-nota { font-size: 11px; color: var(--tinta-fraca); }

.kpi[data-tom="em_dia"]      .kpi-ico { color: var(--st-em-dia); }
.kpi[data-tom="atrasado"]    .kpi-ico { color: var(--st-atrasado); }
.kpi[data-tom="processando"] .kpi-ico { color: var(--st-processando); }
.kpi[data-tom="travado"]     .kpi-ico { color: var(--st-travado); }
.kpi[data-tom="finalizado"]  .kpi-ico { color: var(--st-finalizado); }
.kpi[data-tom="cancelado"]   .kpi-ico { color: var(--st-cancelado); }

/* ────────────────────────────  legenda  ─────────────────────────── */

.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legenda-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--tinta-2);
}
.legenda-marca { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legenda-item i { font-style: normal; font-size: 9px; }

/* ─────────────────────────  canvas do fluxo  ────────────────────── */

.cartao--canvas { padding-bottom: 12px; }

.canvas-area {
  position: relative;
  border-radius: 13px;
  border: 1px solid var(--borda);
  background-color: var(--superficie-2);
  background-image: radial-gradient(circle at 1px 1px, var(--pontos) 1px, transparent 0);
  background-size: 22px 22px;
  padding: 22px 24px;
  overflow: hidden;
  display: flex; justify-content: center;
  min-height: 240px;
}

.fluxo { display: block; overflow: visible; }

/* nós */
.no { cursor: pointer; }
.no-cartao {
  fill: var(--no-bg); stroke: var(--no-borda); stroke-width: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .07));
}
.no:hover .no-cartao { stroke: var(--eixo); }
.no[data-vazio="sim"] .no-cartao { fill: color-mix(in srgb, var(--no-bg) 72%, transparent); }
.no--terminal .no-cartao { stroke-dasharray: 5 4; }

.no-foco { fill: none; stroke: none; }
.no:focus { outline: none; }
.no:focus-visible .no-foco { stroke: var(--st-em-dia); stroke-width: 2; }

.no-anel-idx {
  font-size: 12.5px; font-weight: 650; fill: var(--tinta-2);
}
.anel-trilha { stroke: var(--anel-trilha); }

.no-sobrancelha {
  font-size: 9.5px; font-weight: 620; letter-spacing: .1em;
  fill: var(--tinta-fraca);
}
.no-nome { font-size: 14.5px; font-weight: 620; fill: var(--tinta); letter-spacing: -0.01em; }

/* Canal: glifo + palavra, sempre. Nunca uma cor sozinha carregando o sentido. */
.no-canal-txt { font-size: 10px; font-weight: 560; fill: var(--tinta-2); letter-spacing: .01em; }
.no-canal-glifo {
  fill: none; stroke: var(--tinta-2); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
}

/* Texto da mensagem que a etapa envia — o conteúdo do fluxo, não só o rótulo. */
.no-mensagem { font-size: 11px; fill: var(--tinta-2); }
.no[data-inativa="sim"] .no-cartao { stroke-dasharray: 4 4; }
.no[data-inativa="sim"] .no-nome,
.no[data-inativa="sim"] .no-mensagem { fill: var(--tinta-fraca); }
.no-valor { font-size: 34px; font-weight: 650; fill: var(--tinta); letter-spacing: -0.03em; }
.no[data-vazio="sim"] .no-valor { fill: var(--tinta-fraca); }
.no-unidade { font-size: 11.5px; fill: var(--tinta-fraca); }
.no-legenda { font-size: 10px; fill: var(--tinta-fraca); letter-spacing: .02em; }

.micro-barra { fill: color-mix(in srgb, var(--st-em-dia) 34%, transparent); }
.micro-barra--proxima { fill: var(--st-em-dia); }
.micro-vazio { fill: var(--trilho); }
.micro-base { stroke: var(--grade); stroke-width: 1; }

.no-alerta-ico, .no-alerta-txt { font-size: 11px; }
.no-alerta-txt { fill: var(--tinta-2); }
.no[data-tom="neutro"]   .no-alerta-ico, .no[data-tom="neutro"]   .no-alerta-txt { fill: var(--tinta-fraca); }
.no[data-tom="ativo"]    .no-alerta-ico { fill: var(--st-em-dia); }
.no[data-tom="atrasado"] .no-alerta-ico { fill: var(--st-atrasado); }
.no[data-tom="travado"]  .no-alerta-ico { fill: var(--st-travado); }
.no[data-tom="final"]    .no-alerta-ico { fill: var(--st-finalizado); }

/* conexões */
.conexao-trilho { fill: none; stroke: var(--trilho); stroke-width: 2; stroke-linecap: round; }
.conexao-porta  { fill: var(--trilho); }
.conexao-seta   { fill: var(--trilho); }
.conexao[data-nivel="2"] .conexao-seta,
.conexao[data-nivel="3"] .conexao-seta { fill: var(--st-em-dia); }
.conexao-fluxo {
  fill: none; stroke: var(--st-em-dia); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 7 11; opacity: 0;
}
.conexao[data-nivel="0"] .conexao-fluxo { opacity: 0; }
.conexao[data-nivel="1"] .conexao-fluxo { opacity: .42; animation: correr linear infinite; }
.conexao[data-nivel="2"] .conexao-fluxo { opacity: .72; animation: correr linear infinite; }
.conexao[data-nivel="3"] .conexao-fluxo { opacity: 1;   animation: correr linear infinite; stroke-width: 2.5; }
.conexao[data-nivel="2"] .conexao-porta,
.conexao[data-nivel="3"] .conexao-porta { fill: var(--st-em-dia); }

@keyframes correr { to { stroke-dashoffset: -36; } }

.pacote { fill: var(--st-em-dia); filter: url(#brilho-fluxo); }

/* Etiqueta de espera entre uma mensagem e a próxima. */
.espera-fundo {
  fill: var(--superficie); stroke: var(--borda); stroke-width: 1;
}
.espera-txt { font-size: 10px; fill: var(--tinta-2); font-variant-numeric: tabular-nums; }
.espera-real { font-size: 9.5px; fill: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.espera[data-derivou="sim"] .espera-real { fill: var(--tinta-2); }
/* Deriva: a espera real está a mais de 25% do que a régua manda. Cor + o
   próprio número "real X" ao lado, nunca só a cor. */
.espera[data-derivou="sim"] .espera-fundo {
  stroke: color-mix(in srgb, var(--st-atrasado) 62%, transparent);
  fill: color-mix(in srgb, var(--st-atrasado) 13%, var(--superficie));
}
.espera[data-derivou="sim"] .espera-txt { fill: var(--tinta); }

.entrada-linha { fill: none; stroke: var(--trilho); stroke-width: 2; stroke-dasharray: 3 4; }
.entrada-ponto { fill: var(--trilho); }
.entrada-txt { font-size: 9.5px; letter-spacing: .09em; fill: var(--tinta-fraca); }

/* Fica ABAIXO do canvas, nunca por cima: como overlay ele tapava a segunda
   linha da serpentina justamente no estado em que o usuário quer ver os nós. */
.canvas-vazio {
  margin: 12px auto 0; max-width: 620px; text-align: center;
  padding: 12px 18px; border-radius: 12px;
  font-size: 12px; color: var(--tinta-2);
  background: var(--superficie-2); border: 1px solid var(--borda);
}
.canvas-vazio-tit { font-weight: 620; color: var(--tinta); margin-bottom: 3px; }

.canvas-rodape {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 2px 0; font-size: 11px; color: var(--tinta-fraca);
}
.canvas-rodape .ponto { opacity: .6; }

/* ────────────────────────────  gráficos  ────────────────────────── */

.grafico { width: 100%; }
.gr { display: block; }
.gr-grade line { stroke: var(--grade); stroke-width: 1; }   /* hairline sólida */
.gr-base { stroke: var(--eixo); stroke-width: 1; }
.gr-tick { font-size: 10px; fill: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.gr-barra { fill: var(--st-em-dia); }
.gr-rotulo-pico { font-size: 10.5px; font-weight: 620; fill: var(--tinta-2); }
.gr-vazio { font-size: 12px; fill: var(--tinta-fraca); }
.gr-foco { fill: color-mix(in srgb, var(--st-em-dia) 12%, transparent); pointer-events: none; }
.gr-captura { cursor: crosshair; }
.gr-agora { stroke: var(--tinta-fraca); stroke-width: 1; }
.gr-agora-txt { font-size: 9.5px; fill: var(--tinta-fraca); letter-spacing: .06em; }

.destaque-atraso {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  font-size: 12px; color: var(--tinta-2);
  background: color-mix(in srgb, var(--st-atrasado) 15%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--st-atrasado) 34%, transparent);
}
.destaque-atraso b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ────────────────────────  alertas / status  ────────────────────── */

.alertas { display: flex; flex-direction: column; gap: 2px; max-height: 330px; overflow-y: auto; }
.alerta-linha {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline;
  padding: 9px 8px; border-radius: 9px;
}
.alerta-linha + .alerta-linha { border-top: 1px solid var(--borda); border-radius: 0; }
.alerta-linha:hover { background: var(--superficie-2); }
.alerta-ico { font-size: 10px; line-height: 1.6; }
.alerta-txt { font-size: 12.5px; color: var(--tinta); }
.alerta-sub { font-size: 11px; color: var(--tinta-fraca); margin-top: 2px; }
.alerta-val { font-size: 12px; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.alerta-linha[data-tom="travado"] .alerta-ico { color: var(--st-travado); }
.alerta-linha[data-tom="atrasado"] .alerta-ico { color: var(--st-atrasado); }
.alerta-linha[data-tom="ok"] .alerta-ico { color: var(--st-finalizado); }

.vazio-suave { padding: 22px 8px; font-size: 12.5px; color: var(--tinta-fraca); text-align: center; }

.divisor { border: 0; border-top: 1px solid var(--borda); margin: 18px 0 14px; }
.cabeca-menor { margin-bottom: 10px; }

/* ── por canal ── */
.canais { display: flex; flex-direction: column; gap: 14px; }
.canal-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.canal-ico { width: 15px; height: 15px; }
.canal-ico path {
  fill: none; stroke: var(--tinta-2); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.canal-nome { font-size: 12.5px; color: var(--tinta); }
.canal-num { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.canal-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.canal-barra span { display: block; height: 100%; border-radius: 3px; background: var(--st-em-dia); }
.canal-sub { grid-column: 1 / -1; font-size: 11px; color: var(--tinta-fraca); margin-top: -4px; }
.canal-sub b { color: var(--tinta-2); font-variant-numeric: tabular-nums; font-weight: 550; }

.status-bruto { display: flex; flex-direction: column; gap: 8px; }
.status-linha { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.status-nome { font-size: 12.5px; color: var(--tinta); }
.status-num { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.status-barra { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.status-barra span { display: block; height: 100%; border-radius: 3px; background: var(--st-em-dia); }

/* ─────────────────────────  filtros + tabela  ───────────────────── */

.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--borda);
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 10.5px; color: var(--tinta-fraca); letter-spacing: .02em; }
.campo--cresce { flex: 1 1 240px; min-width: 200px; }

.tabela-envolve { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 940px; }
.tabela th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca);
  padding: 10px 12px; border-bottom: 1px solid var(--eixo); white-space: nowrap;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cel-mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; font-size: 11.5px; color: var(--tinta-2); }
.cel-forte { color: var(--tinta); font-weight: 550; }
.cel-fraca { color: var(--tinta-fraca); }
.cel-sub { display: block; font-size: 11px; color: var(--tinta-fraca); margin-top: 2px; }
.cel-erro { color: var(--tinta-2); max-width: 260px; }

.selo-etapa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 11.5px; color: var(--tinta-2);
  background: var(--superficie-2); border: 1px solid var(--borda); white-space: nowrap;
}
.selo-etapa b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Estado sempre = ícone + rótulo. A cor nunca carrega o significado sozinha. */
.selo-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.selo-estado i { font-style: normal; font-size: 9px; }
.selo-estado[data-e="em_dia"] i      { color: var(--st-em-dia); }
.selo-estado[data-e="atrasado"] i    { color: var(--st-atrasado); }
.selo-estado[data-e="processando"] i { color: var(--st-processando); }
.selo-estado[data-e="travado"] i     { color: var(--st-travado); }
.selo-estado[data-e="finalizado"] i  { color: var(--st-finalizado); }
.selo-estado[data-e="cancelado"] i   { color: var(--st-cancelado); }

.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 14px; font-size: 12px; color: var(--tinta-fraca);
}
.pag-botoes { display: flex; gap: 8px; }

.rodape-nota { font-size: 11px; color: var(--tinta-fraca); text-align: center; padding-top: 4px; }

/* ────────────────────────────  tooltip  ─────────────────────────── */

.tooltip {
  position: fixed; z-index: 90; pointer-events: none;
  max-width: 290px; padding: 11px 13px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borda); border-radius: 11px;
  box-shadow: var(--sombra-no); font-size: 12px; line-height: 1.5;
}
.tooltip strong { display: block; font-size: 12.5px; font-weight: 640; }
.tt-sub { display: block; font-size: 11px; color: var(--tinta-fraca); margin: 2px 0 8px; }
.tt-linha { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.tt-chave { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
.tt-linha b { font-variant-numeric: tabular-nums; }
.tt-total b { font-size: 13.5px; }
.tt-ponto { width: 8px; height: 8px; border-radius: 2.5px; display: inline-block; }
.tt-sep { display: block; height: 1px; background: var(--borda); margin: 7px 0; }
.tt-msg {
  display: block; margin: 0 0 9px; padding: 7px 9px; border-radius: 8px;
  font-size: 11.5px; color: var(--tinta-2); background: var(--superficie-2);
  border-left: 2px solid var(--st-em-dia);
}
.tt-sub code { font-size: .92em; }
.tt-fraco { color: var(--tinta-fraca); font-weight: 400; }
.tt-dica { display: block; font-size: 10.5px; color: var(--tinta-fraca); margin-top: 9px; }

/* ───────────────  trilha: a copy de cada etapa, por canal  ──────────────── */

.cartao--trilha { overflow: hidden; }

.trilha-dica {
  font-size: 11px; color: var(--tinta-fraca); text-align: right; margin: 0;
  max-width: 260px; line-height: 1.5;
}

/* Quebra em linhas em vez de rolar na horizontal. Esta visão existe para LER a
   copy: esconder metade da régua atrás de uma barra de rolagem é o pior
   resultado possível aqui. Os índices numerados seguram a ordem quando a
   sequência dobra de linha, do mesmo jeito que a serpentina do canvas. */
.trilha {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0 0; row-gap: 18px; padding-top: 4px;
}

.trilha-etapa {
  flex: 1 1 268px; max-width: 340px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--no-borda); border-radius: 14px;
  background: var(--no-bg); box-shadow: var(--sombra-no);
}
.trilha-etapa[data-inativa="sim"] { opacity: .58; }

.trilha-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.trilha-idx {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--plano); border: 1px solid var(--borda);
  font-size: 12px; font-weight: 640; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.trilha-meio { min-width: 0; }
.trilha-nome { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.trilha-quando { margin: 2px 0 0; font-size: 11px; color: var(--tinta-fraca); }
.trilha-qtd { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.trilha-qtd b { font-size: 15px; font-variant-numeric: tabular-nums; }
.trilha-qtd i { font-size: 9.5px; font-style: normal; color: var(--tinta-fraca); }

.trilha-aviso {
  margin: 0; padding: 9px 11px; border-radius: 9px; font-size: 11.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--st-atrasado) 12%, transparent);
  color: var(--tinta-2);
}

/* Cada mensagem. O canal é dito por glifo + palavra; a barra lateral é só
   reforço, nunca a única pista. */
.msg {
  border: 1px solid var(--borda); border-left: 3px solid var(--trilho);
  border-radius: 10px; padding: 10px 12px; background: var(--superficie);
  display: flex; flex-direction: column; gap: 6px;
}
.msg[data-canal="email"] { border-left-color: var(--st-em-dia); }
.msg[data-canal="sms"]   { border-left-color: var(--st-processando); }
.msg[data-ativo="nao"]   { opacity: .5; }

.msg-topo { display: flex; align-items: center; gap: 6px; }
.msg-ico { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--tinta-2); stroke-width: 1.4; }
.msg-canal {
  font-size: 10px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-2);
}
.msg-off {
  font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--plano); color: var(--tinta-fraca); border: 1px solid var(--borda);
}

.msg-assunto { margin: 0; font-size: 12.5px; font-weight: 560; line-height: 1.42; }
.msg-texto   { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--tinta-2); }

.msg-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 1px; }
.msg-cta-rot {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--st-em-dia) 13%, transparent);
  color: var(--tinta);
}
.msg-cta-dest { font-size: 10px; color: var(--tinta-fraca); }

/* Tamanho do SMS: no e-mail o comprimento é grátis, no SMS cada segmento é
   uma cobrança. Vermelho só com o texto ao lado, nunca cor sozinha. */
.msg-medida {
  font-size: 10px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
  border-top: 1px dashed var(--borda); padding-top: 6px; cursor: help;
}
.msg-medida[data-alerta="sim"] { color: var(--st-travado); font-weight: 560; }

/* Conector entre etapas, com a espera escrita em cima. */
.trilha-seta {
  flex: 0 0 74px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.trilha-seta-linha {
  width: 100%; height: 2px; border-radius: 1px; background: var(--trilho); position: relative;
}
.trilha-seta-linha::after {
  content: ''; position: absolute; right: 0; top: 50%;
  border: 4px solid transparent; border-left-color: var(--trilho);
  transform: translate(4px, -50%);
}
.trilha-seta-txt {
  font-size: 10px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trilha-fim {
  flex: 0 0 78px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding-left: 12px;
}
.trilha-fim-ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--st-finalizado); color: var(--st-finalizado); font-size: 13px;
}
.trilha-fim-txt { font-size: 10px; color: var(--tinta-fraca); text-align: center; }

/* ─────────────────  filtros dos gráficos temporais  ────────────────── */

.filtros-graf {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--superficie);
}
.filtros-graf-rot {
  font-size: 10.5px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-fraca); padding-bottom: 7px;
}
.filtros-graf-nota {
  flex: 1 1 300px; min-width: 220px; margin: 0; padding-bottom: 3px;
  font-size: 10.5px; line-height: 1.5; color: var(--tinta-fraca);
}
.filtros-graf-nota[data-ativo="sim"] { color: var(--tinta-2); font-weight: 540; }

/* ────────────────  ajustes do card de alcance por canal  ───────────── */

/* Segundo trecho da barra: quem o canal NÃO alcança por falta de contato.
   Hachura em vez de só cor — a diferença precisa sobreviver ao daltonismo. */
.canal-perda {
  background: repeating-linear-gradient(
    135deg, var(--trilho), var(--trilho) 3px, transparent 3px, transparent 6px
  ) !important;
  border: 1px solid var(--trilho); border-left: none;
}
/* Cada problema do card é um atalho para a lista de quem está nele. Parece
   texto, mas sublinha e muda o cursor no hover — um número que leva a algum
   lugar precisa anunciar isso. */
.canal-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.canal-atalho {
  padding: 2px 0; font: inherit; font-size: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: var(--trilho);
}
.canal-atalho:hover { color: var(--tinta); text-decoration-color: var(--st-em-dia); }
.canal-atalho:focus-visible { outline: 2px solid var(--st-em-dia); outline-offset: 2px; border-radius: 3px; }

.canal-orfaos {
  grid-column: 1 / -1; font-size: 11px; line-height: 1.5; color: var(--tinta-2);
  padding: 9px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--st-atrasado) 12%, transparent);
}

/* Canal desativado numa etapa: continua desenhado no nó, apagado. */
.no-canal[data-ativo="nao"] { opacity: .42; }

/* Copy de cada canal dentro do tooltip do nó. */
.tt-copy {
  display: block; font-size: 11px; line-height: 1.5; color: var(--tinta-2);
  margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--trilho);
}
.tt-copy i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 1px;
}

/* ──────────────────────────  tela de login  ─────────────────────────── */

.corpo-login {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px 16px; background: var(--plano);
}

/* Dois quadros lado a lado: a arte à esquerda, a autenticação à direita.
   `auto` na segunda coluna mantém o formulário na largura confortável de
   leitura e deixa a arte ficar com a sobra — o inverso espremeria o campo. */
.login-palco {
  width: 100%; max-width: 940px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) auto;
  gap: 22px; align-items: stretch;
}

/* ── quadro da arte ── */
.login-arte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 30px 30px 34px; border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; position: relative;
  background:
    radial-gradient(120% 90% at 12% 0%,
      color-mix(in srgb, var(--st-em-dia) 20%, transparent) 0%, transparent 62%),
    radial-gradient(100% 80% at 100% 100%,
      color-mix(in srgb, var(--st-processando) 18%, transparent) 0%, transparent 58%),
    var(--superficie);
}
/* Malha de pontos, a mesma do fundo do canvas: liga a tela de entrada ao que
   vem depois dela, em vez de ser uma capa avulsa. */
.login-arte::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(var(--pontos) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .7; pointer-events: none;
}
.login-arte > * { position: relative; }

.login-arte-topo { display: flex; align-items: center; gap: 11px; }
.marca-selo--grande { width: 34px; height: 34px; }
.login-arte-marca {
  margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.015em;
}

.login-cena { width: 100%; height: auto; max-height: 232px; margin: 4px 0; }
.cena-trilho { stroke: var(--trilho); stroke-width: 2; fill: none; }
.cena-trilho--fraco { opacity: .7; }
/* Ponto de saída: o mesmo ✓ do nó "Finalizados" do painel. */
.cena-fim { fill: none; stroke: var(--st-finalizado); stroke-width: 1.4; }
.cena-fim-tique { stroke: var(--st-finalizado); stroke-width: 1.4; }
.cena-no rect:first-child {
  fill: var(--no-bg); stroke: var(--no-borda); stroke-width: 1;
}
.cena-ponto   { fill: var(--st-em-dia); }
.cena-ponto--2 { fill: var(--st-processando); }
.cena-ponto--3 { fill: var(--st-atrasado); }
.cena-ponto--4 { fill: var(--st-finalizado); }
.cena-barra   { fill: var(--tinta-2); opacity: .55; }
.cena-barra--fraca { opacity: .28; }
.cena-pacote  { fill: var(--st-em-dia); }
.cena-g1 { stop-color: var(--st-em-dia); }
.cena-g2 { stop-color: var(--st-processando); }

.login-arte-frase {
  margin: 0 0 8px; font-size: 19px; font-weight: 640; line-height: 1.3;
  letter-spacing: -.018em;
}
.login-arte-sub {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tinta-2); max-width: 40ch;
}

/* ── quadro da autenticação ── */
/* Ocupa a mesma altura da arte e centra o conteúdo por dentro: dois quadros
   de alturas diferentes lado a lado leem como desalinhamento, não como
   hierarquia. */
.login-caixa {
  width: 100%; max-width: 372px; justify-self: center; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca h1 { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -.01em; }
/* No formulário a marca é redundante com a arte ao lado — só reaparece
   quando a arte some, nas telas estreitas. */
.login-marca--compacta { display: none; }

.login-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); box-shadow: var(--sombra-no);
}
.login-tit { margin: 0; font-size: 15px; font-weight: 620; }
.login-nota { margin: -6px 0 0; font-size: 12px; line-height: 1.55; color: var(--tinta-2); }

/* Campo em bloco: no login o rótulo fica acima e o controle ocupa a largura
   toda, ao contrário dos filtros do painel, que são uma fita horizontal. */
.campo--bloco { width: 100%; }
.campo--bloco input { width: 100%; }
.campo-dica {
  font-size: 10.5px; line-height: 1.5; color: var(--tinta-fraca); font-style: normal;
}

.login-erro {
  margin: 0; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--st-travado) 14%, transparent);
  border-left: 3px solid var(--st-travado); color: var(--tinta);
}

.btn-forte {
  justify-content: center; padding: 11px 18px; font-size: 13.5px; font-weight: 620;
  background: var(--st-em-dia); color: #fff; border-color: transparent;
}
.btn-forte:hover:not(:disabled) { filter: brightness(1.07); }
.btn-forte:disabled { opacity: .6; cursor: progress; }

.login-rodape {
  margin: 0; font-size: 11px; line-height: 1.6; color: var(--tinta-fraca); text-align: center;
}
.login-rodape code { font-size: .95em; }

/* ──────────────────  seletor da linha de copy ativa  ─────────────────── */

.linha-barra {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2);
}
.linha-topo {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 18px;
}
/* O propósito da linha aberta: é o que permite escolher qual ativar sem ter
   que ler as seis mensagens de cada uma. */
.linha-intuito {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--borda);
  font-size: 11px; line-height: 1.6; color: var(--tinta-2); max-width: 92ch;
}

.linha-botoes-admin .btn { padding: 8px 13px; font-size: 12px; }

.janela--linha[open] { width: min(560px, calc(100vw - 32px)); }
.janela--linha .editar-dupla { margin-bottom: 12px; }
.janela--linha .campo--bloco { margin-bottom: 12px; }
.janela--linha textarea {
  width: 100%; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 9px;
  background: var(--plano); color: var(--tinta);
  font: inherit; font-size: 12.5px; line-height: 1.55;
}

/* Cartão de mensagem que ainda não existe: precisa parecer um espaço a
   preencher, não uma mensagem apagada. */
.msg--vazia {
  border-style: dashed; border-left-style: solid;
  border-left-color: var(--trilho) !important;
  background: transparent;
}
.msg--vazia .msg-texto { color: var(--tinta-fraca); font-style: italic; }
.msg-criar {
  margin: 2px 0 0; font-size: 10.5px; font-weight: 560; color: var(--st-em-dia);
}
.msg--vazia:hover { border-color: var(--st-em-dia); }

/* Seletor de linha. Dropdown e não abas: com muitas linhas as abas quebram em
   várias fileiras e empurram a trilha para baixo. */
.linha-seletor { flex: 0 1 260px; min-width: 190px; }
.linha-seletor select { width: 100%; }

/* Qual está no ar, ao lado do seletor e INDEPENDENTE dele: num dropdown
   fechado só se lê a opção escolhida, e trocar a visualização faria perder de
   vista qual copy os clientes estão recebendo. */
.linha-noar {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 11px 6px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--st-finalizado) 45%, var(--borda));
  background: color-mix(in srgb, var(--st-finalizado) 12%, transparent);
}
.linha-noar-selo {
  font-size: 9px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--st-finalizado) 26%, transparent);
  color: var(--tinta);
}
.linha-noar-nome { font-size: 12px; font-weight: 560; color: var(--tinta); }

.linha-botoes-admin { display: flex; gap: 6px; flex: none; }

.linha-estado { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; flex-wrap: wrap; }
.linha-sub {
  margin: 0; flex: 1 1 260px; font-size: 10.5px; line-height: 1.55;
  color: var(--tinta-fraca); max-width: 66ch;
}
/* Ver uma linha diferente da que está no ar é um estado que precisa saltar:
   o texto na tela não é o que os clientes estão recebendo. */
.linha-sub[data-aviso="sim"] { color: var(--tinta); font-weight: 540; }
.linha-ativar { flex: none; padding: 9px 16px; font-size: 12.5px; }

/* Linha sem copy cadastrada no painel. */
.trilha-sem-copy {
  width: 100%; padding: 22px 24px; border: 1px dashed var(--borda); border-radius: 12px;
  background: var(--superficie-2); font-size: 12.5px; line-height: 1.6; color: var(--tinta-2);
}
.trilha-sem-copy p { margin: 0 0 10px; }
.trilha-sem-copy-tit { font-size: 13.5px; font-weight: 620; color: var(--tinta); }
.trilha-sem-copy-sql {
  margin: 0; padding: 12px 14px; border-radius: 9px; overflow-x: auto;
  background: var(--plano); border: 1px solid var(--borda);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: var(--tinta-2);
}
.trilha-sem-copy-alerta {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; font-size: 12px;
  background: color-mix(in srgb, var(--st-atrasado) 14%, transparent);
  border-left: 3px solid var(--st-atrasado); color: var(--tinta);
}

/* ────────────────  pré-visualização da mensagem  ─────────────────────── */

/* O cartão vira alvo: precisa parecer clicável, senão o duplo clique é uma
   função que ninguém descobre. */
.msg[role="button"] { cursor: pointer; transition: border-color .12s, transform .12s; }
.msg[role="button"]:hover { border-color: var(--st-em-dia); }
.msg[role="button"]:focus-visible {
  outline: 2px solid var(--st-em-dia); outline-offset: 2px;
}

/*
 * O `display` PRECISA ficar preso ao [open].
 *
 * Um <dialog> fechado é `display: none` por regra do navegador — e regra de
 * autor ganha da do navegador. Declarar `display: flex` solto fazia a janela
 * de pré-visualização ficar desenhada no meio da página o tempo todo, fechada
 * ou não, empurrando o resto do layout.
 */
.janela--previa[open] {
  width: min(760px, calc(100vw - 32px));
  display: flex; flex-direction: column;
}
.previa-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.previa-modos {
  display: flex; gap: 2px; padding: 2px;
  border: 1px solid var(--borda); border-radius: 9px; background: var(--plano);
}
.previa-modo {
  padding: 6px 12px; font: inherit; font-size: 11.5px; font-weight: 560;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--tinta-2); cursor: pointer;
}
.previa-modo[aria-pressed="true"] {
  background: var(--superficie); border-color: var(--borda); color: var(--tinta);
}

/* `flex: 1` + `min-height: 0` para o corpo poder ENCOLHER dentro da janela.
   Sem os dois, o iframe impõe a altura mínima dele e a janela estoura a tela
   em vez de rolar por dentro. */
.previa-corpo {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.previa-nota {
  margin: 0; flex: none; font-size: 10.5px; line-height: 1.55; color: var(--tinta-fraca);
}
/* A caixa é o item flex; o iframe é criado dentro dela e a preenche. Assim o
   layout não depende de o iframe existir naquele instante. */
.previa-quadro-caixa {
  display: flex; flex: 1 1 auto; min-height: 300px;
  border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
  /* Fundo claro fixo: o e-mail é desenhado para caixa de entrada clara, e
     mostrá-lo sobre o tema escuro do painel daria uma impressão falsa de como
     ele chega ao cliente. */
  background: #eef0f4;
}
.previa-quadro { flex: 1 1 auto; width: 100%; border: 0; display: block; }
/* ── formulário de edição da copy ── */
.previa-editar {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px;
}
.editar-campos { display: flex; flex-direction: column; gap: 12px; }
.editar-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Número · Nome · Ordem — o nome recebe a sobra, os outros dois são curtos. */
.editar-tripla { display: grid; grid-template-columns: 90px 1fr 90px; gap: 12px; margin-bottom: 12px; }
.previa-editar textarea {
  width: 100%; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 9px;
  background: var(--plano); color: var(--tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6;
}
.previa-editar textarea:focus-visible,
.previa-editar input:focus-visible { outline: 2px solid var(--st-em-dia); outline-offset: 1px; }

.editar-medida {
  margin: 0; font-size: 11px; color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.editar-medida[data-alerta="sim"] { color: var(--st-travado); font-weight: 560; }

/* Erro e aviso no MESMO lugar, distinguidos por cor e pelo sinal (✖ / ▲) —
   nunca só por cor. Erro bloqueia o salvar; aviso não. */
.editar-avisos {
  margin: 0; padding: 10px 12px; border-radius: 9px; white-space: pre-line;
  font-size: 11.5px; line-height: 1.55;
}
.editar-avisos[data-tom="erro"] {
  background: color-mix(in srgb, var(--st-travado) 14%, transparent);
  border-left: 3px solid var(--st-travado); color: var(--tinta);
}
.editar-avisos[data-tom="aviso"] {
  background: color-mix(in srgb, var(--st-atrasado) 13%, transparent);
  border-left: 3px solid var(--st-atrasado); color: var(--tinta);
}

.editar-acoes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px; border-top: 1px solid var(--borda);
}
.editar-acoes .btn:disabled { opacity: .5; cursor: not-allowed; }
.editar-estado { font-size: 11px; color: var(--tinta-fraca); }

.previa-codigo {
  margin: 0; padding: 14px; border-radius: 10px; flex: 1 1 auto;
  overflow: auto; min-height: 0;
  background: var(--plano); border: 1px solid var(--borda);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; word-break: break-word;
}
/* A janela tem altura própria: sem isto ela encolhe para caber no conteúdo e
   o e-mail aparece numa fresta. */
.janela--previa[open] { height: min(86vh, 760px); }

/* ─────────────────────  identidade e gestão de acesso  ───────────────── */

.usuario-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie);
}
.usuario-inicial {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--st-em-dia); color: #fff; font-size: 11px; font-weight: 640;
}
.usuario-nome { font-size: 12px; font-weight: 560; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-selo {
  font-size: 9px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; color: var(--tinta-2);
  background: var(--plano); border: 1px solid var(--borda);
}

/* Painel de usuários. <dialog> nativo: foco preso, Esc fecha e camada por
   cima do resto sem precisar gerenciar z-index à mão. */
.janela {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-no);
}
.janela::backdrop { background: rgba(0, 0, 0, .5); }
.janela-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--borda);
}
.janela-cabeca h2 { margin: 0; font-size: 15px; font-weight: 620; }
.janela-corpo { padding: 16px 20px 20px; overflow-y: auto; }

.novo-usuario {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 14px; border: 1px dashed var(--borda); border-radius: 12px;
  margin-bottom: 18px;
}
.novo-usuario .campo { flex: 1 1 150px; min-width: 0; }
.novo-usuario .campo input { width: 100%; }
.novo-usuario-admin { display: flex; align-items: center; gap: 6px; font-size: 12px;
  padding-bottom: 8px; cursor: pointer; }

.lista-usuarios { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.usuario-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--borda); border-radius: 11px;
  background: var(--superficie-2);
}
.usuario-linha[data-inativo="sim"] { opacity: .55; }
.usuario-email { font-size: 12.5px; font-weight: 560; word-break: break-all; }
.usuario-meta { grid-column: 1; font-size: 10.5px; color: var(--tinta-fraca); line-height: 1.5; }
.usuario-acoes { grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.usuario-eu {
  font-size: 9px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  background: color-mix(in srgb, var(--st-em-dia) 16%, transparent);
}

.janela-msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 9px;
  font-size: 12px; line-height: 1.55; }
.janela-msg[data-tom="erro"] {
  background: color-mix(in srgb, var(--st-travado) 14%, transparent);
  border-left: 3px solid var(--st-travado);
}
.janela-msg[data-tom="ok"] {
  background: color-mix(in srgb, var(--st-finalizado) 14%, transparent);
  border-left: 3px solid var(--st-finalizado);
}
.senha-provisoria {
  display: block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; user-select: all;
}

/* ─────────────────────────  responsivo  ─────────────────────────── */

@media (max-width: 1080px) {
  .linha-heroi { grid-template-columns: 1fr; }
  .grade-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
@media (max-width: 620px) {
  .topo { gap: 12px; }
  .cartao-cabeca { flex-direction: column; gap: 10px; }
  .canvas-area { padding: 16px 10px; }
  .trilha { padding-left: 16px; padding-right: 16px; margin: 0 -16px; }
  .trilha-etapa { flex-basis: 250px; }
  .trilha-seta { flex-basis: 52px; }
  .trilha-dica { text-align: left; max-width: none; }
  .linha-barra { flex-direction: column; align-items: stretch; }
}

/* A arte é acessório: abaixo de 860px ela sai inteira e o formulário fica
   sozinho e centrado. Espremer os dois quadros deixaria os dois ruins. */
@media (max-width: 860px) {
  .login-palco { grid-template-columns: minmax(0, 1fr); max-width: 396px; }
  .login-arte { display: none; }
  .login-marca--compacta { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .conexao-fluxo { opacity: .55; }
}

/* ── resumo do atendimento (duplo clique na tabela) ─────────────────── */
.chat-resumo-texto {
  white-space: pre-wrap;
  line-height: 1.55;
  max-width: 60ch;
}

.chat-atendimento + .chat-atendimento {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}