/* =============================================================
 * ORIENTE PORTAL · pele de 11/2026
 * -------------------------------------------------------------
 * Só aparência. Carregada por ÚLTIMO no index.html. Nenhuma regra aqui
 * esconde ou troca o comportamento de um controle.
 * Para voltar ao visual anterior: remova o <link> deste arquivo.
 *
 * Direção: uma única peça escura. O menu é uma ilha de cantos largos, com a logo
 * dentro, que desce do petróleo ao verde profundo até o "Recolher". Todo o resto
 * é claro e calmo: topo sem barra, controles brancos, e cor só onde ela informa
 * (item ativo, aba aberta, botão principal, pontinho da etapa no Kanban).
 * O conteúdo passa desfocado por baixo do topo e das abas.
 * Desempenho: desfoque real (backdrop-filter) só em poucas peças da casca e nos
 * blocos que aparecem em pouca quantidade. Cartão de Kanban e tabela não desfocam:
 * são translúcidos ou sólidos, porque telas longas com vidro pesam na GPU.
 * Cantos: pílula em botão e menu, 12 em campo, 20 em bolha, 24 em modal e trilho.
 * ============================================================= */

:root{
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-display:'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,monospace;
  --r:20px; --r-lg:20px; --radius:20px; --radius-sm:12px;
  --trilho-topo:#0c2629;
  --trilho-meio:#0e3a38;
  --trilho-fim:#146148;
  --trilho-degrade:linear-gradient(180deg,var(--trilho-topo) 0%,var(--trilho-topo) 22%,var(--trilho-meio) 60%,var(--trilho-fim) 100%);
  --trilho-linha:rgba(255,255,255,.12);
  --trilho-tinta:#f0f6f4;
  --trilho-tinta-2:#c3d5cf;
  --trilho-tinta-3:#9db6af;
  --vidro:rgba(255,255,255,.58);
  --vidro-forte:rgba(255,255,255,.74);
  --vidro-borda:rgba(255,255,255,.72);
  --vidro-desfoque:blur(20px) saturate(175%);
  --vidro-relevo:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.28);
  --vidro-sombra:var(--vidro-relevo), 0 1px 2px rgba(9,40,32,.04), 0 8px 22px -16px rgba(9,40,32,.18);
  --vidro-sombra-alta:var(--vidro-relevo), 0 2px 4px rgba(9,40,32,.05), 0 14px 30px -18px rgba(9,40,32,.26);
  --vidro-faixa:rgba(243,246,244,.7);
  --bolha:rgba(255,255,255,.8);
}
:root:not([data-theme="dark"]){
  --bg:#f3f6f4; --bg-2:#f7f9f8; --bg-soft:#f4f7f5; --panel:#ffffff; --card:#ffffff;
  --ink:#10201c; --ink-2:#3f514b; --ink-3:#566862; --muted:#3f514b; --ink-soft:#3f514b;
  --line:rgba(16,50,42,.11); --line-soft:rgba(16,50,42,.07); --line-2:rgba(16,50,42,.2); --line-strong:rgba(16,50,42,.2);
  --hover:rgba(15,122,99,.07); --chip:rgba(16,50,42,.06); --search:rgba(255,255,255,.6);
  --accent:#0f7a63; --brand-strong:#0d5f4d; --accent-deep:#0a4c3e; --accent-ink:#0a5546;
  --accent-soft:#d8eee6; --accent-50:rgba(15,122,99,.07);
  --shadow:0 18px 38px -20px rgba(9,40,32,.4);
  --shadow-soft:var(--vidro-sombra); --e1:var(--vidro-sombra); --e2:var(--vidro-sombra-alta);
  --shadow-sm:var(--vidro-sombra); --shadow-card:var(--vidro-sombra); --shadow-card-hover:var(--vidro-sombra-alta);
}
:root[data-theme="dark"]{
  --trilho-topo:#0a1c1b; --trilho-meio:#0c2a27; --trilho-fim:#0f4635;
  --vidro:rgba(255,255,255,.07);
  --vidro-forte:rgba(255,255,255,.12);
  --vidro-borda:rgba(255,255,255,.14);
  --vidro-relevo:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04);
  --vidro-sombra:var(--vidro-relevo), 0 10px 24px -14px rgba(0,0,0,.7);
  --vidro-sombra-alta:var(--vidro-relevo), 0 18px 36px -16px rgba(0,0,0,.8);
  --vidro-faixa:rgba(16,23,21,.62);
  --bolha:rgba(30,42,40,.72);
}

/* ---------- tipografia ---------- */
html, body, .app, .main, .content, button, input, textarea, select, .btn{ font-family:var(--font-body) !important; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.panel-title,.page-title,.mst-txt strong{ font-family:var(--font-display) !important; letter-spacing:-.005em !important; }
[style*="Bricolage"], [style*="Sora"]{ font-family:var(--font-display) !important; }
code, kbd, pre, .mono, [style*="JetBrains"], [style*="ui-monospace"], #catVitrineApp .cat-vit-card-codigo{ font-family:var(--font-code) !important; letter-spacing:0; }
td, th, .kpi, .kpi *, [class*="kpi-val"], [class*="-valor"], [class*="preco"]{ font-variant-numeric:tabular-nums; }

/* ---------- fundo único: a mesma cor atrás do menu, do topo e do conteúdo ---------- */
html, body{ background:var(--bg) !important; background-image:none !important; }
.main, .content, .content .page, .content .page.active{ background:transparent !important; }

/* ---------- trilho (menu lateral) ---------- */
.sidebar, .app.casca-rail .sidebar{
  --side:transparent; --side-sel:rgba(255,255,255,.14); --side-ink:var(--trilho-tinta-2);
  --panel:#123e3c; --bg-2:#123e3c; --hover:rgba(255,255,255,.1); --chip:rgba(255,255,255,.1);
  --ink:var(--trilho-tinta); --ink-2:var(--trilho-tinta-2); --ink-3:var(--trilho-tinta-3); --muted:var(--trilho-tinta-2);
  --line:var(--trilho-linha); --line-soft:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.18);
  --accent-50:rgba(255,255,255,.09); --accent-soft:rgba(255,255,255,.12); --accent-ink:#ffffff; --accent:#1f6a5c; --on-accent:#ffffff;
  --bg:rgba(255,255,255,.06);
  background:transparent !important; border-right:0 !important; box-shadow:none !important;
  color:var(--trilho-tinta-2); isolation:isolate;
}
.sidebar::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:8px; left:8px; right:8px; bottom:8px;
  background:var(--trilho-degrade); border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px -18px rgba(9,40,32,.6);
}
.sidebar .logo{ background:transparent !important; border:0 !important; }
.sidebar .sidebar-footer, .sidebar .rail-pin, .app.casca-rail .sidebar .rail-pin{
  background:transparent !important; background-image:none !important; color:var(--trilho-tinta-2) !important;
}
.sidebar .rail-pin{ border-top:1px solid var(--trilho-linha) !important; margin:0 8px 8px !important; width:auto !important; border-radius:0 0 24px 24px !important; }
.sidebar .rail-pin:hover{ color:#fff !important; background:rgba(255,255,255,.07) !important; }
/* menu fechado: o botão de expandir fica no eixo dos ícones */
.app.casca-rail .sidebar:not(:hover, .rail-fixa *) .rail-pin{
  display:flex !important; align-items:center !important; justify-content:center !important;
  align-self:center !important; width:44px !important; margin:0 auto 12px !important; padding:0 !important; gap:0 !important;
  height:40px !important; border-radius:999px !important; border-top:0 !important;
}
.sidebar .nav-item, .sidebar .nav-item-meupainel{
  color:var(--trilho-tinta-2) !important; border-radius:999px !important; font-weight:500 !important;
}
.sidebar .nav-item svg, .sidebar .nav-item-meupainel svg{ color:inherit !important; stroke:currentColor; }
.sidebar .nav-item:hover, .sidebar .nav-item-meupainel:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
.sidebar .nav-fixos{ background:transparent !important; border-color:var(--trilho-linha) !important; box-shadow:none !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav{ padding-left:18px !important; padding-right:18px !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-fixos{
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--trilho-linha) !important;
  border-radius:0 !important; margin:0 0 12px !important; padding:8px 0 10px !important;
}
.app.casca-rail .sidebar:not(:hover, .rail-fixa *) .nav-fixos{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  border-bottom:1px solid var(--trilho-linha) !important;
  margin:0 0 10px !important; padding:0 0 8px !important; align-self:stretch !important; align-items:center !important;
}
.sidebar .nav-module{ color:var(--trilho-tinta-3) !important; background:transparent !important; }
.sidebar .nav-divisor{ background:var(--trilho-linha) !important; border-color:var(--trilho-linha) !important; }

/* item ativo: pílula de vidro clara sobre o trilho, em todos os estados do menu */
html body .sidebar .nav-item.active, html body .sidebar .nav-item.ativo,
html body .sidebar .nav-item-meupainel.active, html body .sidebar .nav-item-meupainel.ativo,
html body .sidebar .nav-item[aria-current="page"],
html body .app.casca-rail .sidebar .nav-item.active, html body .app.casca-rail .sidebar .nav-item.ativo,
html body .app.casca-rail .sidebar .nav-item-meupainel.active, html body .app.casca-rail .sidebar .nav-item-meupainel.ativo,
html body .app.casca-rail .sidebar:not(:hover, .rail-fixa *) .nav-item.active,
html body .app.casca-rail .sidebar:not(:hover, .rail-fixa *) .nav-item-meupainel.active,
html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.active, html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.ativo,
html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.active, html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.ativo{
  background:rgba(255,255,255,.9) !important; background-image:none !important; color:#0c2d29 !important;
  font-weight:600 !important; box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(0,0,0,.5) !important;
}
html body .sidebar .nav-item.active svg, html body .sidebar .nav-item.ativo svg,
html body .sidebar .nav-item-meupainel.active svg, html body .sidebar .nav-item-meupainel.ativo svg,
html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.active svg, html body .app.casca-rail .sidebar:not(:hover, .rail-fixa *) .nav-item.active svg,
html body .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.active svg, html body .app.casca-rail .sidebar:not(:hover, .rail-fixa *) .nav-item-meupainel.active svg{
  color:#0d5f4d !important; stroke:#0d5f4d !important;
}

/* com o menu à esquerda ele fica no fluxo da página: a peça escura ancora nele e a logo fica por cima do topo */
@media (min-width:1367px){
  .app.casca-rail .sidebar{ position:relative; z-index:41; }
}
/* menu em gaveta (até 1366 px): a peça ocupa a altura toda, atrás da logo */
@media (max-width:1366px){
  .sidebar::before{ top:0; left:0; right:0; bottom:0; border-radius:0 24px 24px 0; }
}

/* ---------- topo: bolhas soltas ----------
   A faixa desfocada atrás delas é um ::after: no próprio .topbar o desfoque prenderia
   os painéis fixos que moram lá dentro. */
.topbar{ border-bottom:0 !important; box-shadow:none !important; }
@media (max-width:768px){
  .topbar{ background:var(--bg) !important; }
}
.topbar .topbar-icon-btn, .topbar .sidebar-toggle, #notifBell, .topbar-perfil, .modulo-switcher-top, .topbar .topbar-search{
  background:var(--panel) !important; border:1px solid transparent !important;
  border-radius:999px !important; box-shadow:var(--vidro-sombra) !important;
}
.topbar .topbar-icon-btn:hover, .topbar .sidebar-toggle:hover, #notifBell:hover, .topbar-perfil:hover, .modulo-switcher-top:hover, .modulo-switcher-top.open{
  background:var(--accent-soft) !important; box-shadow:var(--vidro-sombra) !important;
}
.topbar .topbar-search:focus-within{ background:var(--panel) !important; border-color:var(--accent) !important; box-shadow:var(--vidro-relevo), 0 0 0 3px var(--accent-soft) !important; }
.topbar .topbar-search-input{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.topbar .topbar-search-input:focus, .topbar .topbar-search-input:focus-visible{ outline:none !important; box-shadow:none !important; }
.modulo-switcher-top .mst-av{ border-radius:999px !important; }

@media (min-width:769px){
  .topbar{ background:transparent !important; min-height:70px; align-items:center; }
  .topbar::after{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:var(--vidro-faixa); -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  }
  .topbar .sidebar-toggle{ width:42px !important; height:42px !important; flex:none; }
  .modulo-switcher-top, .topbar .topbar-search{ min-height:42px; }
  .topbar .topbar-actions{ gap:6px !important; align-items:center; flex:none; }
}
.topbar-perfil-av, .topbar-perfil-av img{ border-radius:999px !important; }

/* a logo mora dentro do menu: só o símbolo com ele fechado, a logo inteira com ele aberto */
@media (min-width:1367px){
  .app.casca-rail .topbar{ padding-left:22px !important; }
  .app.casca-rail .logo::before{
    top:8px; left:14px; width:40px; height:var(--topbar-height,70px);
    background:url('../../img/simbolo-oriente-portal.png') left center / 44px no-repeat;
  }
  .app.casca-rail:has(.sidebar:is(:hover, .rail-fixa *)) .logo::before{
    left:30px; width:160px; background:url('../../img/logo-oriente-portal.png?v=portal-2026-10') left center / contain no-repeat;
  }
}
/* sem o menu à esquerda, o topo começa depois da logo: ela cobria o hambúrguer */
@media (min-width:1101px) and (max-width:1366px){
  .app.casca-rail .topbar{ padding-left:204px !important; }
}
/* telas pequenas: símbolo inteiro no lugar da logo, para sobrar espaço */
@media (min-width:769px) and (max-width:1100px){
  .app.casca-rail .topbar{ padding-left:64px !important; gap:8px; flex-wrap:nowrap !important; }
  .app.casca-rail .logo::before{
    width:40px !important; height:70px !important; left:12px !important; background:url('../../img/simbolo-oriente-portal.png') left center / 44px no-repeat !important;
  }
  .topbar .topbar-search{ min-width:0 !important; flex:1 1 auto !important; }
  .topbar .topbar-actions{ flex:none !important; }
}

/* ---------- abas: bolhas sobre a faixa de vidro ---------- */
#tms-tabs-bar.tms-tabs-bar{
  background:var(--vidro-faixa) !important; border:0 !important; border-top:0 !important; border-bottom:0 !important;
  box-shadow:none !important; outline:0 !important; gap:4px;
  -webkit-backdrop-filter:var(--vidro-desfoque) !important; backdrop-filter:var(--vidro-desfoque) !important;
}
#tms-tabs-bar .tms-tab{
  color:var(--ink-2) !important; background:transparent !important; height:30px !important; align-self:center;
  border:0 !important; border-radius:999px !important; box-shadow:none !important;
}
#tms-tabs-bar .tms-tab:hover{ background:var(--hover) !important; color:var(--ink) !important; }
#tms-tabs-bar .tms-tab.active{
  background:linear-gradient(100deg, var(--trilho-topo), var(--trilho-meio) 60%, var(--trilho-fim)) !important; color:#ffffff !important; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 16px -10px rgba(9,60,46,.7) !important;
}
#tms-tabs-bar .tms-tab *{ color:inherit; }
.tms-tabs-ctl{ background:transparent !important; }
.tms-tabs-ctl::after{ display:none !important; }

/* ---------- bolhas ----------
   Painéis grandes só translúcidos. O desfoque real fica nos blocos que aparecem em pouca quantidade. */
.panel{
  background:var(--bolha) !important; border-radius:20px !important; border:1px solid var(--vidro-borda) !important;
  box-shadow:var(--vidro-sombra) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.kpi, .kn-kpi, .dashboard-widget, .cat-painel-hero-bg{
  background:var(--vidro-forte) !important; background-image:none !important;
  -webkit-backdrop-filter:var(--vidro-desfoque) !important; backdrop-filter:var(--vidro-desfoque) !important;
}
.kpi, .kn-kpi, .dashboard-widget{ border-radius:20px !important; box-shadow:var(--vidro-sombra) !important; }
.kpi, .dashboard-widget{ border:1px solid var(--vidro-borda) !important; }
.dashboard-widget::before{ display:none !important; }
.dashboard-widget:hover{ transform:none !important; box-shadow:var(--vidro-sombra-alta) !important; }
.cat-painel-hero{ border-radius:20px !important; box-shadow:var(--vidro-sombra) !important; }
.cat-painel-hero-bg{ border-radius:20px !important; border:1px solid var(--vidro-borda); }
.cat-painel-hero-bg::after{ display:none !important; }
.modal{
  background:var(--bolha) !important; border-radius:24px !important; border:1px solid var(--vidro-borda) !important;
  box-shadow:var(--vidro-relevo), var(--og-shadow-modal) !important;
  -webkit-backdrop-filter:blur(28px) saturate(170%) !important; backdrop-filter:blur(28px) saturate(170%) !important;
}

.kn-board{ background:transparent !important; }
/* Kanban: a cor da etapa fica só no pontinho, os indicadores ficam brancos */
.kn-col-head{
  background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important;
  clip-path:none !important; border-radius:12px !important;
}
.kn-col-head::before, .kn-col-head::after{ display:none !important; }
html body .kn-kpis .kn-kpi, html body .kn-kpis .kn-kpi[class*="kn-kpi--"]{
  background:var(--panel) !important; background-image:none !important; border-color:transparent !important;
  box-shadow:var(--vidro-sombra) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.kn-card{ background:var(--bolha) !important; border:1px solid var(--vidro-borda) !important; border-radius:18px !important; box-shadow:var(--vidro-sombra) !important; }
.kn-card:hover{ box-shadow:var(--vidro-sombra-alta) !important; }
.kn-col-drop{ border-radius:18px !important; }

/* ---------- botões em pílula, campos suaves ---------- */
.btn, button.btn, a.btn, .dash-act-btn, .crm-ng-btn, .kn-btn, .og-btn{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:0 !important;
}
.btn, button.btn, a.btn, .dash-act-btn{ box-shadow:none !important; }
.btn-primary, button.btn-primary, .dash-act-btn.is-primary{
  background:var(--brand-strong) !important; background-image:none !important; border-color:var(--brand-strong) !important; color:var(--on-accent,#fff) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -10px rgba(9,60,46,.7) !important;
}
.btn-primary:hover, button.btn-primary:hover{ background:var(--accent-deep) !important; border-color:var(--accent-deep) !important; transform:none !important; }
.content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .content textarea, .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .modal textarea{
  border-radius:12px !important;
}

/* ---------- tabelas: sem faixa no cabeçalho ---------- */
.content th, .modal th{
  background:transparent !important; color:var(--ink-3) !important; font-size:12px !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:0 !important; border-bottom:1px solid var(--line) !important;
}
.content tbody tr:hover > td{ background:var(--accent-50); }

/* ---------- foco de teclado visível em tudo ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sidebar :focus-visible{ outline-color:var(--lime,#bbe52a); }

/* quem pediu menos movimento ou menos transparência no sistema recebe a versão sólida */
@media (prefers-reduced-motion: reduce){
  .sidebar *, .topbar *, #tms-tabs-bar *{ transition:none !important; }
}
@media (prefers-reduced-transparency: reduce){
  :root{ --vidro:var(--panel); --vidro-forte:var(--panel); --bolha:var(--panel); --vidro-faixa:var(--bg); --vidro-desfoque:none; }
}