/* ═══════════════════════════════════════════════════════════════════════
   AUTOMAÇÕES — a tela de escrever regras
   ═══════════════════════════════════════════════════════════════════════
   Duas caras, nunca as duas ao mesmo tempo: a LISTA, feita de frases para
   conferir de relance, e o CONSTRUTOR, feito de campos porque escrever é
   escolher.

   ── O QUE MUDOU, E POR QUÊ ──────────────────────────────────────────────
   A primeira versão era três rótulos em versalete com uma barrinha colorida
   e selects soltos ao lado. Parecia arrumada e não era legível: o bloco do
   meio ficava vazio na maioria das regras — um rótulo "SE" e um link, sem
   nada entre eles —, e o que se via era uma parte quebrada da tela, não uma
   etapa opcional. Os selects vinham em pares sem rótulo, e o segundo mudava
   de assunto conforme o primeiro.

   Agora cada passo é um CARTÃO numerado com título, uma linha de explicação
   e os campos dentro. Cada campo tem rótulo em cima. A numeração faz o
   trabalho que a barrinha colorida tentava fazer, e diz também quantos
   passos existem — três, e não uma pilha sem fim.

   Os dois temas moram aqui, como nos outros arquivos novos: a tela nasceu
   nos dois ao mesmo tempo.
   ═══════════════════════════════════════════════════════════════════════ */

.aut-bg{
  position:fixed;inset:0;z-index:1450;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(6,8,14,.72);backdrop-filter:blur(6px);
}
.aut-bg.aberta{display:flex;animation:fadeIn .16s both;}

.aut-janela{
  width:min(600px,100%);max-height:min(780px,90dvh);display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:#15171e;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 90px rgba(0,0,0,.66);
  animation:cardRise .22s cubic-bezier(.16,1,.3,1) both;
}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.aut-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px 16px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.07);
}
.aut-titulo{
  font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.3px;
  color:rgba(240,240,240,.96);margin:0 0 3px;
}
.aut-sub{font-size:.78rem;color:rgba(240,240,240,.5);margin:0;line-height:1.5;max-width:52ch;}
.aut-x{
  width:30px;height:30px;flex-shrink:0;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.6);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;
}
.aut-x:hover{background:rgba(255,255,255,.13);color:#fff;}

/* ── Corpo ───────────────────────────────────────────────────────────── */
.aut-corpo{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 22px;}
.aut-pe{
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;
  padding:14px 22px;border-top:1px solid rgba(255,255,255,.07);
}

.aut-btn{
  height:38px;padding:0 16px;border-radius:11px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.82);transition:background .14s,color .14s,opacity .14s;
}
.aut-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.aut-btn-forte{background:#6366f1;border-color:#6366f1;color:#fff;}
.aut-btn-forte:hover{background:#4f46e5;border-color:#4f46e5;color:#fff;}
/* Salvar desligado explica na prévia, logo acima — não é um botão morto
   sem motivo. */
.aut-btn:disabled{opacity:.4;cursor:not-allowed;}
.aut-btn-forte:disabled:hover{background:#6366f1;border-color:#6366f1;}

/* ── A lista de regras: frases ───────────────────────────────────────── */
.aut-card{
  padding:14px 16px;border-radius:14px;margin-bottom:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.aut-card.desligada{opacity:.55;}
.aut-card-nome{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#a5b4fc;margin-bottom:5px;
}
.aut-frase{font-size:.85rem;line-height:1.55;color:rgba(240,240,240,.9);margin:0 0 10px;}
.aut-card-acoes{display:flex;gap:7px;flex-wrap:wrap;}
.aut-chip{
  padding:5px 11px;border-radius:20px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.7);transition:all .14s;
}
.aut-chip:hover{background:rgba(255,255,255,.12);color:#fff;}
.aut-chip.on{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
.aut-chip-perigo:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.36);color:#fca5a5;}

/* ── O construtor: três passos, cada um um cartão ─────────────────────── */
.aut-passo{
  padding:14px 16px 16px;border-radius:14px;margin-bottom:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
.aut-passo-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* O número faz o trabalho que a barrinha colorida tentava fazer, e diz
   também quantos passos existem. */
.aut-passo-n{
  width:22px;height:22px;flex-shrink:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:.74rem;font-weight:700;
  background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.38);color:#c7d2fe;
}
.aut-passo-tit{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0;}
.aut-passo-nome{
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;
  color:rgba(240,240,240,.92);
}
.aut-passo-opc{
  font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.45);
}
.aut-passo-ajuda{
  margin:5px 0 11px 32px;font-size:.74rem;line-height:1.5;
  color:rgba(240,240,240,.45);max-width:56ch;
}
.aut-passo-extra{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.aut-contador{font-size:.68rem;color:rgba(240,240,240,.32);font-variant-numeric:tabular-nums;}
.aut-add{
  border:0;background:transparent;cursor:pointer;padding:2px 4px;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;color:#a5b4fc;
}
.aut-add:hover{color:#c7d2fe;text-decoration:underline;}
.aut-add:disabled{opacity:.3;cursor:default;text-decoration:none;}

/* ── Os campos: rótulo em cima, caixa embaixo ─────────────────────────── */
/* Dois selects lado a lado só funcionam com rótulo. O segundo muda de
   assunto conforme o primeiro — ora lista, ora etiqueta, ora pessoa —, e
   sem rótulo a única forma de saber o que ele quer é abrir e ver. */
.aut-linha{display:flex;gap:10px;align-items:flex-end;margin-bottom:9px;flex-wrap:wrap;}
.aut-linha:last-child{margin-bottom:0;}
.aut-campo{display:flex;flex-direction:column;gap:5px;flex:1 1 190px;min-width:0;}
.aut-campo-rot{
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  color:rgba(240,240,240,.42);padding-left:2px;
}
.aut-sel{
  width:100%;min-width:0;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.9);
  cursor:pointer;outline:none;
}
.aut-sel:focus{border-color:rgba(99,102,241,.5);}
/* Caixa sem opção: ela DIZ que o quadro não tem nenhuma, e fica marcada
   como pendência em vez de parecer defeito da tela. */
.aut-sel-vazio{
  cursor:not-allowed;background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.3);color:rgba(251,191,36,.8);
}
.aut-x-linha{
  width:34px;height:34px;flex-shrink:0;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:rgba(240,240,240,.35);font-size:.75rem;
}
.aut-x-linha:hover{background:rgba(239,68,68,.14);color:#fca5a5;}

.aut-nome-bloco{margin:0 0 14px;padding:0 16px;}
.aut-nome{
  width:100%;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.9);outline:none;
}
.aut-nome::placeholder{color:rgba(240,240,240,.3);}
.aut-nome:focus{border-color:rgba(99,102,241,.5);}

/* ── A prévia: a frase que vai ser gravada ────────────────────────────── */
/* Com rótulo, de propósito. Sem ele, uma frase azul dentro de uma caixa
   azul parecia um link — e ninguém clica num link que não vai a lugar
   nenhum, então ninguém lia a prévia. */
.aut-previa{
  margin:2px 0 0;padding:13px 15px;border-radius:12px;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.22);
}
.aut-previa-rot{
  display:block;margin-bottom:5px;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(165,180,252,.72);
}
.aut-previa-txt{margin:0;font-size:.85rem;line-height:1.55;color:#dbe0ff;}
.aut-previa.erro{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);}
.aut-previa.erro .aut-previa-rot{color:#fbbf24;letter-spacing:.02em;text-transform:none;font-size:.75rem;}
.aut-previa.erro .aut-previa-txt{color:rgba(240,240,240,.55);}

.aut-dica{margin:16px 0 0;font-size:.72rem;line-height:1.5;color:rgba(240,240,240,.35);}

/* ── O vazio, e as receitas ───────────────────────────────────────────── */
.aut-vazio{text-align:center;padding:22px 10px 18px;}
.aut-vazio-ico{font-size:2rem;margin-bottom:8px;}
.aut-vazio h2{font-size:1rem;font-weight:700;color:rgba(240,240,240,.9);margin:0 0 8px;}
.aut-vazio p{font-size:.82rem;line-height:1.6;color:rgba(240,240,240,.55);margin:0 auto;max-width:48ch;}

.aut-receitas{
  margin-top:18px;padding:15px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
.aut-receitas-rot{
  margin:0 0 3px;font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:600;color:rgba(240,240,240,.9);
}
.aut-receitas-ajuda{margin:0 0 11px;font-size:.73rem;color:rgba(240,240,240,.42);line-height:1.5;}
.aut-receitas-grade{display:flex;flex-direction:column;gap:7px;}
.aut-receita{
  width:100%;text-align:left;padding:10px 13px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.79rem;line-height:1.4;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);color:#c7d2fe;
  transition:background .14s,border-color .14s;
}
.aut-receita:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO — azul claro e branco, como o resto do produto
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .aut-bg{background:rgba(35,69,103,.34);}
html[data-theme="light"] .aut-janela{
  background:#fff;border-color:#e2ebf7;box-shadow:0 34px 90px rgba(16,58,110,.24);
}
html[data-theme="light"] .aut-cab{
  border-bottom-color:#edf3fa;
  background:linear-gradient(180deg,#eef6ff 0%,#fff 100%);
}
html[data-theme="light"] .aut-titulo{color:#12263f;}
html[data-theme="light"] .aut-sub{color:#6b8099;}
html[data-theme="light"] .aut-x{background:#f1f6fb;color:#4a6b86;}
html[data-theme="light"] .aut-x:hover{background:#e3edf7;color:#0f2744;}
html[data-theme="light"] .aut-pe{border-top-color:#edf3fa;background:#fbfdff;}
html[data-theme="light"] .aut-btn{background:#f2f7fc;border-color:#dbe7f7;color:#3f6079;}
html[data-theme="light"] .aut-btn:hover{background:#e5eefa;color:#12509f;}
html[data-theme="light"] .aut-btn-forte{background:#2b6fe0;border-color:#2b6fe0;color:#fff;}
html[data-theme="light"] .aut-btn-forte:hover{background:#1d5fd0;border-color:#1d5fd0;}
html[data-theme="light"] .aut-btn-forte:disabled:hover{background:#2b6fe0;border-color:#2b6fe0;}
html[data-theme="light"] .aut-card{background:#f4f8fd;border-color:#e2ebf7;}
html[data-theme="light"] .aut-card-nome{color:#1d5fd0;}
html[data-theme="light"] .aut-frase{color:#274a6b;}
html[data-theme="light"] .aut-chip{background:#fff;border-color:#dbe7f7;color:#4a6b86;}
html[data-theme="light"] .aut-chip:hover{background:#eef5fd;color:#12509f;}
html[data-theme="light"] .aut-chip.on{background:#e4f7ef;border-color:#b6e6d3;color:#0f9d6e;}
html[data-theme="light"] .aut-chip-perigo:hover{background:#fdeced;border-color:#f3c2c8;color:#c2334a;}

html[data-theme="light"] .aut-passo{background:#f7fbff;border-color:#e5eef8;}
html[data-theme="light"] .aut-passo-n{background:#e4ecff;border-color:#c6d6fb;color:#2b52d4;}
html[data-theme="light"] .aut-passo-nome{color:#12263f;}
html[data-theme="light"] .aut-passo-opc{background:#e8eff7;color:#63798f;}
html[data-theme="light"] .aut-passo-ajuda{color:#6b8099;}
html[data-theme="light"] .aut-contador{color:#8ba0b4;}
html[data-theme="light"] .aut-add{color:#2b6fe0;}
html[data-theme="light"] .aut-add:hover{color:#12509f;}

html[data-theme="light"] .aut-campo-rot{color:#63798f;}
html[data-theme="light"] :is(.aut-sel,.aut-nome){
  background:#fff;border-color:#dbe7f7;color:#12263f;
}
html[data-theme="light"] .aut-sel-vazio{background:#fff7e6;border-color:#eecb8a;color:#a35d06;}
html[data-theme="light"] .aut-nome::placeholder{color:#96a9bc;}
html[data-theme="light"] :is(.aut-sel,.aut-nome):focus{border-color:#2b6fe0;}
html[data-theme="light"] .aut-x-linha{color:#8ba0b4;}
html[data-theme="light"] .aut-x-linha:hover{background:#fdeced;color:#c2334a;}

html[data-theme="light"] .aut-previa{background:#eef5fd;border-color:#cfe0f7;}
html[data-theme="light"] .aut-previa-rot{color:#5c7fb3;}
html[data-theme="light"] .aut-previa-txt{color:#17427a;}
html[data-theme="light"] .aut-previa.erro{background:#fff7e6;border-color:#eecb8a;}
html[data-theme="light"] .aut-previa.erro .aut-previa-rot{color:#a35d06;}
html[data-theme="light"] .aut-previa.erro .aut-previa-txt{color:#7b8ea0;}

html[data-theme="light"] .aut-dica{color:#7c92a8;}
html[data-theme="light"] .aut-vazio h2{color:#12263f;}
html[data-theme="light"] .aut-vazio p{color:#6b8099;}
html[data-theme="light"] .aut-receitas{background:#f7fbff;border-color:#e5eef8;}
html[data-theme="light"] .aut-receitas-rot{color:#12263f;}
html[data-theme="light"] .aut-receitas-ajuda{color:#6b8099;}
html[data-theme="light"] .aut-receita{background:#eef4ff;border-color:#d3e0fb;color:#1d4ed8;}
html[data-theme="light"] .aut-receita:hover{background:#e2ebff;border-color:#b9cdf8;}

@media (max-width:560px){
  .aut-bg{padding:0;align-items:flex-end;}
  .aut-janela{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;}
  .aut-campo{flex:1 1 100%;}
  .aut-passo-extra{width:100%;margin-left:32px;justify-content:flex-start;}
}