/* Portal 0.7 — estilos da tela automations (carregado depois de portal-ux.css).
   Tela 05 Automações: tela inicial, prontas, histórico e o editor em painel alto com as telas de escolha.
   Só variáveis de portal-ux.css; as cores que o documento dá para esta tela e não têm variável ficam abaixo. */
:root{
 --am-day-on:#16305a;      /* dia marcado (Semanal) */
 --am-branch-line:#24324c; /* linha de 2 px à esquerda das sub-etapas */
}
.am [hidden],.am-sheet [hidden]{display:none!important}

/* ---- tela inicial ---- */
.am .ux-page-head{margin-bottom:var(--space-16)}
.am-hist{gap:var(--space-8);padding-right:0;flex:0 0 auto}
.am-create{margin:0 0 var(--space-24)}
.am-section{margin:0 0 var(--space-24)}
.am-section:empty{display:none}
.am-empty{margin:0;padding:var(--space-16) 0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.am-list{display:flex;flex-direction:column;gap:var(--space-12)}
.am-filter{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);margin:0 0 var(--space-16)}
.am-filter .ux-band{width:100%}
.am-filter-link{padding-left:0}

/* cartão: nome + chave · QUANDO / FAZ · situação (separada por fio) */
.am-card{background:var(--ux-card);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);overflow:hidden}
.am-card-top{display:flex;align-items:center;gap:var(--space-12);min-height:52px;padding:var(--space-4) var(--space-16) 0}
.am-open{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:inherit}
.am-name{display:block;font:500 16px/22px var(--font-display);overflow-wrap:anywhere}
.am-card-top .ux-switch{margin-right:-2px}
.am-lines{display:block;width:100%;padding:0 var(--space-16) var(--space-12);border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:400 14px/20px var(--font-display)}
.am-line{margin:0;display:flex;gap:var(--space-8);align-items:baseline}
.am-line+.am-line{margin-top:var(--space-4)}
.am-tag{flex:0 0 56px;font:500 11px/16px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ux-eyebrow)}
.am-line-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.am-foot{display:block;width:100%;margin:0;padding:var(--space-12) var(--space-16);border:0;border-top:1px solid var(--ux-divider);background:none;text-align:left;font:inherit;color:inherit}
button.am-foot{cursor:pointer;min-height:44px}
.am-status{margin:0;display:flex;align-items:center;gap:var(--space-8);font-size:13px;line-height:20px;color:var(--ux-muted)}
.am-status.is-fail{color:var(--ux-red)}
.am-status.is-warn{color:var(--ux-amber)}
.am-status svg{flex:0 0 auto}
.am-card.is-paused .am-name,.am-card.is-paused .am-lines{color:var(--ux-muted)}

/* automações prontas: linha de 64 px, nome 14 px, descrição 12 px, "Usar" com borda azul de 40 px */
.am-ready-row{display:flex;align-items:center;gap:var(--space-12);min-height:64px;padding:var(--space-12) 0;border-top:1px solid var(--ux-divider)}
.am-ready-row:first-child{border-top:0}
.am-ready-row .ux-row-name{flex:1 1 auto;min-width:0;padding:0}
.am-ready-name{display:block;font-size:14px;line-height:20px;color:var(--ux-text)}
.am-ready-desc{display:block;margin-top:var(--space-4);font-size:12px;line-height:16px;color:var(--ux-muted)}
.am-use{flex:0 0 auto;width:auto;min-height:40px;height:40px;padding:0 var(--space-16);font-size:14px}
.am-more{margin-top:var(--space-8);padding-left:0}

/* ---- histórico ---- */
.am-day-group+.am-day-group{margin-top:var(--space-24)}
.am-hrow{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:var(--space-12) 0;border-top:1px solid var(--ux-divider)}
.am-hrow:first-child{border-top:0}
.am-hname{font-size:14px;line-height:20px;color:var(--ux-text);overflow-wrap:anywhere}
.am-hmeta{margin-top:var(--space-4);font-size:12px;line-height:16px;color:var(--ux-muted)}
.am-fail{color:var(--ux-red)}
.am-hwhy{margin-top:var(--space-4);font-size:12px;line-height:16px;color:var(--ux-label)}

/* ---- editor (painel alto) ---- */
.am-editor{padding-top:var(--space-8)}
.am-active{margin:0 0 var(--space-24)}
.am-step{margin:0 0 var(--space-24);scroll-margin-top:var(--space-16)}
.am-step-head{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-8)}
.am-num{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ux-blue);display:grid;place-items:center;font:500 12px/1 var(--font-mono);color:var(--ux-blue-soft)}
.am-num.is-done{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.am-step-title{font:500 11px/16px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ux-eyebrow)}
.am-step-note{margin-top:var(--space-8)}
.am-err{margin:var(--space-8) 0 0;font-size:13px;line-height:20px;color:var(--ux-amber)}
.am-dashed{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:var(--space-8);border:1.5px dashed var(--ux-blue-line);border-radius:var(--radius-12);background:transparent;color:var(--ux-blue-soft);font:500 15px var(--font-display);cursor:pointer}
.am-addmore{padding-left:0}
.am-when-list,.am-steps{display:flex;flex-direction:column;gap:var(--space-8)}
.am-when-list:not(:empty),.am-steps:not(:empty){margin-bottom:var(--space-8)}
.am-when-card{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-4) var(--space-12) var(--space-16);background:var(--ux-card);border:1px solid var(--ux-card-line);border-radius:var(--radius-12)}
.am-when-text{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:inherit}
.am-when-phrase{display:block;font:500 15px/22px var(--font-display);overflow-wrap:anywhere}
.am-when-tail{flex:0 0 auto;display:flex;align-items:center}
.am-swap{font-size:13px;padding:0 var(--space-12)}
.am-x{flex:0 0 40px;width:40px;height:44px;min-height:44px;padding:0;border:0;background:none;color:var(--ux-muted);display:grid;place-items:center;cursor:pointer}

/* cartão de etapa: ícone 40 px, frase, posição e tipo, três pontos */
.am-scard{position:relative;background:var(--ux-card);border:1px solid var(--ux-card-line);border-radius:var(--radius-12)}
.am-shead{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-4) var(--space-12) var(--space-16)}
.am-stext{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:inherit}
.am-sphrase{display:block;font:500 15px/22px var(--font-display);overflow-wrap:anywhere}
.am-dots{flex:0 0 40px;width:40px;height:44px;min-height:44px;padding:0;border:0;background:none;color:var(--ux-muted);display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-8)}
.am-dots:hover{color:var(--ux-text)}
/* ramos SE SIM / SE NÃO dentro do cartão */
.am-branches{margin:0 var(--space-16);padding:var(--space-12) 0 var(--space-12);border-top:1px solid var(--ux-divider)}
.am-branch{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.am-branch+.am-branch{margin-top:var(--space-16)}
.am-btag{display:inline-block;padding:2px var(--space-8);border-radius:var(--radius-8);font:500 10px/16px var(--font-mono);letter-spacing:1.4px;text-transform:uppercase}
.am-btag.is-yes{background:var(--ux-sky-deep);color:var(--ux-sky)}
.am-btag.is-no{background:var(--ux-hover);color:var(--ux-muted)}
.am-sub{position:relative;align-self:stretch}
.am-sub-line{display:flex;align-items:center;min-height:44px;padding-left:var(--space-12);border-left:2px solid var(--am-branch-line)}
.am-sub-text{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:400 14px/20px var(--font-display);overflow-wrap:anywhere}
.am-sub-line .am-dots{margin-right:calc(var(--space-4) * -3)}
.am-sub>.am-branches{margin:0 0 0 var(--space-12);padding:var(--space-8) 0 var(--space-4) var(--space-12);border-top:0;border-left:2px solid var(--am-branch-line)}
.am-addlink{min-height:44px;padding:0 var(--space-12);display:inline-flex;align-items:center;gap:var(--space-8);border:1.5px dashed var(--ux-blue-line);border-radius:var(--radius-10);background:transparent;color:var(--ux-blue-soft);font:500 13px var(--font-display);cursor:pointer}
/* menu dos três pontos */
.am-menu{position:absolute;z-index:5;min-width:200px;padding:var(--space-4);background:var(--ux-notice);border:1px solid var(--ux-card-line);border-radius:var(--radius-10);box-shadow:0 12px 30px rgba(0,0,0,.4);display:flex;flex-direction:column}
.am-menu-item{min-height:44px;padding:0 var(--space-12);border:0;border-radius:var(--radius-8);background:transparent;color:var(--ux-text);text-align:left;font:400 15px var(--font-display);cursor:pointer}
.am-menu-item:hover,.am-menu-item:focus-visible{background:var(--ux-hover)}
.am-menu-item.is-danger{color:var(--ux-red)}

.am-desc{display:block;margin-top:var(--space-8);min-height:48px;padding:var(--space-12) 14px;resize:none;overflow:hidden;font:400 16px/22px var(--font-display)}
.am-test{margin:0 0 var(--space-24);padding:var(--space-12);border-radius:var(--radius-10);background:var(--ux-notice);font-size:13px;line-height:20px;color:var(--ux-label)}
/* fim do painel, só ao editar: fio, Executar agora, Excluir automação */
.am-end{margin-top:var(--space-24);padding-top:var(--space-24);border-top:1px solid var(--ux-card-line);display:flex;flex-direction:column;align-items:stretch}
.am-run{min-height:48px}
.am-delete{margin-top:var(--space-16);align-self:flex-start;padding-left:0;min-height:44px}

/* ---- telas de escolha dentro do painel ---- */
.am-q{margin:var(--space-8) 0 var(--space-16);font:500 16px/22px var(--font-display);color:var(--ux-text)}
.am-choices{display:flex;flex-direction:column}
.am-choices .ux-choice[aria-checked="true"]{background:var(--ux-blue-deep);border-color:var(--ux-blue)}
.am-choices .ux-choice .ux-help{margin-top:var(--space-4);font-size:13px}
.am-picked{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-4) var(--space-12) var(--space-12);background:var(--ux-blue-deep);border:1px solid var(--ux-blue);border-radius:var(--radius-12)}
.am-picked .ux-ico-box{background:var(--ux-card-deep);color:var(--ux-blue-soft)}
.am-picked-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.am-picked-tag{font:500 10px/16px var(--font-mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--ux-blue-soft)}
.am-picked-name{margin-top:var(--space-4);font:500 15px/22px var(--font-display);color:var(--ux-text)}
.am-fields .am-field{margin-top:var(--space-24)}
.am-fields>.ux-card{margin-top:var(--space-24)}
.am-fields>.am-addmore{margin-top:var(--space-8)}
.am-field>.ux-label{margin-bottom:var(--space-8)}
.am-field .ux-stepper{justify-content:space-between}
.am-field .ux-stepper button{width:48px;height:48px;min-height:48px}
.am-field .ux-grid button{min-height:48px}
.am-field .ux-seg button{min-height:42px}
.am-gap{margin-top:var(--space-16)}
.am-gap24{margin-top:var(--space-24)}
.am-legend{margin:var(--space-8) 0 0;font-size:12px;line-height:16px;color:var(--ux-muted)}
.am-legend.is-warn{color:var(--ux-amber)}
.am-sum{margin-top:var(--space-24);padding:var(--space-16);background:var(--ux-card);border:1px solid var(--ux-card-line);border-radius:var(--radius-12)}
.am-sum .ux-label{margin-bottom:var(--space-8)}
.am-sum-text{margin:0;font:500 15px/22px var(--font-display);color:var(--ux-text);overflow-wrap:anywhere}
.am-sum-legend{margin-top:var(--space-8)}
.am-text-card{padding:var(--space-16)}
.am-card-text{margin:0;font-size:14px;line-height:20px;color:var(--ux-label)}
.am-golink{padding-left:0;margin-top:var(--space-8)}
.am-pick-card .ux-list-row{min-height:56px}
.am-pick-card .ux-list-row .ux-help:empty{display:none}
.am-cat-card .ux-list-row{min-height:56px}
.am-list-card .ux-data-row{min-height:48px}
.am-list-card .ux-data-row.is-current .ux-row-name>span:first-child,.am-cmd-body .ux-data-row.is-current .ux-row-name>span:first-child{color:var(--ux-blue-soft)}
.am-sheet .ux-search{margin:var(--space-8) 0 var(--space-16)}
.am-cmd-body>.ux-label{margin-top:0}
.am-pick-list{margin-top:0}
/* número com a unidade ao lado (Space Mono) */
.am-numfield{display:flex;align-items:center;gap:var(--space-8)}
.am-numfield .ux-input{flex:1 1 auto;min-width:0}
.am-unit{flex:0 0 auto;min-width:32px;font:500 14px var(--font-mono);color:var(--ux-muted)}
/* horário: campo de 48 px com o relógio na coluna da direita */
.am-timefield{position:relative}
.am-timefield .ux-input{padding-right:var(--ux-col);color-scheme:dark}
.am-timefield .ux-input::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:48px;height:100%;margin:0;opacity:0;cursor:pointer}
.am-time-ico{position:absolute;right:var(--space-12);top:14px;color:var(--ux-muted);pointer-events:none;display:grid}
/* dias da semana: 7 colunas iguais de 48 px, nunca em duas linhas */
.am-days{margin-top:var(--space-16);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-4)}
.am-day{min-width:0;height:48px;min-height:48px;padding:0;border:1px solid var(--ux-control-line);border-radius:var(--radius-8);background:var(--ux-control);color:var(--ux-label);font:400 13px var(--font-display);cursor:pointer}
.am-day[aria-pressed="true"]{background:var(--am-day-on);border-color:var(--ux-blue);color:#fff;font-weight:500}
.am-quick{margin-top:var(--space-8);display:flex;gap:var(--space-8);flex-wrap:wrap}
.am-qpill{min-height:44px}
/* "O que conferir": uma linha de 64 px por comparação */
.am-cmp-row{position:relative;display:flex;align-items:center;gap:var(--space-12);min-height:64px;padding:var(--space-8) 0;border-top:1px solid var(--ux-divider)}
.am-cmp-row:first-child{border-top:0}
.am-cmp-text{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ux-text);cursor:pointer;font:400 15px/22px var(--font-display);overflow-wrap:anywhere}
.am-cmp-row .am-dots{margin-right:calc(var(--space-12) * -1)}

@media (hover:hover) and (pointer:fine){
 .am-open:hover .am-name,.am-stext:hover .am-sphrase,.am-when-text:hover .am-when-phrase{text-decoration:underline;text-underline-offset:3px}
 .am-dashed:hover,.am-addlink:hover{background:var(--ux-blue-deep)}
 .am-day:hover:not([aria-pressed="true"]){background:var(--ux-hover)}
 .am-lines:hover,button.am-foot:hover{background:var(--ux-hover)}
}
@media (min-width:1024px){
 .am-use{max-width:120px}
}
.am-field .ux-expand-head .ux-row-value{font-size:14px;line-height:20px;font-weight:400;color:var(--ux-muted)}