/* ==========================================================================
   Construtor — SonhoLeve
   Tema idêntico ao sistema SonhoLeve (claro, azul #203898, raio 12px).
   ========================================================================== */

:root {
  --bg:        #f4f6fb;
  --bg2:       #eef1f8;
  --card:      #ffffff;
  --line:      #e2e7f1;
  --txt:       #1b2436;
  --muted:     #68738c;

  --primary:   #203898;
  --primary2:  #16266b;
  --accent:    #3a55c0;

  --ok:        #16a34a;
  --ok-bg:     #e7f7ee;
  --ok-line:   #bbe9cc;
  --ok-txt:    #15803d;

  --warn:      #d97706;
  --warn-bg:   #fdf3e3;
  --warn-line: #f3dbaa;
  --warn-txt:  #b45309;

  --bad:       #dc2626;
  --bad-bg:    #fdecec;
  --bad-line:  #f6c9c9;
  --bad-txt:   #b91c1c;

  --radius:    12px;
  --radius-sm: 9px;
  --mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow:    0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.escondido { display: none !important; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 20px; color: var(--primary2); }
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 600; margin: 20px 0 10px;
}
p { margin: 0 0 10px; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.55; }
.vazio { color: #94a0b8; font-size: 13px; }
.erro { color: var(--bad); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.nota {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-txt);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-top: 14px;
}
code {
  background: var(--bg2); padding: 1px 6px; border-radius: 6px;
  font-family: var(--mono); font-size: 12px; color: #1f2b46;
}

/* ============================== login ============================== */

.login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: radial-gradient(1100px 520px at 50% -10%, #e4ebfb 0%, var(--bg) 60%);
  border-top: 6px solid var(--primary);
}

.login .cartao {
  width: 380px; max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 18px 44px rgba(32, 56, 152, .14);
  display: flex; flex-direction: column; gap: 12px;
}

.login .cartao h1 { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.login .cartao .sub { margin: 0; font-size: 12px; }
.login img.logo { height: 44px; width: auto; }
.login button[type="submit"] { width: 100%; }

/* ============================== inputs ============================== */

input, textarea, button, select { font: inherit; color: inherit; }

input, textarea {
  width: 100%;
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  margin: 0;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #a3adc2; }
input:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(32, 56, 152, .12);
}
textarea { resize: vertical; min-height: 104px; line-height: 1.55; }

/* ============================== botões ============================== */

button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--txt);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, opacity .15s;
}
button:hover { border-color: var(--primary); color: var(--primary); }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* botão principal (o "Entrar" / "Propor mudança" / "Testar") */
button[type="submit"],
#propor,
#btn-staging {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
button[type="submit"]:hover,
#propor:hover,
#btn-staging:hover { background: var(--primary2); border-color: var(--primary2); color: #fff; }

button.sec { background: #fff; color: var(--txt); font-weight: 600; }
button.sec:hover { background: var(--bg2); color: var(--primary); }

button.link {
  border: 0; background: none; padding: 0;
  color: var(--muted); font-size: 12.5px; text-decoration: none;
}
button.link:hover { color: var(--primary); text-decoration: underline; }

/* ============================== app ============================== */

.app { display: flex; flex-direction: column; min-height: 100vh; }

header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 26px; height: 62px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.marca { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: var(--primary2); }
.marca img.logo { height: 30px; width: auto; display: block; }

.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #e7ecfb; border: 1px solid #c3cff5; color: var(--primary);
}

.dir { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); }
.quem { color: var(--txt); font-weight: 600; }
.papel {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  background: #e7ecfb; border: 1px solid #c3cff5; color: var(--primary);
}

.orcamento { display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.barra {
  display: inline-block; width: 84px; height: 6px;
  background: var(--bg2); border-radius: 999px; overflow: hidden;
  vertical-align: middle;
}
.barra i { display: block; height: 100%; background: var(--primary); }

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 16px;
  padding: 22px 26px 48px;
  align-items: start;
  max-width: 1500px; width: 100%;
}
.col-esq, .col-dir { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cartao {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

/* ============================== listas ============================== */

.lista { display: flex; flex-direction: column; gap: 8px; }

.item {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.item:hover { border-color: #c3cff5; background: #f7f9ff; }
.item.ativo {
  border-color: var(--primary); background: #f2f6ff;
  box-shadow: 0 0 0 3px rgba(32, 56, 152, .08);
}

.linha1 { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.linha1 .tok { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* pills de estado (mesma linguagem dos .tag do SonhoLeve) */
.st {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid var(--line);
  background: var(--bg2); color: #3c4a66; white-space: nowrap;
}
.st-executando,
.st-aprovado,
.st-aguardando { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-txt); }
.st-aguardando_aprovacao,
.st-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-txt); }
.st-erro,
.st-falhou,
.st-rollback { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-txt); }
.st-pendente { background: #eef1f6; color: #4b5563; }
.st-incompleta { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad-txt); font-weight: 700; }
.st-testes-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-txt); }
.st-testes-falhou { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad-txt); }
.aviso-testes { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 12px; padding: 8px 12px;
  border-radius: 8px; font-size: 13px; }
.aviso-testes.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-txt); }
.aviso-testes.falhou { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad-txt); }
.aviso-testes .muted { font-size: 12px; opacity: .85; }
.aviso-incompleta { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; padding: 10px 12px;
  background: var(--bad-bg); border: 1px solid var(--bad-line); border-left: 4px solid var(--bad-txt);
  border-radius: 8px; color: var(--bad-txt); font-size: 13px; }
.aviso-incompleta b { font-size: 13px; }

.acoes-arquivo { margin: 10px 0 6px; }
.acoes-arquivo .link { font-size: 12.5px; }

.meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }

/* ============================== código ============================== */

pre.plano, pre.diff, .kb pre {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin: 0;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #22314f;
  max-height: 420px;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}
pre.diff { max-height: 560px; }

pre::-webkit-scrollbar { width: 10px; height: 10px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: #d6ddeb; border-radius: 999px; border: 2px solid #fbfcff; }
pre::-webkit-scrollbar-thumb:hover { background: #bcc7dc; }

/* diff colorido (paleta clara) */
pre.diff .d-add  { display: block; color: var(--ok-txt);  background: #eefaf2; }
pre.diff .d-del  { display: block; color: var(--bad-txt); background: #fdf1f1; }
pre.diff .d-hunk { display: block; color: var(--primary);  background: #eef3ff; }
pre.diff .d-meta { display: block; color: var(--muted); }

/* ============================== ações ============================== */

.acoes {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 4px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

.dep .desc { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.dep-ok { border-color: var(--ok-line); background: #f6fdf9; }
.dep-falhou { border-color: var(--bad-line); background: #fef7f7; }

/* ============================== kb ============================== */

.kb { border-bottom: 1px solid var(--line); padding: 9px 0; }
.kb:last-child { border-bottom: 0; }
.kb summary {
  cursor: pointer; font-size: 13.5px; color: #374151;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.kb summary::-webkit-details-marker { display: none; }
.kb summary::before { content: "▸"; color: #94a0b8; font-size: 10px; transition: transform .15s; }
.kb[open] summary::before { transform: rotate(90deg); color: var(--primary); }
.kb[open] summary { color: var(--primary2); font-weight: 600; }
.kb pre { margin-top: 10px; max-height: 260px; }

/* ============================== timeline ============================== */

.ev {
  display: grid; grid-template-columns: 74px 84px 1fr; gap: 10px;
  font-size: 12.3px; padding: 6px 0;
  border-bottom: 1px solid #f0f3f9;
}
.ev:last-child { border-bottom: 0; }
.ev .quando { color: var(--muted); font-variant-numeric: tabular-nums; }
.ev .quem { color: var(--primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ev .oq { color: #4a5568; }

/* ============================== responsivo ============================== */

@media (max-width: 1000px) {
  main { grid-template-columns: 1fr; padding: 18px 16px 40px; }
  header { padding: 0 16px; height: 56px; }
  .ev { grid-template-columns: 66px 1fr; }
  .ev .quem { display: none; }
}

@media (max-width: 560px) {
  .dir .quem, .dir .papel { display: none; }
  .cartao { padding: 15px; }
  .login .cartao { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- bloco de ambientes ---------- */
.ambientes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.amb{background:#fbfcff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.amb-foco{border-color:#c3cff5;background:#f5f8ff}
.amb-nome{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
.amb-link{font-size:13px;font-weight:600;color:var(--primary)}
.amb-link:hover{text-decoration:underline}
.amb-acao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-link{display:inline-block;background:var(--primary);color:#fff!important;border-radius:var(--radius-sm);
  padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none!important}
.btn-link:hover{background:var(--primary2)}
.subindo{color:var(--warn-txt);font-size:13px;font-weight:600}
.versao{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.erro-inline{color:var(--bad-txt);font-size:12.5px}
@media(max-width:560px){.ambientes{grid-template-columns:1fr}}

/* ---------- versões dos ambientes ---------- */
.amb-ver{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.amb-ativo{border-color:var(--ok-line);background:#f4fdf8}
.aviso-versao{font-size:12.5px;color:var(--warn-txt);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:8px;padding:8px 11px;display:inline-block}

/* ---------- revisões ---------- */
.item-revisao { margin-left: 18px; border-left: 2px solid #dbe3f5; }
.refinar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.refinar h3 { margin-top: 0; }
.refinar-linha { display: flex; gap: 8px; align-items: flex-start; }
.refinar-linha input { flex: 1; }
.refinar-linha button { white-space: nowrap; background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.refinar-linha button:hover { background: var(--primary2); border-color: var(--primary2); color: #fff; }

/* ---------- anexos de imagem ---------- */
.anexo-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.anexo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--primary);
  border:1px dashed #bfd0f2;border-radius:8px;padding:6px 10px;cursor:pointer;background:#f7faff}
.anexo:hover{background:#eef4ff;border-color:var(--primary)}
.dica-anexo{font-size:11.5px;color:var(--muted)}
#descricao.arrastando{outline:2px dashed var(--primary);outline-offset:2px}
.previa{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.previa:empty{margin:0}
.thumb{position:relative;display:inline-block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#fff;line-height:0}
.thumb img{width:86px;height:86px;object-fit:cover;display:block}
.thumb button{position:absolute;top:2px;right:2px;border:0;border-radius:50%;width:18px;height:18px;
  background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.arquivo-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;
  background:#fff;padding:6px 8px;font-size:12px;color:var(--txt);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arquivo-chip button{border:0;background:transparent;color:#8894ad;font-size:14px;line-height:1;cursor:pointer;padding:0 2px}
.arquivo-chip button:hover{color:#C00000}
.previa-detalhe{margin-top:10px}
.previa-detalhe .thumb img{width:120px;height:120px}

/* ---------- tarefas fixadas ---------- */
.item-fixada { border-color: #c3cff5; background: #f2f6ff; }
.pin {
  border: 0; background: transparent; padding: 0 2px; font-size: 13px;
  line-height: 1; cursor: pointer; opacity: .35; filter: grayscale(1);
  transition: opacity .15s, filter .15s, transform .1s;
}
.pin:hover { opacity: .9; filter: none; transform: scale(1.1); }
.pin.on { opacity: 1; filter: none; }
.pin svg { width: 13px; height: 13px; display: block; }
.pin.on { color: var(--primary); }

/* ---------- progresso do agente (tarefa em andamento) ---------- */
.st-executando { animation: pulse-st 1.6s ease-in-out infinite; }
@keyframes pulse-st { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.progresso {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px 0 10px; padding: 12px 14px;
  border: 1px solid var(--warn-line); background: var(--warn-bg);
  border-radius: 10px;
}
.progresso-txt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--warn-txt); }
.progresso-txt b { font-size: 13px; }
.progresso-alerta { color: #8a1f21; font-size: 12px; }
.progresso-nota { color: #6b5a2e; font-size: 12px; opacity: .9; }
.spinner {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  border: 2px solid rgba(146, 100, 20, .25); border-top-color: var(--warn-txt);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- reparo do ambiente de teste ---------- */
.reparo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.reparo #btn-reparar{font-size:12.5px;padding:6px 12px}
.reparo #reparo-log{flex:1 0 100%;max-height:260px;overflow:auto;margin:2px 0 0}
.rep-ok{color:#1a7f45;font-weight:600}
.rep-erro{color:#b3261e;font-weight:600}

/* ---------- lista de tarefas enxuta ---------- */
.ok { color: var(--ok-txt); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.exec-resumo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--warn-txt); margin: 0 0 8px; }
.exec-resumo .spinner { width: 14px; height: 14px; margin-top: 0; }
.mais-tarefas-linha { display: flex; justify-content: center; margin-top: 8px; }
.mais-tarefas { font-size: 12.5px; }

/* ---------- conversar (chat) ---------- */
.chat-lista { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto;
  margin: 10px 0; padding: 2px 4px 2px 2px; }
.chat-msg { max-width: 92%; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; }
.chat-msg.user { align-self: flex-end; background: #e8efff; border: 1px solid #c9d8ff; }
.chat-msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--line); }
.chat-msg .quando { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.chat-proposta { margin-top: 8px; padding: 8px 10px; border: 1px dashed #9bb7ff; border-radius: 8px; background: #f7faff; }
.chat-proposta b { display: block; font-size: 12px; margin-bottom: 4px; }
.chat-proposta p { margin: 0 0 8px; font-size: 12px; color: #374151; max-height: 130px; overflow: auto; }
.chat-form { display: flex; gap: 6px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 46px; font-family: inherit; }
.chat-form button { white-space: nowrap; }

/* tarefa criada pelo chat: andamento e resultado */
.chat-tarefa { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--accent, #f59e0b); }
.chat-tarefa .chat-task-status { font-size: 12.5px; color: var(--muted); }
.chat-tarefa .chat-task-motivo { font-size: 12.5px; color: var(--bad-txt); background: var(--bad-bg);
  border: 1px solid var(--bad-line); border-radius: 6px; padding: 6px 8px; }
.chat-tarefa button { align-self: flex-start; }

/* spinner pequeno (botao criar e executar / andamento da tarefa) */
.spinner-mini { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite;
  vertical-align: -1px; margin-right: 4px; }
@keyframes girar { to { transform: rotate(360deg); } }

.chat-proposta-botoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.chat-proposta-botoes .link { font-size: 12px; }

.custo { margin-left: 8px; color: #2e7d32; font-weight: 600; }
.custo-meta { color: #2e7d32; }

.aviso-testes span { white-space: pre-line; }

.aviso-bloqueio { background: #fff3cd; border-left: 4px solid #ffc107; padding: 10px 12px; margin: 10px 0; border-radius: 4px; color: #664d03; }

.st-em_producao { background: #d1fae5; color: #065f46; }
.st-so_no_teste { background: #dbeafe; color: #1e3a8a; }
.st-substituida { background: #e5e7eb; color: #4b5563; }

.conf-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.conf-tabela th, .conf-tabela td { border: 1px solid #e5e7eb; padding: 6px; vertical-align: top; text-align: left; }
.conf-tabela th { background: #f9fafb; }
.conf-tabela td.ok { background: #ecfdf5; }
.conf-tabela td.nao { background: #fef2f2; }
.conf-tabela td.na { color: #6b7280; }
.conf-tabela .esp { color: #6b7280; }

/* ===== responsivo: helpers ===== */
.linha1 .selos { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.linha1 .meta-tarefa { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.linha1 .meta-tarefa .tok { margin-left: 0; }
.conf-cards { display: none; }
pre.plano code.linha-codigo { background: transparent; padding: 0; border-radius: 0; font-family: inherit; color: inherit; }

/* ===== celular (390px) ===== */
@media (max-width: 700px) {
  header {
    height: auto;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .marca { font-size: 14px; gap: 8px; min-width: 0; }
  .marca img.logo { height: 26px; }
  .marca .tag { display: none; }
  .dir { width: 100%; justify-content: space-between; gap: 8px; font-size: 11.5px; }
  .orcamento { flex-wrap: wrap; font-size: 11px; gap: 6px; }
  .barra { width: 56px; }
  #sair { min-height: 36px; padding: 6px 10px; }

  main { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .cartao { padding: 14px; }
  .col-esq, .col-dir { gap: 12px; }

  .linha1 { flex-wrap: wrap; gap: 4px 6px; }
  .linha1 b { font-size: 13px; }
  .linha1 .selos { width: 100%; order: 2; gap: 4px; }
  .linha1 .pin { order: 1; margin-left: auto; }
  .linha1 .meta-tarefa { width: 100%; order: 3; margin-left: 0; font-size: 11px; gap: 8px; }
  .linha1 .tok { font-size: 11px; }
  .item { padding: 10px 11px; }

  pre.plano {
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
    max-height: none;
    padding: 11px 12px;
  }
  pre.plano code.linha-codigo {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    background: var(--bg2);
    border-radius: 6px;
    padding: 1px 4px;
    margin: 1px 0;
  }
  pre.diff { font-family: var(--mono); }

  .acoes { flex-direction: column; gap: 8px; }
  .acoes button, .refinar-linha button, #btn-conferir { width: 100%; min-height: 44px; }
  .refinar-linha { flex-direction: column; }
  button { min-height: 40px; }

  .conf-tabela { display: none; }
  .conf-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .conf-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: #fbfcff; }
  .conf-card-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
  .conf-card-top small { color: var(--muted); }
  .conf-card-res { margin-left: auto; font-size: 15px; }
  .conf-linha { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 3px 0; border-top: 1px dashed #e8edf6; }
  .conf-linha:first-of-type { border-top: 0; }
  .conf-linha .rot { min-width: 86px; color: var(--muted); }
  .conf-linha .esp { color: var(--muted); }
  .conf-linha.ok b { color: var(--ok-txt); }
  .conf-linha.nao b { color: var(--bad-txt); }
  .conf-erro { color: var(--bad-txt); font-size: 12px; margin-top: 4px; }
}

.conf-tabela td.tela { font-size: 11px; line-height: 1.45; min-width: 150px; }
.conf-tabela td.tela.ok { background: #ecfdf5; }
.conf-tabela td.tela.nao { background: #fef2f2; }
.conf-sep { margin: 7px 0 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }

/* ===== visual: resumo, secoes recolhiveis, itens, barras ===== */
.resumo-tarefa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; }
.resumo-item { min-width: 0; }
.resumo-rot { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 3px; }
.resumo-val { font-size: 13px; font-weight: 600; word-break: break-word; }
.resumo-min { font-size: 10.5px; color: var(--muted); margin-top: 2px; max-height: 32px; overflow: hidden; }
details.secao-longa { border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; margin: 10px 0; }
details.secao-longa > summary { cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--primary2); display: flex; align-items: center; gap: 8px; list-style: none; }
details.secao-longa > summary::-webkit-details-marker { display: none; }
details.secao-longa > summary::before { content: '▸'; font-size: 11px; color: var(--muted); transition: transform .15s; }
details.secao-longa[open] > summary::before { transform: rotate(90deg); }
details.secao-longa > summary::after { content: 'ver mais'; margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
details.secao-longa[open] > summary::after { content: 'ver menos'; }
details.secao-longa > p.sub, details.secao-longa > pre { margin: 0 12px 12px; }
details.secao-longa > pre.diff { max-height: 560px; }
.itens-pedido { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 12px; }
.item-pedido { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; font-size: 12.5px; line-height: 1.45; }
.item-pedido .status { font-size: 10.5px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.item-pedido.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.item-pedido.nao { background: var(--bad-bg); border-color: var(--bad-line); }
.item-pedido.fora { background: #f3f4f6; color: #4b5563; }
.conf-resumo { padding: 9px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; margin: 6px 0 8px; }
.conf-resumo.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-txt); }
.conf-resumo.erro { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad-txt); }
.progresso-barras { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.barra-linha { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--warn-txt); }
.barra-linha > span { min-width: 48px; }
.barra-linha > b { margin-left: auto; font-weight: 600; white-space: nowrap; }
.barra-prog { flex: 1; height: 6px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
@media (max-width: 700px) {
  .resumo-tarefa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progresso { flex-wrap: wrap; }
  .progresso-txt { width: 100%; }
  details.secao-longa > summary { font-size: 12.5px; }
}

/* ===== copiar/baixar o resultado da tarefa ===== */
.acoes-copia { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.acoes-copia button { font-weight: 600; }
.copia-aviso { font-size: 12px; color: var(--muted); margin: 6px 0 10px; min-height: 15px; }
@media (max-width: 700px) {
  .acoes-copia { flex-direction: column; gap: 8px; }
  .acoes-copia button { width: 100%; min-height: 44px; }
}

/* ===== teste de fumaça (gate do ambiente de teste) ===== */
.fumaca-item { padding: 8px 12px; border-top: 1px dashed #e8edf6; font-size: 12.5px; line-height: 1.5; }
.fumaca-item:first-of-type { border-top: 0; }
.fumaca-item.ok b { color: var(--ok-txt); }
.fumaca-item.nao b { color: var(--bad-txt); }
.fumaca-erro { color: var(--bad-txt); font-size: 12px; margin-top: 4px; word-break: break-word; }
.fumaca-diag { margin-top: 4px; padding: 6px 8px; background: #f7f8fb; border-left: 3px solid #c9d2e3;
  font-size: 11.5px; line-height: 1.45; color: #4b5563; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }

/* conferência: erro da ferramenta é "não conferido" (cinza), não divergência */
.conf-resumo.na { color: #6b7280; background: #f6f7fa; border-color: #e2e6ef; }
.conf-nao-conferido { color: #7b8494; font-size: 11.5px; line-height: 1.45; }
.conf-tabela td.tela.na { background: #f6f7fa; }

/* ===== Consumo ===== */
.consumo { position: fixed; inset: 0; background: #fff; z-index: 80; overflow: auto; padding: 16px; }
.consumo.escondido { display: none; }
.consumo-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.consumo-top h2 { margin: 0; font-size: 18px; }
.consumo-top input[type="month"] { padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.consumo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.consumo-estimativa { background: #f6f8ff; border: 1px solid #e3e9fb; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: 13px; }
.consumo-barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.consumo-barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 4px; }
.consumo-barra i { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 1px; }
.consumo-barra span { font-size: 9px; color: var(--muted); margin-top: 3px; }
.tabela-rolagem { overflow-x: auto; margin-bottom: 16px; }
.consumo-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.consumo-tabela th, .consumo-tabela td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: right; white-space: nowrap; }
.consumo-tabela th:first-child, .consumo-tabela td:first-child, .consumo-tabela th:nth-child(2), .consumo-tabela td:nth-child(2) { text-align: left; }
.consumo-origens { font-size: 13px; display: grid; gap: 6px; margin-bottom: 16px; }
@media (max-width: 700px) { .consumo-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .consumo-barras { height: 100px; } }

/* testes parciais (suíte completa não terminou) */
.st-testes-parcial { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.acoes-teste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }