/* ================================================================
   Padrão visual da Plataforma MDR — usado por todas as telas.
   Paleta: azul institucional + ciano + cinza da identidade MDR.
   ================================================================ */
:root{
  --mdr-azul:#1567B0; --mdr-azul-esc:#0E4C86; --mdr-ciano:#41B6E6;
  --mdr-azul-sf:#E4F0F9; --mdr-ciano-sf:#DFF3FC;
  --mdr-cinza:#6E7C8A; --mdr-cinza-cl:#A9B4BF; --mdr-cinza-sf:#EEF1F4;
  --risco:#C2453D; --risco-sf:#FAE5E4;
  --amber:#E8A33D; --amber-sf:#FBEDD6; --green:#2F9668; --green-sf:#DFF3E9;
  --ink:#0B2338; --canvas:#F4F6F9; --card:#FFF; --line:#E1E7ED; --line2:#EDF1F5;
  --tx:#0F1B28; --tx2:#51606E; --tx3:#8494A3; --r:10px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,sans-serif;background:var(--canvas);color:var(--tx);font-size:14px;margin:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1260px;margin:0 auto;padding:24px 28px 70px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:4px}
/* LOGOTIPO. `.mk` era um quadrado com as letras "mdr" desenhadas em CSS —
   uma marca inventada, que saía em tela de login e em apresentação para o
   cliente. Agora é a imagem oficial, servida de /assets. O quadrado
   colorido fica só como fallback enquanto o arquivo não existe, para a tela
   não abrir com um espaço vazio sem explicação. */
.mk{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--mdr-ciano),var(--mdr-azul));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff}
/* As regras de `.logo` vivem em web/melhorias.css, que é injetado em TODA
   tela portada — inclusive nas que não usam esta folha. */
.top h1{font-size:19px;margin:0;letter-spacing:-.3px} .top .sb{font-size:12.5px;color:var(--tx3)}
.pill{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--green-sf);color:#1F7A4E;border:1px solid #BEE6D2;padding:6px 12px;border-radius:20px;font-size:11.5px;font-weight:700}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.pill.sim{background:var(--amber-sf);color:#8A5A10;border-color:#F0D6A6} .pill.sim i{background:var(--amber)}
.scope{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:16px}
.scope button{padding:8px 18px;font-size:12.5px;font-weight:600;border:0;background:#fff;color:var(--tx2);cursor:pointer;border-right:1px solid var(--line)}
.scope button:last-child{border-right:0} .scope button.on{background:var(--mdr-azul);color:#fff}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:14px 0 18px}
.fhead{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;user-select:none}
.fhead:hover{background:#FAFCFD} .fhead .ttl{font-size:12.5px;font-weight:700}
.fhead .cnt{font-size:11px;color:var(--tx3);margin-left:auto}
.fhead .car{transition:transform .18s;font-size:10px;color:var(--tx3)} .filters.open .car{transform:rotate(180deg)}
.fbody{display:none;padding:6px 16px 16px;border-top:1px solid var(--line2)} .filters.open .fbody{display:block}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.fl{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx3);font-weight:700;margin:8px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;border-radius:14px;font-size:11.5px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--tx2);cursor:pointer}
.chip:hover{border-color:var(--mdr-azul);color:var(--mdr-azul)}
.chip.on{background:var(--mdr-azul);color:#fff;border-color:var(--mdr-azul)}
select.ms{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:12px;color:var(--tx2);background:#fff}
select.ms:focus{outline:2px solid var(--mdr-ciano);outline-offset:-1px}
.hlp{font-size:10px;color:var(--tx3);margin-top:4px}
.fact{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.btn{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;border:1px solid var(--line);background:#fff;cursor:pointer}
.btn.p{background:var(--mdr-azul);color:#fff;border-color:var(--mdr-azul)}
.q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--line2);color:var(--tx3);font-size:10px;font-weight:700;cursor:help;margin-left:5px;vertical-align:middle}
.q:hover{background:var(--mdr-azul);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.k{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;border-left:3px solid var(--line)}
.k.crit{border-left-color:var(--risco)} .k.warn{border-left-color:var(--amber)}
.k.info{border-left-color:var(--mdr-azul)} .k.ok{border-left-color:var(--green)} .k.neu{border-left-color:var(--mdr-cinza)}
.k .l{font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.k .v{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;margin-top:7px}
.k .d{font-size:11px;color:var(--tx3);margin-top:5px}
.p{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.ph{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 11px;border-bottom:1px solid var(--line2)}
.ph h3{font-size:13.5px;margin:0;font-weight:700;display:flex;align-items:center} .ph .m{font-size:11px;color:var(--tx3)}
.pb{padding:15px 18px}
/* Colunas que CEDEM. Eram `1fr 1fr` fixos: numa janela estreita — que é o
   caso normal, porque as telas rodam dentro do iframe da casca — os dois
   painéis não cabiam e o conteúdo era cortado FORA de qualquer moldura, sem
   nada indicando que havia mais à direita. `auto-fit` empilha em vez de
   cortar. */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
/* Filho de grid nasce com min-width:auto, que é o min-content — uma tabela
   larga dentro dele EMPURRA a coluna e o `1fr` não segura nada. É por isso
   que trocar para auto-fit sozinho não resolveu: a coluna continuava do
   tamanho da tabela. Com min-width:0 a coluna encolhe e a tabela rola. */
.g2>*,.g3>*{min-width:0}
/* Toda tabela larga rola dentro do próprio painel. */
.rolagem{overflow-x:auto;overflow-y:visible;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
tbody td{padding:8px 10px;border-bottom:1px solid var(--line2)} tbody tr:hover{background:#FAFCFD}
td.n,th.n{text-align:right;font-family:'IBM Plex Mono',monospace}
.bar{height:6px;border-radius:4px;background:var(--line2);overflow:hidden;width:60px;display:inline-block;vertical-align:middle;margin-right:7px}
.bar i{display:block;height:100%;border-radius:4px}
/* gráfico de barras agrupadas com rótulos empilhados (nunca se sobrepõem) */
.chart{display:flex;align-items:flex-end;gap:10px;height:224px;padding-top:44px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;cursor:pointer}
.pair{display:flex;align-items:flex-end;gap:3px;height:135px;width:100%;justify-content:center}
.bx{width:15px;border-radius:3px 3px 0 0;transition:opacity .12s} .col:hover .bx{opacity:.82}
.lbls{position:absolute;top:-30px;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;line-height:1}
.lb{font-size:9px;font-weight:700;font-family:'IBM Plex Mono',monospace;padding:1px 4px;border-radius:3px}
.ml{font-size:10px;color:var(--tx3);font-family:'IBM Plex Mono',monospace}
.leg{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--tx2)}
.leg span{display:flex;align-items:center;gap:6px} .leg i{width:9px;height:9px;border-radius:2px}
#tt{position:fixed;z-index:9999;display:none;background:var(--ink);color:#E3EEF7;border-radius:9px;padding:11px 14px;font-size:11.5px;line-height:1.6;box-shadow:0 14px 34px rgba(10,25,45,.32);max-width:300px;pointer-events:none}
#tt .hd{font-weight:700;color:#fff;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.16)}
#tt .row{display:flex;justify-content:space-between;gap:18px;padding:2px 0}
#tt .row span:first-child{color:#8FD6F2} #tt .row span:last-child{font-family:'IBM Plex Mono',monospace}
#tt .nt{margin-top:6px;color:#8FD6F2}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;font-family:'IBM Plex Mono',monospace}
.t-neu{background:var(--mdr-cinza-sf);color:var(--mdr-cinza)} .t-crit{background:var(--risco-sf);color:#8E2F28}
.t-warn{background:var(--amber-sf);color:#8A5A10} .t-info{background:var(--mdr-azul-sf);color:#0E4C86}
.t-ok{background:var(--green-sf);color:#1F7A4E}
.foot{font-size:11px;color:var(--tx3);margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.foot code{background:var(--line2);padding:1px 5px;border-radius:4px;font-family:'IBM Plex Mono',monospace}
.empty{padding:28px;text-align:center;color:var(--tx3);font-size:12.5px}