/* Revisão Salarial LOBA — design system v3, baseado em loba.com (preto, Mark Pro, cobre, pílulas) */
[hidden]{ display: none !important; }
/* Fontes do site da LOBA (licença confirmada pela LOBA); ficheiros em client/fonts */
@font-face{ font-family:'MarkPro'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/MarkPro-Light.woff2') format('woff2'); }
@font-face{ font-family:'MarkPro'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/MarkPro-Bold.woff2') format('woff2'); }
@font-face{ font-family:'MarkPro'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/MarkPro-Heavy.woff2') format('woff2'); }
@font-face{ font-family:'Chronicle'; font-weight:300; font-style:italic; font-display:swap; src:url('fonts/ChronicleDisp-XLightItalic.woff2') format('woff2'); }
:root{
  color-scheme: light dark;
  /* tema claro: branco e cinzentos do site, o mesmo cobre; cabeçalho sempre preto como no site */
  --bg: #ffffff;
  --surface: #f2f0ec;
  --surface-2: #e5e2dc;
  --border: #bdb9b0;
  --ink: #000000;
  --ink-dim: #2e2e2e;
  --ink-faint: #474747;
  --navy: #000000;
  --navy-2: #0c0c0c;
  --accent: #b84a12;
  --accent-ink: #ffffff;
  --accent-soft: #f9e0d2;
  --ok: #0a6a5d; --ok-bg: #d3f0ea;
  --warn: #7a5000; --warn-bg: #fde9b8;
  --danger: #b3200f; --danger-bg: #fbd9d3;
  --info: #0d64a0; --info-bg: #d3e8f6;
  --sombra: 0 1px 2px rgba(20,20,20,.05), 0 10px 30px -14px rgba(20,20,20,.18);
  --brilho: radial-gradient(60% 90% at 100% 0%, rgba(226,115,60,.16) 0%, transparent 70%);
  --radius-s: 6px; --radius-m: 12px; --radius-l: 24px;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sans: 'MarkPro', -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Chronicle', Georgia, serif;
}
/* Tema escuro: automático, segundo a definição do sistema/navegador do utilizador. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#0c0c0c; --surface-2:#171717; --border:#2b2b2b;
    --ink:#ffffff; --ink-dim:#c9c9c9; --ink-faint:#8c8c8c;
    --accent:#e2733c; --accent-ink:#0b0b0b; --accent-soft:#2a1810;
    --ok:#2ec2af; --warn:#f2b43c; --danger:#ff5a4a; --info:#2299dd;
    --ok-bg:#0d2a26; --warn-bg:#2d2208; --danger-bg:#34140f; --info-bg:#0f2433;
    --sombra: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
    --brilho: radial-gradient(60% 90% at 100% 0%, rgba(143,58,20,.38) 0%, transparent 70%);
  }
}
/* Tema claro forçado (data-theme="light") ou escuro forçado (data-theme="dark"), se algum dia houver seletor manual. */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#000000; --surface:#0c0c0c; --surface-2:#171717; --border:#2b2b2b;
  --ink:#ffffff; --ink-dim:#c9c9c9; --ink-faint:#8c8c8c;
  --accent:#e2733c; --accent-ink:#0b0b0b; --accent-soft:#2a1810;
  --ok:#2ec2af; --warn:#f2b43c; --danger:#ff5a4a; --info:#2299dd;
  --ok-bg:#0d2a26; --warn-bg:#2d2208; --danger-bg:#34140f; --info-bg:#0f2433;
  --sombra: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
  --brilho: radial-gradient(60% 90% at 100% 0%, rgba(143,58,20,.38) 0%, transparent 70%);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden; max-width:100vw}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55}
a{color:inherit}

/* login */
.ecra-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:32px; width:100%; max-width:420px; box-shadow:0 8px 30px -8px rgba(20,20,20,.18)}
.login-card .brand{font-weight:800; font-size:18px; margin-bottom:18px}
.login-card .brand small{display:block; font-weight:400; color:var(--ink-faint); font-size:12px; margin-top:2px}
#signin{min-height:420px}
#signin iframe{width:100% !important; min-height:420px !important; border:0}

/* navbar */
.mock-navbar{background:var(--navy); color:#fff; display:flex; align-items:center; gap:18px; padding:10px 16px; font-size:13px; flex-wrap:wrap}
.mock-navbar .logo{font-weight:800; letter-spacing:.02em; margin-right:8px}
.mock-navbar a{color:#fff; text-decoration:none; opacity:.85; padding:4px 2px; border-bottom:1px solid transparent}
.mock-navbar a.ativo{opacity:1; border-bottom-color:#fff}
.mock-navbar .spacer{flex:1}
.mock-navbar .user{display:flex; align-items:center; gap:8px; font-size:12px}
.mock-navbar .avatar{width:26px; height:26px; border-radius:50%; background:#465063}

.conteudo-app{padding:28px clamp(16px,4vw,48px) 80px; max-width:1100px; margin:0 auto}
.pagina-app h1{font-size:22px; margin:0 0 6px}
.pagina-app .lede{color:var(--ink-dim); font-size:14px; margin:0}

.frame{border:1px solid var(--border); border-radius:var(--radius-l); background:var(--surface); box-shadow:0 8px 30px -8px rgba(20,20,20,.12); overflow:hidden; margin-top:16px}
.frame .fbar{padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:11.5px; font-weight:600; color:var(--ink-dim)}
.frame .fbody{padding:16px}
.frame .fbody.pad0{padding:0; overflow:auto; max-height:calc(100vh - 150px)}
.mock-table.clean select, .mock-table.clean input[type="text"]{max-width:170px}

.mock-table.clean{width:100%; border-collapse:collapse; font-size:12.5px}
.mock-table.clean thead th{position:sticky; top:0; z-index:2; box-shadow:0 1px 0 var(--border)}
.mock-table.clean th{text-align:left; padding:8px 10px; font-size:11px; color:var(--ink-faint); border:1px solid var(--border); font-weight:600; background:var(--surface-2)}
.mock-table.clean td{padding:8px 10px; border:1px solid var(--border)}
.mock-table.clean tbody tr:nth-child(even) td{background:var(--surface-2)}

.btn{font-size:12.5px; padding:8px 14px; border-radius:7px; border:1px solid transparent; cursor:pointer; font-family:var(--sans)}
.btn.dark{background:#333; color:#fff}
.btn.outline{background:transparent; border:1px solid var(--border); color:var(--ink)}
.btn.perigo{background:transparent; border:1px solid var(--danger); color:var(--danger)}
.btn.perigo:hover{background:var(--danger-bg)}
.frame.perigo{border-color:var(--danger)}
.frame.perigo .fbar{background:var(--danger-bg); color:var(--danger)}
.lista-pessoas{max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-m); padding:8px}
.lista-pessoas label{display:flex; align-items:center; gap:8px; padding:4px 6px; font-size:12.5px; cursor:pointer}
.lista-pessoas label:hover{background:var(--surface-2)}
.mock-navbar .btn.outline{border-color:rgba(255,255,255,.4); color:#fff}

.pill{display:inline-flex; align-items:center; font-size:11px; padding:3px 10px; border-radius:100px; background:var(--surface-2); color:var(--ink-dim); border:1px solid var(--border)}

select{font-family:var(--sans); font-size:12.5px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--ink)}
input[type="text"], input[type="number"], input[type="date"], input[type="file"]{
  font-family:var(--sans); font-size:12.5px; padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
input::placeholder{color:var(--ink-faint)}

/* abas (sub-menus dentro de uma página, ex.: Backoffice) */
.abas{display:flex; gap:4px; margin:16px 0 0; border-bottom:1px solid var(--border); flex-wrap:wrap}
.aba{padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink-dim); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; font-family:var(--sans)}
.aba:hover{color:var(--ink)}
.aba.ativa{color:var(--accent); border-bottom-color:var(--accent)}
.painel{display:none}
.painel.ativo{display:block}

.grid-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px}
.kpi{background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-m); padding:14px 16px}
.kpi.negativo{border-left-color:var(--danger)}
.kpi .lbl{font-size:11.5px; color:var(--ink-dim); font-weight:600}
.kpi .val{font-size:24px; font-weight:800; line-height:1.2; margin:2px 0}
.kpi.negativo .val{color:var(--danger)}
.kpi .hint{font-size:11px; color:var(--ink-faint)}

.linha-inputs{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.campo{display:flex; flex-direction:column; gap:5px}
.campo label{font-size:11px; font-weight:700; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.02em}
.campo input, .campo select{font-family:var(--sans); font-size:13.5px; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--ink); min-width:160px}
input[type="number"].input-mini{width:100px}
.barra-total{display:flex; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:13px}
.barra-total .valor.ok{color:var(--ok); font-weight:700}
.barra-total .valor.aviso{color:var(--warn); font-weight:700}
.estado-msg{margin-top:12px; font-size:13px; padding:10px 14px; border-radius:8px}
.estado-msg.sucesso{background:var(--ok-bg); color:var(--ok)}
.estado-msg.erro{background:var(--danger-bg); color:var(--danger)}
.estado-msg.aviso{background:var(--warn-bg); color:var(--warn)}
.estado-msg.info{background:var(--info-bg); color:var(--info)}

/* Simulador (CHO/Líder) */
.linha-simulador td{background:var(--surface-2); padding:18px 20px}
.sim-carregando{color:var(--ink-dim); font-size:13px}
.sim-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 24px; margin-bottom:16px}
.sim-campo label{display:block; font-size:11px; font-weight:600; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px}
.sim-campo input, .sim-campo select, .sim-campo textarea{width:100%}
.sim-campo .hint{font-size:11px; color:var(--ink-faint); margin-top:4px}
.sim-beneficios{display:flex; flex-wrap:wrap; gap:10px 18px}
.sim-beneficio-item{display:flex; align-items:center; gap:6px; font-size:13px}
.sim-beneficio-item input{margin:0}
.sim-impacto{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:16px}
.sim-impacto .lbl{font-size:11px; color:var(--ink-dim); font-weight:600; text-transform:uppercase}
.sim-impacto .val{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.sim-nota textarea{min-height:60px; resize:vertical; font-family:var(--sans); font-size:13px; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--ink)}

/* filtros nas tabelas (barra por cima de cada tabela; ver ativarFiltroTabela em main.js) */
.filtro-tabela{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface)}
.filtro-tabela[hidden]{display:none}
.filtro-tabela input[type="search"]{font-family:var(--sans); font-size:12.5px; padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--ink); min-width:200px; flex:0 1 260px}
.filtro-tabela .filtro-coluna{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-dim); max-width:100%}
.filtro-tabela .filtro-coluna select{max-width:220px; text-overflow:ellipsis}
.filtro-tabela .filtro-contagem{margin-left:auto; font-size:11px; color:var(--ink-faint)}
.filtro-oculta{display:none !important}

/* progresso / avisos */
.barra-progresso{height:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:100px; overflow:hidden; margin:8px 0 4px}
.barra-progresso > div{height:100%; background:var(--accent)}
.fora-intervalo{outline:2px solid var(--warn); outline-offset:-1px}
.pill.pontual{background:var(--info-bg); color:var(--info); border-color:transparent}

/* =====================================================================
   v2 — redesenho visual (hierarquia, cor com significado, indicadores, navegação)
   Tudo usa os tokens acima, por isso funciona nos dois temas.
   ===================================================================== */

/* --- navegação: sticky, agrupada por papel, página ativa evidente --- */
.mock-navbar{position:sticky; top:0; z-index:50; gap:6px 10px; padding:0 20px; min-height:56px; box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 20px -10px rgba(0,0,0,.5)}
.mock-navbar .logo{display:flex; flex-direction:column; line-height:1.1; margin-right:14px; font-size:16px}
.mock-navbar .logo small{font-size:9.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.85}
.nav-grupo{display:flex; align-items:center; gap:2px; padding:0 10px; border-left:1px solid rgba(255,255,255,.12)}
.nav-rotulo{font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.45; margin-right:6px}
.mock-navbar a{padding:7px 10px; border-radius:8px; border-bottom:none; opacity:.78; transition:background .15s, opacity .15s; white-space:nowrap}
.mock-navbar a:hover{opacity:1; background:rgba(255,255,255,.08)}
.mock-navbar a.ativo{opacity:1; background:var(--accent); color:#fff; font-weight:600; border-bottom:none}
.mock-navbar .avatar{background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700}
/* Portáteis (≤1500px): esconde os rótulos dos grupos para a barra caber numa linha. */
@media (max-width:1500px){ .nav-rotulo{display:none} .nav-grupo{padding:0 6px} .mock-navbar{gap:4px 6px} }
@media (max-width:980px){
  .mock-navbar{overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; padding:0 12px}
  .nav-grupo{flex:none}
  .mock-navbar .user span{display:none}
}

/* --- página: mais largura útil, cabeçalho com hierarquia --- */
.conteudo-app{max-width:min(1440px, 100%); padding:32px clamp(16px,3.2vw,56px) 96px}
.pagina-app h1{font-size:26px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px}
.pagina-app .lede{font-size:14px; line-height:1.6; max-width:78ch; color:var(--ink-dim)}
.pagina-app > .lede{margin-bottom:6px}
.frame{margin-top:24px; border-radius:16px; box-shadow:var(--sombra)}
.frame .fbar{display:flex; align-items:center; gap:8px; padding:13px 20px; background:var(--surface); font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:.005em}
.frame .fbar .ftitle::before{content:''; display:inline-block; width:4px; height:14px; border-radius:2px; background:var(--accent); margin-right:10px; vertical-align:-2px}
.frame .fbody{padding:20px}
.frame .fbody > .lede:first-child{margin-bottom:14px}
.frame h4{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim)}

/* --- tabelas: mais arejadas, números alinhados, hover --- */
.mock-table.clean{font-size:13px; font-variant-numeric:tabular-nums}
.mock-table.clean th{padding:11px 14px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:var(--surface-2); border:none; border-bottom:1px solid var(--border)}
.mock-table.clean td{padding:11px 14px; border:none; border-bottom:1px solid var(--border); vertical-align:middle}
.mock-table.clean tbody tr:nth-child(even) td{background:transparent}
.mock-table.clean tbody tr:hover td{background:var(--surface-2)}
.mock-table.clean tbody tr:last-child td{border-bottom:none}
.mock-table.clean th.num, .mock-table.clean td.num{text-align:right; white-space:nowrap}
.linha-simulador:hover td{background:var(--surface-2) !important}

/* --- botões e campos --- */
.btn{font-weight:600; padding:9px 16px; border-radius:9px; transition:background .15s, border-color .15s, transform .05s}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--accent); color:#fff}
.btn.dark:hover{filter:brightness(1.08)}
.btn.outline:hover{background:var(--surface-2)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible, .mock-navbar a:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
select, input[type="text"], input[type="number"], input[type="date"], input[type="search"]{border-radius:8px}

/* --- estados do processo: pílulas com cor por etapa --- */
.pill{font-weight:600; padding:3px 11px; letter-spacing:.01em; white-space:nowrap}
.pill.est-neutro{background:var(--surface-2); color:var(--ink-dim)}
.pill.est-info{background:var(--info-bg); color:var(--info); border-color:transparent}
.pill.est-atencao{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.pill.est-decisao{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.pill.est-ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.pill.est-fora{background:transparent; color:var(--ink-faint); border-style:dashed}
.pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:7px; flex:none}

/* --- cartões KPI: tom, números maiores --- */
.grid-kpi{gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{border-radius:12px; padding:16px 18px; border-left-width:4px; background:var(--surface); box-shadow:0 1px 0 rgba(0,0,0,.02)}
.kpi .lbl{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim)}
.kpi .val{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; font-variant-numeric:tabular-nums}
.kpi .hint{font-size:12px; color:var(--ink-faint)}
.kpi.positivo{border-left-color:var(--ok)} .kpi.positivo .val{color:var(--ok)}
.kpi.atencao{border-left-color:var(--warn)} .kpi.atencao .val{color:var(--warn)}
.kpi.negativo{border-left-color:var(--danger)}
.kpi.neutro{border-left-color:var(--border)}
.kpi.info{border-left-color:var(--info)}

/* faixa "o que preciso de fazer agora" no topo das páginas */
.faixa-resumo{margin-top:18px}
.faixa-resumo .grid-kpi{margin-top:0}
.faixa-vazia{display:flex; align-items:center; gap:10px; padding:14px 18px; border:1px dashed var(--border); border-radius:12px; color:var(--ink-dim); font-size:13.5px; background:var(--surface)}

/* --- indicadores: barras --- */
.barra-progresso{height:10px; border-radius:100px; border:none; background:var(--surface-2)}
.barra-progresso > div{border-radius:100px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff))}
.funil{display:flex; height:16px; border-radius:100px; overflow:hidden; background:var(--surface-2); margin:14px 0 8px; gap:2px}
.funil > div{min-width:3px; transition:flex .3s}
.funil-legenda{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:var(--ink-dim); margin-bottom:6px}
.funil-legenda span{display:inline-flex; align-items:center; gap:6px}
.funil-legenda i{width:10px; height:10px; border-radius:3px; display:inline-block}
.tom-neutro{background:color-mix(in srgb, var(--ink-faint) 55%, var(--surface-2))}
.tom-info{background:var(--info)} .tom-atencao{background:var(--warn)} .tom-decisao{background:var(--accent)} .tom-ok{background:var(--ok)} .tom-fora{background:var(--border)} .tom-danger{background:var(--danger)}
.mini-barra{display:flex; align-items:center; gap:10px; min-width:130px; justify-content:flex-end}
.mini-barra .trilho{flex:1; height:8px; border-radius:100px; background:var(--surface-2); overflow:hidden; min-width:60px; border:1px solid var(--border)}
.mini-barra .trilho > div{height:100%; border-radius:100px; background:var(--accent)}
.mini-barra.ok .trilho > div{background:var(--ok)}
.mini-barra.warn .trilho > div{background:var(--warn)}
.mini-barra.danger .trilho > div{background:var(--danger)}
.mini-barra .valor{min-width:56px; text-align:right}

/* --- vazios e mensagens --- */
.estado-msg{border-radius:10px}
td:only-child[colspan]{text-align:center; color:var(--ink-faint); padding:28px 14px !important}

/* --- login --- */
.ecra-login{background:radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg)}
.login-card{border-radius:18px; box-shadow:var(--sombra)}

/* --- movimento reduzido --- */
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* =====================================================================
   Estados de interface: a carregar, vazio, erro  (parte 5 do redesenho)
   ===================================================================== */
@keyframes shimmer{ 0%{background-position:-420px 0} 100%{background-position:420px 0} }
@keyframes indeterminado{ 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }

/* A carregar: tabelas e grelhas de cartões ficam vazias até chegarem os dados -> mostram um "esqueleto" animado. */
.a-carregar .mock-table.clean:empty, .a-carregar .grid-kpi:empty{
  display:block; border-radius:12px; min-height:120px; margin:16px;
  background:linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 100%);
  background-size:840px 100%; animation:shimmer 1.3s linear infinite;
}
.a-carregar .mock-table.clean:empty{width:calc(100% - 32px)}
.a-carregar .grid-kpi:empty{margin:16px 0 0; min-height:96px}
.a-carregar .mock-table.clean:empty::after, .a-carregar .grid-kpi:empty::after{content:'A carregar…'; display:block; padding:18px; color:var(--ink-faint); font-size:12.5px}
@media (prefers-reduced-motion: reduce){ .a-carregar .mock-table.clean:empty, .a-carregar .grid-kpi:empty{animation:none} }

/* Barra fina no topo enquanto há pedidos em curso */
#barra-carregar{position:fixed; left:0; top:0; height:3px; width:100%; z-index:100; overflow:hidden; background:transparent; pointer-events:none}
#barra-carregar::before{content:''; position:absolute; inset:0; width:40%; background:var(--accent); border-radius:0 3px 3px 0; animation:indeterminado 1s ease-in-out infinite}
#barra-carregar[hidden]{display:none !important}

/* Vazio: ícone discreto + texto, em vez de uma linha solta */
td:only-child[colspan]{padding:40px 14px !important; font-size:13.5px}
td:only-child[colspan]::before{content:''; display:block; width:38px; height:38px; margin:0 auto 12px; border-radius:50%; border:2px dashed var(--border); background:radial-gradient(circle, var(--border) 0 3px, transparent 3.5px)}
.faixa-vazia::before{content:'✓'; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-weight:800; flex:none}

/* Erro: bloco vermelho suave, com o botão de repetir bem visível */
td.estado-erro{text-align:left !important; background:var(--danger-bg) !important; color:var(--danger) !important; font-weight:600; padding:18px 20px !important}
td.estado-erro::before{display:none !important}
td.estado-erro .btn{margin-left:12px}
.pagina-app .lede.erro, p.lede:has(+ .nada){color:var(--danger)}

/* Scrollbars discretas */
.fbody.pad0{scrollbar-width:thin; scrollbar-color:var(--border) transparent}

/* Seleção de texto no acento da marca */
::selection{background:color-mix(in srgb, var(--accent) 35%, transparent)}

/* Matriz: cabeçalho centrado e coluna Estado mais estreita */
#tabela-matriz thead th{text-align:center !important}
#tabela-matriz th:nth-child(7), #tabela-matriz td:nth-child(7){width:150px; max-width:170px}
#tabela-matriz td:nth-child(7) .pill{white-space:nowrap}
#tabela-matriz td:nth-child(7) small{display:block; white-space:normal; margin-top:4px; line-height:1.35}

/* O simulador vive numa linha com uma única célula (colspan): não é um "estado vazio". */
.linha-simulador td:only-child[colspan]{text-align:left; padding:20px 24px !important; font-size:inherit; color:inherit}
.linha-simulador td:only-child[colspan]::before{display:none}

/* Estágio profissional: aumento definido pelo IEFP (substitui recalcular/simular) */
.ifp-aumento{margin-top:6px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); min-width:230px}
.ifp-aumento label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px}
.ifp-linha{display:flex; gap:6px; align-items:center}
.ifp-linha input{width:90px}
.ifp-aumento .ifp-linha + label{margin-top:8px}
.ifp-unidade{font-size:12px; color:var(--ink-dim)}

/* Pop-up (aumento IEFP) */
dialog.dialogo{border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--ink); padding:24px 26px; width:min(440px, calc(100vw - 32px)); box-shadow:0 24px 60px -12px rgba(0,0,0,.55)}
dialog.dialogo::backdrop{background:rgba(8,9,12,.62); backdrop-filter:blur(2px)}
dialog.dialogo h2{font-size:18px; font-weight:800; margin:0 0 4px}
.dialogo-acoes{display:flex; justify-content:flex-end; gap:10px; margin-top:20px}
#dlg-iefp-erro:not(:empty){display:block !important}



/* Tabela da CHO: linha compacta + painel de detalhe com a largura toda */
#tabela-cho td{vertical-align:middle}
#tabela-cho .sub, .sub{color:var(--ink-faint); font-size:11.5px}
.acoes-cho{white-space:nowrap}
.acoes-cho .btn{margin-right:6px}
.acoes-cho .btn:last-child{margin-right:0}
.btn[data-dce="detalhes-cho"].aberto{background:var(--surface-2)}
.contador-avisos{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--warn-bg); color:var(--warn); font-size:11px; font-weight:700; margin-left:4px}
.pill.est-erro{background:var(--danger-bg); color:var(--danger); border-color:transparent}
.detalhe-cho{display:grid; gap:18px}
.detalhe-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px}
.detalhe-cho h5{margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim)}
.detalhe-cho p{margin:0; font-size:13px; line-height:1.6; overflow-wrap:anywhere}
.detalhe-cho ul{margin:0; padding-left:18px; font-size:13px; line-height:1.6}
.detalhe-cho li{overflow-wrap:anywhere}
.detalhe-acoes{display:flex; flex-wrap:wrap; gap:8px}
.painel-simulador{border-top:1px solid var(--border); padding-top:16px}
.painel-simulador[hidden]{display:none}
/* O Submeter é sempre o último botão do detalhe, depois de simuladores e campos */
.detalhe-rodape{display:flex; justify-content:flex-end; border-top:1px solid var(--border); padding-top:14px}

/* Rodapé com as versões (cliente/servidor) */
.rodape-app{padding:0 clamp(16px,3.2vw,56px) 28px; max-width:min(1440px,100%); margin:0 auto; color:var(--ink-faint); font-size:11.5px}

/* mobile: tabela -> cartão via data-label */
@media (max-width:760px){
  table.clean, table.clean tbody, table.clean tr{display:block; width:100%}
  table.clean thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  table.clean tr{border:1px solid var(--border); border-radius:var(--radius-m); margin-bottom:10px; padding:4px 12px}
  table.clean td{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border)}
  table.clean td::before{content:attr(data-label); font-weight:600; color:var(--ink-faint); font-size:10px; text-transform:uppercase}
}

/* ---- Glossário ---- */
.glossario-barra{display:flex; flex-direction:column; gap:10px; margin:14px 0 18px}
.glossario-barra input[type="text"]{width:100%; max-width:520px}
.glossario-temas{display:flex; flex-wrap:wrap; gap:6px}
.glossario-tema-btn{font:inherit; font-size:12px; padding:5px 12px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--ink-dim); cursor:pointer}
.glossario-tema-btn:hover{border-color:var(--accent); color:var(--ink)}
.glossario-tema-btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600}
.glossario-conteudo{display:flex; flex-direction:column; gap:22px}
.glossario-secao h2{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px}
.glossario-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:10px}
.glossario-item{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); padding:12px 14px}
.glossario-item h3{font-size:14px; margin:0 0 4px; color:var(--ink)}
.glossario-item p{margin:0; font-size:13px; line-height:1.5; color:var(--ink-dim)}
.glossario-vazio{color:var(--ink-faint); font-size:14px; padding:18px 0}
.glossario-item mark{background:var(--warn-bg); color:var(--warn); padding:0 2px; border-radius:2px}
/* ---- Matriz Desempenho x Potencial (modal) ---- */
.matriz-acoes{margin:10px 0 14px}
dialog.dialogo.dialogo-largo{width:min(980px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto}
.dlg-matriz-topo{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px}
.matriz-grelha-wrap{display:flex; gap:10px; align-items:stretch}
.matriz-eixo-y{writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.matriz-eixo-x{text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin:8px 0 14px}
.matriz-grelha{flex:1; display:grid; grid-template-columns:72px repeat(4, minmax(0,1fr)); gap:8px}
.matriz-rotulo{display:flex; align-items:center; justify-content:flex-end; text-align:right; font-size:12px; font-weight:700; color:var(--ink-dim); padding-right:4px}
.matriz-rotulo-col{justify-content:center; text-align:center; padding:0}
.matriz-celula{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-2); padding:10px; min-height:112px; display:flex; flex-direction:column; gap:8px}
.matriz-celula.n0{background:var(--surface-2)}
.matriz-celula.n1{background:var(--info-bg); border-color:var(--info)}
.matriz-celula.n2{background:var(--ok-bg); border-color:var(--ok)}
.matriz-celula-topo{display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:11.5px; color:var(--ink-dim)}
.matriz-celula-topo strong{font-size:13px; color:var(--ink)}
.matriz-pessoas{display:flex; flex-wrap:wrap; gap:5px; max-height:150px; overflow:auto}
.matriz-pessoa{font:inherit; font-size:12px; padding:3px 9px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.matriz-pessoa:hover{border-color:var(--accent); color:var(--accent)}
.matriz-vazia{font-size:12px; color:var(--ink-faint)}
.matriz-legenda{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-dim); margin-bottom:12px}
.matriz-legenda i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid var(--border)}
.matriz-por-avaliar{border-top:1px solid var(--border); padding-top:12px}
.matriz-por-avaliar h3{font-size:13px; margin:0 0 8px}
tr.linha-destacada td{animation:destaqueLinha 1.6s ease}
@keyframes destaqueLinha{0%,60%{background:var(--accent-soft)}100%{background:transparent}}
@media (max-width:640px){ .matriz-grelha{grid-template-columns:54px repeat(4, minmax(0,1fr)); gap:5px} .matriz-celula{padding:6px; min-height:84px} }
/* ---- Seletor de ciclo / ano e modo só de leitura ---- */
.seletor-ciclo{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 14px}
.seletor-ciclo label{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.seletor-ciclo select{min-width:110px}
.seletor-aviso{font-size:12.5px; color:var(--warn); background:var(--warn-bg); padding:3px 12px; border-radius:100px}
.modo-leitura .frame-escrita{display:none !important}
.modo-leitura button[data-dce]:not([data-dce="detalhes-cho"]){display:none !important}
/* ---- Ciclo fechado (só consulta em todo o lado) ---- */
.faixa-ciclo-fechado{background:var(--warn-bg); color:var(--warn); border-bottom:1px solid var(--border); padding:8px 24px; font-size:13px; font-weight:600}
body.ciclo-fechado #pagina-matriz [data-dce], body.ciclo-fechado #pagina-aprovacoes [data-dce], body.ciclo-fechado #pagina-dan [data-dce]{display:none !important}
body.ciclo-fechado #pagina-matriz select{pointer-events:none; opacity:.6}
.matriz-filtros{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin:0 0 14px}
.matriz-filtros .campo{display:flex; flex-direction:column; gap:4px; min-width:200px}
.matriz-filtros label{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.matriz-filtros select{max-width:320px}
/* ---- Avisos (toasts) de sucesso / erro / informação ---- */
.avisos{position:fixed; right:18px; bottom:18px; z-index:10000; display:flex; flex-direction:column; gap:8px; max-width:min(420px, calc(100vw - 36px)); pointer-events:none}
.aviso{pointer-events:auto; display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px; line-height:1.45; box-shadow:var(--sombra); animation:avisoEntra .18s ease-out}
.aviso span{flex:1}
.aviso-sucesso{border-color:var(--ok); background:var(--ok-bg); color:var(--ok)}
.aviso-erro{border-color:var(--danger); background:var(--danger-bg); color:var(--danger); font-weight:600}
.aviso-info{border-color:var(--info); background:var(--info-bg); color:var(--info)}
.aviso-sucesso::before{content:"✓"; font-weight:800}
.aviso-erro::before{content:"⚠"; font-weight:800}
.aviso-info::before{content:"ℹ"; font-weight:800}
.aviso-fechar{border:0; background:transparent; color:inherit; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; opacity:.7}
.aviso-fechar:hover{opacity:1}
@keyframes avisoEntra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
dialog.dialogo[open] ~ .avisos{z-index:10001}
/* ---- Indicadores: matriz Desempenho x Potencial só com os preenchidos (contagens) ---- */
.ind-matriz-grelha{max-width:760px}
.matriz-grelha-contagem .matriz-celula{min-height:76px; align-items:center; justify-content:center; text-align:center; gap:2px}
.matriz-contagem{font-size:26px; font-weight:800; line-height:1; color:var(--ink)}
.matriz-pct{font-size:12px; color:var(--ink-dim)}
/* ---- Resumo da proposta em linhas (o que mudou realçado) ---- */
.resumo-proposta{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.45}
.resumo-proposta li{color:var(--ink-dim)}
.resumo-proposta li strong{color:var(--ink)}
.resumo-proposta li.mudou{color:var(--ink); background:var(--accent-soft); border-left:3px solid var(--accent); padding:2px 8px; border-radius:var(--radius-s)}
.resumo-proposta li.mudou strong{color:var(--accent)}

/* ---- Alerta de licença / baixas (só informa) ---- */
.aviso-licenca{margin-top:3px; font-size:11.5px; line-height:1.35; color:var(--warn); background:var(--warn-bg); border-radius:var(--radius-s); padding:2px 8px; font-weight:600; max-width:340px}

/* ---- Simulador: outros benefícios recolhidos; plafond da pessoa ---- */
details.sim-outros{margin:4px 0 14px; border:1px dashed var(--border); border-radius:var(--radius-m); padding:8px 12px}
details.sim-outros > summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-dim)}
.detalhe-plafond{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:12px 0; font-size:13px; color:var(--ink-dim)}
.detalhe-plafond input.input-mini{width:120px}
.aviso-prazo { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--warn, #b7791f); background: rgba(183,121,31,.08); border-radius: 4px; font-size: 13px; }

.sync-log { font-size: 13px; line-height: 1.5; }
.sync-log ul { margin: 6px 0 6px 18px; padding: 0; }
.sync-log li { margin: 2px 0; }
.sync-titulo { font-weight: 600; }
.sync-ok { color: var(--ok, #2f855a); }
.sync-erro { color: var(--warn, #c53030); }
.sync-log details { margin-top: 6px; opacity: .85; }
.sync-log summary { cursor: pointer; }

/* Legibilidade: pontos, listas recolhíveis, etiquetas */
.pontos { margin: 8px 0 12px 18px; padding: 0; line-height: 1.55; }
.pontos li { margin: 4px 0; }
.glossario-item .pontos { color: var(--ink-dim); }
.lista-recolhivel { margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.lista-recolhivel > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13px; }
.lista-recolhivel .contagem { color: var(--ink-faint); font-weight: 400; }
.lista-colunas { margin: 0; padding: 4px 14px 12px 30px; column-width: 280px; column-gap: 24px; font-size: 13px; line-height: 1.5; }
.lista-colunas li { break-inside: avoid; margin: 2px 0; }
.lista-simples { margin: 0; padding: 4px 14px 12px 30px; font-size: 13px; line-height: 1.55; }
.abrange { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.abrange .rotulo, .com-email-caixa .rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-right: 4px; }
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; }
/* Redistribuir e comunicar */
.painel-comunicacao { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.com-tabela td, .com-tabela th { vertical-align: middle; }
.com-custo { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.com-custo.ok { background: var(--ok-bg); color: var(--ok); }
.com-custo.excede { background: var(--danger-bg); color: var(--danger); }
.com-email { margin-top: 12px; }
.com-email-caixa { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface); }
.com-corpo { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.55; margin: 10px 0 0; }

.etiqueta-x { margin-left: 6px; padding: 0 4px; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 14px; line-height: 1; }
.etiqueta-x:hover { color: var(--danger); }

/* Avaliações de desempenho (pop-up da Matriz) */
.btn-link { background: transparent; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; text-align: left; text-decoration: underline; }
.aval-ciclo { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; background: var(--surface-2); }
.aval-ciclo h3 { margin: 0 0 8px; font-size: 16px; }
.aval-ciclo h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.aval-topo { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; }
.aval-nota { display: inline-block; padding: 3px 12px; border-radius: 100px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.aval-texto { white-space: pre-wrap; line-height: 1.55; font-size: 13px; }
blockquote.aval-texto { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border); background: var(--surface); border-radius: 4px; }
.aval-qa { margin: 0 0 12px; }
.aval-q { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.aval-comp td { vertical-align: top; }
.aval-coment { margin-top: 4px; font-size: 12px; }
.aval-coment summary { cursor: pointer; color: var(--ink-dim); }
.aval-coment div { margin: 4px 0; }

/* Passo de validação da data de efeito e envio em massa */
.com-validacao { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.com-data { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.com-data label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.com-confirma { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.com-gated[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.lote-filtros { align-items: end; margin-bottom: 8px; }
.lote-todos { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lote-tabela { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.lote-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.lote-resultado { margin-top: 10px; }

/* Revisões: plafonds recolhíveis; Matriz: botões lado a lado */
.frame-recolhivel > summary { cursor: pointer; list-style: none; }
.frame-recolhivel > summary::-webkit-details-marker { display: none; }
.frame-recolhivel > summary .ftitle::before { content: "▸ "; }
.frame-recolhivel[open] > summary .ftitle::before { content: "▾ "; }
.acoes-matriz { display: flex; gap: 6px; flex-wrap: wrap; }
.dlg-confirmar-texto { white-space: pre-line; margin: 0 0 16px; line-height: 1.5; }
#dlg-confirmar { max-width: 460px; }

/* Telemóvel (Matriz, Aprovações, Líder…): resumo compacto, alvos de toque maiores, nome do colaborador por cima da ligação das avaliações */
@media (max-width:760px){
  .faixa-resumo .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .faixa-resumo .kpi { padding: 10px 12px; }
  .faixa-resumo .kpi .val { font-size: 22px; }
  .faixa-resumo .kpi .hint { display: none; }
  table.clean td[data-label="Colaborador"] { flex-direction: column; align-items: flex-start; gap: 4px; }
  table.clean td[data-label="Colaborador"]::before { margin-bottom: 2px; }
  table.clean td select, table.clean td .btn { min-height: 40px; }
  table.clean td[data-label="Ação"], table.clean td[data-label="Ações"] { flex-wrap: wrap; justify-content: flex-start; }
  table.clean td[data-label="Ação"] .btn, table.clean td[data-label="Ações"] .btn, .acoes-matriz .btn { flex: 1 1 120px; }
  .acoes-matriz { width: 100%; }
}
.com-erros { color: var(--danger); margin: 6px 0 10px; }
.com-erros:empty { display: none; }
.com-erros .aviso { color: var(--warn); }

/* Patamares: cabeçalho de 2 linhas (patamar → mín/máx) e linha vertical entre patamares */
.tabela-patamares thead th { text-align: center; vertical-align: middle; }
.tabela-patamares thead th.grupo-patamar { border-bottom: 1px solid var(--border); }
.tabela-patamares thead tr:first-child th:first-child, .tabela-patamares thead tr:first-child th:nth-child(2) { text-align: left; }
.tabela-patamares th.ini-patamar, .tabela-patamares td.ini-patamar { border-left: 1px solid var(--border); }
.tabela-patamares thead th.grupo-patamar { border-left: 1px solid var(--border); }
.tabela-patamares td .input-mini { width: 86px; text-align: center; }
.tabela-patamares td:nth-child(n+3) { text-align: center; }
@media (max-width:760px){ .tabela-patamares td.ini-patamar { border-left: 0; } }
.contrato-perto { color: var(--warn); font-weight: 600; }

/* Comunicar ao colaborador: «Antes de enviar» com ✔/✖ */
.com-passo { margin: 12px 0 8px; }
.com-passo h4 { margin: 0 0 6px; font-size: 13px; }
.com-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.com-checklist li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.com-marca.ok { color: var(--ok); font-weight: 700; }
.com-marca.falta { color: var(--danger); font-weight: 700; }
.com-enviar { align-items: center; gap: 12px; margin-top: 8px; }
.com-motivo { color: var(--danger); font-size: 13px; }
.com-outras { margin-top: 12px; }
.com-outras summary { cursor: pointer; color: var(--ink-dim); font-size: 13px; }

/* =====================================================================
   v3 — estilo loba.com: tipografia Mark Pro, títulos em minúsculas, pílulas, cartões muito arredondados
   ===================================================================== */
body{font-weight:300}
b, strong, th, .btn, .aba, .pill, label, h1, h2, h3, h4, h5{font-weight:700}
.destaque{font-family:var(--serif); font-style:italic; font-weight:300; color:var(--accent)}

/* navegação: cabeçalho preto, página ativa em pílula branca */
.mock-navbar{background:var(--navy)}
.mock-navbar .logo{font-weight:900; font-size:20px; letter-spacing:.02em}
.mock-navbar a{border-radius:999px; opacity:.8}
.mock-navbar a.ativo{background:#fff; color:#000; font-weight:700; opacity:1}
.mock-navbar .avatar{background:var(--accent); color:var(--accent-ink)}

/* títulos */
.pagina-app h1{font-size:clamp(30px,3.4vw,44px); font-weight:700; line-height:1.05; letter-spacing:-.015em; text-transform:lowercase; margin:6px 0 8px}
.pagina-app .lede{color:var(--ink-dim); font-weight:300; font-size:15px}
.frame .fbar{font-size:15px; font-weight:700; text-transform:lowercase; letter-spacing:0}
.frame .fbar .ftitle::before{display:none}
dialog.dialogo h2, .login-card .brand{text-transform:lowercase}
.login-card .brand{font-weight:900; font-size:28px; letter-spacing:.01em; text-transform:none}

/* cartões */
.frame{border-radius:var(--radius-l); border-color:var(--border); box-shadow:none}
.login-card, dialog.dialogo{border-radius:var(--radius-l)}
.kpi{border-radius:var(--radius-l); padding:22px 24px; border-left-width:3px; position:relative; overflow:hidden; box-shadow:none}
.kpi::before{content:''; position:absolute; inset:0; background:var(--brilho); pointer-events:none}
.kpi > *{position:relative}
.kpi .lbl{font-size:10.5px; letter-spacing:.14em; color:var(--ink-faint)}
.kpi .val{font-weight:900; font-size:40px; letter-spacing:-.02em}
.faixa-vazia, .painel-comunicacao, .aval-ciclo{border-radius:var(--radius-m)}

/* botões em pílula; o primário usa o acento */
.btn{border-radius:999px; padding:9px 20px; font-weight:700}
.btn.dark{background:var(--accent); color:var(--accent-ink)}
.btn.outline{border-color:var(--ink-faint)}
.btn.outline:hover{border-color:var(--ink); background:transparent}
.btn-link{font-weight:700}

/* campos */
select, input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="file"], .campo input, .campo select{border-radius:10px; background:var(--surface-2); border-color:var(--border); font-weight:300}
.campo label, .seletor-ciclo label, .matriz-filtros label{letter-spacing:.12em; font-weight:700}

/* tabelas: linhas finas, cabeçalhos pequenos em maiúsculas com espaçamento */
.mock-table.clean th{background:var(--surface); color:var(--ink-faint); letter-spacing:.14em; font-weight:700; border-bottom-color:var(--border)}
.mock-table.clean td{font-weight:300}
.mock-table.clean td b, .mock-table.clean td strong{font-weight:700}
.frame .fbody.pad0{border-radius:0 0 var(--radius-l) var(--radius-l)}

/* abas */
.aba{font-size:14px}
.aba.ativa{color:var(--ink)}

/* pílulas: o texto não passa a negrito exagerado dentro de tabelas */
.pill{font-size:11px}
.aval-nota, .matriz-pessoa, .etiqueta{font-weight:700}
.matriz-contagem{font-weight:900}
.sim-impacto .val{font-weight:900}

/* Navegação numa só linha, com mais ar à volta do logótipo e dos grupos */
.mock-navbar{padding:0 clamp(16px,1.6vw,28px); min-height:68px; gap:2px 2px}
.mock-navbar .logo{margin-right:18px; flex:none}
.mock-navbar a{padding:7px 9px; font-size:13.5px}
.mock-navbar a:focus-visible{outline-offset:1px}
.nav-grupo{padding:0 6px; margin-left:2px}
.nav-rotulo{display:none}
.mock-navbar .user .btn{padding:6px 18px}
@media (min-width:981px){
  .mock-navbar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .mock-navbar::-webkit-scrollbar{display:none}
  .nav-grupo{flex:none}
}
/* Sem barra de deslocamento: abaixo de 1850 px aperta-se o menu e esconde-se o subtítulo do logótipo; abaixo de 1500 px aperta-se mais */
@media (max-width:1850px){ .mock-navbar a{padding:7px 8px} .mock-navbar .user span{display:none} }
@media (max-width:1500px){ .mock-navbar a{padding:6px 6px; font-size:12.5px} .nav-grupo{padding:0 4px} .mock-navbar .logo{margin-right:10px} .mock-navbar .user span{display:none} }
.conteudo-app{padding-top:44px}

/* Patamares (leitura do DAN e Backoffice): valores e cabeçalhos mín/máx centrados na mesma coluna */
.mock-table.clean.tabela-patamares th.num, .mock-table.clean.tabela-patamares td.num,
.mock-table.clean.tabela-patamares thead th, .mock-table.clean.tabela-patamares td:nth-child(n+3){text-align:center}
.mock-table.clean.tabela-patamares thead tr:first-child th:nth-child(-n+2){text-align:left}

/* Módulo de avaliação */
.oculto{display:none !important}
.av-passos{display:flex; gap:8px; margin:14px 0; flex-wrap:wrap}
.av-passo{flex:1; min-width:150px; text-align:left; padding:12px 16px; border-radius:var(--radius-m); border:1px solid var(--border); background:transparent; color:var(--ink-dim); cursor:pointer; font:inherit; font-weight:700}
.av-passo.on{border-color:var(--accent); color:var(--ink)}
.av-passo.feito{border-color:var(--ok)}
.av-sec{margin:22px 0 8px; padding-bottom:8px; border-bottom:1px solid var(--border); font-size:16px; text-transform:lowercase}
.av-sec:first-child{margin-top:0}
.av-item{margin:14px 0}
.av-q{font-weight:700; margin-bottom:8px}
.av-i{color:var(--ink-faint); cursor:help}
.av-escala{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.av-n{min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; font:inherit; font-weight:700}
.av-n:hover:not(:disabled){border-color:var(--ink)}
.av-n.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.av-n:disabled{opacity:.55; cursor:not-allowed}
.av-ref{display:flex; justify-content:space-between; max-width:460px; margin-top:4px; font-size:11.5px; color:var(--ink-faint)}
.av-coment{width:100%; margin-top:8px}
.av-texto{width:100%; font:inherit; font-weight:300; padding:10px 12px; border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface-2); color:var(--ink)}
.av-cat{border-left:3px solid var(--accent); padding-left:12px; margin:16px 0 6px; font-weight:700}
.av-subcat{margin:10px 0 4px 14px; color:var(--ink-faint); font-weight:700; font-size:13px}
.av-skill, .avl-linha{display:flex; gap:12px 16px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap:wrap}
.av-nome{flex:1; min-width:220px; font-weight:700}
.av-nome small{display:block; color:var(--ink-faint); font-weight:300; font-size:12px; margin-top:2px}
.avl-linha.dif{background:var(--warn-bg); padding-left:10px; padding-right:10px; border-radius:var(--radius-s)}
.avl-matriz{display:grid; grid-template-columns:repeat(3, minmax(160px, 1fr)); gap:14px}
.av-adic-topo, .av-sec-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 8px; flex-wrap:wrap}
.av-sec-cab h3{margin:0; text-transform:lowercase}
.av-subs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.av-check{list-style:none; padding:0; margin:0 0 14px; line-height:1.9}
.av-rodape{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:18px}
.av-rodape .sub{margin-right:auto}
.av-resposta{margin:2px 0 8px; line-height:1.6}
.av-cmt-pessoa{margin:-6px 0 8px}
dialog .in{padding:0 12px 8px}
dialog details{border:1px solid var(--border); border-radius:var(--radius-m); margin:6px 0; background:var(--surface-2)}
dialog details > summary{padding:10px 12px; cursor:pointer; font-weight:700}
@media (max-width:760px){ .avl-matriz{grid-template-columns:1fr} }
.etiqueta-manual{border-color:var(--accent); color:var(--accent); font-weight:700}

/* Avatar com as iniciais (2-3 letras): cápsula em vez de círculo fixo */
.mock-navbar .avatar{width:auto; min-width:30px; height:30px; padding:0 7px; border-radius:15px; letter-spacing:.02em; flex:none}

/* Backoffice: navegação por grupos, avisos e resumos */
.pilulas{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 4px}
.pilula{border:1px solid var(--border); background:transparent; color:var(--ink-dim); border-radius:999px; padding:7px 16px; font:inherit; font-weight:700; font-size:13px; cursor:pointer}
.pilula:hover{border-color:var(--ink)}
.pilula.ativa{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.aba-ponto{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:7px; vertical-align:middle; background:var(--warn)}
.aba-ponto.bad{background:var(--danger)}
.bo-resumo{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin:14px 0 2px}
.bo-resumo-itens{display:flex; gap:8px; flex-wrap:wrap; flex:1}
.bo-resumo .pill{white-space:normal; max-width:100%}
.bo-hist{border-left:2px solid var(--border); margin-left:6px; padding-left:16px; max-height:60vh; overflow:auto}
.bo-hist-item{position:relative; margin:0 0 14px}
.bo-hist-item::before{content:''; position:absolute; left:-23px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent)}
.bo-hist-item .pontos{margin:4px 0 0 18px}

/* Assistente «Iniciar ciclo» */
.as-estado-corpo{display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; align-items:center}
@media (max-width:900px){ .as-estado-corpo{grid-template-columns:1fr} }
.as-grande{font-size:34px; font-weight:900; line-height:1.1; margin:2px 0 6px; letter-spacing:-.02em}
.as-estado-acao{text-align:right}
@media (max-width:900px){ .as-estado-acao{text-align:left} }
.as-avancado{margin-top:24px}
.as-avancado > summary{cursor:pointer; list-style:none}
.as-avancado > summary::-webkit-details-marker{display:none}
.as-topo{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 10px}
.as-topo h2{margin:0; text-transform:lowercase; font-size:22px}
.as-topo .btn{margin-left:auto}
.as-grelha{display:grid; grid-template-columns:270px 1fr; gap:20px; align-items:start}
@media (max-width:900px){ .as-grelha{grid-template-columns:1fr} }
.as-passos{display:flex; flex-direction:column; gap:6px}
.as-passo{display:flex; gap:10px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius:var(--radius-m); border:1px solid var(--border); background:transparent; color:var(--ink-dim); cursor:pointer; font:inherit}
.as-passo.on{border-color:var(--accent); color:var(--ink)}
.as-passo small{display:block; color:var(--ink-faint); font-size:11.5px; font-weight:300}
.as-bola{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; border:1px solid var(--border); flex:none}
.as-passo.feito .as-bola{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
.as-passo.atencao .as-bola{background:var(--warn-bg); color:var(--warn); border-color:var(--warn)}
.as-card{margin-top:0}
.as-tipos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
@media (max-width:900px){ .as-tipos{grid-template-columns:1fr} }
.as-tipo{border:1px solid var(--border); border-radius:var(--radius-m); padding:16px; cursor:pointer; background:transparent; color:var(--ink); text-align:left; font:inherit}
.as-tipo.on{border-color:var(--accent); background:var(--accent-soft)}
.as-tipo b{display:block; font-size:16px; margin-bottom:4px}
.as-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:700px){ .as-grid2{grid-template-columns:1fr} }
.as-linha{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0}
.as-chks{margin-top:8px}
.as-chk{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border)}
.as-chk:last-child{border-bottom:0}
.as-chk-t{flex:1}
.as-chk-t small{display:block; color:var(--ink-faint); font-weight:300}
.as-rodape{display:flex; gap:10px; align-items:center; margin-top:20px}
.as-sp{flex:1}
.as-kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.as-kpi{background:var(--surface-2); border-radius:var(--radius-m); padding:14px 16px}
.as-kpi b{display:block; font-size:30px; font-weight:900; line-height:1.1}
.as-kpi span{color:var(--ink-faint); font-size:12.5px}
.as-aviso{color:var(--warn)}
.as-cartao{background:var(--surface-2); border-radius:var(--radius-m); padding:16px}
.as-cartao .btn{margin-top:10px}

/* Barra «alterações por guardar» e linha alterada */
.barra-guardar{position:sticky; bottom:14px; display:flex; gap:12px; align-items:center; background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px; padding:10px 12px 10px 22px; margin-top:18px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); z-index:20}
.barra-guardar[hidden]{display:none}
.mock-table.clean tr.linha-alterada td{background:var(--accent-soft)}
.mock-table.clean tr.linha-alterada td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* Fase Competências: comportamentos observáveis e revisão pelo líder */
.av-comps{margin:6px 0 0;padding-left:18px;color:var(--ink-dim);font-size:13px;font-weight:300}.av-comps li{margin:2px 0}
.av-comp-card{border:1px solid var(--border);border-radius:var(--radius-m,12px);padding:14px 16px;margin:10px 0}.av-comp-card.ok{border-color:var(--ok)}.av-comp-card.prop{border-color:var(--warn)}
.av-comp-edit{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.av-dif ins{color:var(--ok);text-decoration:none}.av-dif del{color:var(--danger)}

/* Tabelas com 2 linhas de cabeçalho (patamares): a 2.ª fixa-se logo abaixo da 1.ª, em vez de ficar por cima dela */
.mock-table.clean.tabela-patamares thead tr:nth-child(2) th{top:38px}

.as-passo.saltado{opacity:.45;cursor:default;border-style:dashed}.as-passo.saltado .as-bola{border-style:dashed}.as-tipos{grid-template-columns:repeat(2,1fr)}.as-tipo:disabled{cursor:not-allowed}

.av-benef{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer}

/* Login: o formulário do Catalyst só traz «Entrar com Google» (curto); com #entrar=senha mostra o completo */
#signin{min-height:170px; height:170px}
#signin iframe{min-height:170px !important; height:100% !important}
.login-card.completo #signin{height:470px}
.login-card.completo #signin iframe{min-height:470px !important}

/* Performance individual do SGP: dois indicadores, cada um nas duas regras de marcos */
.perf-sgp{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}.perf-regra{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--ink-dim);font-size:11.5px;font-weight:300}.perf-regra b{font-weight:700;color:var(--accent)}