/* base.css — tema e peças de tela que TODAS as telas usam.
 *
 * Saiu do panel.html em 17/08/2026 junto com o comum.js, e pelo mesmo motivo: a tela do
 * construtor de fluxo passou a ser um arquivo próprio, e copiar o tema faria as cópias
 * divergirem na primeira vez que alguém mudasse a cor de destaque.
 *
 * Entra só o que é de TODAS as telas: as variáveis, o reset, e as peças básicas — botão,
 * campo, cartão, dica, etiqueta de estado. O que é de UMA tela fica na tela: a marca do logo,
 * o menu lateral, o seletor de arquivo, o funil e a conversa continuam no painel. A primeira
 * tentativa recortou por faixa de linhas, levou a marca do login junto e truncou uma regra de
 * várias linhas — daí a lista ser explícita.
 */

:root{
  --bg:#f5f6f5;
  --surface:#ffffff;
  --surface-alt:#eef2ef;
  --border:#e2e5e2;
  --text:#161a18;
  --text-muted:#68716c;
  --accent:#17a34a;
  --accent-dark:#0e7a37;
  --accent-tint:#e3f6ea;
  --warn-text:#9a5b12;
  --warn-tint:#fdf1e0;
  --error-text:#9a2f22;
  --error-tint:#fdeceb;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 1px 3px rgba(20,24,22,.06);
  --shadow-md:0 6px 20px rgba(20,24,22,.08);
  --shadow-lg:0 16px 40px rgba(20,24,22,.14);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent-dark);}
a:hover{color:var(--accent);}
button{font-family:inherit;}
.hidden{display:none !important;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text-muted);}
.input{
  width:100%;min-height:46px;padding:0 16px;font:inherit;font-size:14.5px;color:var(--text);
  background:var(--surface-alt);border:1.5px solid transparent;border-radius:var(--r-md);
  outline:none;transition:border-color .15s,background .15s;
}
.input:hover{border-color:var(--border);}
.input:focus{background:var(--surface);border-color:var(--accent);}
.input[readonly]{cursor:default;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:14px;border-radius:var(--r-pill);border:none;
  padding:0 22px;min-height:46px;transition:background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-dark);}
.btn-secondary{background:var(--surface-alt);color:var(--text);}
.btn-secondary:hover{background:var(--border);}
.btn-block{width:100%;}
.btn-icon{width:46px;height:46px;padding:0;border-radius:var(--r-pill);}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;flex:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:22px;display:flex;flex-direction:column;gap:16px;}
.card-title{font-size:16.5px;font-weight:700;margin:0;}
.card-desc{font-size:13px;color:var(--text-muted);margin:0;max-width:70ch;line-height:1.55;}
.hint{font-size:12px;color:var(--text-muted);line-height:1.6;margin:0;}
.hint b{color:var(--text);font-weight:700;}
.hint code{background:var(--surface-alt);padding:1px 6px;border-radius:5px;font-size:11px;}
.pill-estado{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--surface-alt);color:var(--text-muted);vertical-align:middle;margin-left:8px;}
.pill-estado.ligada{background:var(--accent-tint);color:var(--accent-dark);}