/* Complementos do Console ADP sobre o estilo herdado (Skill 24): logon, acessos, detalhe, mobile. */
.pe-exemplo { margin-top: 6px; color: var(--marca-ink); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.pe-autoria { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.filtros[hidden] { display: none; }
.quem { font-family: var(--mono); font-size: 11px; color: var(--ink-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.principal { background: var(--marca); color: #11264c; border-color: var(--marca); font-weight: 600; }
.btn.principal:hover { color: #11264c; filter: brightness(1.06); }
.ajuda { font-size: 12.5px; color: var(--ink-2); margin: 0 0 8px; }
.kpi-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.kpi-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 4px 0 12px; }
.kpi.clicavel, .heroi.clicavel { cursor: pointer; border-radius: var(--raio); transition: background .15s var(--e); padding: 4px 6px; margin: -4px -6px; }
.kpi.clicavel:hover, .heroi.clicavel:hover, .kpi.clicavel:focus-visible, .heroi.clicavel:focus-visible { background: var(--card-2); outline: none; }
.kpi.clicavel::after, .heroi.clicavel::after { content: "abrir detalhe"; display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-ink); margin-top: 3px; opacity: 0; transition: opacity .15s; }
.kpi.clicavel:hover::after, .heroi.clicavel:hover::after { opacity: 1; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--card-3); color: var(--ink); border: 1px solid var(--critico); padding: 10px 14px; border-radius: var(--raio); font-size: 13px; z-index: 60; max-width: min(92vw, 520px); }

/* ---- logon ---- */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caixa-login { width: min(100%, 420px); background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 26px 26px 18px; display: flex; flex-direction: column; gap: 10px; }
.caixa-login .marca-bloco { padding: 0 0 8px; }
.caixa-login h1 { font-family: var(--cond); font-size: 26px; margin: 4px 0 0; letter-spacing: -.01em; }
.caixa-login form { display: flex; flex-direction: column; gap: 6px; }
.caixa-login form[hidden] { display: none; }
.caixa-login label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.caixa-login input { background: var(--card-2); color: var(--ink); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 10px 12px; font: 500 14px var(--sans); }
.caixa-login input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.caixa-login .btn { margin-top: 14px; padding: 10px 14px; font-size: 13px; justify-content: center; }
.caixa-login .erro { color: var(--critico); font-size: 13px; margin-top: 6px; }
.aviso-troca { background: var(--marca-fraco); border-left: 3px solid var(--marca); padding: 8px 10px; font-size: 12.5px; border-radius: var(--raio); }
.pe-login { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }

/* ---- modal central (detalhe e senha) ---- */
.modal { position: fixed; inset: 0; background: rgba(3, 8, 20, .62); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal[hidden] { display: none; }
body.com-modal { overflow: hidden; }
.modal-caixa { width: min(100%, 1440px); max-height: calc(100vh - 36px); background: var(--card); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: var(--sombra); display: flex; flex-direction: column; padding: 16px 20px 18px; outline: none; }
.modal-caixa.estreita { width: min(100%, 460px); }
.modal-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-cab .acoes { margin-left: auto; display: flex; gap: 6px; }
.migalha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.migalha .sep { color: var(--ink-3); }
.migalha .mini[aria-current="page"] { color: var(--marca-ink); border-color: var(--marca); }
.modal-caixa h2 { font-family: var(--cond); font-size: 22px; margin: 8px 0 2px; letter-spacing: -.01em; }
.modal-caixa h3 { font-family: var(--cond); font-size: 15px; margin: 14px 0 6px; color: var(--ink-2); }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-top: 8px; overflow-x: auto; }
.aba-mini { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); font: 500 12.5px var(--sans); padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.aba-mini[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--marca); }
.aba-mini:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.modal-corpo { overflow: auto; padding-top: 10px; min-height: 120px; }
.rolagem-detalhe { overflow-x: auto; }
.tab-detalhe { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tab-detalhe th { position: sticky; top: 0; background: var(--card); text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 7px 8px; border-bottom: 1px solid var(--linha-forte); }
.tab-detalhe th.n, .tab-detalhe td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-detalhe td { padding: 7px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tab-detalhe td.f { font-weight: 500; white-space: nowrap; }
.tab-detalhe td.ok { color: var(--bom); } .tab-detalhe td.ruim { color: var(--critico); }
.tab-detalhe tbody tr[role="button"] { cursor: pointer; }
.tab-detalhe tbody tr[role="button"]:hover, .tab-detalhe tbody tr[role="button"]:focus-visible { background: var(--card-2); outline: none; }
.tab-detalhe select { font-size: 12px; padding: 3px 6px; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.linha-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.linha-acoes .ajuda { margin: 0; flex: 1 1 auto; }
.mais { display: flex; gap: 8px; margin-top: 10px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.fluxo-leitura { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding: 10px; background: var(--plano); border: 1px solid var(--linha); border-radius: var(--raio); }

/* ---- tela Acessos ---- */
.form-acesso { display: grid; grid-template-columns: 1fr; gap: 10px; }
.form-acesso .campo { display: flex; flex-direction: column; gap: 4px; }
.form-acesso label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.form-acesso input, .form-acesso select { background: var(--card-2); color: var(--ink); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 8px 10px; font: 500 13px var(--sans); }
.form-acesso input:focus-visible, .form-acesso select:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.campo-botao { justify-content: flex-end; }
.resultado-acesso { margin-top: 10px; font-size: 13px; display: grid; gap: 4px; }
.resultado-acesso.ok { color: var(--bom); }
.resultado-acesso.ruim { color: var(--critico); }
.resultado-acesso code { font-family: var(--mono); font-size: 14px; background: var(--card-3); color: var(--ink); padding: 2px 8px; border-radius: 3px; user-select: all; }

/* ---- tela Conexão n8n ---- */
.n8n-lista { display: grid; gap: 8px; font-size: 13px; }
.n8n-lista .linha { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.n8n-lista .linha:last-child { border-bottom: 0; }
.n8n-lista .k { color: var(--ink-3); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.n8n-lista code, .rota code { font-family: var(--mono); font-size: 12px; background: var(--card-2); padding: 1px 6px; border-radius: 3px; overflow-wrap: anywhere; }
.rotas { display: grid; gap: 6px; font-size: 13px; }
.rota { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline; }
.rota .verbo { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--marca-ink); }
.rota .desc { color: var(--ink-2); font-size: 12px; }
.chat-sim { display: flex; flex-direction: column; gap: 8px; min-height: 360px; }
.chat-sim .fluxo { flex: 1 1 auto; overflow-y: auto; max-height: 420px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--plano); border: 1px solid var(--linha); border-radius: var(--raio); }
.balao { max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao.de-bot { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 3px; }
.balao.de-mim { align-self: flex-end; background: var(--marca); color: #11264c; border-bottom-right-radius: 3px; }
.balao .hora { display: block; font-family: var(--mono); font-size: 10px; opacity: .7; margin-top: 3px; }
.chat-sim .entrada { display: flex; gap: 6px; }
.chat-sim .entrada input { flex: 1 1 auto; min-width: 0; background: var(--card-2); color: var(--ink); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 8px 10px; font: 500 13px var(--sans); }
.chat-sim .entrada input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.evts { display: grid; gap: 4px; font-family: var(--mono); font-size: 11.5px; }
.evts .ev { display: grid; grid-template-columns: 120px 130px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--linha); }
.evts .ev .t { color: var(--ink-3); }
.evts .ev .n { color: var(--marca-ink); }
.passos { display: grid; gap: 8px; font-size: 13px; counter-reset: p; }
.passos div { position: relative; padding-left: 28px; }
.passos div::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--marca); color: #11264c; font: 600 11px var(--mono); display: grid; place-items: center; }
.estado-ok { color: var(--bom); } .estado-ruim { color: var(--critico); } .estado-neutro { color: var(--ink-3); }

/* ---- mobile ---- */
@media (max-width: 900px) {
  .topo { flex-wrap: wrap; gap: 8px; }
  .topo-meta { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .quem { max-width: 100%; }
  .filtros { position: static; }
  .filtro { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-caixa { max-height: 100vh; height: 100vh; border-radius: 0; border: 0; padding: 12px 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .n8n-lista .linha, .rota { grid-template-columns: 1fr; gap: 2px; }
  .evts .ev { grid-template-columns: 1fr; gap: 0; }
  .kpi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .kpi .val { font-size: 22px; }
  .caixa-login { padding: 20px 16px 14px; }
}