/* Kawai Admin. Cores do logo da Kawai Solutions e a Funnel Display da identidade.
   A ideia: cada conta é um aparelho numa mesa. A borda esquerda diz o estado de longe; o resto fica quieto. */
@font-face { font-family: 'Funnel Display'; src: url('/fontes/funnel-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('/fontes/funnel-display-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('/fontes/funnel-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --fundo: #06121F; --fundo2: #0C2033; --linha: #182A3D; --linha2: #2A4258; --fg: #EDF2F3; --muted: #8BA0B1;
  --marca: #16B2CC; --marca-esc: #0A6E86; --ambar: #E8B04A; --vermelho: #F0705A; --certo: #4CC38A;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--fg); font: 400 16px/1.5 'Funnel Display', system-ui, sans-serif; }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.selo { background: #F4F6F6; border-radius: 22%; padding: 4px; display: block; }

button { background: var(--marca); color: #04111B; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.discreto { background: transparent; color: var(--fg); border: 1px solid var(--linha2); font-weight: 400; padding: 7px 12px; }
button.discreto:hover { border-color: var(--marca); }
input, select { background: var(--fundo); border: 1px solid var(--linha2); border-radius: 8px; padding: 10px 12px; width: 100%; }

/* login */
.tela-login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login { width: min(100%, 340px); }
.login h1 { font-size: 34px; font-weight: 700; letter-spacing: -.01em; margin: 16px 0 24px; }
.login label { display: block; margin: 16px 0 6px; color: var(--muted); }
.login button { width: 100%; margin-top: 24px; padding: 12px; }
.erro-form { color: var(--vermelho); margin-top: 14px; }
.erro-form ul { margin-top: 6px; font-size: 14px; }

/* topo */
.topo { display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--fundo); z-index: 2; }
.topo h1 { font-size: 20px; font-weight: 700; }
.pulso { color: var(--muted); margin-left: auto; font-size: 14px; }
.painel { padding: 24px clamp(16px, 4vw, 40px) 64px; max-width: 1320px; margin: 0 auto; display: grid; gap: 32px; }
[aria-busy="true"]:empty::before { content: 'Carregando'; color: var(--muted); }

/* geral */
.geral { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 16px 40px; align-items: center; }
.geral-corte { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.geral-corte h2 { font-size: 18px; font-weight: 600; }
.geral-corte p { color: var(--muted); font-size: 14px; max-width: 34ch; }
.sinais { display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: flex-end; }
.sinais dt { color: var(--muted); font-size: 14px; }
.sinais dd { font-size: 18px; font-weight: 600; }
.geral > .nota { grid-column: 1 / -1; }

/* contas: a borda é o estado */
.contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.conta { background: var(--fundo2); border-left: 6px solid var(--linha2); border-radius: 4px 14px 14px 4px; padding: 20px; display: grid; gap: 14px; }
.conta.ligada { border-left-color: var(--marca); }
.conta.teste { border-left-color: var(--ambar); }
.conta.erro { border-left-color: var(--vermelho); }
.conta.parada { border-left-color: var(--vermelho); opacity: .85; }
.conta-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.conta-cab > div { min-width: 0; }
.conta-cab h2 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.estado { color: var(--muted); font-size: 15px; }
.conta.ligada .estado { color: var(--marca); }
.conta.teste .estado { color: var(--ambar); }
.conta.erro .estado, .conta.parada .estado { color: var(--vermelho); }
.conta-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* a chave grande é o gesto principal da tela */
.chave { flex: none; width: 58px; height: 32px; padding: 3px; border-radius: 16px; background: var(--linha2); position: relative; }
.chave span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); transition: transform .15s; }
.chave.on { background: var(--marca); }
.chave.on span { transform: translateX(26px); background: #04111B; }
@media (prefers-reduced-motion: reduce) { .chave span { transition: none; } }

.nota { font-size: 14px; padding: 9px 12px; border-radius: 8px; background: var(--fundo); border-left: 3px solid var(--linha2); overflow-wrap: anywhere; }
.nota ul { margin-top: 6px; }
.nota.atencao { border-left-color: var(--ambar); }
.nota.recusa { border-left-color: var(--vermelho); }
.nota.certo { border-left-color: var(--certo); }
.vazio { color: var(--muted); }
.vazio.pequeno { font-size: 14px; }
.suave { color: var(--muted); }

/* trava */
.trava { border-top: 1px solid var(--linha); padding-top: 12px; }
.trava summary { cursor: pointer; font-weight: 600; }
.trava-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; }
.trava-linha small { display: block; color: var(--muted); font-size: 13px; }
.trava-linha select, .campo-curto { width: 170px; flex: none; padding: 6px 10px; }
.trava .chave { transform: scale(.82); transform-origin: right center; }

/* gatilho */
.gatilho { border-top: 1px solid var(--linha); padding-top: 12px; display: grid; gap: 6px; }
.gatilho-cab { display: flex; justify-content: space-between; align-items: center; }
.gatilho-cab h4 { font-size: 18px; font-weight: 700; color: var(--marca); }
.gatilho-cab .chave { transform: scale(.82); transform-origin: right center; }
.gatilho-regra { color: var(--muted); font-size: 14px; }
.gatilho-link { font-size: 14px; overflow-wrap: anywhere; }
.funil table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.funil caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 4px; }
.funil th { text-align: left; font-weight: 400; white-space: nowrap; padding: 3px 12px 3px 0; }
.funil .barra { width: 100%; padding: 3px 10px 3px 0; }
.funil .barra span { display: block; height: 8px; min-width: 2px; background: var(--marca); border-radius: 0 4px 4px 0; }
.funil .num { text-align: right; white-space: nowrap; padding-left: 8px; font-variant-numeric: tabular-nums; }
.extras { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* histórico */
.historico { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: start; }
.historico h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.erros li, .avisos li { padding: 10px 0; border-top: 1px solid var(--linha); font-size: 14px; overflow-wrap: anywhere; }
.erro-cab code { margin-left: 8px; color: var(--vermelho); font: inherit; font-weight: 600; }
.avisos li.urgente strong { color: var(--ambar); }

dialog { background: var(--fundo2); color: var(--fg); border: 1px solid var(--linha2); border-radius: 14px; padding: 22px; width: min(92vw, 460px); }
dialog::backdrop { background: rgba(4, 17, 27, .7); }
dialog h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
dialog form > label:not(.opcao) { display: block; margin: 14px 0 6px; color: var(--muted); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { color: var(--muted); padding: 0; margin-bottom: 6px; }
.opcao { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.opcao input { width: auto; margin-top: 5px; }
.aviso-opcao { margin-top: 16px; color: var(--ambar); }
.acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 720px) {
  .geral { grid-template-columns: 1fr; }
  .sinais { justify-content: flex-start; gap: 8px 24px; }
  .trava-linha select, .campo-curto { width: 136px; }
}

.logo-login { display: block; width: 240px; max-width: 100%; height: auto; }
.logo-topo { display: block; height: 36px; width: auto; }
.logo-login, .logo-topo { background: #fff; border-radius: 10px; padding: 8px 12px; box-sizing: content-box; }
.logo-login { width: 216px; }
.logo-topo { height: 28px; }
.dois-qr { background: #fff; border-radius: 10px; padding: 12px; width: 224px; margin: 12px auto; }
.dois-qr svg { display: block; width: 200px; height: 200px; }
.dois-chave { font-family: ui-monospace, monospace; word-break: break-all; margin: 8px 0; }