/* Painel de Automações — Canali Co. Design System (tokens + componentes) */
@font-face{font-family:"General Sans";src:url(/fonts/GeneralSans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(/fonts/GeneralSans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(/fonts/GeneralSans-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root,[data-theme="escuro"]{
  --preto:#0a0b0d;--branco:#ffffff;--marinho-900:#0b1628;--marinho-700:#14284d;--marinho-500:#1f3864;--prata-claro:#e6e8eb;
  --prata:#c9cdd3;--fundo:#0a0b0d;--superficie:#121419;--elevada:#1a1d24;--marinho-fundo:#0e1c36;
  --texto:#f4f5f7;--texto-suave:#a3a8b0;--linha:#262a31;--linha-forte:#6b717b;
  --acao:#d6d9de;--acao-hover:#f0f1f3;--on-acao:#0a0b0d;--foco:#e6e8eb;
  --sucesso:#6cc4a1;--alerta:#e8b75c;--erro:#f2786d;--info:#8fb1e8;
  --sombra-flutuante:0 12px 32px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="claro"]{
  --prata:#62676f;--fundo:#f5f5f3;--superficie:#ffffff;--elevada:#ffffff;--marinho-fundo:#e9edf4;
  --texto:#0a0b0d;--texto-suave:#575c64;--linha:#e2e3e5;--linha-forte:#7d828a;
  --acao:#14284d;--acao-hover:#1f3864;--on-acao:#ffffff;--foco:#1f3864;
  --sucesso:#1c7a55;--alerta:#8a5a00;--erro:#b3261e;--info:#1f3864;
  --sombra-flutuante:0 12px 32px rgba(10,11,13,.14);
  color-scheme:light;
}
:root{
  --font-serif:Georgia,"Times New Roman",serif;
  --font-sans:"General Sans","Helvetica Neue",Arial,sans-serif;
  --raio-sm:4px;--raio-md:8px;--raio-lg:14px;--raio-pill:999px;
}

*{box-sizing:border-box}
html{background:var(--fundo)}
body{margin:0;font-family:var(--font-sans);background:var(--fundo);color:var(--texto);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
a{color:var(--info)}
::selection{background:var(--marinho-500);color:#fff}

/* ---- Barra do topo ---- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 24px;background:var(--marinho-900);border-bottom:1px solid #1c2940;color:#fff}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:22px;width:auto;display:block}
.brand .modulo{font-size:13px;font-weight:500;color:#a3a8b0;padding-left:12px;border-left:1px solid #2c3a55;white-space:nowrap}
.topright{display:flex;align-items:center;gap:8px}
.topright #who{font-size:13px;color:#c9cdd3;margin-right:4px}
.topbar .btn,.topbar .btn.ghost{height:32px;padding:0 12px;font-size:13px;background:transparent;color:#e6e8eb;border:1px solid #3a4a68}
.topbar .btn:hover{background:var(--marinho-700);border-color:#6b7a96}
.topbar :focus-visible{outline-color:#e6e8eb}

/* ---- Layout ---- */
main{max-width:1100px;margin:0 auto;padding:0 24px 64px}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;color:var(--texto)}
h1{font-size:28px;line-height:34px;margin:0 0 8px}
h2{font-size:28px;line-height:34px;margin:0}
h3{font-size:20px;line-height:26px;margin:0}
.rotulo{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);margin:0}
.muted{color:var(--texto-suave)}
.small{font-size:13px;line-height:18px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--elevada);border:1px solid var(--linha);padding:1px 6px;border-radius:var(--raio-sm);overflow-wrap:anywhere}
b{font-weight:600}

/* ---- Saudação ---- */
.saudacao{position:relative;padding:48px 0 32px}
.saudacao::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:radial-gradient(ellipse 50% 100% at 25% 0%,var(--marinho-fundo),transparent 70%);pointer-events:none}
.saudacao>*{position:relative}
.saudacao h1{font-size:44px;line-height:48px;letter-spacing:-.01em;margin:8px 0}
.saudacao .apoio{margin:0;color:var(--texto-suave);max-width:60ch}

/* ---- Telas de acesso (login, 2 etapas, senha) ---- */
.acesso{display:flex;flex-direction:column;align-items:center;padding:64px 0 32px}
.acesso .logo{height:120px;width:auto;margin-bottom:32px}
.acesso .logo-claro{display:none}
[data-theme="claro"] .acesso .logo-escuro{display:none}
[data-theme="claro"] .acesso .logo-claro{display:block}
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:24px;margin:16px 0}
.narrow{width:100%;max-width:420px;margin:0 auto;padding:32px}
.narrow h1{margin-bottom:4px}
.narrow>p{margin:0 0 24px}
.narrow form{margin-top:8px}
.narrow .btn.primary{width:100%;height:44px;margin-top:8px}
.qrbox{display:flex;justify-content:center;background:#fff;padding:12px;border-radius:var(--raio-md);margin:16px 0;width:fit-content;margin-inline:auto}

/* ---- Formulários ---- */
label{display:block;margin:0 0 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--texto)}
label.inline{display:inline-flex;gap:8px;align-items:center;font-weight:400;margin:4px 20px 4px 0;cursor:pointer}
input,select,textarea{display:block;width:100%;margin-top:6px;height:42px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--raio-md);background:var(--elevada);color:var(--texto);font:inherit;font-size:15px;font-weight:400}
textarea{height:auto;min-height:88px;padding:10px 12px;line-height:22px;resize:vertical}
select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--texto-suave) 50%),linear-gradient(135deg,var(--texto-suave) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:var(--texto-suave)}
input:hover,select:hover,textarea:hover{border-color:var(--texto-suave)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
input[type=radio],input[type=checkbox]{display:inline-block;width:16px;height:16px;margin:0;accent-color:var(--acao)}
#mfa-code{font-size:24px;letter-spacing:.4em;text-align:center;height:56px;font-variant-numeric:tabular-nums}
fieldset{border:1px solid var(--linha);border-radius:var(--raio-md);padding:12px 16px 16px;margin:0 0 16px}
legend{font-size:14px;font-weight:500;padding:0 6px}

/* ---- Botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--raio-md);border:1px solid var(--linha-forte);background:transparent;color:var(--texto);font:inherit;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--elevada);border-color:var(--texto-suave)}
.btn.primary{background:var(--acao);border-color:var(--acao);color:var(--on-acao)}
.btn.primary:hover{background:var(--acao-hover);border-color:var(--acao-hover)}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{background:var(--elevada)}
.btn.danger{color:var(--erro);border-color:var(--erro)}
.btn.small{height:32px;padding:0 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.row{display:flex;align-items:center}.between{justify-content:space-between}.gap{gap:8px}.wrap{flex-wrap:wrap;gap:12px}
.msg{min-height:20px;margin:12px 0 0;font-size:14px;font-weight:500}.msg.err{color:var(--erro)}.msg.ok{color:var(--sucesso)}

/* ---- Status da conexão ---- */
.status{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 18px;border-radius:var(--raio-md);background:var(--marinho-fundo);font-size:13px;line-height:18px;color:var(--texto-suave)}
.status b{color:var(--texto);font-weight:600}
.status .warn,.status .warn b{color:var(--alerta);font-weight:600}

/* ---- Abas ---- */
.tabs{display:flex;gap:4px;margin:32px 0 24px;border-bottom:1px solid var(--linha);overflow-x:auto}
.tab{position:relative;background:none;border:0;padding:12px 16px;font:inherit;font-size:14px;font-weight:500;color:var(--texto-suave);cursor:pointer;border-radius:var(--raio-md) var(--raio-md) 0 0;white-space:nowrap}
.tab:hover{color:var(--texto)}
.tab.active{color:var(--texto);background:var(--marinho-fundo)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--texto)}
.tabpane>.row:first-child{margin-bottom:16px}

/* ---- Cartões de automação ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rule{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:24px;display:flex;flex-direction:column;gap:8px}
.rule .nome{font-family:var(--font-serif);font-size:20px;line-height:26px}
.rule .acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--linha)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--raio-pill);border:1px solid currentColor;font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.on{color:var(--sucesso)}.pill.off{color:var(--texto-suave)}

/* ---- Tabelas ---- */
.tablewrap{overflow-x:auto;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-lg);margin:0 0 16px}
table{border-collapse:collapse;width:100%;font-size:13px;line-height:18px}
th{text-align:left;padding:12px 16px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--linha);vertical-align:top;max-width:280px;overflow-wrap:anywhere}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--elevada)}
#leads-filtro{width:auto;min-width:220px;margin:0;height:40px}

/* ---- Editor ---- */
#v-editor>.row:first-child{padding:40px 0 8px}
#v-editor h3{margin:32px 0 8px}
#v-editor>.row h3{margin:0}
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.media{border:1px solid var(--linha);border-radius:var(--raio-md);padding:6px;cursor:pointer;background:var(--elevada);color:var(--texto);text-align:left;font:inherit;font-size:12px;line-height:16px}
.media:hover{border-color:var(--texto-suave)}
.media.sel{border-color:var(--texto);outline:2px solid var(--foco);outline-offset:1px}
.media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio-sm);background:var(--superficie);display:block}
.media .leg{margin-top:6px;color:var(--texto-suave);max-height:3.2em;overflow:hidden}
.step{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:20px 24px;margin:16px 0}
.step.inicial{border-color:var(--linha-forte)}
.step .head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.msgbox{border:1px dashed var(--linha-forte);border-radius:var(--raio-md);padding:16px;margin:12px 0;background:var(--fundo)}
.btnrow{display:grid;grid-template-columns:130px 1fr 1fr 1fr auto;gap:8px;align-items:end;margin:8px 0}
.btnrow input,.btnrow select{margin-top:0}
.sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.erros{background:var(--superficie);border:1px solid var(--erro);color:var(--erro);border-radius:var(--raio-md);padding:12px 16px;font-size:14px;margin:12px 0}
.erros::before{content:"Erro";display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}

@media (max-width:720px){
  main{padding:0 16px 48px}
  .topbar{padding:0 16px}
  .brand .modulo,.topright #who{display:none}
  .saudacao h1{font-size:34px;line-height:38px}
  .btnrow{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}