:root{--navy:#0b1f3a;--navy2:#13294b;--gold:#c9a227;--txt:#eef2f7}
body{margin:0;font-family:system-ui,sans-serif;background:var(--navy);color:var(--txt)}
header{display:flex;gap:1rem;align-items:center;padding:.8rem 1.2rem;border-bottom:2px solid var(--gold)}
h1{font-size:1.2rem;color:var(--gold);margin:0 auto 0 0}
select,button{background:var(--navy2);color:var(--txt);border:1px solid var(--gold);border-radius:6px;padding:.3rem .6rem}
main{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:.8rem;padding:1rem;overflow-x:auto}
.col h2{font-size:.9rem;color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:.3rem}
.card{background:var(--navy2);border-left:4px solid var(--gold);border-radius:6px;padding:.6rem;margin:.6rem 0;font-size:.85rem}
.card b{color:var(--gold)} .meta{opacity:.75;font-size:.75rem} a{color:var(--gold)} p{margin:.3rem 0;white-space:pre-wrap}
main.painel{display:block}
table{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:1.5rem}
th,td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--navy2);vertical-align:top}
th{color:var(--gold);font-weight:600} tbody tr:nth-child(odd){background:var(--navy2)}
.pill{display:inline-block;padding:.05rem .4rem;border-radius:4px;border:1px solid var(--gold);font-size:.75rem}
.pr-urgente,.st-bloqueado{color:#ff7b7b;font-weight:600}.pr-alta{color:#ffb86b}.st-aguardando_aprovacao{color:var(--gold)}

/* painel: detalhes só-leitura */
.clicavel{cursor:pointer}.clicavel:hover{background:#eef3ff}
.aviso{padding:.8em 1em;background:#fff8d6;border:1px solid #e6cf6b;border-radius:6px;font-weight:600}
#detalhe{position:fixed;top:0;right:0;width:min(560px,100%);height:100%;overflow:auto;background:#fff;border-left:2px solid #ccd;padding:1em 1.2em;box-shadow:-4px 0 12px #0002;z-index:10}
#detalhe #fechar{float:right;font-size:1.4em}
table.kv th{text-align:left;vertical-align:top;white-space:nowrap;padding-right:1em;color:#445}
table.kv pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:.85em}

/* painel: acompanhamento em tempo quase real */
.pulso{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#3b4f70;margin-right:.3rem}
.pulso.ok{animation:pulso 1s ease-out}.pulso.erro{background:#ff7b7b}
@keyframes pulso{0%{background:#59d98e;box-shadow:0 0 0 0 #59d98e99}100%{background:#3b4f70;box-shadow:0 0 0 8px #59d98e00}}
tr.mudou{animation:mudou 8s ease-out}
@keyframes mudou{0%{background:#c9a22766}100%{background:transparent}}
td.rel{white-space:nowrap}td.onde{max-width:26rem;opacity:.9}
/* legibilidade: hover e painel de detalhes (texto claro sobre fundo claro) */
.clicavel:hover{background:#1c3a66}
#detalhe{color:#1a2233}#detalhe a{color:#0b4a9a}
.aviso{color:#3a2f00}

/* ordenação por clique no título */
th.ordenavel{cursor:pointer;user-select:none;white-space:nowrap}th.ordenavel:hover{text-decoration:underline}