/* =====================================================================
   JEITO DO PAINEL DE CONTROLE DE REFERÊNCIA — v1.6 · 17/10/2026
   Ordem do Rodrigo: "quero igual ao Painel de Controle de referência: no formato, na ordem, nas funções, na fonte e nos espaços;
   as cores são as da Rubic". Carregado DEPOIS do padrao_layout.css e do estilo.css: só este painel muda.
   Fonte: Jost (só no Painel de Controle e no portal; os painéis de cliente seguem com a fonte do manual — decisão do Rodrigo, 17/10).
   Cores: só os tokens do padrão (grafite, laranja, situação), nos dois temas.
   ===================================================================== */
:root{
  --f-display:"Jost","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-body:"Jost","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --fs-base:14px; --fs-sm:12.5px; --fs-xs:11.5px; --fs-label:9.5px; --fs-tab:13px;
  --j-sombra:0 1px 2px rgba(50,54,60,.05),0 4px 12px rgba(50,54,60,.05);
}
@media (max-width:900px){ :root{ --fs-sm:14px; --fs-xs:14px; --fs-label:14px; --fs-tab:14px; } }
body{font:var(--fs-base)/1.45 var(--f-body);-webkit-font-smoothing:antialiased}

/* ---------- TOPO: voltar + marca + nome · carimbo · cápsula ---------- */
.topbar.topo2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 12px;padding:8px 16px}
.topo2 .esq{display:flex;align-items:center;gap:10px;min-width:0}
.topo2 .logo{height:26px;width:auto;display:block;flex:none}
.topo2 .nome-painel{margin:0;font:700 14.5px/1.2 var(--f-display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topo2 .carimbo-pilula{justify-self:center;margin:0;padding:4px 11px;border:0;border-radius:20px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);font:600 11px/1.3 var(--f-display);white-space:nowrap}
.topo2 .dir{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
.topo2 .capsula{display:inline-flex;align-items:center;gap:2px;margin:0;padding:2px;border-radius:12px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.ibtn{position:relative;flex:0 0 auto;width:32px;height:32px;min-height:0;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:transparent;color:#F5F5F7;cursor:pointer;text-decoration:none}
.ibtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ibtn.voltar{border-radius:50%;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14);color:#D7DBE3}
.ibtn:hover,.ibtn:focus-visible{background:rgba(255,255,255,.2);color:#fff}
.ibtn:active{transform:scale(.94)}
.ibtn.luz{color:var(--orange-on-graphite)}
.ibtn.dev{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.topo2 .usr{display:flex;align-items:center;gap:8px;min-width:0}
.topo2 .usr .avatar{width:26px;height:26px;font-size:11px}
.topo2 .who{display:grid;line-height:1.15;min-width:0}
.topo2 .who small{font:600 9.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-graphite-3)}
.topo2 .who .completo{font:500 12.5px var(--f-display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}

/* ---------- FAIXA: frase da aba + números (réguas) ---------- */
.faixa-fundo.bar2{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 0}
.bar2 .aba-frase{margin:0;padding:0;font:400 13.5px/1.4 var(--f-body);color:var(--muted)}
.bar2 .faixa-kpi{display:flex;flex-wrap:wrap;gap:0;margin:6px 0 0;padding:0;background:none;border:0}
.bar2 .faixa-kpi:empty{display:none}
.bar2 .faixa-kpi>div,.bar2 .faixa-kpi>div:first-child{display:block;padding:0 22px;border-left:1px solid var(--line);line-height:1.15}
.bar2 .faixa-kpi>div:first-child{padding-left:0;border-left:0}
.bar2 .faixa-kpi strong{display:block;font:600 20px/1.15 var(--f-display);color:var(--fg)}
.bar2 .faixa-kpi span{display:block;margin-top:2px;font:600 var(--fs-label)/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bar2 .faixa-btn{display:block;margin:-4px -8px;padding:4px 8px;border:0;border-radius:6px;background:none;color:inherit;text-align:left;cursor:pointer;transition:background-color .12s;min-width:0}
.bar2 .faixa-btn span::after{content:none}
.bar2 .faixa-btn:hover,.bar2 .faixa-btn:focus-visible{background:var(--orange-soft);border:0}
.bar2 .faixa-btn[aria-pressed="true"]{background:var(--orange-soft);border:0;box-shadow:inset 0 -3px 0 var(--orange)}
.bar2 .faixa-btn:hover span,.bar2 .faixa-btn[aria-pressed="true"] span{color:var(--orange-ink)}
.bar2 .faixa-btn:hover strong{text-decoration:none}
.bar2 .faixa-kpi .texto strong{font-size:14px;font-weight:500;padding-top:4px;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- ABAS: botões com ícone; a aberta escura com o fio laranja; "Administrativo" afastado à direita ---------- */
.abas.tabs2{display:block;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 0;gap:0}
.tabs2 .wrap{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.tabs2 .grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tabs2 .grp.adm{padding-left:12px;border-left:1px solid var(--line)}
.abas.tabs2 a{display:inline-flex;align-items:center;gap:7px;min-height:0;border:1px solid var(--line);background:var(--surface-2);font:600 var(--fs-tab)/1.2 var(--f-display);color:var(--muted);padding:8px 12px;border-radius:10px;box-shadow:0 1px 0 rgba(50,54,60,.06);text-decoration:none;transition:background-color .12s,border-color .12s,transform .08s}
.abas.tabs2 a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.abas.tabs2 a:hover{background:var(--surface);border-color:var(--muted);color:var(--fg)}
.abas.tabs2 a:active{transform:scale(.97)}
.abas.tabs2 a[aria-current="page"]{background:var(--graphite);border-color:var(--graphite);color:#fff;box-shadow:inset 0 -3px 0 var(--orange)}
.tabs2 .cont{display:inline-block;min-width:0;height:auto;margin-left:2px;padding:0 7px;border-radius:20px;background:var(--crit);color:#fff;font:700 10.5px/17px var(--f-display)}
.tabs2 .cont.neutro{background:var(--surface);color:var(--muted);border:1px solid var(--line);line-height:15px}
.tabs2 .subnav{flex-basis:100%;display:flex;justify-content:flex-end;gap:2px;padding:2px 0 1px}
.abas.tabs2 .subnav a{font-size:11.5px;padding:2px 10px;border-radius:20px;background:transparent;border-color:transparent;box-shadow:none}
.abas.tabs2 .subnav a[aria-current="page"]{background:var(--surface-2);color:var(--fg);border-color:var(--line);box-shadow:none}
.tabs2 .curto{display:none}

/* ---------- BARRA "VER COMO" (§21) compacta ---------- */
.vercomo-barra{padding:8px 0;background:var(--surface-2)}
.vercomo-barra .btn{min-height:0}

/* ---------- CONTEÚDO: títulos de seção, filtros em pílula, quadros e tabelas ---------- */
main#conteudo{padding-block:16px 70px}
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 10px}
section:first-of-type>.sec-head,.barra-acoes+section>.sec-head{margin-top:4px}
.sec-head h2,#view h2.rot-sec{margin:0;font:700 10.5px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sec-head .hint{font-size:var(--fs-xs);color:var(--muted);margin-left:auto}
.barra-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
#view .barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:0;background:none;border:0}
#view .vc-rotulo,.barra .rot{font:600 10px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.segmentos{display:inline-flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--surface)}
.segmentos button{min-height:0;border:0;border-radius:0;background:var(--surface);color:var(--muted);font:600 var(--fs-sm)/1.2 var(--f-display);padding:7px 15px;cursor:pointer}
.segmentos button:not([aria-pressed="true"]):hover{background:var(--surface-2)}
.segmentos button[aria-pressed="true"]{background:var(--btn-primary);color:var(--on-btn-primary)}
#view input[type=search],#view .barra select{font:500 13px var(--f-body);padding:7px 13px;min-height:0;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--fg)}
#view input[type=search]{min-width:280px}
#view input[type=search]:focus,#view .barra select:focus{border-color:var(--orange);outline:2px solid transparent}
#view .barra .busca-dir{margin-left:auto;flex:0 1 340px}
.tabela,#view .quadro{background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--j-sombra)}
.tabela table{font-size:13px}
.tabela th{font:700 var(--fs-label)/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tabela td{padding:9px 14px;border-bottom:0;border-top:1px solid var(--line);vertical-align:top}
.tabela tbody tr:first-child td{border-top:0}
:root[data-densidade="admin"] .tabela tbody tr:nth-child(even) td{background:transparent}
.tabela tbody tr:hover td,.tabela tbody tr:hover .fixa{background:var(--surface-2)}
.tabela td b,:root[data-densidade="admin"] .tabela td b{font:600 13.5px/1.3 var(--f-display)}
.tabela td small{font-size:12px;color:var(--muted)}
.rodape-tab{padding:9px 14px;border-top:1px solid var(--line);background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted)}
/* etiquetas (tag) e chips, como na referência: tag = maiúsculas pequenas; chip = texto normal em pílula clara */
.pill{font:700 var(--fs-label)/1.4 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:30px;gap:5px}
.pill::before{display:none}
.pill.fino{font:500 var(--fs-xs)/1.4 var(--f-body);letter-spacing:0;text-transform:none;padding:1px 8px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.pill.marca{background:var(--orange-soft);color:var(--orange-ink);border:1px solid var(--orange-soft)}
/* botões: pílula; o laranja chapado com sombra só na ação principal da tela */
.btn{min-height:0;border-radius:30px;padding:8px 16px;font:600 var(--fs-sm)/1.2 var(--f-display);letter-spacing:0;gap:7px}
.btn-primary{font-weight:700;box-shadow:0 1px 0 var(--btn-primary-hover),0 6px 14px rgba(194,79,0,.28)}
.btn-ghost{background:var(--surface)}
.btn-sm{min-height:0;padding:3px 11px;font:600 var(--fs-xs)/1.4 var(--f-display);border-radius:30px}
/* avisos (O que precisa de atenção / Reportes): barra à esquerda pela gravidade */
.pend>li,.alerta{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--idle);border-radius:5px;padding:9px 13px;font-size:13.5px;box-shadow:none}
.pend>li.alto,.alerta.alto{border-left-color:var(--crit)}
.pend>li.medio,.alerta.medio{border-left-color:var(--orange)}
.alertas{display:flex;flex-direction:column;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.alerta{display:flex;gap:10px;align-items:baseline}
.alerta .nv{font:700 var(--fs-label)/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted);min-width:62px}
.alerta.alto .nv{color:var(--crit-ink)} .alerta.medio .nv{color:var(--orange-ink)}
.tudo-certo{background:var(--ok-soft);border:1px solid var(--ok-soft);border-left:4px solid var(--ok);border-radius:5px;padding:10px 13px;color:var(--ok-ink);font-size:13.5px}
details.como{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 16px}
details.como summary{cursor:pointer;font:600 13px var(--f-display);color:var(--fg)}
details.como ul{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--muted)}
details.como li{margin-bottom:4px}
.nota{margin-top:12px;font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
/* cartão de resumo no alto (Saúde, Robôs): como o "Tempo de robô hoje" da referência */
.robo{background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--j-sombra);padding:14px 16px;margin:0 0 16px}
.robo h3{margin:0 0 6px;font:600 15px/1.3 var(--f-display)}
.robo .sub{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.robo .barra-cons{position:relative;height:14px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin:10px 0 8px}
.robo .barra-cons .reg{position:absolute;top:0;bottom:0;left:0;background:var(--orange)}
.robo .barra-cons .err{position:absolute;top:0;bottom:0;background:var(--crit)}
.robo .numeros{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px}
.robo .numeros b{font-weight:700}
/* mapa pessoas × perfis: bolinha cheia = tem o perfil */
.mapa td.bola{text-align:center}
.bolinha{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.bolinha i{display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.bolinha.on i{background:var(--orange);border-color:var(--orange)}
.bolinha:hover i{border-color:var(--orange)}
.bolinha[disabled]{cursor:default}
.bolinha[disabled] i{opacity:.45}
.bolinha.on[disabled] i{opacity:1}
/* rodapé discreto */
.rodape{padding-block:14px 20px}

/* ---------- celular e tablet: abas numa faixa que rola dentro dela; letra ≥ 14 ---------- */
@media (max-width:900px){
  .topbar.topo2{grid-template-columns:1fr auto;padding:8px 12px}
  .topo2 .carimbo-pilula{grid-column:1 / -1;grid-row:2;justify-self:start;font-size:14px;white-space:normal}
  .topo2 .nome-painel{font-size:15px}
  .topo2 .who{display:none}
  .tabs2 .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .tabs2 .grp{flex-wrap:nowrap}
  .tabs2 .subnav{flex-basis:auto}
  .abas.tabs2 a{white-space:nowrap;min-height:40px}
  .abas.tabs2 .subnav a{min-height:40px;font-size:14px}
  .bar2 .faixa-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px 0}
  .bar2 .faixa-kpi>div,.bar2 .faixa-kpi>div:first-child{border-left:0;padding:0 12px 0 0}
  .bar2 .faixa-btn{min-height:40px;min-width:48px}
  .bar2 .aba-frase{font-size:14px}
  #view input[type=search]{min-width:0;flex:1 1 100%}
  #view .barra .busca-dir{margin-left:0;flex:1 1 100%}
  .segmentos button{min-height:40px}
  .btn-sm{min-height:40px;padding:6px 12px}
  .bolinha{width:40px;height:40px}
  /* celular: texto nunca abaixo de 14 px e alvo de toque de 40 px (a v1.5 já media 0 e 0; o jeito novo não pode piorar) */
  .ibtn{width:40px;height:40px}
  .btn,.gaveta .btn,#view input[type=search],#view .barra select,#view select,.vercomo-barra input,.vercomo-barra .btn{min-height:40px}
  #view,#view .tabela table,#view .tabela td,#view .tabela th,#view .tabela td b,#view .tabela td small,#view small,#view .sub,#view .hint,#view .nota,
  #view .rodape-tab,#view .quebra-curta,#view .quando,#view .detalhe,#view .pill,#view .pill.fino,#view .vc-rotulo,#view .barra .rot,
  #view .sec-head h2,#view h2.rot-sec,#view .robo,#view .robo *,#view details.como,#view details.como *,#view .alerta,#view .tudo-certo,
  .tabs2 .cont,.tabs2 .cont.neutro{font-size:14px}
  .tabs2 .cont{line-height:20px}
}
@media (max-width:900px){ .bar2 .faixa-kpi span,#view .tabela th,#view .sec-head h2{letter-spacing:.03em} }
.mapa .curto{display:none}
@media (max-width:600px){
  .tabela.mapa table{min-width:0}
  .mapa .longo,.mapa td.fixa small{display:none} .mapa .curto{display:inline}
  .mapa th,.mapa td{padding:8px 2px} .mapa th.fixa,.mapa td.fixa{padding-left:10px}
  p.nota.so-cel{display:block}
}
@media (max-width:480px){
  .tabs2 .longo{display:none} .tabs2 .curto{display:inline}
  /* o nome do painel não pode virar "Painel …": quebra em 2 linhas */
  .topo2 .nome-painel{white-space:normal;line-height:1.1;overflow:visible}
}