/* Voice, painel. Base calma e clara (nível Attio/Linear) com uma marca forte: o quadro ao vivo de quem precisa do
   dono, em ardósia, com o único amarelo nas linhas acesas até serem vistas (contrato em
   .impeccable/surfaces/painel-templates-painel-base-html.md). Hanken Grotesk no texto e nos controles; Barlow Semi Condensed só
   no quadro e nos números grandes; algarismos tabulares; cantos de 6 px; fios finos; sem sombra. */
:root {
  --chao: #FFFFFF;
  --faixa: #F7F7F8;
  --sup: #FFFFFF;
  --campo: #FFFFFF;
  --texto: #111113;
  --aco: #63636E;
  --fio: #E4E4E9;
  --fio-2: #EEEEF2;
  --tinta: #111113;
  --ardosia: #1C2127;
  --ardosia-2: #262D35;
  --ardosia-fio: #333B44;
  --no-quadro: #E9ECEF;
  --no-quadro-2: #A3ABB4;
  --alerta: #FFD400;
  --alerta-claro: #FFF7D1;
  --ok: #17703A;
  --ok-claro: #E7F4EB;
  --crit: #B3261E;
  --crit-claro: #FCE8E6;
  --aviso: #8A5300;
  --aviso-claro: #FDF2DC;
  --raio: 6px;
  --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-rotulo: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --lado: 236px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--chao); color: var(--texto); font: 14.5px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; background: var(--faixa); padding: 1px 5px; border-radius: 4px; }
::selection { background: #DCE3FF; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
* { scrollbar-color: var(--fio) transparent; }
/* algarismos tabulares só onde há colunas de números (horas, valores, contagens) */
.num, .h, .kpi .v, .segs b, .tempo, .quadro-linha .h, table.t td, .barra .n, .faixa output { font-variant-numeric: tabular-nums; }
.ico-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-svg.cheio { fill: currentColor; stroke: none; }

/* ---------------- casca: trilho claro (computador), barra e abas de baixo (celular) ---------------- */
.app { display: grid; grid-template-columns: var(--lado) 1fr; min-height: 100vh; }
.lado { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--faixa); border-right: 1px solid var(--fio);
  padding: 14px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 4px 8px 14px; text-decoration: none; letter-spacing: -.01em; }
.marca svg { width: 20px; height: 20px; flex: none; }
.troca { display: grid; gap: 4px; margin: 0 0 12px; }
.troca label { font-size: 12px; color: var(--aco); padding: 0 8px; }
.troca select { font: 500 14px var(--f-texto); padding: 7px 9px; border: 1px solid var(--fio); background: var(--sup); color: var(--texto); width: 100%; border-radius: var(--raio); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 9px; color: var(--aco);
  text-decoration: none; font-size: 14px; border-radius: var(--raio); }
.nav .rotulo { display: flex; gap: 9px; align-items: center; }
.nav .ico-svg { width: 17px; height: 17px; }
.nav:hover { background: #EEEEF1; color: var(--texto); }
.nav.on { background: var(--sup); color: var(--texto); font-weight: 600; box-shadow: 0 0 0 1px var(--fio); }
.nav.sub { font-size: 13.5px; padding-left: 35px; }   /* as seções de Configurar, alinhadas ao texto dele */
.nav.pai.on { background: none; box-shadow: none; }   /* Configurar aberto: o realce fica na seção escolhida */
.sep { font-size: 12px; color: var(--aco); padding: 16px 9px 5px; }
.ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ponto.crit { background: var(--crit); } .ponto.warn { background: #D99A00; }
.lado .rodape { margin-top: auto; padding-top: 14px; display: grid; gap: 1px; }
.usuario-lado { font-size: 12.5px; color: var(--aco); padding: 8px 9px 6px; border-top: 1px solid var(--fio); }
.antigo { font-size: 12.5px; }
.cabeca, .abas { display: none; }

.principal { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.principal.com-teste { grid-template-columns: minmax(0, 1fr) 380px; }
.conteudo { padding: 26px 32px 120px; display: grid; gap: 20px; align-content: start; max-width: 1000px; width: 100%; }
.conteudo.largo { max-width: 1320px; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.topo h1 { font-size: 24px; letter-spacing: -.02em; }
.topo p { color: var(--aco); font-size: 14.5px; margin-top: 4px; max-width: 70ch; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------- peças ---------------- */
.btn { cursor: pointer; font: 500 14px/1.2 var(--f-texto); padding: 8px 13px; border-radius: var(--raio); background: var(--tinta); color: #fff;
  border: 1px solid var(--tinta); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; touch-action: manipulation; transition: background-color .15s, border-color .15s; }
.btn:hover { background: #2A2A30; border-color: #2A2A30; }
.btn.sec { background: var(--sup); color: var(--texto); border-color: var(--fio); }
.btn.sec:hover { background: var(--faixa); border-color: #D2D2DA; }
.btn.peq { padding: 5px 10px; font-size: 13px; }
.btn.perigo { background: var(--sup); color: var(--crit); border-color: #EBC2BE; }
.btn.perigo.armado { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn:disabled { opacity: .5; cursor: wait; }
.cartao { background: var(--sup); border: 1px solid var(--fio); border-radius: 8px; padding: 16px; display: grid; gap: 14px; align-content: start; }
.cartao > h2 { font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cartao > p.nota, .nota { color: var(--aco); font-size: 13.5px; max-width: 72ch; }
.vale { font-size: 12px; color: var(--aco); font-weight: 400; }
.tag { font-size: 12px; font-weight: 500; line-height: 1.6; padding: 0 7px; border-radius: 4px; background: var(--fio-2); color: var(--aco); white-space: nowrap; display: inline-block; }
.tag.crit { background: var(--crit-claro); color: var(--crit); }
.tag.warn { background: var(--aviso-claro); color: var(--aviso); }
.tag.ok { background: var(--ok-claro); color: var(--ok); }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.campo { display: grid; gap: 6px; align-content: start; }
/* Item de grade encolhe: a lista "Estilo da conversa" (opção longa) esticava a página Ligação a 467 px no celular. */
.cartao > *, .campo > *, .duas > * { min-width: 0; }
.campo > label, .campo .rot { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.campo .ajuda, .ajuda { color: var(--aco); font-size: 13px; }
.campo .erro { color: var(--crit); font-size: 13px; font-weight: 600; }
.campo.com-erro input, .campo.com-erro textarea, .campo.com-erro select { border-color: var(--crit); }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=file], input[type=search], input[type=url], input[type=number], textarea, select {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--texto); background: var(--campo); border: 1px solid var(--fio);
  border-radius: var(--raio); padding: 8px 10px; }
input::placeholder, textarea::placeholder { color: #9A9AA5; }
textarea { resize: vertical; line-height: 1.5; min-height: 64px; }
textarea.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--tinta); outline-offset: -1px; }
.chave { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.chave input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: #D5D5DD; position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color .15s; }
.chave input::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .15s; }
.chave input:checked { background: var(--tinta); }
.chave input:checked::after { transform: translateX(16px); }
.faixa { display: flex; align-items: center; gap: 10px; }
.faixa input { flex: 1; accent-color: var(--tinta); }
.faixa output { font-size: 13.5px; font-weight: 600; min-width: 46px; text-align: right; }

.lista-ed { display: grid; gap: 6px; }
.li-ed { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; }
.li-ed .n, .par .n { font-size: 12.5px; color: var(--aco); text-align: right; padding-top: 9px; }
.li-ed .ctl, .par .ctl { display: flex; gap: 2px; padding-top: 3px; }
.ico { cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; color: var(--aco); background: none; border: 0; font-family: inherit; border-radius: var(--raio); }
.ico:hover { background: var(--faixa); color: var(--texto); }
.add { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--texto); padding: 4px 0; justify-self: start; background: none; border: 0; font-family: inherit; }
.add:hover { text-decoration: underline; }
.par { display: grid; grid-template-columns: 24px 1fr 1fr auto; gap: 8px; align-items: start; }
.cab-par { display: grid; grid-template-columns: 24px 1fr 1fr 36px; gap: 8px; font-size: 12.5px; color: var(--aco); }
.tabela-ed { display: grid; gap: 6px; overflow-x: auto; }
.linha-ed { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: start; min-width: 640px; }
.linha-ed.cab { font-size: 12.5px; color: var(--aco); }

.entendi { font-size: 13px; padding: 7px 10px; border-radius: var(--raio); background: var(--ok-claro); color: var(--ok); }
.entendi.warn { background: var(--aviso-claro); color: var(--aviso); }
.status { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--raio); font-size: 14px; flex-wrap: wrap; }
.status.ok { background: var(--ok-claro); color: var(--ok); }
.status.crit { background: var(--crit-claro); color: var(--crit); }
.status.warn { background: var(--aviso-claro); color: var(--aviso); }
.status.info { background: var(--faixa); color: var(--texto); }
.faixa-aviso { padding: 12px 14px; border-radius: 8px; font-size: 14px; display: grid; gap: 8px; }
.faixa-aviso.ok { background: var(--ok-claro); color: var(--ok); }
.faixa-aviso.crit { background: var(--crit-claro); color: var(--crit); }
.faixa-aviso.warn { background: var(--aviso-claro); color: var(--aviso); }
.faixa-aviso ul { margin: 0; padding-left: 18px; }

.chk { display: grid; }
.chk-i { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--fio-2); }
.chk-i:first-child { border-top: 0; }
.chk-i .m { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.chk-i .m .ico-svg { width: 13px; height: 13px; stroke-width: 2.6; }
.chk-i .m.ok { background: var(--ok-claro); color: var(--ok); }
.chk-i .m.crit { background: var(--crit-claro); color: var(--crit); }
.chk-i .m.warn { background: var(--aviso-claro); color: var(--aviso); }
.chk-i b { font-weight: 600; font-size: 14.5px; }
.chk-i p { font-size: 13.5px; color: var(--aco); }
/* números: uma linha de resumo com fios entre eles (não cartões de "métrica de herói") */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.kpi { padding: 12px 16px 12px 0; display: flex; flex-direction: column; gap: 1px; }
.kpi + .kpi { padding-left: 16px; border-left: 1px solid var(--fio-2); }
.kpi .l { font-size: 12.5px; color: var(--aco); }
.kpi .v { font: 600 24px/1.2 var(--f-rotulo); letter-spacing: 0; }

.vozes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.voz { border: 1px solid var(--fio); border-radius: 8px; padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; cursor: pointer; position: relative; }
.voz input { position: absolute; opacity: 0; pointer-events: none; }
.voz:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.voz:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.voz b { font-weight: 600; }
.voz small { color: var(--aco); font-size: 12.5px; grid-column: 1; }
.voz .ico { grid-row: 1 / 3; grid-column: 2; }
.voz b .tag { margin-left: 4px; vertical-align: 1px; }
.vozes-sub { margin-top: 10px; }
.vozes-mais { margin-top: 10px; }
.vozes-mais > summary { cursor: pointer; font-size: 13.5px; font-weight: 500; padding: 6px 0; }
.vozes-mais > .vozes { margin-top: 6px; }

.prev { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; background: var(--faixa); border: 1px solid var(--fio); border-radius: var(--raio); padding: 10px 12px; white-space: pre-wrap; color: var(--aco); max-height: 320px; overflow: auto; margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 1px 8px; border-radius: 4px; background: var(--fio-2); color: var(--aco); }
.chip.sim { background: var(--ok-claro); color: var(--ok); }
.jev { border: 1px dashed #CFCFD8; border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.jev .linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fio-2); vertical-align: top; }
table.t th { font-size: 12.5px; color: var(--aco); font-weight: 500; border-bottom-color: var(--fio); white-space: nowrap; }
table.t tbody tr:hover td, table.t tr:hover td { background: #FAFAFB; }
table.t a { text-decoration: none; } table.t a:hover { text-decoration: underline; }
.rolar { overflow-x: auto; }

.versao { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--fio-2); align-items: start; }
.versao:first-child { border-top: 0; }
.versao small { color: var(--aco); font-size: 12.5px; }
.versao details { grid-column: 1 / -1; }
.versao summary { cursor: pointer; font-size: 13px; color: var(--aco); }
.diff { font-size: 12.5px; display: grid; gap: 4px; margin-top: 6px; }
.diff .campo-diff { font-weight: 600; font-size: 13px; margin-top: 4px; }
.diff .menos { background: var(--crit-claro); color: var(--crit); padding: 3px 8px; border-radius: 4px; overflow-wrap: anywhere; text-decoration: line-through; }
.diff .mais { background: var(--ok-claro); color: var(--ok); padding: 3px 8px; border-radius: 4px; overflow-wrap: anywhere; }

.salvar { position: fixed; left: var(--lado); right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 24px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--tinta); color: #fff; font-size: 14px; flex-wrap: wrap; }
.salvar .btn { background: #fff; color: var(--tinta); border-color: #fff; }
.salvar .btn.sec { background: transparent; color: #fff; border-color: #44444C; }
body.com-barra .conteudo { padding-bottom: 140px; }
.toast { position: fixed; right: 20px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--tinta); color: #fff; padding: 10px 14px;
  border-radius: 8px; font-size: 14px; max-width: min(420px, calc(100vw - 40px)); box-shadow: 0 8px 24px rgb(17 17 19 / .18); }
.toast.erro { background: var(--crit); }
.carregando { display: none; font-size: 13px; color: var(--aco); }
.htmx-request .carregando, .htmx-request.carregando { display: inline; }

.teste { border-left: 1px solid var(--fio); background: var(--sup); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px; display: grid; gap: 14px; align-content: start; }
.teste h2 { font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.conv { display: grid; gap: 8px; }
.bolha { padding: 8px 11px; border-radius: 10px; max-width: 90%; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.cliente { background: #F1F1F4; border-bottom-left-radius: 3px; }
.bolha.ia { background: #EEF2FF; justify-self: end; border-bottom-right-radius: 3px; }
.bolha.pessoa { background: var(--alerta-claro); justify-self: end; border-bottom-right-radius: 3px; }
.bolha.nota { background: none; border: 1px dashed var(--fio); color: var(--aco); font-size: 12.5px; max-width: 100%; }
.bolha small, .item-nota small { display: block; font-size: 12px; color: var(--aco); margin-bottom: 2px; }
.leu { display: flex; gap: 5px; flex-wrap: wrap; }
.leu .chip { font-size: 11px; }
.tempo { font-size: 11.5px; color: var(--aco); justify-self: end; }

.lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.loja-card { background: var(--sup); border: 1px solid var(--fio); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; text-decoration: none; }
.loja-card:hover { border-color: #C9C9D2; }
.loja-card b { font-weight: 600; font-size: 15.5px; }
.loja-card small { color: var(--aco); }

/* ---------------- o quadro (assinatura): quem precisa do dono, ordenado e aceso até ser visto ---------------- */
.quadro { background: var(--ardosia); color: var(--no-quadro); border-radius: 8px; overflow: hidden; }
.quadro-cab, .quadro-linha { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; padding: 11px 16px; align-items: center; }
.quadro-cab { font: 600 12px var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; color: #8A929B; border-bottom: 1px solid var(--ardosia-fio); padding-block: 9px; }
.quadro-linha { border-bottom: 1px solid var(--ardosia-fio); text-decoration: none; color: inherit; min-height: 60px; }
.quadro-linha:hover { background: var(--ardosia-2); text-decoration: none; }
.quadro-linha .h { font: 600 17px var(--f-rotulo); }
.quadro-linha b { font: 600 16px var(--f-rotulo); display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-linha small { color: var(--no-quadro-2); font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-linha .est { font: 600 14px var(--f-rotulo); text-transform: uppercase; letter-spacing: .03em; text-align: right; white-space: nowrap; }
.quadro-linha .est.bom { color: #7FD18B; }
.quadro-linha.acesa { box-shadow: inset 4px 0 0 var(--alerta); }
.quadro-linha.acesa .est { background: var(--alerta); color: var(--tinta); padding: 2px 7px; }
.quadro-vazio { padding: 22px 16px; color: var(--no-quadro-2); font-size: 15px; }
.passe { background: var(--sup); border: 1px solid var(--fio); border-radius: 8px; overflow: hidden; }
.passe-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--fio-2);
  font-weight: 600; font-size: 14.5px; }
.passe-cab span, .passe-cab a { font-weight: 400; font-size: 13px; color: var(--aco); }
.segs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.segs > div, .segs > a { padding: 9px 12px 11px; border-right: 1px solid var(--fio-2); min-width: 0; text-decoration: none; }
.segs > :last-child { border-right: 0; }
.segs small { display: block; font-size: 12px; color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segs b { font: 600 22px/1.2 var(--f-rotulo); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passe-lista { display: grid; }
.passe-lista > a, .passe-lista > div { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px;
  border-top: 1px solid var(--fio-2); text-decoration: none; }
.passe-lista > :first-child { border-top: 0; }
.passe-lista b { font-weight: 600; display: block; }
.passe-lista small { color: var(--aco); font-size: 13px; display: block; }
.passe-lista .h { font: 600 17px var(--f-rotulo); }
.hoje { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.hoje-lado { display: grid; gap: 16px; }
.tocar { width: 30px; height: 30px; border-radius: 50%; background: var(--faixa); border: 1px solid var(--fio); display: grid; place-items: center; }
.tocar .ico-svg { width: 12px; height: 12px; margin-left: 2px; }
.relogio { font: 600 15px var(--f-rotulo); color: var(--aco); }

.so-celular { display: none; }
.menu-btn { display: none; }
@media (max-width: 1100px) {
  .principal.com-teste { grid-template-columns: minmax(0, 1fr); }
  .teste { position: static; height: auto; border-left: 0; border-top: 1px solid var(--fio); }
  .hoje { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Celular: barra branca (marca, loja, Mais) e abas embaixo; o trilho inteiro abre pelo Mais como uma folha.
     Campos com 16 px (o iPhone não dá zoom sozinho) e alvos de toque de 44 px. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .cabeca { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 15; background: rgb(255 255 255 / .96);
    border-bottom: 1px solid var(--fio); padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .cabeca .marca { padding: 0; }
  .cabeca .loja-atual { color: var(--aco); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .lado { position: fixed; inset: 0; z-index: 40; height: 100dvh; display: none; padding-top: calc(12px + env(safe-area-inset-top, 0px)); border: 0; }
  .lado.aberto { display: flex; }
  .lado .menu-btn { display: inline-flex; align-self: flex-end; }
  .menu-btn { display: inline-flex; }
  .lado .nav { padding: 11px 10px; font-size: 16px; }
  .lado .nav.sub { padding-left: 38px; font-size: 15px; }
  .abas { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; background: var(--sup); border-top: 1px solid var(--fio);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .abas a, .abas button { flex: 1; display: grid; justify-items: center; gap: 1px; font: 500 11.5px var(--f-texto); color: var(--aco); text-decoration: none;
    background: none; border: 0; padding: 5px 0; min-height: 50px; position: relative; }
  .abas .ico-svg { width: 22px; height: 22px; }
  .abas .on { color: var(--texto); font-weight: 600; }
  .abas .conta-alerta { position: absolute; top: 2px; left: 57%; background: var(--alerta); color: var(--tinta); font: 600 11px/16px var(--f-texto); min-width: 16px; padding: 0 4px; border-radius: 8px; }
  .so-celular { display: block; }
  .conteudo { padding: 16px 14px 104px; gap: 16px; }
  .topo h1 { font-size: 22px; }
  .cartao { padding: 14px; }
  input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=search], input[type=url], input[type=number], textarea, select, .troca select { font-size: 16px; }
  .btn { padding: 11px 15px; font-size: 15px; }
  .btn.peq { padding: 8px 12px; font-size: 14px; }
  .ico { width: 44px; height: 44px; }
  .add { padding: 12px 0; font-size: 15px; }
  .salvar { left: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px; }
  body.com-barra .conteudo { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  .salvar .acoes { width: 100%; }
  .salvar .btn { flex: 1; }
  .par { grid-template-columns: 1fr; padding: 10px 0; border-top: 1px solid var(--fio-2); }
  .par:first-child { border-top: 0; }
  .par .n, .cab-par { display: none; }
  .par .ctl { justify-self: end; }
  .li-ed .ctl { padding-top: 0; }
  .duas { grid-template-columns: 1fr; }
  .toast { left: 14px; right: 14px; max-width: none; }
  .quadro-cab, .quadro-linha { grid-template-columns: 50px minmax(0, 1fr) auto; padding-inline: 14px; gap: 10px; }
  .kpi { padding-right: 12px; } .kpi + .kpi { padding-left: 12px; }
  .kpi .v { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------- CRM: clientes, ficha, funil, tarefas, resultados, agenda ---------------- */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.busca { display: flex; gap: 8px; }
.busca input { flex: 1; min-width: 0; }
.atrasada, .tarefa.atrasada b { color: var(--crit); }
.ficha { display: grid; grid-template-columns: minmax(260px, 350px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ficha-lado { display: grid; gap: 16px; }
.tarefa { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--fio-2); }
.tarefa:first-of-type { border-top: 0; }
.tarefa .cresce { flex: 1; min-width: 0; }
.marcar { width: 20px; height: 20px; border: 1.5px solid #A5A5B0; background: none; cursor: pointer; margin-top: 1px; flex: none; border-radius: 50%; }
.marcar:hover { border-color: var(--ok); background: var(--ok-claro); }
.sugestoes { display: grid; gap: 10px; padding: 12px; background: var(--faixa); border-radius: 8px; }
.sugestao { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
details > summary { cursor: pointer; }
details > summary.btn { display: inline-flex; list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
.form-tarefa { display: grid; gap: 12px; margin-top: 12px; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14.5px; }
.dados dt { color: var(--aco); font-size: 13px; }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.tempo-cli { display: grid; gap: 8px; max-height: 72vh; overflow-y: auto; padding: 4px; align-content: start; }
.tempo-cli .dia { justify-self: center; font-size: 12px; color: var(--aco); background: var(--faixa); padding: 2px 10px; border-radius: 999px; margin-top: 8px; }
.tempo-cli .bolha { max-width: 80%; justify-self: start; }
.tempo-cli .bolha.ia, .tempo-cli .bolha.pessoa { justify-self: end; }
.item-lig { border: 1px solid var(--fio); border-radius: 8px; background: var(--sup); display: grid; overflow: hidden; }
.item-lig .cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--fio-2); }
.item-lig .cab b { font-weight: 600; }
.item-lig audio { width: calc(100% - 24px); height: 38px; margin: 10px 12px; }
.item-lig details { padding: 0 12px 10px; }
.item-lig .ajuda { padding: 10px 12px; }
.falas { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; max-height: 40vh; overflow-y: auto; }
.falas p.ia { color: var(--aco); }
.falas .t { font-size: 12px; color: var(--aco); }
.item-sis { justify-self: center; font-size: 13.5px; color: var(--aco); text-align: center; }
.item-sis.ok { color: var(--ok); }
.item-nota { background: #F6F6F8; border: 1px solid var(--fio-2); border-radius: 8px; padding: 8px 12px; font-size: 14px; white-space: pre-wrap; }
.form-nota { display: flex; gap: 8px; align-items: flex-end; }
.form-nota textarea { flex: 1; min-width: 0; }
.funil { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(220px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.coluna { display: grid; gap: 8px; align-content: start; min-height: 240px; padding: 0 8px 10px; background: var(--faixa); border-radius: 8px; border: 1px solid transparent; }
.coluna.ganho { background: #F4FAF6; } .coluna.perdido { background: #FCF6F5; }
.coluna.alvo { border-color: var(--tinta); }
.coluna h2 { font-size: 13.5px; display: flex; gap: 6px; align-items: center; padding: 10px 2px 2px; }
.coluna > .ajuda { font-size: 13px; }
.cartoes { display: grid; gap: 6px; }
.card-cli { background: var(--sup); border: 1px solid var(--fio); border-radius: var(--raio); padding: 9px 10px; display: grid; gap: 3px; cursor: grab; font-size: 13.5px; }
.card-cli b { font-weight: 600; }
.card-cli a { text-decoration: none; }
.card-cli .linha { display: flex; gap: 4px; flex-wrap: wrap; }
.card-cli .mover { font-size: 13px; padding: 4px 6px; }
@media (hover: hover) and (pointer: fine) { .card-cli .mover { opacity: 0; } .card-cli:hover .mover, .card-cli:focus-within .mover { opacity: 1; } }
.card-cli.parado .ajuda:last-of-type { color: var(--crit); }
.card-cli .valor { font-weight: 600; }
.barras { display: grid; gap: 8px; }
.barra { display: grid; grid-template-columns: minmax(110px, 210px) 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; }
.barra .t { background: var(--fio-2); height: 10px; border-radius: 999px; overflow: hidden; }
.barra .f { background: var(--tinta); height: 100%; }
.barra .n { font-weight: 600; }
td.bom { color: var(--ok); font-weight: 600; }
td.medio { color: var(--aviso); }
td.ruim { color: var(--crit); }
.ag { padding: 11px 0; border-top: 1px solid var(--fio-2); display: grid; gap: 3px; }
.ag:first-of-type { border-top: 0; }
.ag-q { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-q b { font-weight: 600; }
.filtros-lista { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.paginacao { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 14px; }
.filtros-lista .cresce { flex: 1; min-width: 200px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-sel { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--fio); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip-sel:has(input:checked) { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--faixa); }
.entrar .cartao { width: 100%; max-width: 400px; }
.marca-entrar { display: flex; gap: 8px; align-items: center; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; }
  .funil { grid-template-columns: repeat(var(--n, 5), 80vw); scroll-snap-type: x mandatory; }
  .coluna { scroll-snap-align: start; }
  .barra { grid-template-columns: 1fr auto; }
  .barra .t { grid-column: 1 / -1; grid-row: 2; }
  .tempo-cli .bolha { max-width: 92%; }
}
.topo form.acoes select { width: auto; min-width: 180px; }

/* cadastro público: campo isca (anti-robô) fora da tela; aceite dos termos */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.entrar .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.entrar .check input{margin-top:3px;width:18px;height:18px;flex:none}
.entrar select{width:100%}
/* pedido de teste grátis (teste guiado): os 3 passos e a lição de casa */
.passos-teste{margin:0 0 16px;padding:12px 14px 12px 32px;background:var(--chao);border:1px solid var(--fio);border-radius:var(--raio);font-size:14px;line-height:1.5}
div.passos-teste{padding-left:14px}
div.passos-teste ol{margin:6px 0 8px;padding-left:18px}
.passos-teste li+li{margin-top:4px}

/* faixa do teste grátis no topo das telas da loja: discreta; fica amarela nos últimos 3 dias */
.faixa-teste { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 16px; font-size: 14px;
  background: var(--faixa); border-bottom: 1px solid var(--fio); color: var(--aco); }
.faixa-teste a { color: var(--texto); font-weight: 600; }
.faixa-teste.perto { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso-claro); }
.faixa-teste.perto a { color: var(--aviso); }

/* primeiros passos (tela Hoje da loja nova): lista numerada, cada passo se marca sozinho */
.primeiros { border: 1px solid var(--fio); border-radius: var(--raio); background: var(--sup); padding: 16px 18px; margin-bottom: 20px; }
.primeiros-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.primeiros-cab h2 { font-size: 16px; margin: 0; }
.primeiros-cab span { color: var(--aco); font-size: 14px; }
.barra-prog { height: 4px; background: var(--fio-2); border-radius: 99px; margin: 10px 0 6px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.primeiros ol { list-style: none; margin: 0; padding: 0; display: grid; }
.primeiros li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fio-2); }
.primeiros li:first-child { border-top: 0; }
.marca-passo { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--fio); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--aco); }
.primeiros li.feito .marca-passo { background: var(--ok); border-color: var(--ok); color: #fff; }
.primeiros li.feito .marca-passo .ico-svg { width: 14px; height: 14px; stroke: currentColor; }
.passo-txt { display: grid; gap: 2px; min-width: 0; }
.passo-txt a { font-weight: 600; color: var(--texto); }
.primeiros li.feito .passo-txt a { color: var(--aco); font-weight: 500; }
.passo-txt small { color: var(--aco); font-size: 13px; }
.primeiros li > form, .primeiros li > .ajuda { grid-column: 2 / -1; }
@media (min-width: 700px) { .primeiros li > form, .primeiros li > .ajuda { grid-column: auto; } }

/* termos e privacidade: leitura confortável, uma coluna */
.documento { max-width: 68ch; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.6; }
.documento h1 { font-size: 28px; margin: 8px 0; }
.documento h2 { font-size: 18px; margin: 28px 0 8px; }
.documento ul { padding-left: 20px; }
.documento .rascunho { background: var(--aviso-claro); color: var(--aviso); padding: 8px 12px; border-radius: var(--raio); font-size: 14px; }
.excluir-conta { margin-top: 16px; }
.excluir-conta summary { color: var(--crit); font-weight: 600; }

/* meu plano: escolha do plano em cartões lado a lado (empilham no celular) */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.plano-op { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--fio); border-radius: var(--raio); padding: 14px; cursor: pointer; }
.plano-op:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.plano-op > span { display: grid; gap: 2px; }
.plano-op .preco { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plano-op .preco small, .plano-op small { font-size: 13px; color: var(--aco); font-weight: 400; }
.planos-form { display: grid; gap: 10px; }
.nowrap { white-space: nowrap; }

/* sistema interno da equipe Voice (/interno): faixa escura sempre visível, para nunca confundir com a conta de
   um cliente; e a faixa do suporte dentro da loja de um cliente */
.interno-faixa { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 16px; font-size: 13px;
  background: #111113; color: #E8E8EC; }
.interno-faixa a { color: #FFD400; }
.interno-selo { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #FFD400; color: #111113;
  font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.faixa-suporte { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 16px; font-size: 14px;
  background: #111113; color: #E8E8EC; }
.faixa-suporte a { color: #FFD400; font-weight: 600; }
body.interno .entrar { min-height: calc(100vh - 36px); }
/* tabela que vira uma pilha de blocos no celular (cada célula com o rótulo da coluna) */
@media (max-width: 700px) {
  .t-pilha tr:first-child { display: none; }
  .t-pilha, .t-pilha tbody, .t-pilha tr, .t-pilha td { display: block; width: 100%; }
  .t-pilha tr { padding: 12px 0; border-bottom: 1px solid var(--fio); }
  .t-pilha td { padding: 6px 0; border: 0; }
  .t-pilha td[data-rot]::before { content: attr(data-rot); display: block; font-size: 12px; color: var(--aco); margin-bottom: 4px; }
}

/* Produtos (o estoque da loja): lista com foto, preço e estoque; a origem dos produtos em cima. */
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--aco); font-size: 13.5px; text-decoration: none; width: fit-content; }
.voltar .ico-svg { transform: rotate(180deg); width: 16px; height: 16px; }
.voltar:hover { color: var(--texto); }
.fonte { gap: 12px; }
.fonte-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fonte-cab h2 { font-size: 15px; }
.fonte-atual { font-size: 14.5px; margin-top: 4px; }
.fonte-cab .ajuda { margin-top: 2px; max-width: 72ch; display: block; }
.fonte-trocar > summary { list-style: none; width: fit-content; }
.fonte-trocar > summary::-webkit-details-marker { display: none; }
.fonte-trocar[open] > summary { margin-bottom: 12px; }
.fonte-form { display: grid; gap: 14px; }
.opcoes-fonte { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.opcao-fonte { border: 1px solid var(--fio); border-radius: 8px; padding: 11px 12px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; cursor: pointer; align-items: start; }
.opcao-fonte input { margin: 2px 0 0; accent-color: var(--tinta); width: 16px; height: 16px; }
.opcao-fonte input:focus { outline: none; }
.opcao-fonte > span { display: grid; gap: 3px; }
.opcao-fonte strong { font-weight: 600; font-size: 14px; }
.opcao-fonte:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcao-fonte:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opcao-fonte:hover { background: var(--faixa); }
[data-so-fonte][hidden] { display: none; }

.prod-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio-2); }
.prod { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px 190px; gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--fio-2); }
.prod:hover { background: #FAFAFB; }
.prod-foto { width: 56px; height: 56px; border-radius: 6px; background: var(--faixa); border: 1px solid var(--fio-2); display: grid; place-items: center; overflow: hidden; color: #A6A6B0; }
.prod-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-foto.grande { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; }
.prod-foto.grande .ico-svg { width: 36px; height: 36px; }
.prod-txt { display: grid; gap: 1px; min-width: 0; }
.prod-nome { font-weight: 600; font-size: 14.5px; color: var(--texto); text-decoration: none; }
.prod-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.prod-desc { color: var(--aco); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-preco { font-size: 14.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.prod-est { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.prod.acabou .prod-nome, .prod.acabou .prod-preco { color: var(--aco); }
.prod.acabou .prod-foto img { opacity: .55; }
.passo { display: inline-flex; border: 1px solid var(--fio); border-radius: var(--raio); }
.passo .ico { width: 32px; height: 30px; border-radius: 0; }
.passo .ico + .ico { border-left: 1px solid var(--fio); }
.passo .ico:disabled { opacity: .35; cursor: default; background: none; }
.passo .ico-svg { width: 15px; height: 15px; }
.vazio-prod { display: grid; justify-items: start; gap: 10px; padding: 8px 0; max-width: 60ch; }
.vazio-prod > .ico-svg { width: 28px; height: 28px; color: var(--aco); }

.prod-form-grade { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 22px; align-items: start; }
.prod-form-foto, .prod-form-dados { display: grid; gap: 14px; }
.prod-ficha { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; }
.prod-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 20px; margin: 0; align-content: start; }
.prod-dados div { display: grid; gap: 2px; }
.prod-dados .largo { grid-column: 1 / -1; }
.prod-dados dt { font-size: 12.5px; color: var(--aco); }
.prod-dados dd { margin: 0; font-size: 14.5px; white-space: pre-line; }

@media (max-width: 860px) {
  .prod { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "f t" "f p" "f e"; gap: 2px 12px; align-items: start; padding: 12px 0; }
  .prod > .prod-foto { grid-area: f; }
  .prod > .prod-txt { grid-area: t; }
  .prod > .prod-preco { grid-area: p; text-align: left; }
  .prod > .prod-est { grid-area: e; justify-content: space-between; margin-top: 4px; }
  .passo .ico { width: 44px; height: 40px; }
  .prod-form-grade, .prod-ficha { grid-template-columns: minmax(0, 1fr); }
  .prod-foto.grande { max-width: 200px; }
  .kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis.quatro .kpi { padding: 10px 6px 10px 0; } .kpis.quatro .kpi + .kpi { padding-left: 8px; }
  .kpis.quatro .l { font-size: 12px; }
}

/* ---------------- Ações: a lista e o editor do fluxograma em raias (contrato em
   .impeccable/surfaces/painel-templates-painel-acao-html.md). Cada passo mora na coluna de quem recebe (o cliente, você
   e a equipe, os sistemas) e o caminho desce em zigue-zague; "Se" e "Esperar" atravessam as três raias. ---------------- */
.acoes-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.acao-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px minmax(170px, 240px); gap: 14px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--fio); }
.acao-linha:hover { background: #FAFAFB; }
.acao-linha.desligada .acao-corpo, .acao-linha.desligada .mapa { opacity: .55; }
.acao-chave { display: grid; place-items: center; min-height: 44px; }
.interruptor { appearance: none; border: 0; padding: 0; cursor: pointer; width: 36px; height: 20px; border-radius: 999px; background: #C9C9D2;
  position: relative; transition: background-color .15s; }
.interruptor::before { content: ""; position: absolute; inset: -12px -4px; }
.interruptor::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .15s; }
.interruptor[aria-checked="true"] { background: var(--tinta); }
.interruptor[aria-checked="true"]::after { transform: translateX(16px); }
.acao-corpo { display: grid; gap: 3px; text-decoration: none; min-width: 0; }
.acao-nome { font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acao-corpo:hover .acao-nome { text-decoration: underline; text-underline-offset: 3px; }
.acao-quando { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.acao-quando .ico-svg { width: 15px; height: 15px; color: var(--aco); }
.acao-resumo { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--aco); }
.acao-resumo b { font-weight: 500; color: var(--texto); }
.acao-estado { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 13px; color: var(--aco); }
.acao-estado .tag { white-space: normal; }
/* o mapa: a silhueta do fluxograma, uma marca por passo na raia dele (linha cheia = Se ou Esperar) */
.mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 5px; gap: 3px 3px; width: 52px; padding: 6px 5px;
  border: 1px solid var(--fio-2); border-radius: 4px; background: var(--faixa); align-content: start; min-height: 30px; }
.mapa i { border-radius: 999px; background: var(--tinta); }
.mapa i.cliente { grid-column: 1; } .mapa i.equipe { grid-column: 2; } .mapa i.sistemas { grid-column: 3; }
.mapa i.logica { grid-column: 1 / -1; background: #A9A9B3; height: 2px; align-self: center; }
.nova-acao { gap: 12px; }
.receitas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.receitas a { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--fio); border-radius: 8px; text-decoration: none; height: 100%; align-content: start; }
.receitas a:hover { border-color: #C9C9D2; background: var(--faixa); }
.receitas b, .gatilhos b { font-weight: 600; font-size: 14px; }
.receitas small, .gatilhos small { color: var(--aco); font-size: 13px; display: block; }
.do-zero > summary { list-style: none; width: fit-content; }
.do-zero > summary::-webkit-details-marker { display: none; }
.gatilhos { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--fio-2); }
.gatilhos a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--fio-2); text-decoration: none; }
.gatilhos a:hover { background: var(--faixa); }
.gatilhos .ico-svg { width: 16px; height: 16px; color: var(--aco); margin-top: 2px; }

.acao-ed { gap: 14px; }
.ed-barra { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: sticky; top: 0; z-index: 6;
  background: var(--chao); padding: 8px 0; border-bottom: 1px solid var(--fio-2); }
.ed-nome { flex: 1; min-width: min(100%, 240px); }
.ed-nome input[type=text] { font: 600 22px/1.25 var(--f-texto); letter-spacing: -.02em; border-color: transparent; padding: 4px 8px; margin-left: -8px; }
.ed-nome input[type=text]:hover { border-color: var(--fio); }
.ed-estado { font-size: 13px; color: var(--aco); min-width: 0; }
.ed-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ed-painel { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; border: 1px solid var(--fio); border-radius: 8px;
  background: var(--sup); padding: 16px; display: grid; gap: 12px; align-content: start; }
.ed-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ed-cab h2 { font-size: 16px; display: flex; gap: 8px; align-items: center; }
.ed-cab h2 .ico-svg { color: var(--aco); }
.ed-cab .fx-raia { display: block; margin-bottom: 2px; }
.ed-fechar { display: none; margin: -6px -8px 0 0; }
.ed-guia { display: grid; gap: 10px; font-size: 14px; }
.ed-guia h2 { font-size: 16px; }
.ed-guia ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--aco); }
.mais-ex { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--fio); vertical-align: -5px; }
.mais-ex .ico-svg { width: 12px; height: 12px; }
.ed-rodape { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--fio-2); }
.radios { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-width: 0; }
.radios legend { padding: 0; margin-bottom: 6px; }
.radios label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 1px 8px; align-items: start; font-size: 14px; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--fio); border-radius: var(--raio); }
.radios label small { grid-column: 2; color: var(--aco); font-size: 12.5px; }
.radios label:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.radios label:has(input:disabled) { opacity: .5; cursor: default; }
.radios input { accent-color: var(--tinta); margin: 3px 0 0; width: 15px; height: 15px; }
.radios input:focus { outline: none; }
.radios label:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vars .ajuda { font-size: 12.5px; width: 100%; }
.chip-var { font: 12.5px ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--fio);
  background: var(--faixa); color: var(--texto); cursor: pointer; }
.chip-var:hover { border-color: #C9C9D2; background: var(--sup); }
.duas-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ins-grupo { display: grid; gap: 6px; }
.ins-grupo + .ins-grupo { padding-top: 10px; border-top: 1px solid var(--fio-2); }
.ins-grupo h3 { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ins-grupo h3 small { font-weight: 400; color: var(--aco); font-size: 12.5px; }
.ins-op { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; text-align: left; padding: 9px 10px; border: 1px solid var(--fio);
  border-radius: var(--raio); background: var(--sup); font: inherit; color: inherit; cursor: pointer; }
.ins-op:hover { background: var(--faixa); border-color: #C9C9D2; }
.ins-op .ico-svg { width: 16px; height: 16px; color: var(--aco); margin-top: 2px; }
.ins-op b { font-weight: 600; font-size: 14px; display: block; }
.ins-op small { color: var(--aco); font-size: 12.5px; display: block; }
.ed-caso { border: 1px solid var(--fio); border-radius: 8px; padding: 8px 12px 12px; display: grid; gap: 8px; margin: 0; min-width: 0; }
.ed-caso legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.ed-caso.foco { border-color: var(--tinta); }
.cond { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 30px; gap: 6px; align-items: center; }
.cond select[data-cond="campo"] { grid-column: 1 / -1; }
.cond + .cond { padding-top: 8px; border-top: 1px dashed var(--fio); }
.cond select, .cond input { font-size: 13.5px; padding: 6px 8px; }
.sim-escolhas { display: grid; gap: 10px; }
.sim-res { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--fio-2); }
.hp { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 13.5px; align-items: start; overflow-wrap: anywhere; }
.hp .ico-svg { width: 15px; height: 15px; margin-top: 3px; }
.hp.ok .ico-svg { color: var(--ok); } .hp.falhou { color: var(--crit); } .hp.pulado, .hp.cancelada, .hp.esperando { color: var(--aco); }
.hist-passos summary { font-size: 13.5px; color: var(--aco); }
.hist-passos ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hist-titulo { font-weight: 600; font-size: 14.5px; color: var(--texto) !important; }
.hist-vazio { padding: 12px 14px; }
.passe-lista .tag { justify-self: start; }
.ed-excluir { justify-self: start; }

/* o fluxograma */
.fluxo { --linha: #A9A9B3; position: relative; border: 1px solid var(--fio); border-radius: 8px; padding-bottom: 16px; min-width: 0;
  background: linear-gradient(to right, transparent calc(33.333% - .5px), var(--fio-2) calc(33.333% - .5px), var(--fio-2) calc(33.333% + .5px),
    transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--fio-2) calc(66.666% - .5px), var(--fio-2) calc(66.666% + .5px),
    transparent calc(66.666% + .5px)); }
.fx-raias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: sticky; top: 55px; z-index: 2; background: var(--faixa);
  border-bottom: 1px solid var(--fio); border-radius: 8px 8px 0 0; }
.fx-raias > div { padding: 9px 12px; display: grid; gap: 1px; min-width: 0; }
.fx-raias > div + div { border-left: 1px solid var(--fio); }
.fx-raias b { font-size: 13px; font-weight: 600; }
.fx-raias small { font-size: 12px; color: var(--aco); }
.fx-banda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: calc(100% - 24px); margin: 0 12px; padding: 10px 14px;
  border: 1px solid var(--fio); border-radius: 8px; background: var(--faixa); font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .25s; }
.fx-banda .ico-svg { width: 16px; height: 16px; align-self: center; color: var(--aco); }
.fx-banda b { font-weight: 600; font-size: 14px; }
.fx-banda small { color: var(--aco); font-size: 13px; }
.fx-banda:hover { border-color: #C9C9D2; }
.fx-gatilho { margin-top: 14px; background: var(--tinta); color: #fff; border-color: var(--tinta); }
.fx-gatilho .ico-svg, .fx-gatilho small { color: #C9C9D2; }
.fx-gatilho:hover { border-color: var(--tinta); background: #2A2A30; }
.fx-gatilho.sel { box-shadow: 0 0 0 2px var(--chao), 0 0 0 4px var(--tinta); }
.fx-seq { list-style: none; margin: 0; padding: 0; }
.fx-liga { position: relative; height: 36px; }
.fx-liga i { position: absolute; border: 0 solid var(--linha); transition: border-color .25s; }
.fx-liga .v1 { left: calc((var(--de) + .5) * 100% / 3); top: 0; height: 50%; border-left-width: 1.5px; margin-left: -.75px; }
.fx-liga .h { left: calc((var(--a) + .5) * 100% / 3); width: calc(var(--d) * 100% / 3); top: 50%; border-top-width: 1.5px; margin-top: -.75px; }
.fx-liga .v2 { left: calc((var(--para) + .5) * 100% / 3); top: 50%; height: 50%; border-left-width: 1.5px; margin-left: -.75px; }
.fx-liga.ultimo { height: 30px; }
.fx-liga.ultimo .v2 { display: none; }
.fx-mais { position: absolute; left: calc((var(--para) + .5) * 100% / 3); top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--fio); background: var(--sup); color: var(--aco); display: grid; place-items: center; cursor: pointer;
  padding: 0; z-index: 1; transition: opacity .15s, background-color .15s; }
.fx-mais::before { content: ""; position: absolute; inset: -10px; }
.fx-mais .ico-svg { width: 14px; height: 14px; }
.fx-mais:hover, .fx-mais.sel { background: var(--tinta); color: #fff; border-color: var(--tinta); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fx-mais { opacity: 0; }
  .fx-liga:hover .fx-mais, .fx-mais:focus-visible, .fx-seq > .fx-liga:only-child .fx-mais { opacity: 1; }
}
.fx-passo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-card { margin: 0 10px; display: grid; gap: 3px; text-align: left; font: inherit; color: inherit; background: var(--sup); border: 1px solid var(--fio);
  border-radius: 8px; padding: 10px 12px; cursor: pointer; min-width: 0; align-content: start;
  transition: border-color .15s, box-shadow .15s, opacity .25s; }
.fx-card:hover { border-color: #C9C9D2; }
.fx-card.sel, .fx-banda.sel, .fx-caso-cab.sel { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.fx-tit { display: flex; gap: 7px; align-items: center; font-weight: 600; font-size: 13.5px; }
.fx-tit .ico-svg { width: 16px; height: 16px; color: var(--aco); }
.fx-l1 { font-size: 13px; overflow-wrap: anywhere; }
.fx-l2 { font-size: 12.5px; color: var(--aco); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-card .tag { justify-self: start; white-space: normal; margin-top: 2px; }
.fx-raia { display: none; font-size: 11.5px; color: var(--aco); }
.fx-se { border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); padding: 10px 0 2px; margin: 0; background: rgb(247 247 248 / .55); }
.fx-caso { padding-top: 10px; }
.fx-caso + .fx-caso { border-top: 1px dashed var(--fio); margin-top: 4px; }
.fx-caso-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; width: calc(100% - 24px); margin: 0 12px; padding: 7px 12px;
  border: 1px solid var(--fio); border-radius: var(--raio); background: var(--sup); font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .25s; }
.fx-caso-cab:hover { border-color: #C9C9D2; }
.fx-caso-n { font-weight: 600; font-size: 13px; white-space: nowrap; }
.fx-caso-t { font-size: 13.5px; }
.fx-caso-t small { color: var(--aco); font-size: 12.5px; }
.fx-caso.senao .fx-caso-t { color: var(--aco); }
.fx-fim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.fx-fim span { grid-column: 2; justify-self: center; font-size: 12px; color: var(--aco); border: 1px solid var(--fio); border-radius: 999px; padding: 1px 10px;
  background: var(--sup); }
/* simular: tudo apaga e o caminho percorrido acende em tinta, passo a passo */
.fluxo.sim-on .fx-card, .fluxo.sim-on .fx-banda:not(.fx-gatilho), .fluxo.sim-on .fx-caso-cab { opacity: .38; }
.fluxo.sim-on .fx-liga i { border-color: var(--fio); }
.fluxo.sim-on .fx-card.rodou, .fluxo.sim-on .fx-banda.rodou, .fluxo.sim-on .fx-caso.rodou > .fx-caso-cab { opacity: 1; border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta); transition-delay: calc(var(--o, 0) * 70ms); }
.fluxo.sim-on .fx-liga.rodou i { border-color: var(--tinta); transition-delay: calc(var(--o, 0) * 70ms); }
.fx-sim { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 6px; font-size: 12.5px; padding-top: 6px; margin-top: 4px;
  border-top: 1px dashed var(--fio); overflow-wrap: anywhere; }
.fx-sim .ico-svg { width: 14px; height: 14px; margin-top: 2px; }
.fx-sim.ok .ico-svg { color: var(--ok); } .fx-sim.pulado { color: var(--aco); } .fx-sim.falhou { color: var(--crit); }

@media (max-width: 1100px) {
  .ed-grade { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 860px) {
  .acao-linha { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; align-items: start; }
  .acao-linha .mapa { display: none; }
  .acao-estado { grid-column: 2; justify-items: start; text-align: left; }
  .ed-barra { top: calc(53px + env(safe-area-inset-top, 0px)); }
  .ed-nome input[type=text] { font-size: 19px; }
  .ed-barra .acoes { width: 100%; }
  .ed-barra .acoes .btn { flex: 1; }
  .ed-estado { width: 100%; order: -1; }
  .ed-grade { grid-template-columns: minmax(0, 1fr); }
  .fluxo { background: none; }
  .fx-raias { display: none; }
  .fx-passo, .fx-fim { grid-template-columns: minmax(0, 1fr); }
  .fx-card { grid-column: 1 !important; }
  .fx-fim span { grid-column: 1; }
  .fx-raia { display: block; }
  .fx-liga .h { display: none; }
  .fx-liga .v1, .fx-liga .v2, .fx-mais { left: 50%; }
  .fx-liga { height: 44px; }
  .fx-mais { width: 30px; height: 30px; }
  .ed-painel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 84dvh; border-radius: 8px 8px 0 0; z-index: 45; display: none;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgb(17 17 19 / .18); border-bottom: 0; }
  .ed-painel.aberto { display: grid; }
  .ed-fechar { display: grid; }
  body.folha-aberta { overflow: hidden; }
  body.folha-aberta::after { content: ""; position: fixed; inset: 0; background: rgb(17 17 19 / .32); z-index: 44; }
  .cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .cond select, .cond input { font-size: 16px; }
  .duas-c { grid-template-columns: minmax(0, 1fr); }
}
#ed-painel .chave.rep { margin-top: 18px; }

/* ---------------- Fluxo do atendimento: o texto da conversa e o desenho, uma coisa só ----------------
   À esquerda o "Fluxo da conversa" como papel de leitura (frase a frase, acende a do passo tocado); à direita a espinha
   de passos sobre a faixa, com os acontecimentos saindo dela na altura em que acontecem (a faixa preta "Quando" do
   editor das Ações). Contrato: .impeccable/surfaces/painel-templates-painel-acoes-html.md */
.fluxo-at { --linha: #A9A9B3; --col: 280px; }
.fa-avisos { border: 1px solid var(--fio); border-radius: 8px; background: var(--sup); }
.fa-avisos summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer;
  list-style: none; min-height: 44px; }
.fa-avisos summary::-webkit-details-marker { display: none; }
.fa-avisos summary .ico-svg { color: var(--aco); transition: transform .18s ease-out; }
.fa-avisos[open] summary { border-bottom: 1px solid var(--fio); }
.fa-avisos[open] summary .ico-svg { transform: rotate(180deg); }
.fa-avisos h2 { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.fa-n { font-size: 12px; font-weight: 600; min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--fio-2); color: var(--aco); font-variant-numeric: tabular-nums; }
.fa-avisos ul { list-style: none; margin: 0; padding: 0; }
.fa-aviso { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 14px; }
.fa-aviso + .fa-aviso { border-top: 1px solid var(--fio-2); }
.fa-aviso .tag { justify-self: start; margin-top: 2px; }
.fa-aviso b { font-weight: 600; font-size: 14px; }
.fa-aviso p { font-size: 13.5px; color: var(--aco); max-width: 78ch; }
.fa-abas { display: none; }
.fa-grade { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.85fr); gap: 20px; align-items: start; }
.fa-texto { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid var(--fio); border-radius: 8px;
  background: var(--sup); padding: 14px 16px 16px; display: grid; gap: 12px; align-content: start; }
.fa-texto-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fa-texto-cab h2 { font-size: 15px; }
.fa-leitura { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; max-width: 68ch; }
.fa-frase { border-radius: 4px; transition: background-color .18s ease-out; }
.fa-frase.ligada { cursor: pointer; }
.fa-frase.ligada:hover { background: var(--faixa); }
.fa-frase.acesa { background: var(--fio-2); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--tinta);
  text-underline-offset: 4px; }
.fa-frase:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.fa-sem-texto { display: grid; gap: 10px; white-space: normal; font-size: 14.5px; }
.fa-sem-texto .btn { justify-self: start; }
.fa-edicao, .fa-previa { display: grid; gap: 12px; }
.fa-edicao[hidden], .fa-previa[hidden], .fa-passo[hidden], .fa-leitura[hidden] { display: none; }
.fa-edicao textarea { width: 100%; min-height: 340px; font: 15px/1.6 var(--f-texto); color: var(--texto); padding: 10px 12px; resize: vertical;
  border: 1px solid var(--fio); border-radius: var(--raio); background: var(--campo); }
.fa-edicao textarea:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.fa-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fa-previa-nota { font-size: 13.5px; color: var(--aco); }
.fa-novo { background: var(--ok-claro); color: var(--ok); text-decoration: underline; text-decoration-color: var(--ok); text-underline-offset: 3px; }
.fa-saiu { color: var(--aco); text-decoration: line-through; text-decoration-color: var(--crit); }
.fa-estado { font-size: 13.5px; color: var(--aco); min-height: 0; }
.fa-estado:empty { display: none; }
.fa-estado[data-tipo="erro"] { color: var(--crit); }
.fa-passo { border: 1px solid var(--tinta); border-radius: 8px; padding: 12px; display: grid; gap: 9px; background: var(--faixa); }
.fa-passo-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.fa-fechar { appearance: none; border: 0; background: none; color: var(--aco); width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--raio); cursor: pointer; margin: -6px -6px -6px 0; }
.fa-fechar:hover { background: var(--fio-2); color: var(--texto); }
.fa-rot { font-size: 12.5px; color: var(--aco); }
.fa-passo textarea { width: 100%; font: 14.5px/1.5 var(--f-texto); padding: 8px 10px; border: 1px solid var(--fio); border-radius: var(--raio);
  background: var(--campo); color: var(--texto); resize: vertical; }
.fa-passo textarea:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }

.fa-desenho { border: 1px solid var(--fio); border-radius: 8px; background: var(--faixa); padding: 18px 16px 16px; display: grid; gap: 22px; min-width: 0; }
.fa-aguarde { display: flex; gap: 9px; align-items: center; font-size: 13.5px; color: var(--aco); }
.fa-pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); animation: fa-pulso 1.1s ease-out infinite; }
@keyframes fa-pulso { 0% { opacity: 1; } 100% { opacity: .2; } }
.fa-espinha { display: grid; }
.fa-linha { position: relative; display: grid; grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr); column-gap: 30px; align-items: start; padding-top: 18px; }
.fa-linha:first-child { padding-top: 0; }
.fa-linha:not(:first-child)::before { content: ""; position: absolute; top: 0; height: 18px; left: calc(var(--col) / 2); border-left: 1.5px solid var(--linha);
  margin-left: -.75px; }
.fa-caixa { appearance: none; width: 100%; display: grid; gap: 3px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--sup);
  border: 1px solid var(--fio); border-radius: 8px; padding: 10px 12px; transition: border-color .18s ease-out, box-shadow .18s ease-out; }
.fa-caixa:hover { border-color: var(--linha); }
.fa-caixa.sel { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.fa-caixa.espera { border-style: dashed; border-color: var(--linha); }
.fa-caixa.espera.sel { border-style: solid; border-color: var(--tinta); }
.fa-caixa.apagada { opacity: .58; }
.fa-txt { font-size: 14px; overflow-wrap: anywhere; }
.fa-caixa small { font-size: 12.5px; color: var(--aco); overflow-wrap: anywhere; }
.fa-espera { justify-self: start; }
.fa-no { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; align-items: center; font-weight: 600; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--fio); border-radius: 999px; background: var(--sup); }
.fa-no .ico-svg { color: var(--aco); width: 17px; height: 17px; }
.fa-no small { grid-column: 2; font-weight: 400; font-size: 12.5px; color: var(--aco); }
.fa-fim .ico-svg { color: var(--ok); }
.fa-se { grid-template-columns: minmax(0, 1fr); }
.fa-se-cab { display: flex; gap: 7px; align-items: center; justify-self: start; font-size: 13.5px; font-weight: 600; padding: 6px 12px;
  border: 1px solid var(--fio); border-radius: 999px; background: var(--sup); max-width: calc(var(--col) - 16px); position: relative;
  left: calc(var(--col) / 2); transform: translateX(-50%); }
.fa-se-cab .ico-svg { width: 16px; height: 16px; color: var(--aco); }
.fa-trilhos { display: grid; grid-template-columns: repeat(2, minmax(0, var(--col))); gap: 14px; margin-top: 14px; position: relative; }
.fa-trilhos::before { content: ""; position: absolute; top: -14px; height: 14px; left: calc(var(--col) / 2); width: calc(var(--col) + 14px);
  border: 1.5px solid var(--linha); border-bottom: 0; border-radius: 8px 8px 0 0; }
.fa-trilho { display: grid; gap: 8px; align-content: start; }
.fa-op { justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--texto); background: var(--sup); border: 1px solid var(--fio);
  border-radius: 4px; padding: 0 7px; }
.fa-trilho.pula .fa-op { color: var(--aco); font-weight: 400; }
.fa-pula { font-size: 13px; color: var(--aco); padding: 2px 2px 0; }

.fa-ramo { display: grid; gap: 12px; position: relative; }
.fa-ramo::before { content: ""; position: absolute; left: -30px; top: 21px; width: 30px; border-top: 1.5px solid var(--linha); }
.fa-evento { background: var(--sup); border: 1px solid var(--fio); border-radius: 8px; overflow: hidden; display: grid; }
.fa-quando { display: flex; gap: 8px; align-items: center; background: var(--tinta); color: #fff; padding: 9px 12px; font-size: 14px; }
.fa-quando small { color: var(--no-quadro-2); font-size: 12.5px; margin-right: 2px; }
.fa-quando b { font-weight: 600; }
.fa-quando .ico-svg { width: 16px; height: 16px; color: #C9C9D2; }
.fa-acoes { list-style: none; margin: 0; padding: 0; }
.fa-acao { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 12px 8px 6px;
  transition: background-color .18s ease-out; }
.fa-acao + .fa-acao { border-top: 1px solid var(--fio-2); }
.fa-acao.desligada .fa-acao-corpo, .fa-acao.desligada .mapa { opacity: .55; }
.fa-acao.realce { background: var(--fio-2); box-shadow: inset 0 0 0 1px var(--tinta); }
.fa-acao-corpo { display: grid; gap: 2px; text-decoration: none; min-width: 0; }
.fa-acao-corpo:hover .acao-nome { text-decoration: underline; text-underline-offset: 3px; }
.fa-acao-corpo .tag.warn { justify-self: start; margin-top: 3px; white-space: normal; }
.fa-vazio { font-size: 13px; color: var(--aco); padding: 10px 12px 0; }
.fa-sem-passos { padding: 14px 0 0; }
.fa-nova { display: inline-flex; gap: 5px; align-items: center; justify-self: start; font-size: 13px; color: var(--aco); text-decoration: none;
  padding: 8px 12px 10px; min-height: 36px; }
.fa-nova .ico-svg { width: 14px; height: 14px; }
.fa-nova:hover { color: var(--texto); text-decoration: underline; }
.fa-fora { border-top: 1px solid var(--fio); padding-top: 16px; display: grid; gap: 12px; }
.fa-fora h2 { font-size: 15px; }
.fa-fora-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.fa-sistema .fa-quando { background: var(--sup); color: var(--texto); border-bottom: 1px solid var(--fio); }
.fa-sistema .fa-quando small, .fa-sistema .fa-quando .ico-svg { color: var(--aco); }
.fa-sistema .fa-vazio { padding-bottom: 12px; }
/* redesenhando: as caixas viram esqueleto até o plano novo chegar */
.fa-desenho.redesenhando .fa-caixa, .fa-desenho.redesenhando .fa-evento { color: transparent; pointer-events: none;
  background: linear-gradient(90deg, var(--fio-2) 0%, #F8F8FA 50%, var(--fio-2) 100%) 0 0 / 200% 100%; animation: fa-brilho 1.4s linear infinite; }
.fa-desenho.redesenhando .fa-caixa *, .fa-desenho.redesenhando .fa-evento * { visibility: hidden; }
@keyframes fa-brilho { to { background-position: -200% 0; } }

@media (max-width: 1180px) { .fluxo-at { --col: 250px; } }
@media (max-width: 860px) {
  .fa-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--faixa); border: 1px solid var(--fio); border-radius: 8px; }
  .fa-abas button { appearance: none; border: 1px solid transparent; background: none; font: 600 14px var(--f-texto); color: var(--aco); min-height: 40px;
    border-radius: var(--raio); cursor: pointer; }
  .fa-abas button[aria-selected="true"] { background: var(--sup); color: var(--texto); border-color: var(--fio); }
  .fa-grade { grid-template-columns: minmax(0, 1fr); }
  .fa-grade[data-aba="desenho"] .fa-texto > :not(.fa-passo) { display: none; }
  .fa-grade[data-aba="desenho"] .fa-texto { border: 0; padding: 0; background: none; }
  .fa-grade[data-aba="texto"] .fa-desenho { display: none; }
  .fa-texto { position: static; max-height: none; overflow: visible; }
  .fa-leitura, .fa-edicao textarea { font-size: 16px; }
  .fa-aviso { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fa-aviso .btn { justify-self: start; }
  .fa-desenho { padding: 14px 12px; }
  .fa-linha { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .fa-linha:not(:first-child)::before { left: 22px; }
  .fa-ramo { padding-left: 22px; border-left: 1px solid var(--fio); margin-left: 22px; }
  .fa-ramo::before { display: none; }
  .fa-se-cab { left: 0; transform: none; }
  .fa-nova { min-height: 44px; }
  .fa-trilhos { grid-template-columns: minmax(0, 1fr); }
  .fa-trilhos::before { display: none; }
  .fa-nova { min-height: 44px; }
  .fa-passo.aberto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 84dvh; overflow-y: auto; border-radius: 8px 8px 0 0;
    background: var(--sup); border: 1px solid var(--fio); border-bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgb(17 17 19 / .18); }
  .fa-passo textarea { font-size: 16px; }
  .fa-passo .btn { min-height: 44px; }
  .fa-fechar { width: 44px; height: 44px; }
  body.folha-aberta { overflow: hidden; }
  body.folha-aberta::after { content: ""; position: fixed; inset: 0; background: rgb(17 17 19 / .32); z-index: 44; }
}
@media (prefers-reduced-motion: reduce) { .fa-pulso, .fa-desenho.redesenhando .fa-caixa, .fa-desenho.redesenhando .fa-evento { animation: none; } }
.fa-acao-st { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; color: var(--aco); margin-top: 2px; }
/* computador: os acontecimentos correm na coluna da direita, presos à altura do passo deles, sem empurrar a conversa
   (fluxo.js mede e posiciona; sem JavaScript, ficam na linha do passo) */
@media (min-width: 861px) {
  .fa-espinha.posta { position: relative; }
  .fa-espinha.posta .fa-ramo { position: absolute; left: calc(var(--col) + 30px); right: 0; top: var(--topo, 0); }
  .fa-espinha.posta .fa-ramo::before { top: calc(21px - var(--desce, 0px)); width: 15px; }
  .fa-espinha.posta .fa-ramo::after { content: ""; position: absolute; left: -15px; width: 15px; top: calc(21px - var(--desce, 0px));
    height: var(--desce, 0px); border-left: 1.5px solid var(--linha); border-bottom: 1.5px solid var(--linha); border-radius: 0 0 0 6px; }
  .fa-espinha.posta .fa-ramo.reto::after { display: none; }
  .fa-espinha.posta .fa-ramo.reto::before { width: 30px; }
}
/* teste do fluxo: clientes de mentira e o que o juiz achou de cada caixa */
.fa-teste { border: 1px solid var(--fio); border-radius: 8px; background: var(--sup); display: grid; }
.fa-teste-cab { display: grid; gap: 2px; padding: 11px 14px; }
.fa-teste-cab h2 { font-size: 15px; }
.fa-teste-cab p { font-size: 13.5px; color: var(--aco); }
.fa-teste-cab p .fa-pulso { display: inline-block; vertical-align: middle; margin: -2px 7px 0 0; }
.fa-teste-cab p b { color: var(--texto); }
.fa-velho { color: var(--aviso); }
.fa-clientes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.fa-cli { display: grid; gap: 6px; align-content: start; padding: 12px 14px; min-width: 0; }
.fa-cli + .fa-cli { border-left: 1px solid var(--fio); }
.fa-cli-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.fa-cli p { font-size: 13.5px; }
.fa-cli-caso { font-size: 12.5px; color: var(--aco); }
.fa-cli-conversa summary { cursor: pointer; font-size: 13px; color: var(--aco); min-height: 32px; display: flex; align-items: center; }
.fa-cli-conversa summary:hover { color: var(--texto); }
.fa-conversa { display: grid; gap: 6px; padding: 8px 0 2px; max-height: 420px; overflow: auto; }
.fa-conversa .bolha { margin: 0; }
.fa-medidas { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 3px; }
.fa-prova { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 500; padding: 1px 7px 1px 5px; border-radius: 4px; }
.fa-prova .ico-svg { width: 13px; height: 13px; }
.fa-prova.ok { background: var(--ok-claro); color: var(--ok); }
.fa-prova.warn { background: var(--aviso-claro); color: var(--aviso); }
.fa-prova.crit { background: var(--crit-claro); color: var(--crit); }
.fa-real { font-size: 12px; color: var(--aco); }
.fa-provas { display: grid; gap: 6px; border-top: 1px solid var(--fio); padding-top: 10px; }
.fa-provas > b { font-size: 13px; }
.fa-provas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fa-provas li { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.fa-provas li .tag { flex: none; }
@media (max-width: 860px) {
  .fa-clientes { grid-template-columns: minmax(0, 1fr); }
  .fa-cli + .fa-cli { border-left: 0; border-top: 1px solid var(--fio); }
}

/* Troca de vista (Clientes: Lista | Funil; Agenda: Horários | Tarefas): o mesmo desenho das abas Desenho | Texto. */
.vista { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 3px;
  background: var(--faixa); border: 1px solid var(--fio); border-radius: 8px; }
.vista a { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--raio); font-weight: 600; font-size: 13.5px; color: var(--aco);
  text-decoration: none; white-space: nowrap; }
.vista a:hover { color: var(--texto); }
.vista a[aria-current="page"] { background: var(--sup); color: var(--texto); border-color: var(--fio); }
.vista a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
@media (max-width: 860px) {
  .vista a { min-height: 44px; }
}

/* Voz: a escolhida à vista, com o ouvir; as outras só ao tocar em Trocar. */
.vozes-escolha > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 10px;
  align-items: center; border: 1px solid var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); border-radius: 8px;
  padding: 9px 11px; cursor: pointer; max-width: 520px; }
.vozes-escolha > summary::-webkit-details-marker { display: none; }
.vozes-escolha > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.voz-atual { display: grid; min-width: 0; }
.voz-atual b { font-weight: 600; }
.voz-atual small { color: var(--aco); font-size: 12.5px; }
.vozes-escolha .trocar { font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vozes-escolha[open] .trocar { text-decoration: none; color: var(--aco); }
.vozes-escolha > .vozes, .vozes-escolha > .vozes-sub { margin-top: 10px; }
.vozes-escolha > .vozes-sub + .vozes { margin-top: 6px; }

/* Listas editáveis: subir, descer e tirar só aparecem na linha em que se está (mouse ou toque no campo). */
.li-ed .ctl, .par .ctl { opacity: 0; transition: opacity .12s ease-out; }
.li-ed:hover .ctl, .par:hover .ctl, .li-ed:focus-within .ctl, .par:focus-within .ctl { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .li-ed .ctl, .par .ctl { transition: none; } }

/* Hoje de loja já no ar: os passos que faltam numa linha fechada embaixo do quadro. */
.primeiros-depois { margin: 20px 0 0; padding: 0; }
.primeiros-depois > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.primeiros-depois > summary::-webkit-details-marker { display: none; }
.primeiros-depois > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); align-self: center; margin-left: auto; }
.primeiros-depois[open] > summary::after { transform: rotate(-135deg); }
.primeiros-depois > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.primeiros-depois > ol { padding: 0 18px 6px; }

/* Clientes: busca à vista; etapa, responsável, etiqueta e ordem em "Mais filtros". */
.mais-filtros { flex-basis: 100%; }
.mais-filtros > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 4px 0; width: max-content; }
.mais-filtros > .filtros-lista { margin-top: 8px; }

/* "Mais opções" de cada seção (17/10, menos coisas para configurar): o que tem padrão bom fica fechado. */
.mais-opcoes { border-top: 1px solid var(--fio-2); padding-top: 10px; }
.mais-opcoes > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; width: max-content; padding: 4px 0;
  color: var(--aco); list-style: none; display: flex; align-items: center; gap: 8px; }
.mais-opcoes > summary::-webkit-details-marker { display: none; }
.mais-opcoes > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .12s ease-out; }
.mais-opcoes[open] > summary::before { transform: rotate(45deg); }
.mais-opcoes > summary:hover, .mais-opcoes[open] > summary { color: var(--texto); }
.mais-opcoes > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.mais-corpo { display: grid; gap: 14px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .mais-opcoes > summary::before { transition: none; } }
/* Um cartão inteiro fechado numa linha (Arquivos que a IA pode mandar). */
.dobra-cartao > summary { cursor: pointer; list-style: none; border: 1px solid var(--fio); border-radius: 8px;
  padding: 13px 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.dobra-cartao > summary::-webkit-details-marker { display: none; }
.dobra-cartao > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.dobra-cartao[open] > summary { border-radius: 8px 8px 0 0; border-bottom-color: var(--fio-2); }
.dobra-cartao[open] > summary::after { transform: rotate(-135deg); }
.dobra-cartao > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.dobra-cartao > .cartao { border-top: 0; border-radius: 0 0 8px 8px; }
.dobra-cartao > .cartao > h2:first-child { display: none; }
.cartao > .mais-opcoes:first-child { border-top: 0; padding-top: 0; }

/* Sua loja: "Preencher para você" (a IA lê o texto do dono ou o site e preenche os campos vazios). */
.preencher > summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex;
  justify-content: space-between; align-items: center; }
.preencher > summary::-webkit-details-marker { display: none; }
.preencher > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.preencher[open] > summary::after { transform: rotate(-135deg); }
.preencher > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.preencher:not([open]) { gap: 0; }
.preencher-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.preencher-linha input { flex: 1; min-width: 200px; }
#secao .preenchido, #secao .campo .preenchido { background: var(--ok-claro); border-color: var(--ok); }
/* foto do contato (WhatsApp), 18/10 */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #DFE1E5; flex: none; }
.avatar.grande { width: 64px; height: 64px; }
.cliente-cab { display: flex; gap: 14px; align-items: center; }
/* assistente inicial e QR codes (18/10) */
.passos-assistente { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0; counter-reset: passo; }
.passos-assistente li { counter-increment: passo; font-size: 13.5px; color: var(--aco); border: 1px solid var(--fio); border-radius: 99px; background: var(--sup); }
.passos-assistente li > a, .passos-assistente li > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; color: inherit; text-decoration: none; }
.passos-assistente li > a::before, .passos-assistente li > span::before { content: counter(passo); font-variant-numeric: tabular-nums; font-weight: 600; }
.passos-assistente li.feito { color: var(--ok); border-color: currentColor; }
.passos-assistente li.on { color: var(--tinta); background: var(--alerta); border-color: var(--alerta); font-weight: 600; }
.qr-caixa { display: grid; justify-items: start; gap: 8px; min-height: 120px; align-content: start; }
.qr-img { width: 248px; height: 248px; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--fio); }
.qr-img svg { width: 100%; height: 100%; display: block; }
.modo-wa { display: grid; gap: 10px; }
.modo-wa .chave { align-items: flex-start; line-height: 1.45; }
@media (max-width: 860px) {
  .passos-assistente { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .passos-assistente li { flex: none; }
  .qr-img { width: min(248px, 100%); height: auto; aspect-ratio: 1; }
}