/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMAÇÕES — lista de cards + editor QUANDO/E/ENTÃO no painel de detalhe.
   Usa só os tokens do design system (styles/tokens.css); nenhuma cor solta,
   pra a aba acompanhar o tema claro/escuro como o resto do sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Widget central (modal) ───────────────────────────────────────────────
   Substitui o painel lateral só para Automações: Nova/Editar/Ver usam este
   MESMO modal. Backdrop discreto (igual ao #sp-overlay), diálogo centralizado
   nos dois eixos, cabeçalho e rodapé fixos, corpo com scroll interno próprio
   — header/footer nunca se movem enquanto o formulário rola. */
#aut-modal-overlay {
 position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.32);
 opacity: 0; pointer-events: none; transition: opacity var(--dur-slow, .18s) var(--ease-standard, ease);
}
#aut-modal-overlay.aut-modal-open { opacity: 1; pointer-events: all; }
#aut-modal {
 position: fixed; top: 50%; left: 50%; z-index: 901;
 width: min(720px, 92vw); max-height: 88vh;
 display: flex; flex-direction: column;
 background: var(--surface); border-radius: var(--r-lg, 12px);
 box-shadow: var(--shadow-2, 0 12px 48px rgba(0,0,0,.22));
 opacity: 0; pointer-events: none;
 transform: translate(-50%, -50%) scale(.97);
 transition: opacity var(--dur-slow, .18s) var(--ease-standard, ease), transform var(--dur-slow, .18s) var(--ease-standard, cubic-bezier(.4,0,.2,1));
}
#aut-modal.aut-modal-open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }
.autm-header {
 flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
 padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.autm-header-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Mesma badge navy da tag do painel lateral (.sp-htag, main.css) — o modal
   central precisa parecer a MESMA linguagem visual do resto do sistema, não
   um componente à parte. */
.autm-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 3px 8px; border-radius: var(--r-full); background: var(--navy-solid); color: #fff; flex-shrink: 0; }
.autm-title { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autm-close {
 flex-shrink: 0; background: none; border: 0; color: var(--muted); cursor: pointer;
 font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
 transition: background var(--dur-fast, .12s) var(--ease-standard, ease), color var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.autm-close:hover { background: var(--surface-2, rgba(127,127,127,.1)); color: var(--text); }
.autm-close:active { transform: scale(.9); }
.autm-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5, 20px); }
.autm-footer {
 flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
 padding: 12px 18px; border-top: 1px solid var(--border);
}
.autm-footer:empty { display: none; }
/* Dentro do widget de automação os campos de texto/número/data SEMPRE mostram
   a caixa (o padrão global de .sp-inp — styles/main.css — é borda só no
   hover/foco, pensado pro painel lateral denso). Sem placeholder, um campo
   vazio assim fica com aparência de "não existe" (achado real: "Nome da
   tarefa" some por completo) — e no widget central, mais em destaque, isso
   fica ainda mais visível. Não mexe no componente global, só decora aqui
   dentro; <select> não precisa (o navegador já desenha a caixa dele).
   Reaproveitado no fluxo NOVO (#autm-body) e teria o mesmo efeito nos
   `<input>`/`<textarea>` de dentro de .aut-acao/.aut-cond fora do modal, se
   algum dia voltarem a existir num contexto sem esta regra. */
#autm-body input.sp-inp,
#autm-body textarea.sp-inp {
 border-color: var(--border);
 background: var(--surface2, rgba(127,127,127,.06));
}
#autm-body input.sp-inp:focus,
#autm-body textarea.sp-inp:focus {
 border-color: var(--navy);
 background: var(--surface);
}
@media (max-width: 640px) {
 #aut-modal { width: 96vw; max-height: 94vh; }
 .autm-body { padding: var(--sp-4, 14px); }
 .autm-header, .autm-footer { padding: 12px 14px; }
}

.aut-empty,
.aut-empty-cond { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 12px; }
.aut-empty-cond { padding: 14px; border: 1px dashed var(--border); border-radius: 8px; }

/* ── Resumo compacto do topo ─────────────────────────────────────────────────
   Substitui os 4 KPI-cards grandes: os mesmos números numa linha de texto. */
.aut-summary {
 display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
 font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-4);
}
.aut-summary b { color: var(--text); font-weight: 600; }
.aut-summary i { color: var(--border); font-style: normal; margin: 0 2px; }
.aut-resumo-err b { color: var(--red); }
.aut-resumo-filtro { color: var(--green); font-weight: 600; }

/* ── Grupos (Projetos / Obras) ───────────────────────────────────────────────
   Rótulo leve, nunca um card: agrupar não pode competir com o conteúdo. */
.aut-group-title {
 font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em;
 text-transform: uppercase; color: var(--muted);
 margin: var(--sp-6) 0 var(--sp-3); display: flex; align-items: center; gap: 6px;
}
.aut-group-title span { font-weight: 400; opacity: .7; letter-spacing: 0; }
.aut-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }

/* ── Card da lista ───────────────────────────────────────────────────────────
   Mesma linguagem de .obra-card (surface, --r-md, shadow-1, hover verde) — a
   aba não tem paleta própria. A diferença é só o miolo: gatilho e ação em duas
   linhas curtas, muito espaço em branco, uma única cor de destaque (o badge). */
.aut-card {
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-1);
 cursor: pointer;
 transition: box-shadow var(--dur-base, .15s) var(--ease-standard, ease), border-color var(--dur-base, .15s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
 display: flex; flex-direction: column; gap: var(--sp-3);
}
.aut-card:hover { border-color: var(--green); box-shadow: var(--shadow-2); }
.aut-card:active { transform: scale(.99); }
.aut-card-off { opacity: .6; }

.aut-card-hd { display: flex; align-items: center; gap: var(--sp-2); }
.aut-card-nome {
 flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 600;
 color: var(--text); line-height: 1.35;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Regra em duas linhas: gatilho em cima, ação embaixo, ligadas por uma linha
   vertical discreta entre os dois ícones — eco do fluxo GATILHO → AÇÕES do
   editor no painel, sem o peso dele. */
.aut-rule { display: flex; flex-direction: column; gap: var(--sp-2); }
.aut-rule-row { display: flex; align-items: flex-start; gap: var(--sp-2); position: relative; }
.aut-rule-row:first-child::after {
 content: ''; position: absolute; left: 8px; top: 18px; bottom: -10px;
 width: 1px; background: var(--border);
}
.aut-rule-ic {
 flex-shrink: 0; width: 17px; height: 17px; border-radius: var(--r-full);
 display: flex; align-items: center; justify-content: center;
 border: 1px solid var(--border); background: var(--surface);
 color: var(--muted); position: relative; z-index: 1; margin-top: 1px;
}
.aut-rule-ic-t { color: var(--navy); }
.aut-rule-ic-a { color: var(--green); }
.aut-rule-tx {
 flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--text);
 line-height: 1.45;
 /* Duas linhas no máximo: uma automação com muitas condições não pode esticar
    o card e quebrar o alinhamento da grade. O texto completo está no painel. */
 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 overflow: hidden;
}
.aut-rule-row:last-child .aut-rule-tx { color: var(--muted); }

/* margin-top:auto encosta a meta no rodapé do card. Como a grade estica todos
   os cards da linha à mesma altura, sem isto o "Executada 12 vezes" flutuava
   numa altura diferente em cada card, conforme o gatilho ocupasse 1 ou 2
   linhas — exatamente o desalinhamento que deixa a lista com cara de bagunça. */
.aut-card-meta { font-size: var(--fs-caption); color: var(--muted); margin-top: auto; }

/* Pill badge de status. Sem borda: a cor de fundo suave já separa do card, e
   uma borda a mais em cada card vira ruído numa grade de 22. */
.aut-pill {
 font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-full);
 white-space: nowrap; flex-shrink: 0; letter-spacing: .01em;
}
.aut-pill-on  { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.aut-pill-off { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.aut-dot-err {
 width: 7px; height: 7px; border-radius: var(--r-full); background: var(--red);
 flex-shrink: 0; cursor: help;
}

.aut-chip {
 font-size: 11px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
 border: 1px solid var(--border); background: transparent; color: var(--muted);
 transition: border-color var(--dur-fast, .12s) var(--ease-standard, ease), color var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.aut-chip.active { color: var(--text); border-color: var(--navy); font-weight: 600; }
.aut-chip:active { transform: scale(.95); }

/* ── Painel de detalhe ───────────────────────────────────────────────────── */
.aut-resumo {
 font-size: 12px; line-height: 1.6; color: var(--text); padding: 10px 12px;
 border-left: 3px solid var(--navy); background: var(--surface-2, rgba(127,127,127,.07));
 border-radius: 0 8px 8px 0; margin-bottom: 12px;
}
.aut-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 4px 0 10px; }
/* text-transform/letter-spacing explícitos: main.css deixa TODO <label> do
   painel em CAIXA ALTA (é o visual dos rótulos de campo .sp-label). Aqui o
   texto é uma frase inteira ("Vincular a Obra do registro que disparou"), e em
   caixa alta ela fica ilegível e ocupa duas linhas. */
.aut-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.aut-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); margin: 6px 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }

.aut-cond { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.aut-cond-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.aut-cond-lig { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--navy); }
.aut-cond-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aut-cond-val { margin-top: 8px; }
.aut-cond-novalue { font-size: 11px; color: var(--muted); font-style: italic; }
.aut-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; transition: color var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease); }
.aut-x:hover { color: var(--red); }
.aut-x:active { transform: scale(.9); }

/* Valores de campo lista/multi como chips clicáveis — nunca digitação livre
   onde o campo original é uma lista de opções (exigência da especificação). */
.aut-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aut-vchip {
 font-size: 11px; padding: 3px 9px; border-radius: 12px; cursor: pointer;
 border: 1px solid var(--border); background: transparent; color: var(--muted);
 transition: color var(--dur-fast, .12s) var(--ease-standard, ease), background var(--dur-fast, .12s) var(--ease-standard, ease), border-color var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.aut-vchip.active { color: #fff; background: var(--navy-solid); border-color: var(--navy-solid); font-weight: 600; }
.aut-vchip:active { transform: scale(.95); }
.aut-vchip-orfao { border-style: dashed; background: var(--yellow); color: var(--text); border-color: var(--yellow); }

.aut-add { margin-top: 2px; }
.aut-acao { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }

/* ── Fluxo GATILHO → AÇÕES em linha do tempo, estilo Trigger/Actions do
   Airtable: cards recolhidos por padrão (só a frase-resumo), uma linha
   vertical conectando os dois, clique expande o editor de verdade por
   baixo. Pedido explícito do dono: interface de criação "mais simples". ── */
.aut-flow { margin-top: 4px; }
.aut-flow-label {
 font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
 color: var(--muted); margin: 0 0 6px 2px;
}
.aut-flow-card {
 display: flex; align-items: center; gap: 10px; padding: 12px;
 border: 1px solid var(--border); border-radius: 10px; background: var(--card, var(--bg));
 cursor: pointer;
 transition: border-color var(--dur-fast, .12s) var(--ease-standard, ease), box-shadow var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.aut-flow-card:hover { border-color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
/* .aut-flow-actions-outer reaproveita esta classe mas não é clicável (é só
   o container do card "Ações" — o clique de verdade é no .aut-flow-nested
   de dentro) — sem o :not(), o wrapper inteiro pareceria pressionável. */
.aut-flow-card:not(.aut-flow-actions-outer):active { transform: scale(.99); }
.aut-flow-icon {
 flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
 display: flex; align-items: center; justify-content: center;
 color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
}
.aut-flow-icon-trigger { background: var(--navy-solid); }
.aut-flow-icon-action  { background: var(--green); }
.aut-flow-card-text { flex: 1; min-width: 0; }
.aut-flow-card-title { font-size: 12px; font-weight: 600; color: var(--text); }
.aut-flow-card-sub {
 font-size: 11px; color: var(--muted); margin-top: 2px;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aut-flow-chevron { flex-shrink: 0; color: var(--muted); font-size: 11px; }

/* Linha vertical + selo de check conectando o card de Gatilho ao de Ações,
   igual à referência (TRIGGER em cima, linha, ACTIONS embaixo). */
.aut-flow-connector { display: flex; justify-content: flex-start; padding-left: 14px; margin: 2px 0; }
.aut-flow-connector::before {
 content: ''; display: block; width: 1px; height: 18px; background: var(--border); margin-right: 15px;
}
.aut-flow-dot {
 width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
 display: flex; align-items: center; justify-content: center;
 border: 1px solid var(--border); background: var(--card, var(--bg));
 color: var(--green); font-size: 10px; margin-left: -30px;
}

.aut-flow-detail {
 padding: 12px 2px 4px; border-left: 2px solid var(--border); margin: 0 0 0 15px; padding-left: 16px;
}
.aut-flow-detail.aut-collapsed { display: none; }

/* Card "Ações" por fora contém o recap da condição + o sub-card "Criar
   tarefa" aninhado (mesma estrutura visual do Airtable: condição por cima,
   ação aninhada por baixo, dentro da mesma caixa). */
.aut-flow-actions-outer { flex-direction: column; align-items: stretch; cursor: default; gap: 8px; }
.aut-flow-actions-outer:hover { border-color: var(--border); box-shadow: none; }
.aut-flow-actions-recap { font-size: 11px; color: var(--muted); font-weight: 600; }
.aut-flow-nested {
 display: flex; align-items: center; gap: 10px; padding: 10px;
 border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.06));
 cursor: pointer; transition: border-color var(--dur-fast, .12s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.aut-flow-nested:hover { border-color: var(--navy); }
.aut-flow-nested:active { transform: scale(.99); }

.aut-sujo-bar {
 position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px;
 margin-top: 14px; padding: 10px 12px; border-radius: 8px;
 border: 1px solid var(--navy); background: var(--card, var(--bg));
 font-size: 12px; color: var(--text); z-index: 2;
}
.aut-sujo-bar span { flex: 1; }

.aut-exec { border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
.aut-exec-ok  { border-left-color: var(--green); }
.aut-exec-err { border-left-color: var(--red); }
.aut-exec-hd { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.aut-exec-hd b { color: var(--text); font-weight: 600; }
.aut-exec-msg { font-size: 12px; color: var(--text); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   NOVA AUTOMAÇÃO — formulário em etapas (rascunho em memória)
   Nenhuma paleta nova: os mesmos tokens, os mesmos .sp-field/.sp-label/.btn
   das outras abas. A sensação tem que ser "configurando uma regra simples".
   ═══════════════════════════════════════════════════════════════════════════ */

.autw-aviso {
 font-size: var(--fs-small); color: var(--muted); line-height: 1.5;
 border: 1px dashed var(--border); border-radius: var(--r-md, 8px);
 padding: var(--sp-3); margin-bottom: var(--sp-4);
}
.autw-aviso b { color: var(--text); font-weight: 600; }

/* Trilha dos 4 passos. Clicável pra voltar; avançar continua passando pela
   validação (não dá pra pular pro fim com o formulário vazio). */
.autw-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.autw-step {
 display: flex; align-items: center; gap: 6px; padding: 5px 10px;
 border: 1px solid var(--border); border-radius: var(--r-full, 999px);
 background: transparent; color: var(--muted); cursor: pointer;
 font-size: var(--fs-caption); font-weight: 600;
 transition: border-color var(--dur-base, .15s) var(--ease-standard, ease), color var(--dur-base, .15s) var(--ease-standard, ease), transform var(--dur-fast, .12s) var(--ease-standard, ease);
}
.autw-step:active { transform: scale(.96); }
.autw-step-n {
 width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
 display: flex; align-items: center; justify-content: center;
 background: var(--border); color: var(--text); font-size: 10px;
}
.autw-step-on { border-color: var(--navy); color: var(--text); }
.autw-step-on .autw-step-n { background: var(--navy-solid); color: var(--white, #fff); }
.autw-step-ok .autw-step-n { background: var(--green); color: var(--white, #fff); }

.autw-tit { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin-bottom: var(--sp-3); }
.autw-req { color: var(--red); font-weight: 700; }

/* Campos menos usados da ação. Recolhidos, NUNCA removidos — continuam no DOM
   e _autLerAcao continua lendo todos eles. */
.autw-extra-btn {
 display: block; width: 100%; text-align: left; margin-top: var(--sp-3);
 padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md, 8px);
 background: transparent; color: var(--muted); cursor: pointer;
 font-size: var(--fs-small); font-weight: 600;
}
.autw-extra-btn:hover { border-color: var(--navy); color: var(--text); }
.autw-extra { padding-top: var(--sp-3); }
.autw-extra.autw-collapsed { display: none; }

/* Frase gerada dos dados — mesma de _autFraseLegivel usada no detalhe. */
.autw-frase {
 font-size: var(--fs-body); color: var(--text); line-height: 1.55; font-weight: 600;
 border-left: 3px solid var(--navy); padding: var(--sp-2) var(--sp-3);
 margin-bottom: var(--sp-4);
}

/* Checklist ao vivo. Mesmos critérios que liberam "Continuar" e "Criar". */
.autw-check { margin-bottom: var(--sp-4); }
.autw-item {
 display: flex; align-items: flex-start; gap: 8px; padding: 3px 0;
 font-size: var(--fs-small); color: var(--red); line-height: 1.5;
}
.autw-item span { width: 14px; flex-shrink: 0; text-align: center; }
.autw-item-ok { color: var(--muted); }
.autw-item-ok span { color: var(--green); }

/* Resultado do teste (dry-run). */
.autw-res {
 margin-top: var(--sp-3); padding: var(--sp-3);
 border: 1px solid var(--border); border-radius: var(--r-md, 8px);
 font-size: var(--fs-small); color: var(--muted); line-height: 1.55;
}
.autw-res-ok  { border-left: 3px solid var(--green); }
.autw-res-err { border-left: 3px solid var(--red); color: var(--red); }
.autw-res-tit { font-size: var(--fs-body); font-weight: 700; color: var(--green); margin-bottom: var(--sp-2); }
.autw-res-lin { margin-bottom: 4px; color: var(--text); }
.autw-res-lin b { font-weight: 600; }
.autw-res-nota { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--muted); font-style: italic; }

.autw-prev { margin: var(--sp-2) 0; }
.autw-prev-l {
 display: flex; justify-content: space-between; gap: var(--sp-3);
 padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-small);
}
.autw-prev-l span { color: var(--muted); }
.autw-prev-l b { color: var(--text); font-weight: 600; text-align: right; }

/* Confirmação final — o último passo antes de existir alguma coisa no banco. */
.autw-conf {
 margin-top: var(--sp-4); padding: var(--sp-4);
 border: 1px solid var(--navy); border-radius: var(--r-md, 8px);
 background: var(--card, var(--bg));
}
.autw-conf-tit { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
.autw-conf-frase { font-size: var(--fs-body); color: var(--text); line-height: 1.55; margin-bottom: var(--sp-3); }
.autw-conf-nota { font-size: var(--fs-caption); color: var(--muted); margin-bottom: var(--sp-3); }
.autw-conf-nota b { color: var(--text); }
.autw-conf-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.autw-nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }

/* ── Topo do painel de detalhe: status + frase ─────────────────────────────
   O nome já está no cabeçalho do modal (.autm-title) — repeti-lo aqui de
   novo, grande, era a mesma informação competindo com ela mesma (achado
   real). Este card só precisa dizer "está valendo?" e "o que ela faz",
   em uma leitura só — é o resumo que a pessoa lê antes de entrar em
   detalhe técnico nenhum. */
.aut-summary-card {
 margin-bottom: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-md, 8px);
 background: color-mix(in srgb, var(--green) 7%, var(--surface2, rgba(127,127,127,.05)));
 border: 1px solid color-mix(in srgb, var(--green) 20%, var(--border));
}
.aut-summary-card-off {
 background: var(--surface2, rgba(127,127,127,.05)); border-color: var(--border);
}
.aut-summary-status {
 display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
 text-transform: uppercase; letter-spacing: .05em; color: var(--green); margin-bottom: 8px;
}
.aut-summary-card-off .aut-summary-status { color: var(--muted); }
.aut-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.aut-status-dot-on { background: var(--green); }
.aut-summary-frase { font-size: var(--fs-body, 13px); color: var(--text); line-height: 1.55; font-weight: 500; }

/* ── Histórico de execuções em tabela simples ─────────────────────────────── */
.aut-exec-tb { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.aut-exec-tb th {
 text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
 font-size: var(--fs-caption); font-weight: 600; color: var(--muted);
 text-transform: uppercase; letter-spacing: .04em;
}
.aut-exec-tb td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.aut-exec-tb td i { color: var(--muted); font-style: normal; }
.aut-res-ok  { color: var(--green); font-weight: 600; }
.aut-res-err { color: var(--red); font-weight: 600; }
.aut-res-and { color: var(--muted); font-weight: 600; }