:root {
  color-scheme: light;
  --fundo: #f4f3f0; --sup: #fcfcfb; --sup2: #f1f0ec; --linha: #e2e0d9; --linha2: #cfcdc4;
  --tx: #0b0b0b; --tx2: #52514e; --tx3: #6e6d68; --acento: #c8410f; --acento-sup: #fdeee7;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --bom: #0ca30c; --aviso: #fab219; --serio: #ec835a; --critico: #d03b3b;
  --bom-sup: #e6f5e6; --aviso-sup: #fdf1d3; --serio-sup: #fce7de; --critico-sup: #fae3e3; --neutro-sup: #ecebe6;
  --sombra: 0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #121211; --sup: #1a1a19; --sup2: #24241f; --linha: #30302c; --linha2: #45453f;
    --tx: #f0efec; --tx2: #c3c2b7; --tx3: #a09f96; --acento: #f08a5d; --acento-sup: #3a2318;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --bom-sup: #16301a; --aviso-sup: #3a2f12; --serio-sup: #3d2518; --critico-sup: #3f1d1d; --neutro-sup: #2b2b27;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--tx); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; } h2 { font-size: 15px; margin: 0 0 10px; } h3 { font-size: 13px; margin: 0 0 6px; }
p { margin: 0 0 8px; } a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.mudo { color: var(--tx3); } .pq { font-size: 12px; } .fim { text-align: right; } .nw { white-space: nowrap; }

.casca { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--sup); border-right: 1px solid var(--linha); padding: 14px 10px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.marca { font-weight: 700; font-size: 15px; padding: 4px 10px 14px; } .marca span { color: var(--acento); }
.grupo-nav { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx3); padding: 12px 10px 4px; }
.lateral button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; color: var(--tx2); }
.lateral button:hover { background: var(--sup2); }
.lateral button[aria-current="page"] { background: var(--acento-sup); color: var(--tx); font-weight: 600; }
.rodape-nav { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 10px; font-size: 12px; color: var(--tx3); }
.conteudo { padding: 0 24px 40px; min-width: 0; }

.topo { position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 12px 0 8px; }
.faixa { display: flex; gap: 8px; align-items: flex-start; border-radius: 8px; padding: 7px 12px; margin-bottom: 6px; font-size: 13px; border: 1px solid transparent; }
.faixa.demo { background: var(--aviso-sup); border-color: var(--aviso); font-weight: 600; }
.faixa.alerta { background: var(--serio-sup); border-color: var(--serio); }
.faixa.erro { background: var(--critico-sup); border-color: var(--critico); }
.linha-fontes { font-size: 12px; color: var(--tx3); }
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 10px 0 12px; flex-wrap: wrap; }
.cab .sub { color: var(--tx2); margin-top: 2px; max-width: 80ch; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: 14px; box-shadow: var(--sombra); margin-bottom: 14px; min-width: 0; }
.grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .grade2 > .cartao { margin-bottom: 0; }
.grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .grade3 > .cartao { margin-bottom: 0; }
.espaco { margin-bottom: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; }
.kpi .v { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.kpi .r { font-size: 12px; color: var(--tx2); } .kpi .n { font-size: 12px; color: var(--tx3); }

.btn { border: 1px solid var(--linha2); background: var(--sup); border-radius: 7px; padding: 6px 12px; }
.btn:hover { background: var(--sup2); }
.btn.pri { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .btn.pri { color: #1a1a19; } }
.btn.mini { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea {
  background: var(--sup); border: 1px solid var(--linha2); border-radius: 7px; padding: 6px 9px; max-width: 100%; }
textarea { width: 100%; min-height: 80px; }
.campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tx2); min-width: 0; }
.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.filtros select, .filtros input { width: 100%; }
.faixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; margin-top: 12px; }
.faixa-num { display: grid; grid-template-columns: 1fr 66px 8px 66px; gap: 4px; align-items: center; font-size: 12px; color: var(--tx2); }
.faixa-num input { padding: 3px 5px; width: 100%; }
.togs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tog { border: 1px solid var(--linha2); background: var(--sup); border-radius: 99px; padding: 3px 10px; font-size: 12px; }
.tog[aria-pressed=true] { background: var(--acento-sup); border-color: var(--acento); font-weight: 600; }
details.dob > summary { cursor: pointer; font-weight: 600; font-size: 13px; }

.tbl-box { overflow: auto; border: 1px solid var(--linha); border-radius: 8px; max-height: 68vh; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th { position: sticky; top: 0; background: var(--sup2); text-align: left; font-weight: 600; font-size: 12px; color: var(--tx2); padding: 6px 9px; border-bottom: 1px solid var(--linha2); white-space: nowrap; z-index: 1; }
th[data-ord] { cursor: pointer; } th .seta { color: var(--tx3); margin-left: 3px; }
td { padding: 6px 9px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: var(--sup2); }
.num { text-align: right; white-space: nowrap; }
.pag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px 0; font-size: 12px; color: var(--tx2); flex-wrap: wrap; }
.tip { border-bottom: 1px dotted var(--tx3); cursor: help; }

.selo { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--neutro-sup); color: var(--tx); }
.selo.bom { background: var(--bom-sup); } .selo.aviso { background: var(--aviso-sup); } .selo.serio { background: var(--serio-sup); } .selo.critico { background: var(--critico-sup); }
.selo i { font-style: normal; font-size: 11px; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--tx2); margin-top: 10px; align-items: center; }
.legenda .it { display: inline-flex; gap: 5px; align-items: center; }
.quad { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.heat td { text-align: center; padding: 4px; } .heat td:first-child { text-align: left; white-space: nowrap; font-weight: 550; padding-left: 9px; }
.cel { display: block; border-radius: 6px; padding: 5px 6px; font-size: 12px; font-weight: 550; border: 0; width: 100%; background: var(--neutro-sup); }
.cel.bom { background: var(--bom-sup); } .cel.aviso { background: var(--aviso-sup); } .cel.serio { background: var(--serio-sup); } .cel.critico { background: var(--critico-sup); }

.barra-linha { display: grid; grid-template-columns: 170px minmax(0, 1fr) 58px; gap: 8px; align-items: center; padding: 2px 0; font-size: 12px; }
.barra-linha .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { display: flex; gap: 2px; height: 14px; align-items: stretch; }
.barra > span { display: block; min-width: 1px; }
.barra > span:last-child { border-radius: 0 4px 4px 0; }
.colunas { display: flex; align-items: flex-end; gap: 8px; height: 190px; border-bottom: 1px solid var(--linha2); padding-top: 8px; }
.coluna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.coluna > span:first-child { border-radius: 4px 4px 0 0; }
.eixo-col { display: flex; gap: 8px; font-size: 11px; color: var(--tx3); padding-top: 4px; } .eixo-col > span { flex: 1; text-align: center; min-width: 0; overflow: hidden; }
.grafico svg { display: block; width: 100%; height: auto; } .grafico text { font-size: 11px; fill: var(--tx3); }

.linha-tempo { border-left: 2px solid var(--linha2); margin-left: 6px; padding-left: 14px; }
.ev { position: relative; padding: 4px 0 10px; }
.ev::before { content: ""; position: absolute; left: -20px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--tx3); border: 2px solid var(--sup); }
.ev.OFFBOARDING::before { background: var(--s2); } .ev.BAN_MANUAL::before, .ev.BLACKLIST::before { background: var(--critico); }
.ev.REAGREGACAO::before { background: var(--s3); } .ev.PAUSA::before { background: var(--s4); } .ev.INGRESSO::before { background: var(--s1); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.regras { display: inline-flex; gap: 3px; } .r-ok, .r-no { font-size: 11px; padding: 0 4px; border-radius: 4px; }
.r-ok { background: var(--bom-sup); } .r-no { background: var(--critico-sup); font-weight: 700; }

dialog { border: 1px solid var(--linha2); border-radius: 12px; background: var(--sup); color: var(--tx); padding: 18px; width: min(520px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.gaveta { position: fixed; inset: 0 0 0 auto; width: min(960px, 96vw); background: var(--fundo); z-index: 20; overflow: auto; padding: 18px 22px; border-left: 1px solid var(--linha2); box-shadow: -8px 0 30px rgba(0,0,0,.18); }
.vel { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.3); }
#dica { position: fixed; z-index: 50; background: #1a1a19; color: #f0efec; padding: 7px 10px; border-radius: 7px; font-size: 12px; max-width: 320px; pointer-events: none; line-height: 1.4; }
#aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; background: #1a1a19; color: #f0efec; padding: 9px 16px; border-radius: 8px; font-size: 13px; }
.rodape { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--tx3); }
.vazio { padding: 22px; text-align: center; color: var(--tx3); }
.nota { background: var(--sup2); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--tx2); margin-bottom: 10px; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--sup); }
.login-marca { background: #17140f; color: #f0efec; padding: 44px 56px; display: flex; flex-direction: column; gap: 40px; overflow: hidden; }
.login-logo { font-size: 18px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.login-logo span { background: #eb6834; color: #17140f; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.login-tese { margin-top: auto; max-width: 30em; }
.login-tese h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; font-weight: 650; margin: 0 0 12px; }
.login-tese p { color: #c3c2b7; font-size: 16px; line-height: 1.5; margin: 0; }
.login-mapa { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 460px; margin-bottom: auto; }
.login-mapa span { aspect-ratio: 1.7; border-radius: 4px; background: #2b2820; }
.login-mapa .lm-a { background: #5a2f1c; } .login-mapa .lm-c { background: #eb6834; }
.login-area { display: grid; place-items: center; padding: 32px 24px; }
.login-form { width: min(360px, 100%); display: grid; gap: 16px; }
.login-form h1 { font-size: 26px; font-weight: 650; }
.login-sub { color: var(--tx2); margin: -10px 0 4px; }
.login-campo { display: grid; gap: 5px; }
.login-campo label { font-size: 13px; font-weight: 550; color: var(--tx2); }
.login-form input { width: 100%; height: 42px; padding: 0 12px; border-radius: 8px; font-size: 15px; }
.login-senha { position: relative; }
.login-senha input { padding-right: 76px; }
.login-ver { position: absolute; right: 5px; top: 5px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--tx2); font-size: 13px; }
.login-ver:hover { background: var(--sup2); }
.login-entrar { height: 44px; font-size: 15px; border-radius: 8px; }
.login-erro { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--critico-sup); font-size: 13px; }
.login-nota { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--tx3); }
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-marca { padding: 18px 24px; } .login-tese, .login-mapa { display: none; }
  .login-area { place-items: start center; padding-top: 40px; }
}
pre.sql { background: var(--sup2); border-radius: 8px; padding: 10px; overflow: auto; font-size: 12px; max-height: 240px; }
.gloss dt { font-weight: 650; margin-top: 10px; } .gloss dd { margin: 2px 0 0; color: var(--tx2); }
@media (max-width: 1100px) { .grade2, .grade3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .casca { grid-template-columns: minmax(0, 1fr); } .lateral { position: static; height: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .lateral button { width: auto; white-space: nowrap; } .marca, .grupo-nav, .rodape-nav { display: none; } .conteudo { padding: 0 12px 30px; }
  .barra-linha { grid-template-columns: 110px minmax(0, 1fr) 50px; }
}
@media (prefers-reduced-motion: no-preference) { .gaveta { animation: entra .14s ease-out; } @keyframes entra { from { transform: translateX(24px); opacity: .7; } } }

/* Identidade da navegação, igual à do login */
.lateral { background: #17140f; border-right: 0; color: #c3c2b7; }
.marca { color: #f0efec; display: flex; align-items: center; gap: 8px; }
.marca span { background: #eb6834; color: #17140f; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.grupo-nav { color: #8d8b82; }
.lateral button { color: #c3c2b7; }
.lateral button:hover { background: #26221a; }
.lateral button[aria-current="page"] { background: #2f2a20; color: #fff; box-shadow: inset 2px 0 0 #eb6834; }
.rodape-nav { border-top-color: #302c23; color: #8d8b82; }
.faixa.demo { font-size: 12px; font-weight: 550; padding: 4px 10px; border-radius: 6px; }
h1 { font-size: 20px; }

/* Cockpit */
.faixa-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 12px; box-shadow: var(--sombra); }
.faixa-kpi .kpi { border: 0; border-radius: 0; background: none; padding: 10px 16px; }
.faixa-kpi .kpi + .kpi { border-left: 1px solid var(--linha); }
.faixa-kpi .kpi .v { font-size: 22px; }
.cartao.painel { padding: 0; overflow: hidden; }
.painel .tbl-box { border: 0; border-top: 1px solid var(--linha); border-radius: 0; max-height: calc(100vh - 285px); min-height: 320px; }
.painel .pag, .painel .legenda { padding: 8px 14px; margin: 0; }
.painel .legenda { border-top: 1px solid var(--linha); }
.barra-filtros { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; align-items: center; }
.barra-filtros input, .barra-filtros select { height: 32px; padding: 0 9px; font-size: 13px; }
.segmento { display: flex; gap: 2px; background: var(--sup2); border-radius: 8px; padding: 2px; flex-wrap: wrap; }
.segmento button { border: 0; background: none; border-radius: 6px; padding: 4px 10px; font-size: 13px; color: var(--tx2); }
.segmento button span { color: var(--tx3); margin-left: 5px; font-size: 12px; }
.segmento button[aria-pressed="true"] { background: var(--sup); color: var(--tx); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
table.densa td { vertical-align: middle; padding: 6px 10px; }
table.densa tr.clic:hover td { background: var(--sup2); }
th.centro, td.centro { text-align: center; padding-left: 3px !important; padding-right: 3px !important; }
.queue-nome, .tempo, .acao { display: flex; flex-direction: column; line-height: 1.25; }
.queue-nome { white-space: nowrap; } .queue-nome strong, .tempo strong { font-weight: 600; }
.acao { min-width: 200px; max-width: 250px; } .acao strong { font-weight: 550; } .acao small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
small { font-size: 12px; color: var(--tx3); }
.tempo { align-items: flex-end; white-space: nowrap; }
.sinal { font-style: normal; font-size: 10px; } .sinal.bom { color: var(--bom); } .sinal.aviso { color: #b57f00; } .sinal.critico { color: var(--critico); }
.saude { display: inline-flex; align-items: center; gap: 8px; } .saude strong { min-width: 20px; font-weight: 600; }
.saude-trilho { width: 54px; height: 6px; background: var(--neutro-sup); border-radius: 3px; overflow: hidden; display: block; }
.saude-barra { display: block; height: 100%; border-radius: 3px; background: var(--tx3); }
.saude-barra.bom { background: var(--bom); } .saude-barra.aviso { background: var(--aviso); } .saude-barra.critico { background: var(--critico); }
.fr { display: inline-grid; place-items: center; width: 28px; height: 22px; border-radius: 5px; font-size: 10px; background: var(--neutro-sup); }
.fr.bom { background: var(--bom-sup); } .fr.aviso { background: var(--aviso-sup); } .fr.serio { background: var(--serio-sup); } .fr.critico { background: var(--critico-sup); }
@media (max-width: 1100px) { .faixa-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faixa-kpi .kpi + .kpi { border-left: 0; } }
.marca { white-space: nowrap; }
@media (max-width: 760px) { .marca { display: flex; padding: 6px 10px; } }
.marca img { height: 26px; width: auto; display: block; } .marca strong { font-weight: 700; }
.rodape-nav .quem { padding: 0 10px 6px; color: #c3c2b7; }
.login-logo { gap: 10px; font-size: 20px; } .login-logo img { height: 36px; width: auto; display: block; } .login-logo strong { font-weight: 700; }
@media (max-width: 860px) { .login-logo img { height: 28px; } .login-logo { font-size: 17px; } }