/* ═══════════════════════════════════════════════════════════════════════════
   Gari Mail — sistema de design do painel (Fase 6, B-649).
   Extraído do mockup docs/gari-mail-mockup.html. Tudo externo: a CSP é
   style-src 'self' (sem unsafe-inline) — nenhum estilo inline no HTML; valor
   dinâmico (barra de progresso) usa <progress>, não style="".
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --laranja:#F2670C; --laranja-fraco:rgba(242,103,12,.12);
  --verde:#2E8B62; --verde-fraco:rgba(46,139,98,.12);
  --ambar:#B87914; --ambar-fraco:rgba(217,145,26,.14);
  --vermelho:#C0392B; --vermelho-fraco:rgba(192,57,43,.12);
  --radius:6px;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* claro é o padrão em :root, para o 1º paint sem cookie */
  --bg:#F1F2F4; --surface:#FFFFFF; --surface-2:#F7F8F9;
  --texto:#16191C; --texto-2:#5C646C; --texto-3:#8A929A;
  --borda:#DDE0E4; --borda-forte:#C3C8CE;
}
:root[data-theme="dark"]{
  --bg:#16191C; --surface:#1E2327; --surface-2:#252B30;
  --texto:#E8EAEC; --texto-2:#9BA3AB; --texto-3:#6E767E;
  --borda:#2E353B; --borda-forte:#3E464D;
  --ambar:#D9911A;
}
/* sem cookie de tema, respeita a preferência do sistema */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16191C; --surface:#1E2327; --surface-2:#252B30;
    --texto:#E8EAEC; --texto-2:#9BA3AB; --texto-3:#6E767E;
    --borda:#2E353B; --borda-forte:#3E464D;
    --ambar:#D9911A;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--texto); font-family:var(--ui);
  font-size:14px; line-height:1.5; display:flex; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--laranja)}
:focus-visible{outline:2px solid var(--laranja); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hazard{background-image:repeating-linear-gradient(45deg,var(--laranja) 0 5px, transparent 5px 11px)}

/* ---------- navegação ---------- */
nav{
  width:212px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--borda); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.marca{padding:20px 18px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--borda)}
.marca svg{flex-shrink:0}
.marca h1{font-size:15px; font-weight:650; letter-spacing:-.2px}
.marca span{display:block; font:500 9px/1.3 var(--mono); letter-spacing:.11em; color:var(--texto-3); text-transform:uppercase; margin-top:2px}
.menu{padding:10px; flex:1; display:flex; flex-direction:column; gap:1px}
.menu a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:8px 10px; background:none; border:0; border-radius:var(--radius);
  font:inherit; color:var(--texto-2); cursor:pointer; text-align:left; transition:.12s;
  text-decoration:none;
}
.menu a:hover{background:var(--surface-2); color:var(--texto)}
.menu a[aria-current="page"]{background:var(--laranja-fraco); color:var(--laranja); font-weight:600}
.menu .cont{font:600 11px var(--mono); background:var(--laranja); color:#fff; border-radius:9px; padding:1px 7px}
.menu-sep{height:1px; background:var(--borda); margin:9px 4px}
.ico{width:18px; height:18px; flex-shrink:0}
.menu a .mi{display:flex; align-items:center; gap:10px; min-width:0}
.menu a .mi .ico{width:17px; height:17px}
.menu a[aria-current="page"] .ico{color:var(--laranja)}
.menu-grupo{font:600 9px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--texto-3); padding:15px 12px 5px}
.menu-grupo:first-child{padding-top:4px}
.marca a{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; transition:opacity .12s}
.marca a:hover{opacity:.82}
/* controle do menu retrátil — só atua no mobile (media query); no desktop fica oculto */
.hamburguer,.nav-abrir,.cont-mob{display:none}
.rodape-nav{padding:12px 10px; border-top:1px solid var(--borda); display:flex; flex-direction:column; gap:6px}
/* identidade do logado (Sprint 22 · T-1377): login · papel, discreto, acima do tema/sair */
.quem-sou{padding:0 10px 2px; font-size:12px; color:var(--texto-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tema{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px;
  background:none; border:1px solid var(--borda); border-radius:var(--radius);
  font:inherit; font-size:13px; color:var(--texto-2); cursor:pointer;
}
.tema:hover{border-color:var(--borda-forte); color:var(--texto)}
.sair{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px;
  background:none; border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-size:13px; color:var(--texto-3); cursor:pointer; text-align:left;
}
.sair:hover{border-color:var(--borda); color:var(--vermelho)}

/* ---------- estrutura ---------- */
main{flex:1; min-width:0; padding:26px 30px 60px; max-width:1120px}
.cabeca{margin-bottom:22px}
.cabeca h2{font-size:21px; font-weight:650; letter-spacing:-.3px; display:flex; align-items:center; gap:10px}
.cabeca h2 .ico{width:23px; height:23px; color:var(--laranja); flex-shrink:0}
.resumo{font:12px/1.6 var(--mono); color:var(--texto-2); margin-top:5px}
.resumo b{color:var(--texto); font-weight:600}
.rotulo{font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3)}

/* ---------- cartões ---------- */
.card{background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius)}
.grade{display:grid; gap:12px; margin-bottom:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* ---------- fila de tratativa ---------- */
.barra-lote{
  display:flex; align-items:center; gap:12px; padding:9px 14px; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius);
  font-size:13px; color:var(--texto-2);
}
.barra-lote .esq{display:flex; align-items:center; gap:9px; flex:1}
.item{position:relative; overflow:hidden; margin-bottom:10px; padding:14px 16px 14px 20px}
.item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.item[data-acao="sim"]::before{background-image:repeating-linear-gradient(45deg,var(--laranja) 0 5px, transparent 5px 11px)}
.item[data-estado="enviado"]::before{background:var(--verde)}
.item[data-estado="erro"]::before{background:var(--vermelho)}
.item-topo{display:flex; align-items:flex-start; gap:12px; margin-bottom:9px}
.item-topo input[type=checkbox]{margin-top:3px; accent-color:var(--laranja); width:15px; height:15px}
.item-sem-check{margin-left:27px}
.quem{flex:1; min-width:0}
.quem strong{font-size:14.5px; font-weight:620; display:block}
.quem .meta{font:11.5px var(--mono); color:var(--texto-2); margin-top:2px}
.tags{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.tag{font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:3px; white-space:nowrap}
.t-int{background:var(--laranja-fraco); color:var(--laranja)}
.t-enc{background:var(--ambar-fraco); color:var(--ambar)}
.t-nao{background:var(--surface-2); color:var(--texto-2); border:1px solid var(--borda)}
.t-ok{background:var(--verde-fraco); color:var(--verde)}
.t-err{background:var(--vermelho-fraco); color:var(--vermelho)}
.t-camp{background:transparent; color:var(--texto-3); border:1px solid var(--borda)}
.resumo-ia{
  font-size:13.5px; color:var(--texto); padding:9px 12px; margin-bottom:10px;
  background:var(--surface-2); border-radius:4px; border-left:2px solid var(--borda-forte);
}
.resumo-ia .fonte{font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); display:block; margin-bottom:3px}
details{margin-bottom:11px}
summary{font:11.5px var(--mono); color:var(--texto-2); cursor:pointer; padding:3px 0; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ "; color:var(--texto-3)}
details[open] summary::before{content:"▾ "}
details p{font-size:13.5px; color:var(--texto-2); padding:10px 12px; margin-top:6px; background:var(--surface-2); border-radius:4px; white-space:pre-line}
.acoes{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.acoes form{display:contents}
.destino{margin-left:auto; font:11px var(--mono); color:var(--texto-3)}
.destino b{color:var(--texto-2); font-weight:600}

/* ---------- botões ---------- */
button.b,a.b{font:inherit; font-size:12.5px; font-weight:550; padding:6px 12px; border-radius:4px; border:1px solid var(--borda-forte); background:var(--surface); color:var(--texto); cursor:pointer; transition:.12s; text-decoration:none; display:inline-block}
button.b:hover,a.b:hover{background:var(--surface-2)}
button.b-prim,a.b-prim{background:var(--laranja); border-color:var(--laranja); color:#fff}
button.b-prim:hover,a.b-prim:hover{background:#D95A08}
button.b-prim:disabled{opacity:.45; cursor:not-allowed}
button.b-sutil{border-color:transparent; color:var(--texto-2)}
button.b-sutil:hover{color:var(--texto)}
.b-full{width:100%; padding:9px; font-size:13.5px; margin-top:4px}

/* ---------- painel de hoje ---------- */
.metrica{padding:15px 16px}
.metrica .rotulo{display:block; margin-bottom:7px}
.metrica .num{font:600 26px/1 var(--mono); letter-spacing:-.5px}
.metrica .num small{color:var(--texto-3); font-size:16px; font-weight:600}
.metrica .sub{font:11.5px var(--mono); color:var(--texto-2); margin-top:5px}
progress.trilho{width:100%; height:7px; margin-top:11px; border:1px solid var(--borda); border-radius:3px; overflow:hidden; -webkit-appearance:none; appearance:none; background:var(--surface-2)}
progress.trilho::-webkit-progress-bar{background:var(--surface-2)}
progress.trilho::-webkit-progress-value{background:var(--laranja)}
progress.trilho::-moz-progress-bar{background:var(--laranja)}
.linha-camp{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--borda)}
.linha-camp:last-child{border-bottom:0}
.linha-camp.cabecalho{background:var(--surface-2)}
.linha-camp .nome{flex:1; min-width:0}
.linha-camp .nome strong{font-size:14px; font-weight:600}
.linha-camp .nome div{font:11.5px var(--mono); color:var(--texto-2); margin-top:2px}
.linha-camp .nome div.trava{color:var(--ambar)}
.linha-camp .val{font:600 14px var(--mono); text-align:right; min-width:70px}
.linha-camp .val span{display:block; font:400 10.5px var(--mono); color:var(--texto-3)}
.aviso{display:flex; gap:11px; padding:12px 15px; border-radius:var(--radius); font-size:13px; margin-bottom:12px; border:1px solid}
.aviso-ambar{background:var(--ambar-fraco); border-color:transparent; color:var(--texto)}
.aviso-vermelho{background:var(--vermelho-fraco); border-color:var(--vermelho); color:var(--texto)}
.aviso-vermelho .ico{color:var(--vermelho)}
.aviso a{color:inherit; text-decoration:underline}
/* botão DENTRO de um aviso (Sprint 40 · B-816): ".aviso a" empata em
   especificidade com "a.b" e vence por vir depois — o botão saía com cara de
   link sublinhado. Aqui a orientação do que fazer mora junto do aviso. */
.aviso a.b{text-decoration:none; color:var(--texto); background:var(--surface)}
.aviso a.b-prim{color:#fff; background:var(--laranja)}
.aviso .acoes-bloco{padding-top:12px}
/* pré-voo do dry-run (T-1209) */
.pre-voo{list-style:none; margin:0; padding:0}
.pre-voo li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--borda); font-size:13px}
.pre-voo li:last-child{border-bottom:0}
.pre-voo .marca{font:700 13px var(--mono); width:16px; flex-shrink:0}
.pre-voo .pv-ok .marca{color:var(--verde)}
.pre-voo .pv-falha .marca{color:var(--vermelho)}
.pre-voo .sub{font:11.5px/1.5 var(--mono); color:var(--texto-2)}
.aviso b{font-weight:640}
.aviso .ico{font:700 12px var(--mono); color:var(--ambar); flex-shrink:0; margin-top:1px}

/* ---------- tabelas ---------- */
.busca{width:100%; padding:9px 12px; font:inherit; font-size:13.5px; background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius); color:var(--texto); margin-bottom:12px}
.busca::placeholder{color:var(--texto-3)}
.busca:focus{border-color:var(--laranja); outline:none}
/* filtro de Contatos (busca + lista) e paginação (Sprint 17 · T-1318) */
.filtros{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px}
.filtros .busca{flex:1 1 260px; margin-bottom:0}
.filtros select{padding:9px 12px; font:inherit; font-size:13.5px; background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius); color:var(--texto)}
.filtros select:focus{border-color:var(--laranja); outline:none}
.paginacao{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 4px 2px}
.paginacao-nav{display:flex; gap:8px}
.b.desativado{opacity:.4; pointer-events:none}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); text-align:left; padding:9px 14px; border-bottom:1px solid var(--borda); white-space:nowrap}
th.dir,td.dir{text-align:right}
/* cabeçalho ordenável (Sprint 42 · B-822): o th inteiro é clicável e mantém a
   cara de cabeçalho — a seta diz a coluna e a direção em uso */
thead th a.ordenar{color:inherit; text-decoration:none; display:inline-block}
thead th a.ordenar:hover{color:var(--texto)}
thead th a.ordenar.ativa{color:var(--laranja)}
/* célula de etapa ainda por sair: agendada é informação, não ausência */
td .agendado{font-family:var(--mono); font-size:12px; color:var(--texto-2)}
/* tentativa de lead que falhou (Sprint 44 · B-830): volta para a fila e pede ação */
td .alerta-crm{color:var(--vermelho)}

/* ── card de Consolidação (Sprint 44 · B-830) ───────────────────────────────
   Retrátil como a Central de Ajuda, mas ABERTO por padrão: é o conteúdo, não
   apoio. O motivo do redesenho: as tabelas viviam num grid que as esticava
   para a mesma altura, e o <table> distribui as linhas para preencher — a de
   duas linhas ficava com o dobro do respiro da de cinco. align-items:start
   resolve na raiz; o resto é ritmo vertical mais apertado, que é o que uma
   tabela de rótulo + número pede. */
details.consolidacao{padding:0; margin-bottom:12px}
.consolidacao summary{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:14px 18px; cursor:pointer; list-style:none}
.consolidacao summary::-webkit-details-marker{display:none}
.consolidacao summary::marker{content:""}
.consolidacao summary::after{content:"▸"; margin-left:auto; color:var(--texto-3); font-size:12px}
.consolidacao[open] summary::after{content:"▾"}
.consolidacao[open] summary{border-bottom:1px solid var(--borda)}
.consolidacao .c-titulo{font-size:14.5px; font-weight:640; color:var(--texto)}
.consolidacao .c-resumo{font:11.5px/1.5 var(--mono); color:var(--texto-2)}
.consolidacao .c-grade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;            /* sem isto o grid estica e engorda as linhas */
  gap:2px 28px; padding:6px 18px 16px}
.consolidacao .c-painel{min-width:0}
.consolidacao thead th{padding:12px 0 6px; border-bottom:0; font-size:9.5px}
.consolidacao tbody td{padding:5px 0; border-bottom:1px solid var(--borda); font-size:12.5px}
.consolidacao tbody tr:last-child td{border-bottom:0}
.consolidacao tbody td.dir{font-family:var(--mono); color:var(--texto)}
/* Link tem de PARECER link parado (Sprint 46 · B-835). A versão anterior pintava
   de var(--texto) sem sublinhado e só revelava no hover: os números viraram
   texto comum, e o filtro — que é a entrega das sprints 43 e 44 — ficou
   escondido de quem não passa o mouse. Em toque não existe hover. O hover
   REFORÇA; nunca é ele que anuncia que a coisa é clicável. */
.consolidacao a{color:var(--laranja); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.consolidacao a:hover{text-decoration-thickness:2px}
@media (max-width:900px){ .consolidacao .c-grade{grid-template-columns:1fr; gap:0} }
tbody td{padding:11px 14px; border-bottom:1px solid var(--borda); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tr.esmaece{opacity:.6}
td.m{font-family:var(--mono); font-size:12px; color:var(--texto-2)}
td .sub{font-family:var(--mono); font-size:12px; color:var(--texto-2)}
td strong{font-weight:600}
/* Registro de eventos (Sprint 21 · T-1372): detalhe é texto livre e pode vir sem nenhum
   espaço (JSON de import, ref de credencial) — quebra em qualquer ponto para a tabela
   caber no card; o timestamp fica inteiro; em tela estreita o contêiner rola em vez de vazar.
   O nowrap do td.m é escopado ao .rola-x: em outras telas td.m carrega listas/segmentos e precisa quebrar. */
.rola-x{overflow-x:auto}
.rola-x td.m{white-space:nowrap}
td.detalhe{overflow-wrap:anywhere}

/* ---------- campanhas ---------- */
.camp{padding:17px 18px}
.camp-topo{display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:13px; border-bottom:1px solid var(--borda)}
.camp-topo h3{font-size:15.5px; font-weight:650; flex:1}
dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; align-items:baseline}
dt{font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); white-space:nowrap; padding-top:2px}
dd{font-family:var(--mono); font-size:12.5px; color:var(--texto); word-break:break-all}
dd.ok,.ok{color:var(--verde)}
dd.trava{color:var(--ambar)}

/* ---------- login ---------- */
.login-marca{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.login-marca h1{font-size:19px; font-weight:650; letter-spacing:-.3px}
.login-sub{font:11.5px/1.5 var(--mono); color:var(--texto-2)}
.caixa-login{width:100%; max-width:352px; margin:auto; padding:24px}
.faixa-login{height:5px; border-radius:3px; margin:16px 0 22px; background-image:repeating-linear-gradient(45deg,var(--laranja) 0 5px, transparent 5px 11px)}
.painel-login{padding:20px 20px 18px}
.rodape-login{display:flex; justify-content:space-between; align-items:center; margin-top:16px; font:11px var(--mono); color:var(--texto-3)}
.rodape-login a{color:var(--texto-3); text-decoration:underline}
.rodape-login a:hover{color:var(--texto-2)}
body.login{justify-content:center; align-items:center}

/* ---------- formulários ---------- */
.campo{margin-bottom:13px}
.campo:last-child{margin-bottom:0}
.campo label{display:block; font:600 10px var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--texto-3); margin-bottom:5px}
.campo input[type=text],.campo input[type=email],.campo input[type=password],.campo input[type=number],.campo input[type=search],.campo input[type=date],.campo input[type=time],.campo select,.campo textarea{
  width:100%; padding:8px 11px; font:inherit; font-size:13.5px; color:var(--texto);
  background:var(--surface-2); border:1px solid var(--borda); border-radius:4px;
}
.campo textarea{font-family:var(--mono); font-size:12.5px; resize:vertical; min-height:66px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--laranja); outline:none}
.campo .dica{font:11px/1.45 var(--mono); color:var(--texto-3); margin-top:5px}
/* valor derivado de outro cadastro (não editável aqui) — ex.: remetente vindo da conta */
.campo .ro-nota{font:13px/1.5 var(--mono); color:var(--texto-2); padding:9px 0}
.campo .ro-nota code{color:var(--texto-1)}
.erro{color:var(--vermelho); font-size:13px; margin-bottom:12px}
.ok-msg{color:var(--verde); font-size:13px; margin-bottom:12px}
.digitos{width:100%; padding:12px; font:600 24px/1 var(--mono); letter-spacing:.42em; text-align:center; text-indent:.42em; color:var(--texto); background:var(--surface-2); border:1px solid var(--borda); border-radius:4px}
.digitos:focus{border-color:var(--laranja); outline:none}
.volta{background:none; border:0; font:11.5px var(--mono); color:var(--texto-3); cursor:pointer; padding:0; text-decoration:underline}
.volta:hover{color:var(--texto-2)}
.entre-passos{display:flex; justify-content:space-between; margin-top:13px}
.codigos{display:grid; grid-template-columns:1fr 1fr; gap:7px; font:13px var(--mono); margin:12px 0}
.codigos span{padding:7px 10px; background:var(--surface-2); border:1px solid var(--borda); border-radius:4px; text-align:center; letter-spacing:.06em}
.codigos span.usado{color:var(--texto-3); text-decoration:line-through; opacity:.6}

/* interruptor (switch) — sobre checkbox real */
.sw{position:relative; width:38px; height:21px; flex-shrink:0; margin-top:2px; display:inline-block}
.sw input{opacity:0; width:100%; height:100%; margin:0; cursor:pointer; position:absolute; z-index:2}
.sw i{position:absolute; inset:0; background:var(--borda-forte); border-radius:11px; transition:.15s; pointer-events:none}
.sw i::after{content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s}
.sw input:checked + i{background:var(--laranja)}
.sw input:checked + i::after{transform:translateX(17px)}
.sw input:focus-visible + i{outline:2px solid var(--laranja); outline-offset:2px}
.sw input:disabled + i{opacity:.5}

.chave{display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:4px; background:var(--surface-2); border:1px dashed var(--borda-forte); font:12px var(--mono); color:var(--texto-2)}
.chave code{color:var(--texto)}
.chave .cadeado{color:var(--texto-3)}
.chave .estado{margin-left:auto; color:var(--verde)}

/* ---------- blocos e linhas de configuração ---------- */
.bloco{padding:17px 18px; margin-bottom:12px}
.bloco > h3{font-size:14.5px; font-weight:640; margin-bottom:3px}
.bloco > .sub-bloco{font:11.5px/1.5 var(--mono); color:var(--texto-2); margin-bottom:15px; max-width:88ch}
.divisor{height:1px; background:var(--borda); margin:15px 0}
.reg{display:grid; grid-template-columns:1fr 300px; gap:32px; padding:15px 0; border-bottom:1px solid var(--borda); align-items:start}
.reg:last-child{border-bottom:0}
.reg .desc strong{display:block; font-size:14px; font-weight:620; margin-bottom:4px}
.reg .desc p{font-size:12.5px; line-height:1.6; color:var(--texto-2); max-width:70ch}
.reg .desc code{font:11.5px var(--mono); background:var(--surface-2); padding:1px 4px; border-radius:3px}
.reg .desc b{color:var(--texto); font-weight:620}
.reg .ctrl{display:flex; justify-content:flex-end; align-items:flex-start}
.reg .ctrl.bloco-ctrl{display:block}
.reg .ctrl input,.reg .ctrl select,.reg .ctrl textarea{width:100%; padding:8px 11px; font:inherit; font-size:13.5px; color:var(--texto); background:var(--surface-2); border:1px solid var(--borda); border-radius:4px}
.reg .ctrl textarea{font-family:var(--mono); font-size:12.5px; resize:vertical; min-height:78px; line-height:1.6}
.reg .ctrl input:focus,.reg .ctrl select:focus,.reg .ctrl textarea:focus{border-color:var(--laranja); outline:none}
.reg .ctrl input[type=number]{max-width:120px}
.reg .ctrl .ro{font:600 14px/1.5 var(--mono); color:var(--texto); text-align:right}
.reg .ctrl .ro-nota{display:block; font:11px/1.5 var(--mono); color:var(--texto-3); font-weight:400; margin-top:3px; text-align:right}
.reg .ctrl .blocklist-ro{width:100%; text-align:left; font:12.5px/1.7 var(--mono); color:var(--texto-2)}
.reg .ctrl .sw{margin-top:3px}
.reg .ctrl input:disabled{opacity:.5}
.reg.largo{grid-template-columns:1fr}
.reg.largo .ctrl{justify-content:stretch; display:block}
/* configurações editáveis (T-1208): erro por campo, origem do valor, dias/horas, rodapé do bloco */
.reg .ctrl .campo-erro{font:11.5px/1.5 var(--mono); margin:6px 0 0; text-align:left}
.reg .ctrl .ro-nota{text-align:left}
.reg .ctrl .dias{display:flex; flex-wrap:wrap; gap:6px 12px; font:12px var(--mono); margin-bottom:8px}
.reg .ctrl .dias label{display:flex; align-items:center; gap:5px; cursor:pointer}
.reg .ctrl .dias input{width:auto}
.reg .ctrl .horas{display:flex; align-items:center; gap:6px; font:12px var(--mono); flex-wrap:wrap}
.reg .ctrl .horas input{width:74px}
.reg .ctrl input[type=password]{margin-top:8px}

/* ---------- ajuda explicativa por campo (Sprint 14, B-675) ----------
   Padrão GoSeny: pílulas de contexto, o que acontece em cada estado
   (ponto verde = ativo/principal, vazado = alternativo, âmbar = atenção)
   e uma linha de exemplo. Vive dentro de .desc (configurações) ou de
   .campo (formulários). */
.ajuda{margin-top:8px; display:grid; gap:6px}
.aj-tags{display:flex; flex-wrap:wrap; gap:5px}
.aj-tag{font:600 10px/1.8 var(--ui); letter-spacing:.02em; padding:0 8px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--borda); color:var(--texto-2); white-space:nowrap}
.aj-tag code{font:inherit; font-family:var(--mono); background:none; padding:0}
.aj-efeitos{list-style:none; display:grid; gap:4px; margin:0; padding:0}
.aj-efeitos li{position:relative; padding-left:16px; font-size:12.5px; line-height:1.55; color:var(--texto-2); max-width:70ch}
.aj-efeitos li b{color:var(--texto); font-weight:620}
.aj-efeitos li::before{content:""; position:absolute; left:2px; top:.48em; width:7px; height:7px; border-radius:50%; background:var(--texto-3)}
.aj-efeitos li.aj-on::before{background:var(--verde)}
.aj-efeitos li.aj-off::before{background:transparent; border:1.5px solid var(--borda-forte); width:5px; height:5px}
.aj-efeitos li.aj-alerta::before{background:var(--ambar)}
.ajuda .aj-ex{font-size:12px; line-height:1.55; color:var(--texto-3); max-width:70ch}
.ajuda .aj-ex .aj-ex-rotulo{font-weight:650; color:var(--texto-2)}
.ajuda .aj-ex code,.aj-efeitos code{font:11.5px var(--mono); background:var(--surface-2); padding:1px 4px; border-radius:3px}
.campo .ajuda{margin-top:6px}
.campo .ajuda .aj-efeitos li,.campo .ajuda .aj-ex{font-size:11.5px}
.bloco > .ajuda{margin:-6px 0 15px} /* logo abaixo do .sub-bloco do card */

/* ---------- Central de Ajuda das telas operacionais (Sprint 19 · T-1347) ---------- */
details.central-ajuda{margin-bottom:12px}
.central-ajuda summary{display:flex; align-items:center; gap:9px; padding:10px 16px; font:550 13px var(--ui); color:var(--texto-2)}
/* "details" no seletor: precisa empatar com a especificidade de details[open]
   summary::before lá de cima, senão o "▾" global reaparece com o card aberto */
details.central-ajuda summary::before{content:none}
.central-ajuda summary::after{content:"▸"; margin-left:auto; color:var(--texto-3)}
.central-ajuda[open] summary::after{content:"▾"}
.central-ajuda summary .ico{width:16px; height:16px; color:var(--laranja)}
.central-ajuda summary .ca-titulo{color:var(--texto); font-weight:640}
.central-ajuda summary .ca-resumo{font:11.5px var(--mono); color:var(--texto-3)}
.central-ajuda[open] summary{border-bottom:1px solid var(--borda)}
.ca-itens{list-style:none; margin:0; padding:13px 16px 15px; display:grid; gap:9px}
.ca-itens li{position:relative; padding-left:16px; font-size:12.5px; line-height:1.6; color:var(--texto-2); max-width:88ch}
.ca-itens li::before{content:""; position:absolute; left:2px; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--laranja-fraco); border:1.5px solid var(--laranja)}
.ca-itens li b{color:var(--texto); font-weight:620}
.ca-itens li code{font:11.5px var(--mono); background:var(--surface-2); padding:1px 4px; border-radius:3px}
@media (max-width:640px){.central-ajuda summary .ca-resumo{display:none}}
.acoes-bloco{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:15px}
.acoes-bloco form.inline{display:inline}
.acoes-bloco .ro-nota{font:11px var(--mono); color:var(--texto-3)}
/* formulário de campanha (T-1210) */
.form-grade{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.form-grade .campo.largo{grid-column:1/-1}
/* checkboxes de lista na ficha do contato (Sprint 17 · T-1318) */
.checks{display:flex; flex-wrap:wrap; gap:6px 14px; padding:2px 0}
.checks label{display:flex; align-items:center; gap:6px; font:12px var(--mono); color:var(--texto-2); cursor:pointer}
/* público da campanha (Sprint 17 · T-1320): sub-card da simulação e resultados da busca */
.sub-card{margin-top:14px}
.sub-bloco-topo{margin-top:14px}
.publico-resumo{margin:4px 0 10px}
/* prontidão da campanha (Sprint 18 · T-1333) */
.prontidao-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--borda)}
.bloco h3 + .prontidao-item{border-top:none}
.prontidao-item .sub{font:11.5px/1.5 var(--mono); color:var(--texto-2); margin-top:3px; max-width:78ch}
.prontidao-item .b{flex-shrink:0}
/* rascunho pré-computado na tratativa (Sprint 24 · T-1407) */
.rascunho-pronto textarea{width:100%; margin-top:6px; font:13px/1.6 var(--mono);
  color:var(--texto); background:var(--surface-2); border:1px solid var(--borda);
  border-radius:4px; padding:10px 12px; resize:vertical}

/* botão ocupado (Sprint 24 · T-1404): operação lenta deixa de parecer travada */
button[data-enviando]{opacity:.65; cursor:progress}
progress.ocupado{width:120px; height:4px; vertical-align:middle; margin-left:10px;
  border:0; border-radius:2px; background:var(--surface-2); accent-color:var(--laranja)}
progress.ocupado::-webkit-progress-bar{background:var(--surface-2); border-radius:2px}
progress.ocupado::-webkit-progress-value{background:var(--laranja); border-radius:2px}

/* prévia da assinatura (Sprint 24): as 4 linhas exatamente como saem no e-mail */
.previa-assinatura{font:12.5px/1.7 var(--mono); color:var(--texto-2); margin:6px 0 0;
  padding:10px 12px; background:var(--surface-2); border-radius:4px;
  border-left:3px solid var(--borda); white-space:pre; overflow-x:auto}
.card.p-erro{border-left:3px solid var(--vermelho)}
.card.p-pend{border-left:3px solid var(--ambar)}
.card.p-ok{border-left:3px solid var(--verde)}
.form-campanha .campo .dias{display:flex; flex-wrap:wrap; gap:6px 12px; font:12px var(--mono); padding:6px 0}
.form-campanha .campo .dias label{display:flex; align-items:center; gap:5px; cursor:pointer}
.form-campanha .campo .confirma{display:flex; align-items:center; gap:6px; font:11.5px var(--mono); color:var(--texto-2); margin-top:6px}
.form-campanha .campo .campo-erro{font:11.5px/1.5 var(--mono); margin:4px 0 0}
/* editor de copy (T-1212) */
.copy-variante{border:1px solid var(--borda); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; background:var(--surface)}
.copy-topo{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.copy-variante .campo label .ro-nota{display:block; font:11px var(--mono); color:var(--texto-3); margin-top:2px}
.copy-variante textarea{font-family:var(--mono); font-size:12.5px; line-height:1.6; width:100%}
.contador{display:block; font:11px var(--mono); color:var(--texto-3); margin-top:4px; text-align:right}
.contador.estourou{color:var(--vermelho); font-weight:600}
.copy-estado{display:flex; flex-direction:column; gap:6px; padding:10px 0 0}
.bloco h3 .tag{margin-left:8px; vertical-align:middle}
.bloco h3 .ro-nota{font:11px var(--mono); color:var(--texto-3); font-weight:400; margin-left:6px}
.previa{margin-bottom:16px}
.previa h4{font-size:13px; margin-bottom:6px}
.previa pre,.previa-pre{white-space:pre-wrap; font:12.5px/1.6 var(--mono); background:var(--surface-2); padding:12px 14px; border-radius:4px; border:1px solid var(--borda)}
.card.camp .acoes{display:flex; gap:8px; margin-top:14px; align-items:center; flex-wrap:wrap}
.card.camp .acoes .ro-nota{font:11px var(--mono); color:var(--texto-3)}
@media(max-width:820px){.form-grade{grid-template-columns:1fr}}

@media(max-width:820px){
  body{flex-direction:column}
  /* nav vira barra no topo com menu retrátil (hambúrguer); recolhida por padrão */
  nav{width:100%; height:auto; position:sticky; top:0; z-index:30; flex-direction:column; align-items:stretch; overflow:visible}
  .marca{border-bottom:1px solid var(--borda); border-right:0; padding:11px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:11px}
  .marca a{flex:0 1 auto; min-width:0}
  .hamburguer{display:flex; align-items:center; gap:9px; padding:6px 8px; margin:-4px -4px -4px 0;
    border-radius:6px; color:var(--texto-2); cursor:pointer; -webkit-tap-highlight-color:transparent}
  .hamburguer:hover{background:var(--surface-2)}
  .hamburguer .ico{width:23px; height:23px}
  .cont-mob{display:inline-block}
  .nav-abrir{display:block; position:absolute; width:1px; height:1px; opacity:0; margin:0; overflow:hidden; clip:rect(0 0 0 0)}
  .nav-abrir:focus-visible ~ .marca .hamburguer{outline:2px solid var(--laranja); outline-offset:2px}
  /* menu e rodapé escondidos até abrir; abertos viram lista vertical, com os grupos de volta */
  .menu{display:none; flex-direction:column; align-items:stretch; padding:8px 10px}
  .nav-abrir:checked ~ .menu{display:flex}
  .menu-grupo{display:block}
  .rodape-nav{display:none; border-top:1px solid var(--borda); border-left:0; flex-direction:row; gap:8px}
  .nav-abrir:checked ~ .rodape-nav{display:flex}
  .rodape-nav .tema,.rodape-nav form{flex:1}
  main{padding:20px 16px 50px}
  .g3,.g2{grid-template-columns:1fr}
  .reg{grid-template-columns:1fr; gap:10px}
  .reg .ctrl{justify-content:flex-start}
  .destino{margin-left:0; width:100%}
}

/* ── módulo social · pauta e calendário (Sprint 50 · B-858) ── */
.pauta-grupo{font-size:13px; font-weight:650; margin:18px 0 8px; color:var(--texto-2)}
.pauta-grupo .ro-nota{font:11px var(--mono); color:var(--texto-3); font-weight:400; margin-left:6px}
.pauta-item .pauta-topo{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.pauta-item .pauta-topo b{font-weight:600}
.pauta-item .pauta-topo .ro-nota{font:11px var(--mono); color:var(--texto-3)}
.pauta-corpo{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.pauta-midias{display:flex; gap:6px; flex-wrap:wrap}
.pauta-midias img{width:64px; height:64px; object-fit:cover; border-radius:4px; border:1px solid var(--borda)}
.pauta-midias .video{width:64px; height:64px; display:flex; align-items:center; justify-content:center; text-align:center; font:600 10px/1.3 var(--mono); border:1px solid var(--borda); border-radius:4px; color:var(--texto-2)}
.pauta-texto{flex:1; min-width:220px}
.pauta-texto .dica{font:11px/1.45 var(--mono); color:var(--texto-3); margin-top:4px}
.pauta-texto .trava{color:var(--ambar)}
.legenda-previa{white-space:pre-wrap; font-size:13px; max-width:70ch; color:var(--texto)}
.pauta-manual{margin-top:10px; font-size:13px}
.pauta-manual summary{cursor:pointer; font-weight:600; color:var(--ambar)}
.pauta-manual ol{margin:8px 0 0 18px; display:flex; flex-direction:column; gap:6px}
.pauta-manual pre{white-space:pre-wrap; font:12px/1.5 var(--mono); background:var(--surface-2); padding:10px; border-radius:4px; margin-top:4px; max-width:70ch}
.pauta-item .acoes{margin-top:12px}
.pauta-item .acoes input[type=datetime-local]{font:12px var(--mono); padding:5px 7px; border:1px solid var(--borda); border-radius:4px; background:var(--surface); color:var(--texto)}
.midia-escolha .ordem{width:56px; font:12px var(--mono); padding:4px 6px; border:1px solid var(--borda); border-radius:4px; background:var(--surface); color:var(--texto)}
.midia-escolha img{border-radius:3px; border:1px solid var(--borda); display:block}
.cal-rolo{overflow-x:auto}
.calendario{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; min-width:700px}
.cal-cab{font:600 10px var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--texto-3); padding:4px 6px}
.cal-dia{min-height:88px; border:1px solid var(--borda); border-radius:var(--radius); padding:6px; background:var(--surface)}
.cal-dia.vazio{background:transparent; border-color:transparent}
.cal-dia.hoje{border-color:var(--laranja)}
.cal-dia > b{font:600 12px var(--mono); color:var(--texto-2); display:block; margin-bottom:4px}
.cal-post{display:block; font:11px/1.35 var(--mono); padding:3px 5px; border-radius:3px; margin-bottom:3px; background:var(--surface-2); color:var(--texto); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-post.e-agendado{background:var(--verde-fraco); color:var(--verde)}
.cal-post.e-publicado{background:var(--verde-fraco); color:var(--verde); font-weight:600}
.cal-post.e-cancelado{text-decoration:line-through; color:var(--texto-3)}
.cal-post.e-erro,.cal-post.e-preparando{background:var(--ambar-fraco); color:var(--ambar)}
.motor-estado{display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; font-size:13px; margin-top:4px}
.motor-estado dt{font:600 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--texto-3); padding-top:2px}
.motor-estado dd{color:var(--texto-2)}
.motor-estado .m{font-family:var(--mono); font-size:12px}

/* Conversa do contato (Sprint 55 · B-883): o que saiu e o que voltou, em ordem.
   A cor da borda é a única pista de direção — quem enviou fica à esquerda com a
   marca da campanha, quem respondeu com a de sucesso. */
.conversa-item { border-left: 3px solid var(--linha); padding: .6rem 0 .6rem .9rem; margin-bottom: .9rem; }
.conversa-item:last-child { margin-bottom: 0; }
.conversa-saiu { border-left-color: var(--camp, #7c8ea8); }
.conversa-voltou { border-left-color: var(--ok, #2e7d5b); }
/* o que aconteceu sem texto: bounce, autoreply, opt-out, entrega incerta */
.conversa-nota { border-left-style: dashed; border-left-color: var(--linha); }
.corpo-email {
    white-space: pre-wrap;      /* o e-mail é texto puro: as quebras são do autor */
    word-break: break-word;     /* resposta de terceiro pode trazer palavra sem espaço */
    font: inherit;
    margin: .4rem 0 0;
    padding: .7rem .9rem;
    background: var(--fundo-sutil, rgba(0,0,0,.03));
    border-radius: 6px;
}