/* ORBIS 360° — sistema de design "Pilares em órbita" (17/10/2026)
   Base: Guia de Branding Minerva Foods 2025 (cores HEX oficiais, Montserrat, ícones outline, branco ≥ 50%).
   Camada exclusivamente visual, carregada por último. Para reverter: remover o <link> deste arquivo
   e o <script> js/utils/orbis-ui.js do index.html. Não altera regras, cálculos, permissões nem dados. */

:root {
  /* Oficiais Minerva Foods 2025 (p. 45) */
  --mf-azul-escuro: #2c5372;
  --mf-azul-medio: #426a88;
  --mf-azul-claro: #5d86a5;
  --mf-azul-neutro: #eaeff5;
  --mf-vermelho: #e83948;
  --mf-vermelho-medio: #bf404f;
  --mf-vermelho-claro: #eb7380;
  --mf-dourado: #c7b475;
  /* Complementares ORBIS (derivados da paleta oficial) */
  --ob-noite: #142636;
  --ob-noite-2: #1b3348;
  --ob-tinta: #1c2f40;
  --ob-texto: #3d5063;
  --ob-sutil: #6b7d8f;
  --ob-linha: #dfe6ee;
  --ob-linha-2: #eef2f6;
  --ob-fundo: #f5f7fa;
  --ob-ok: #3f8f74;
  --ob-ok-claro: #eef7f3;
  --ob-dourado-texto: #8d7a3c;
  --ob-dourado-claro: #f7f2e2;
  --ob-vermelho-claro: #fdeef0;

  /* Variáveis já usadas pelo sistema (1.985 usos), agora na paleta Minerva */
  --az1: #2c5372; --az2: #426a88; --az3: #5d86a5; --azx: #eaeff5;
  --rd: #e83948; --rdl: #fdeef0;
  --vd: #3f8f74; --vdl: #eef7f3;
  --am: #8d7a3c; --aml: #f7f2e2;
  --g1: #f5f7fa; --g2: #e6ebf1; --g3: #cfd9e3; --g5: #6b7d8f; --g7: #3d5063; --g9: #1c2f40;
  --wh: #ffffff;
  --sh: 0 1px 2px rgba(20,38,54,.05);
  --sha: 0 10px 30px rgba(20,38,54,.14);
  --r: 12px;
  --t: .18s ease;
}

/* ── Base ─────────────────────────────────────────────────────────── */
html, body { background: var(--ob-fundo) !important; }
body { color: var(--ob-tinta); -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important; }
.main::before { display: none !important; }
::selection { background: rgba(93,134,165,.25); }
:focus-visible { outline: 2px solid var(--mf-azul-claro); outline-offset: 2px; }
* { scrollbar-color: #c3cfdb transparent; }
.num, td, .sc-val, [id^="pn-k-"] { font-variant-numeric: tabular-nums; }

/* ── Cabeçalho slim: continuação da abertura ─────────────────────── */
.top {
  height: 56px !important;
  padding: 0 22px 0 18px !important;
  background: var(--ob-noite) !important;
  border-bottom: 1px solid rgba(199,180,117,.32) !important;
  box-shadow: none !important;
}
.top-logo img { height: 38px !important; }
.top-sep, .top-name { display: none !important; }
.top-right { gap: 10px !important; }
#ecpo-version-pill {
  background: rgba(63,143,116,.14) !important; border: 1px solid rgba(63,143,116,.45) !important;
  color: #8fd1b8 !important; font-weight: 600 !important; letter-spacing: .3px;
}
#ecpo-user-badge { color: #c4d2df !important; border-color: rgba(169,195,214,.28) !important; font-size: 11px !important; }
.top-right button[onclick="ecpoLogout()"] {
  font-family: inherit !important; font-size: 11.5px !important; font-weight: 600 !important;
  color: #dbe5ee !important; border: 1px solid rgba(169,195,214,.35) !important; border-radius: 8px !important;
  padding: 6px 12px !important; transition: background var(--t), border-color var(--t);
}
.top-right button[onclick="ecpoLogout()"]:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(169,195,214,.6) !important; }
.layout { min-height: calc(100vh - 56px) !important; }

/* ── Menu lateral ─────────────────────────────────────────────────── */
.side {
  width: 232px !important; min-width: 232px !important;
  background: var(--ob-noite) !important;
  padding: 14px 12px 24px !important;
  border-right: 1px solid rgba(169,195,214,.08);
}
.side-lbl {
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1.6px !important;
  color: #7f97ad !important; padding: 16px 10px 6px !important;
}
.side-div { display: none !important; }
.side-a {
  position: relative; margin: 1px 0; padding: 8px 10px !important; border-radius: 8px;
  border-left: 0 !important; color: #c4d2df !important; font-size: 12.5px !important; font-weight: 500 !important;
  transition: background var(--t), color var(--t);
}
.side-a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.side-a.on { background: rgba(93,134,165,.2) !important; color: #fff !important; }
.side-a.on::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mf-dourado);
}
.side-a svg { width: 17px !important; height: 17px !important; stroke-width: 1.6 !important; opacity: .9 !important; }
.side-cnt { background: rgba(255,255,255,.08) !important; color: #9fb3c6 !important; font-weight: 600; }
/* Administração aparecia duas vezes: mantém um único item (os ids continuam no HTML para as regras de permissão). */
#side-admin-lbl, #side-admin-btn, #side-admin-div, #div-admin-sep { display: none !important; }

/* ── Títulos de página ───────────────────────────────────────────── */
.main { padding: 26px 30px 40px !important; }
.ph-title { font-size: 27px !important; font-weight: 300 !important; letter-spacing: -.4px !important; color: var(--mf-azul-escuro) !important; }
.ph-sub { font-size: 12.5px !important; color: var(--ob-sutil) !important; margin-top: 4px !important; }

/* ── Superfícies: cartões brancos com borda fina, sem sombras pesadas ── */
.card, .sc, .stats .sc,
body [style*="box-shadow:var(--sh)"], body [style*="box-shadow: var(--sh)"] {
  box-shadow: none !important;
  border: 1px solid var(--ob-linha) !important;
}
.sc { border-top: 0 !important; border-radius: 12px !important; position: relative; overflow: hidden; }
.sc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mf-azul-escuro); }
.sc.vd::before { background: var(--ob-ok); } .sc.am::before { background: var(--mf-dourado); } .sc.rd::before { background: var(--mf-vermelho); }
.sc-lbl { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; color: var(--ob-sutil) !important; }
.sc-val { font-weight: 500 !important; color: var(--mf-azul-escuro) !important; }

/* ── Botões ──────────────────────────────────────────────────────── */
.btn, .btn-p, .btn-pdf {
  border-radius: 8px !important; font-weight: 600 !important; font-size: 12.5px !important;
  box-shadow: none !important; transition: background var(--t), border-color var(--t), transform var(--t) !important;
}
.btn-p { background: var(--mf-azul-escuro) !important; }
.btn-p:hover { background: #244661 !important; transform: none !important; }
.btn:active, button:active { transform: translateY(1px); }
.login-btn { background: var(--mf-azul-escuro) !important; font-family: inherit !important; border-radius: 10px !important; }
.login-btn:hover { background: #244661 !important; }
.login-inp:focus { border-color: var(--mf-azul-claro) !important; box-shadow: 0 0 0 3px rgba(93,134,165,.18); }

/* ── Campos ──────────────────────────────────────────────────────── */
body select, body input[type="text"], body input[type="search"], body input[type="number"], body input[type="date"], body textarea,
dialog select, dialog input[type="text"], dialog input[type="number"], dialog input[type="date"], dialog textarea {
  border-color: #cfd9e3 !important;
  border-radius: 8px !important;
  transition: border-color var(--t), box-shadow var(--t);
}
body select:focus, body input:focus, body textarea:focus, dialog select:focus, dialog input:focus, dialog textarea:focus {
  outline: none !important; border-color: var(--mf-azul-claro) !important; box-shadow: 0 0 0 3px rgba(93,134,165,.18) !important;
}

/* ── Tabelas slim ────────────────────────────────────────────────── */
body table th, dialog table th, #wbs-modal table th, #diario-modal table th, #cron-kanban-modal table th {
  background: #f3f6f9 !important;
  color: #5b6e80 !important;
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .7px;
  text-transform: uppercase;
  border-color: var(--ob-linha) !important;
}
body table td, dialog table td { border-color: var(--ob-linha-2) !important; }
body table tbody tr:hover > td { background-color: #f7f9fc; }

/* ── Painel: cabeçalho, filtros e abas ───────────────────────────── */
#v-painel > .ph .btn { height: 34px; padding: 0 14px !important; }
#v-painel > .ph .btn[onclick="pnTab('importar')"] { background: var(--mf-azul-escuro) !important; }
#v-painel > .ph .btn[onclick="pnExportar()"] { background: #fff !important; color: var(--mf-azul-escuro) !important; border: 1px solid #c9d5e1 !important; }
#pn-filtros {
  border: 1px solid var(--ob-linha) !important; box-shadow: none !important; border-radius: 12px !important;
  padding: 12px 18px !important; gap: 10px 18px !important;
}
#pn-filtros label { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 1px; color: var(--ob-sutil) !important; }
#pn-filtros select { height: 32px; padding: 0 28px 0 10px !important; color: var(--ob-tinta) !important; font-size: 12.5px !important; }
#pn-filtros button[onclick="pnLimparFiltros()"] {
  height: 32px; background: var(--mf-azul-neutro) !important; color: var(--mf-azul-escuro) !important;
  font-weight: 600 !important; border-radius: 8px !important; padding: 0 14px !important;
}
#pn-abas {
  gap: 2px !important; align-items: flex-end;
  border-bottom: 1px solid var(--ob-linha) !important; margin-bottom: 20px !important;
}
#pn-abas [id^="pn-btn-"] {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; margin: 0 0 -1px !important;
  padding: 9px 11px 10px !important; font-size: 12.5px !important; font-weight: 500 !important;
  color: var(--ob-texto) !important; white-space: nowrap; transition: color var(--t), border-color var(--t);
}
#pn-abas [id^="pn-btn-"]:hover { color: var(--mf-azul-escuro) !important; }
#pn-abas [id^="pn-btn-"][style*="color: var(--az1)"],
#pn-abas [id^="pn-btn-"][style*="color:var(--az1)"] {
  color: var(--mf-azul-escuro) !important; font-weight: 600 !important; border-bottom-color: var(--mf-azul-escuro) !important;
}
#pn-abas .pn-aba-grupo {
  align-self: center; flex: none;
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #93a4b5;
  padding: 0 6px 0 14px; margin-left: 8px; border-left: 1px solid var(--ob-linha); line-height: 22px;
}
#pn-abas .pn-aba-grupo:first-child { border-left: 0; margin-left: 0; padding-left: 2px; }

/* ── Dashboard: faixa de comando (continua a abertura) ───────────── */
.ob-comando {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, var(--ob-noite) 0%, var(--ob-noite-2) 46%, #2a4f6d 100%);
  color: #fff; border-radius: 14px; padding: 22px 24px 20px; margin-bottom: 18px;
  display: grid; gap: 16px;
}
.ob-comando .ob-orbita { position: absolute; right: -80px; top: -140px; width: 680px; height: 360px; z-index: -1; opacity: .6; pointer-events: none; }
.ob-comando .ob-orbita ellipse { animation: ob-gira 60s linear infinite; transform-origin: 340px 200px; }
.ob-comando .ob-orbita ellipse:nth-child(2) { animation-duration: 90s; animation-direction: reverse; }
@keyframes ob-gira { to { transform: rotate(360deg); } }
.ob-comando-h { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.ob-comando-h h2 { margin: 0; font-size: 25px; font-weight: 300; letter-spacing: -.3px; color: #fff; }
.ob-comando-h h2 b { font-weight: 600; }
.ob-comando-h .ob-sub { font-size: 12px; color: #a9c3d6; margin-top: 3px; }
.ob-falconi { margin-left: auto; max-width: 360px; text-align: right; font-size: 11.5px; line-height: 1.45; font-style: italic; color: #c3d3e0; }
.ob-falconi span { display: block; font-style: normal; font-weight: 600; color: var(--mf-dourado); margin-top: 3px; }
.ob-herois { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(169,195,214,.18); border-radius: 12px; overflow: hidden; }
.ob-heroi { background: rgba(10,24,36,.55); padding: 14px 16px 13px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ob-heroi small, .ob-secundarios small { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #9fb8cc; }
.ob-heroi small span[data-pn-milhoes] { letter-spacing: .3px; text-transform: none; color: #7f9cb3; }
.ob-heroi b { font-size: 30px; font-weight: 500; line-height: 1.05; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-heroi em { font-style: normal; font-size: 11.5px; color: #a9c3d6; }
.ob-barra { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin: 4px 0 2px; }
.ob-barra i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--mf-azul-claro); transform-origin: left; animation: ob-cresce 1.1s cubic-bezier(.2,.7,.2,1) both; }
.ob-barra.ouro i { background: var(--mf-dourado); }
@keyframes ob-cresce { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
.ob-secundarios { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.ob-secundarios div { display: flex; align-items: baseline; gap: 8px; }
.ob-secundarios b { font-size: 17px; font-weight: 500; color: #fff; }
.ob-secundarios i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; align-self: center; }

/* gráficos do Dashboard: títulos no padrão */
#pn-tab-dash [style*="font-size:12px;font-weight:700;color:var(--az1)"] { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ob-tinta) !important; }

/* ── Fluxo SGP → EAP → Cronograma → Check ───────────────────────── */
.ecpo-fluxo { gap: 4px !important; }
.ecpo-fluxo > span[style*="border-radius:12px"] { border-radius: 14px !important; padding: 4px 11px !important; font-weight: 600 !important; }

/* ── Cronograma: barra de ações por papel ───────────────────────── */
body button[onclick^="sgpAbrir("], body button[id^="btn-wbs-"], body button[onclick^="checkFinAbrir("],
body button[onclick^="cronSalvarBaseline("], body button[onclick^="cronAbrirKanban("], body button[onclick^="cronExportarExcel("],
body button[onclick^="cronAbrirLog("], body button[onclick^="cronAtivarPep(null)"] {
  background: #fff !important; color: var(--mf-azul-escuro) !important; border: 1px solid #c9d5e1 !important;
  border-radius: 8px !important; font-weight: 600 !important; padding: 7px 12px !important;
  transition: background var(--t), border-color var(--t);
}
body button[onclick^="sgpAbrir("]:hover, body button[id^="btn-wbs-"]:hover, body button[onclick^="checkFinAbrir("]:hover,
body button[onclick^="cronSalvarBaseline("]:hover, body button[onclick^="cronAbrirKanban("]:hover, body button[onclick^="cronExportarExcel("]:hover,
body button[onclick^="cronAbrirLog("]:hover, body button[onclick^="cronAtivarPep(null)"]:hover { border-color: var(--mf-azul-claro) !important; background: #f7fafc !important; }
body button[onclick^="cronAdicionarTarefa("] { background: var(--mf-azul-escuro) !important; border-radius: 8px !important; padding: 7px 14px !important; }
body button[onclick^="cronExcluirCronograma("] {
  background: #fff !important; color: var(--mf-vermelho-medio) !important; border: 1px solid #f1c9ce !important;
  border-radius: 8px !important; padding: 7px 12px !important;
}
body button[onclick^="cronExcluirCronograma("]:hover { background: var(--ob-vermelho-claro) !important; }

/* ── Janelas: um único padrão (centralizadas, cantos de 14 px, fundo escurecido) ── */
dialog[open] { margin: auto !important; }
dialog::backdrop { background: rgba(14,28,42,.62) !important; backdrop-filter: blur(2px); }
#ecpo-sgp-production, #ecpo-check-fin, dialog[id^="ecpo-check"] {
  background: #fff !important; border: 1px solid var(--ob-linha) !important; border-radius: 14px !important;
  box-shadow: var(--sha) !important; color: var(--ob-tinta) !important;
}
#ecpo-sgp-production h2, dialog[id^="ecpo-check"] h2 { font-weight: 300 !important; font-size: 24px !important; color: var(--mf-azul-escuro) !important; letter-spacing: -.3px; }
#wbs-modal, #diario-modal, #cron-kanban-modal { background: rgba(14,28,42,.62) !important; backdrop-filter: blur(2px); }
#wbs-modal > div, #diario-modal > div, #cron-kanban-modal > div { border-radius: 14px !important; box-shadow: var(--sha) !important; }
dialog button[data-action="close"], #wbs-modal button[onclick*="remove"], #cron-kanban-modal button[onclick*="remove"] { border-radius: 8px !important; }

/* ── Aviso de boas-vindas ────────────────────────────────────────── */
#ecpo-sp-banner { animation: ob-surge .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ob-surge { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Celular e tablet ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ob-herois { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ob-falconi { display: none; }
}
@media (max-width: 900px) {
  .top { padding: 0 12px !important; }
  .top-logo img { height: 30px !important; max-width: 150px !important; }
  #ecpo-user-badge { display: none !important; }
  .main { padding: 18px 14px 30px !important; }
  .ph-title { font-size: 22px !important; }
  .side { width: 264px !important; }
  #v-painel > .ph { flex-direction: column; align-items: stretch !important; }
  #pn-filtros { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 12px !important; }
  #pn-filtros > div { gap: 4px !important; min-width: 0; }
  #pn-filtros select { width: 100% !important; min-width: 0 !important; }
  #pn-filtros > button, #pn-filtros > span { grid-column: 1 / -1; }
  #pn-tab-dash [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; }
  .ob-comando { padding: 16px; border-radius: 12px; }
  .ob-comando-h h2 { font-size: 21px; }
  .ob-heroi { padding: 11px 12px; }
  .ob-heroi b { font-size: 22px; }
  body table { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-comando .ob-orbita ellipse, .ob-barra i, #ecpo-sp-banner { animation: none !important; }
}

/* ── Ajustes de precedência sobre regras antigas do layout.css ───── */
#v-painel .ob-comando .ob-heroi b[id^="pn-k-"] { font-size: 30px !important; font-weight: 500 !important; }
#v-painel .ob-comando .ob-secundarios b[id^="pn-k-"] { font-size: 17px !important; font-weight: 500 !important; }
#v-painel .ob-comando #pn-k-real-pct, #v-painel .ob-comando #pn-k-comp-pct { display: inline !important; font-size: 11.5px !important; white-space: nowrap; }
#v-painel #pn-abas div[id^="pn-btn-"] { padding: 9px 11px 10px !important; font-size: 12.5px !important; }
#v-painel #pn-filtros select { font-size: 12.5px !important; padding: 0 26px 0 10px !important; }
.ob-citacao-repetida { display: none !important; }
#ecpo-user-badge:empty, .side-cnt:empty { display: none !important; }
@media (max-width: 900px) {
  #v-painel .ob-comando .ob-heroi b[id^="pn-k-"] { font-size: 22px !important; }
}

/* ── Tipografia oficial em todos os elementos ─────────────────────
   variables.css tinha "* { font-family: -apple-system… !important }" (fallback antigo para file://), que impedia
   a Montserrat — fonte oficial do manual Minerva — na maior parte da tela. Mesma especificidade, declarada depois. */
* { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important; }
code, pre, kbd, samp, .mono, [style*="monospace"] { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace !important; }

/* ── Cabeçalho das janelas SGP e Check Financeiro ───────────────── */
#ecpo-sgp-production > header, dialog[id^="ecpo-check"] > header {
  background: #fff !important; border-bottom: 1px solid var(--ob-linha) !important;
  height: auto !important; padding: 0 0 14px !important; margin-bottom: 14px; position: static !important;
}
#ecpo-sgp-production thead th, dialog[id^="ecpo-check"] thead th { border-bottom: 1px solid var(--ob-linha) !important; }

/* ── Painel em tela cheia (layout.css): alinhado ao novo cabeçalho (56 px) e menu (232 px); no celular ocupa a largura toda ── */
#v-painel { top: 56px !important; left: 232px !important; background: var(--ob-fundo) !important; padding: 26px 30px 40px !important; }
@media (max-width: 900px) {
  #v-painel { left: 0 !important; padding: 16px 14px 30px !important; }
}

/* ── Dashboard na composição aprovada ────────────────────────────── */
#pn-tab-dash .ob-grade-dash { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) !important; }
#pn-tab-dash .ob-grade-dash > div { padding: 18px 20px !important; display: grid; gap: 10px; align-content: start; }
#pn-chart-waterfall { height: 236px !important; max-height: 236px !important; }
.ob-legenda:empty { display: none; }
.ob-anel { height: 178px; position: relative; }
.ob-anel canvas { height: 178px !important; max-height: 178px !important; }
.ob-prazo { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--ob-linha-2); }
.ob-prazo-t { font-size: 12.5px; font-weight: 600; color: var(--ob-tinta); }
.ob-trilho { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--ob-linha-2); }
.ob-trilho i { display: block; height: 100%; transform-origin: left; animation: ob-cresce .9s cubic-bezier(.2,.7,.2,1) both; }
.ob-prazo-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin: 0; }
.ob-prazo-n dt { font-size: 11px; color: var(--ob-sutil); }
.ob-prazo-n dd { margin: 0; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-prazo-original { display: none !important; }
.ob-cartao-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ob-cartao-t { font-size: 13.5px; font-weight: 600; color: var(--ob-tinta); }
.ob-cartao-s { font-size: 11.5px; color: var(--ob-sutil); }
.ob-cartao-a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mf-azul-medio); text-decoration: none; }
.ob-cartao-a:hover { text-decoration: underline; }
.ob-rolagem { overflow-x: auto; }
table.ob-slim { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body table.ob-slim th { background: transparent !important; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ob-linha) !important; color: #8295a7 !important; white-space: nowrap; }
table.ob-slim td { padding: 10px; border-bottom: 1px solid var(--ob-linha-2); white-space: nowrap; color: var(--ob-tinta); }
table.ob-slim .n { text-align: right; font-variant-numeric: tabular-nums; }
table.ob-slim .ob-nome { white-space: normal; max-width: 360px; }
table.ob-slim .ob-pep { font-size: 11px; color: var(--ob-sutil); }
table.ob-slim .ob-vazio { text-align: center; color: var(--ob-sutil); padding: 22px; }
.ob-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.ob-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ob-pill.ok { color: var(--ob-ok); background: var(--ob-ok-claro); } .ob-pill.and { color: var(--mf-azul-escuro); background: var(--mf-azul-neutro); }
.ob-pill.atr { color: var(--mf-vermelho-medio); background: var(--ob-vermelho-claro); } .ob-pill.ate { color: var(--ob-dourado-texto); background: var(--ob-dourado-claro); }
.ob-pill.neu { color: var(--ob-sutil); background: var(--ob-linha-2); }
.ob-mini { display: inline-block; width: 64px; height: 5px; border-radius: 3px; background: var(--ob-linha-2); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.ob-mini i { display: block; height: 100%; background: var(--mf-azul-claro); border-radius: 3px; }
@media (max-width: 900px) { #pn-tab-dash .ob-grade-dash { grid-template-columns: minmax(0,1fr) !important; } }

/* total HTML antigo sobre o anel (o anel agora desenha o próprio total no centro) */
#pn-total-pn-chart-status { display: none !important; }
/* cabeçalhos de tabela slim em todo o sistema (layout.css/minerva-brand.css tinham fundo escuro e linha vermelha) */
thead, table thead, thead tr { background: transparent !important; border-bottom-color: var(--ob-linha) !important; }
thead tr { border-bottom-width: 1px !important; }
tbody tr:nth-child(even) td { background-color: #fafbfd; }

/* ══════════ FIDELIDADE AO MOCKUP APROVADO (17/10/2026) ══════════
   Valores copiados da maquete "Pilares em órbita": menu escuro com o logotipo, barra superior branca,
   faixa de comando de borda a borda, filtros em chips, abas em famílias e cartões slim. */

/* Menu escuro de altura total com o logotipo no topo */
@media (min-width: 901px) {
  .side { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 210; padding: 76px 12px 18px !important; overflow-y: auto; display: flex; flex-direction: column; }
  .top { margin-left: 232px; }
  .top-logo { position: fixed; left: 0; top: 0; width: 232px; height: 64px; z-index: 211; display: flex; align-items: center; padding-left: 20px; background: var(--ob-noite); }
  .top-logo img { height: 30px !important; width: auto !important; max-width: 160px !important; }
  .main { margin-left: 232px; }
}
.top { background: #fff !important; border-bottom: 1px solid var(--ob-linha) !important; height: 54px !important; padding: 0 24px !important; gap: 14px; }
.top-brand { flex: 0 0 auto !important; }
.menu-ham { background: var(--mf-azul-neutro) !important; }
.menu-ham span { background: var(--mf-azul-escuro) !important; }
.ob-topo { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ob-crumb { font-size: 12.5px; color: var(--ob-sutil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ob-crumb b { color: var(--ob-tinta); font-weight: 600; }
.ob-chip-st { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 16px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--ob-ok); border: 1px solid #cfe5dc; background: #f2f9f6; }
.ob-chip-st[hidden], .ob-chip-pais[hidden] { display: none !important; }
.ob-chip-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-ok); }
.ob-busca { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 240px; height: 34px; border: 1px solid var(--ob-linha); border-radius: 8px; padding: 0 10px; color: var(--ob-sutil); cursor: text; flex: none; }
.ob-busca:focus-within { border-color: var(--mf-azul-claro); box-shadow: 0 0 0 3px rgba(93,134,165,.18); }
.ob-busca svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; flex: none; }
.ob-busca input { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent; font-size: 12.5px !important; color: var(--ob-tinta); width: 100%; padding: 0 !important; }
.ob-chip-pais { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--ob-linha); border-radius: 16px; font-size: 12px; font-weight: 600; color: var(--ob-tinta); background: #fff; white-space: nowrap; }
#ecpo-version-pill { background: #f2f9f6 !important; border: 1px solid #cfe5dc !important; color: var(--ob-ok) !important; }
#ecpo-user-badge { color: var(--ob-texto) !important; border-color: var(--ob-linha) !important; }
.top-right button[onclick="ecpoLogout()"] { color: var(--mf-azul-escuro) !important; border: 1px solid #c9d5e1 !important; background: #fff !important; height: 30px; }
.top-right button[onclick="ecpoLogout()"]:hover { background: #f7fafc !important; border-color: var(--mf-azul-claro) !important; }

/* Usuário no rodapé do menu */
.ob-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.ob-usuario[hidden] { display: none !important; }
.ob-av { width: 30px; height: 30px; border-radius: 50%; background: var(--mf-azul-medio); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.ob-usuario div { display: grid; line-height: 1.3; min-width: 0; }
.ob-usuario b { color: #fff; font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-usuario span { font-size: 11px; color: #8ea6bb; }

/* Painel de Projetos: tela cheia sem respiros externos; seções de borda a borda */
#v-painel { top: 54px !important; padding: 0 !important; background: #f6f8fb !important; }
#v-painel > .ph { position: fixed; top: 11px; right: 128px; z-index: 230; margin: 0 !important; gap: 8px !important; }
#v-painel > .ph > div:first-child { display: none !important; }
#v-painel > .ph .btn { height: 32px !important; font-size: 12px !important; padding: 0 12px !important; }
@media (max-width: 1280px) { #v-painel > .ph { display: none !important; } }
#v-painel > [id^="pn-tab-"] { padding: 20px 24px 26px !important; }

/* Faixa de comando: valores da maquete */
#v-painel .ob-comando { border-radius: 0 !important; margin: 0 !important; padding: 22px 24px 20px !important; gap: 16px !important; }
#v-painel:has(#pn-tab-dash[style*="display: none"]) #pn-comando, #v-painel:has(#pn-tab-dash[style*="display:none"]) #pn-comando { display: none !important; }
.ob-comando .ob-orbita { right: -60px !important; top: -120px !important; width: 620px !important; height: 340px !important; opacity: .55 !important; }
.ob-comando-h { align-items: flex-end !important; gap: 16px !important; flex-wrap: nowrap !important; }
.ob-comando-h h2 { font-size: 26px !important; font-weight: 300 !important; letter-spacing: -.3px !important; line-height: 1.15; }
.ob-comando-h h2 b { font-weight: 600 !important; }
.ob-comando-h .ob-sub { font-size: 12px !important; color: #a9c3d6 !important; margin: 2px 0 0 !important; }
.ob-falconi { max-width: 330px !important; font-size: 11.5px !important; line-height: 1.45 !important; color: #c3d3e0 !important; margin: 0 0 0 auto !important; }
.ob-falconi .ob-falconi-txt { display: inline; font-style: italic; }
.ob-falconi .ob-falconi-aut { display: block; font-style: normal; color: var(--mf-dourado); font-weight: 600; margin-top: 2px; }
.ob-heroi { background: rgba(14,30,44,.55) !important; padding: 14px 16px !important; gap: 4px !important; }
.ob-heroi > small { font-size: 10.5px !important; letter-spacing: 1.2px !important; color: #9fb8cc !important; }
#v-painel .ob-comando .ob-heroi b[id^="pn-k-"] { font-size: 30px !important; font-weight: 500 !important; line-height: 1 !important; }
.ob-heroi b .ob-mi { font-size: 14px; color: #a9c3d6; font-weight: 500; margin-left: 4px; }
.ob-barra { margin: 0 !important; }
.ob-desc { font-size: 11.5px; color: #a9c3d6; line-height: 1.35; }
#v-painel .ob-comando .ob-desc i[id^="pn-k-"], #v-painel .ob-comando .ob-desc em[id^="pn-k-"] { font-size: 11.5px !important; font-style: normal; font-weight: 400 !important; display: inline !important; color: #a9c3d6; white-space: nowrap; }
.ob-secundarios { display: none !important; }

/* Filtros em chips (País, Moeda, Regional, Unidade, BU) + Mais filtros */
#v-painel #pn-filtros {
  border: 0 !important; border-bottom: 1px solid var(--ob-linha) !important; border-radius: 0 !important; margin: 0 !important;
  padding: 14px 24px !important; gap: 8px !important; align-items: center !important; background: #fff !important; box-shadow: none !important;
}
#pn-filtros > div { display: inline-flex; align-items: center; gap: 6px !important; height: 30px; padding: 0 4px 0 12px; border: 1px solid var(--ob-linha); border-radius: 16px; background: #fff; }
#pn-filtros > div label { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ob-texto) !important; }
#v-painel #pn-filtros select { border: 0 !important; height: 26px; background-color: transparent !important; font-weight: 600 !important; font-size: 12px !important; color: var(--ob-tinta) !important; padding: 0 22px 0 2px !important; box-shadow: none !important; min-width: 0 !important; width: auto !important; }
#pn-filtros > div:has(#pn-f-ano), #pn-filtros > div:has(#pn-f-mes), #pn-filtros > button[onclick="pnLimparFiltros()"], #pn-filtros > #pn-status-badge { display: none !important; }
#pn-filtros.ob-expandido > div:has(#pn-f-ano):not([style*="display: none"]):not([style*="display:none"]), #pn-filtros.ob-expandido > div:has(#pn-f-mes):not([style*="display: none"]):not([style*="display:none"]) { display: inline-flex !important; }
#pn-filtros.ob-expandido > button[onclick="pnLimparFiltros()"]:not([style*="display: none"]):not([style*="display:none"]) { display: inline-flex !important; height: 30px; align-items: center; }
#pn-filtros.ob-expandido > #pn-status-badge:not([style*="display: none"]):not([style*="display:none"]) { display: inline !important; }
.ob-mais-filtros { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 16px;
  background: var(--mf-azul-neutro); color: var(--mf-azul-escuro); font-size: 12px; font-weight: 600; cursor: pointer; }
.ob-mais-filtros svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
#pn-filtros.ob-expandido .ob-mais-filtros { background: var(--mf-azul-escuro); color: #fff; }

/* Abas em três famílias: rótulo acima dos nomes */
#v-painel #pn-abas { display: flex !important; gap: 18px !important; padding: 0 24px !important; margin: 0 !important; background: #fff; border-bottom: 1px solid var(--ob-linha) !important; overflow-x: auto; align-items: stretch !important; }
.pn-aba-fam { display: grid; gap: 0; flex: none; }
#pn-abas .pn-aba-fam > .pn-aba-grupo { font-size: 9.5px !important; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #93a4b5; padding: 10px 0 0 10px !important; margin: 0 !important; border: 0 !important; line-height: 1.2 !important; }
.pn-aba-nav { display: flex; gap: 2px; }
#v-painel #pn-abas div[id^="pn-btn-"] { padding: 6px 10px 11px !important; font-size: 12.5px !important; font-weight: 500 !important; margin: 0 0 -1px !important; }
.pn-aba-sep { width: 1px; background: var(--ob-linha); margin: 12px 0; flex: none; }
.pn-aba-fam:not(:has([id^="pn-btn-"]:not([hidden]):not([style*="display: none"]):not([style*="display:none"]))) { display: none; }

/* Conteúdo do Dashboard: cartões da maquete */
#pn-tab-dash .ob-grade-dash { gap: 16px !important; margin-bottom: 16px !important; }
#pn-tab-dash .ob-grade-dash > div, #ob-top-projetos { padding: 16px 18px !important; border-radius: 12px !important; gap: 12px !important; }
.ob-cartao-h { margin: 0 !important; gap: 10px !important; }
.ob-cartao-t { font-size: 13.5px !important; font-weight: 600 !important; }
.ob-oculto { display: none !important; }
#pn-chart-waterfall { height: 230px !important; max-height: 230px !important; }
.ob-anel-grade { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; align-items: center; }
.ob-anel { height: 150px !important; }
.ob-anel canvas { height: 150px !important; max-height: 150px !important; }
.ob-anel-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12px; color: var(--ob-tinta); }
.ob-anel-leg li { display: flex; justify-content: space-between; gap: 10px; }
.ob-anel-leg li span { display: inline-flex; align-items: center; gap: 7px; }
.ob-anel-leg li i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.ob-anel-leg li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-prazo { padding-top: 0 !important; border-top: 0 !important; gap: 10px !important; }
.ob-prazo-n { grid-template-columns: repeat(3, 1fr) !important; }
.ob-prazo-n dd { font-size: 20px !important; }
@media (max-width: 900px) {
  .top { height: 54px !important; padding: 0 12px !important; }
  .top-logo img { height: 26px !important; }
  .ob-crumb, .ob-busca, .ob-chip-st { display: none !important; }
  #v-painel > [id^="pn-tab-"] { padding: 14px 12px 24px !important; }
  #v-painel .ob-comando { padding: 14px !important; }
  .ob-comando-h { flex-wrap: wrap !important; }
  .ob-herois { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #v-painel .ob-comando .ob-heroi b[id^="pn-k-"] { font-size: 19px !important; }
  .ob-heroi .ob-desc { display: none; }
  #v-painel #pn-filtros { padding: 10px 12px !important; display: flex !important; flex-wrap: wrap; }
  #pn-filtros > div { display: none !important; }
  #pn-filtros.ob-expandido > div:not([style*="display: none"]):not([style*="display:none"]) { display: inline-flex !important; }
  .ob-mais-filtros { margin-left: 0; width: 100%; justify-content: center; }
  #v-painel #pn-abas { padding: 0 12px !important; }
}

/* números que contam até o valor: o elemento original (lido pelos testes e leitores de tela) fica fora da área visível */
.ob-heroi b.ob-valor { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap; }
.ob-heroi .ob-conta { font-size: 30px; font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ob-heroi .ob-conta { font-size: 19px; } }

/* ── Ajustes de fidelidade (comparação lado a lado com a maquete) ── */
.top { z-index: 220 !important; }
#v-painel > .ph { display: none !important; }
.ob-acoes { display: flex; gap: 8px; align-items: center; flex: none; }
.ob-acoes:empty { display: none; }
.ob-acoes .ob-bt { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #c9d5e1; background: #fff; color: var(--mf-azul-escuro); white-space: nowrap; transition: background var(--t), border-color var(--t); }
.ob-acoes .ob-bt:hover { border-color: var(--mf-azul-claro); background: #f7fafc; }
.ob-acoes .ob-bt.pri { background: var(--mf-azul-escuro); color: #fff; border-color: var(--mf-azul-escuro); }
.ob-acoes .ob-bt[hidden] { display: none !important; }
#v-painel #pn-filtros select { max-width: 170px; text-overflow: ellipsis; }
#ecpo-btn-cotacoes { height: 26px; border-radius: 13px !important; font-size: 11.5px !important; }
@media (max-width: 900px) { .ob-acoes { display: none !important; } }

/* ── Visão "Todos — Brasil + LATAM" na composição do Dashboard aprovado ── */
#pn-todos { display: flex; flex-direction: column; padding: 0 0 26px; }
#pn-todos > .ph { display: none !important; }
#pn-todos > .ob-td-faixa { order: -3; border-radius: 0 !important; margin: 0 !important; padding: 22px 24px 20px !important; gap: 16px !important; }
#pn-todos > .ob-td-faixa .ob-heroi > b { font-size: 30px; font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; }
#pn-todos > div:has(#pn-todos-pais) {
  order: -2; border: 0 !important; border-bottom: 1px solid var(--ob-linha) !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 14px 24px !important; gap: 8px !important; background: #fff !important;
}
#pn-todos > div:has(#pn-todos-pais) label { font-size: 12px !important; font-weight: 500 !important; color: var(--ob-texto) !important; margin: 0 0 0 4px !important; }
#pn-todos > div:has(#pn-todos-pais) select { height: 30px; border: 1px solid var(--ob-linha) !important; border-radius: 16px !important; padding: 0 26px 0 12px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--ob-tinta) !important; background-color: #fff !important; }
#pn-todos > .ob-td-grade { order: 0; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 16px; padding: 20px 24px 0; margin: 0 !important; }
#pn-todos > .ob-td-grade > .ob-td-exec { grid-row: span 2; }
.ob-td-cartao { background: #fff; border: 1px solid var(--ob-linha); border-radius: 12px; padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ob-td-cartao .ob-anel-grade { grid-template-columns: 150px minmax(0,1fr); }
.ob-td-anel { width: 150px; height: 150px; display: block; }
.ob-td-anel text { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; }
.ob-td-barras { width: 100%; height: auto; display: block; }
.ob-td-barras text { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; }
.ob-td-barra { transform-box: fill-box; transform-origin: bottom; animation: ob-sobe .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ob-sobe { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ob-td-aviso { margin: 0; font-size: 12.5px; color: var(--ob-sutil); }
#pn-todos > div:has(> table) { order: 1; margin: 16px 24px 0 !important; border: 1px solid var(--ob-linha) !important; border-radius: 12px !important; box-shadow: none !important; }
#pn-todos table td { font-variant-numeric: tabular-nums; }
#pn-todos table tr[data-abrir="true"]:hover td { background: #f7f9fc !important; }
@media (max-width: 900px) {
  #pn-todos > .ob-td-grade { grid-template-columns: minmax(0,1fr); padding: 14px 12px 0; }
  #pn-todos > .ob-td-grade > .ob-td-exec { grid-row: auto; }
  #pn-todos > .ob-td-faixa { padding: 14px !important; }
  #pn-todos > .ob-td-faixa .ob-heroi > b { font-size: 19px; }
  #pn-todos > div:has(> table) { margin: 14px 12px 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .ob-td-barra { animation: none !important; } }
#pn-todos > div:has(#pn-todos-pais) select { width: auto !important; max-width: 260px; }

/* ── Comparativo de Performance (país → regional → unidade) ── */
#ob-comparativo { border: 1px solid var(--ob-linha) !important; box-shadow: none !important; border-radius: 12px !important; padding: 16px 18px !important; display: grid; gap: 10px; }
table.ob-comp-tab tbody tr.ob-comp-drill { cursor: pointer; }
table.ob-comp-tab tbody tr.ob-comp-drill:hover td { background: #f3f7fb !important; }
table.ob-comp-tab .ob-comp-nome { font-weight: 600; color: var(--ob-tinta); }
table.ob-comp-tab .ob-sutil { font-weight: 500; color: var(--ob-sutil); }
table.ob-comp-tab tfoot td { border-top: 1px solid var(--ob-linha); border-bottom: 0; font-weight: 600; background: #f7f9fc; }
table.ob-comp-tab td.n, table.ob-comp-tab th.n { text-align: right; }
.ob-comp-h-todos { order: 1; margin: 18px 24px -8px !important; }

/* Tela Cotações: largura para a Montserrat (os botões Aprovar ficavam cortados à direita) */
#ecpo-cotacoes > div { width: min(1280px, 96vw) !important; border: 1px solid var(--ob-linha); border-radius: 14px !important; box-shadow: var(--sha) !important; }
#ecpo-cotacoes table { font-size: 12px !important; }
#ecpo-cotacoes input { min-width: 0; }

/* Usuários e Acessos: e-mails longos quebram dentro da coluna; ações no padrão de botões secundários */
#v-usuarios table td { overflow-wrap: anywhere; word-break: normal; }
/* 18/10/2026 — e-mail não invade a coluna Nome; ações quebram linha em vez de serem cortadas */
#v-usuarios table { table-layout: fixed !important; width: 100% !important; }
#v-usuarios table th:nth-child(1) { width: 23%; } #v-usuarios table th:nth-child(2) { width: 18%; }
#v-usuarios table th:nth-child(3) { width: 17%; } #v-usuarios table th:nth-child(4) { width: 8%; }
#v-usuarios table th:nth-child(5) { width: 8%; } #v-usuarios table th:nth-child(6) { width: 26%; }
#v-usuarios tbody td { white-space: normal !important; overflow: hidden; overflow-wrap: anywhere !important; vertical-align: middle; }
#v-usuarios tbody td:first-child { word-break: break-all; }
#v-usuarios tbody td:last-child { white-space: normal !important; line-height: 2; }
#v-usuarios tbody td button { font-family: inherit !important; font-size: 11.5px !important; font-weight: 600 !important; height: 28px; padding: 0 10px !important; margin: 2px 2px !important;
  background: #fff !important; color: var(--mf-azul-escuro) !important; border: 1px solid #c9d5e1 !important; border-radius: 7px !important; cursor: pointer; transition: border-color var(--t), background var(--t); }
#v-usuarios tbody td button:hover { border-color: var(--mf-azul-claro) !important; background: #f7fafc !important; }
#v-usuarios tbody td button[onclick*="esativ"], #v-usuarios tbody td button[data-acao="desativar"] { color: var(--mf-vermelho-medio) !important; border-color: #f1c9ce !important; }