/* ============================================================
   Estilos específicos de tela.
   Só entra aqui o que é realmente exclusivo de uma tela (matriz de
   permissões, editor de avaliação, calendário do ciclo). Tudo que
   aparece em mais de uma tela mora em sistema.css.
   ============================================================ */

/* ---------- login ---------- */
.pagina-login { display:grid; grid-template-columns:minmax(320px, 44%) 1fr; min-height:var(--vp-h); }
.login-marca { background:var(--marca-azul); color:var(--branco); display:grid; place-items:center;
  padding:var(--e-7) var(--e-6); text-align:center; }
.login-marca img { width:260px; max-width:70%; margin-bottom:var(--e-5); }
.login-marca h1 { font-size:34px; color:var(--branco); margin-bottom:var(--esp-2); }
.login-marca p { color:rgba(255,255,255,.82); font-size:14px; max-width:38ch; margin:0 auto; }
.login-form { display:grid; place-items:center; padding:var(--e-6) var(--e-5); background:var(--cor-fundo); }
.login-caixa { width:100%; max-width:380px; }
.login-caixa h2 { font-size:28px; margin-bottom:var(--e-1); }
.login-caixa .subtitulo { color:var(--cor-texto-fraco); margin:0 0 var(--e-5); font-size:13.5px; }
.login-campos { display:grid; gap:var(--e-4); }
.login-caixa .btn { width:100%; margin-top:var(--e-5); }
.login-rodape { margin-top:var(--e-5); font-size:12px; color:var(--cor-texto-fraco); text-align:center; }
.caps { font-size:12px; color:var(--cor-alerta); display:flex; gap:5px; align-items:center; }
@media (max-width:820px) {
  .pagina-login { grid-template-columns:1fr; }
  .login-marca { padding:var(--e-6) var(--e-4); }
  .login-marca img { width:180px; margin-bottom:var(--e-3); }
  .login-marca h1 { font-size:26px; } .login-marca p { display:none; }
}

/* ---------- matriz de permissões (tela Perfis) ---------- */
.matriz-permissoes th.acao { text-align:center; width:112px; }
.matriz-permissoes th.acao button, .matriz-permissoes th.acao .rotulo-acao {
  justify-content:center; text-align:center; }
.matriz-permissoes td.acao { text-align:center; }
.matriz-permissoes tbody tr.grupo td { background:var(--cor-superficie-2); font-weight:800;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--cor-texto-fraco);
  height:34px; padding-block:6px; }
.matriz-permissoes .modulo b { display:block; }
.matriz-permissoes .modulo small { color:var(--cor-texto-fraco); font-size:11.5px; }
.caixa-marcar { width:18px; height:18px; accent-color:var(--cor-primaria); cursor:pointer; }
.caixa-marcar:disabled { cursor:not-allowed; opacity:.35; }
.marcar-coluna { all:unset; cursor:pointer; font-size:10.5px; font-weight:700; color:var(--cor-primaria);
  padding:2px 6px; border-radius:var(--raio-1); }
.marcar-coluna:hover { background:var(--cor-primaria-sut); }

/* ---------- editor de avaliação ---------- */
.editor-avaliacao { display:grid; grid-template-columns:1fr 320px; gap:14px; align-items:start; }
@media (max-width:1080px) { .editor-avaliacao { grid-template-columns:1fr; } }
.resumo-calculo { position:sticky; top:calc(var(--topo-altura) + 14px); }
.linha-calculo { display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3);
  padding:8px 0; border-bottom:1px dashed var(--cor-borda); font-size:13px; }
.linha-calculo:last-child { border-bottom:0; }
.linha-calculo .rotulo { color:var(--cor-texto-fraco); }
.linha-calculo .rotulo small { display:block; font-size:11px; }
.linha-calculo .valor { font-weight:800; font-variant-numeric:tabular-nums; }
.linha-calculo.destaque { border-top:1px solid var(--cor-borda); margin-top:6px; padding-top:12px; }
.linha-calculo.destaque .valor { font-size:26px; color:var(--cor-primaria); }
.bloco-bonus { margin-top:var(--e-4); padding:var(--e-4); border-radius:var(--raio-p);
  background:var(--cor-primaria-sut); }
.bloco-bonus .valor { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--cor-primaria); }
.bloco-bonus .rotulo { font-size:12px; color:var(--cor-texto-fraco); }

.tabela-metas td { vertical-align:top; padding-top:12px; }
.tabela-metas .entrada { padding:7px 11px; }
.tabela-metas td.num .entrada { text-align:right; }
.col-peso { width:104px; } .col-realizado { width:142px; } .col-acao { width:52px; }
.barra-progresso { height:6px; border-radius:var(--raio-1); background:var(--sup2); overflow:hidden; margin-top:6px; }
.barra-progresso i { display:block; height:100%; background:var(--cor-primaria);
  transition:width var(--t-medio) var(--curva); }

/* Sim ou não: a resposta de toda meta. Três estados — sim, não e sem resposta —
   por isso são dois botões e não um interruptor. */
.sim-nao { display:flex; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.sim-nao .opcao { flex:1 1 0; min-width:52px; max-width:64px; height:var(--alt-ctrl);
  border:1px solid var(--cor-borda); border-radius:var(--raio-2); background:var(--sup);
  color:var(--cor-texto-fraco); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  transition:background-color var(--t-rapido) ease-out, color var(--t-rapido) ease-out,
             border-color var(--t-rapido) ease-out; }
.sim-nao .opcao:hover:not(:disabled) { border-color:var(--cor-primaria); color:var(--cor-texto); }
.sim-nao .opcao:disabled { cursor:default; opacity:.65; }
.sim-nao .opcao.sim.marcada { background:var(--cor-sucesso); border-color:var(--cor-sucesso); color:var(--prim-txt); }
.sim-nao .opcao.nao.marcada { background:var(--cor-erro); border-color:var(--cor-erro); color:var(--prim-txt); }
.sim-nao .sem-resposta { flex:1 0 100%; text-align:right; font-size:11px; color:var(--cor-texto-fraco); }

/* Régua percentual: as etiquetas coloridas que pontuam o desenvolvimento. */
.campo-regua { max-width:none; }
.regua-escolha, .regua-referencia { display:grid; gap:var(--e-3); margin-top:6px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.nivel-regua { display:flex; flex-direction:column; gap:6px; text-align:center; font:inherit;
  padding:var(--e-3); border:1px solid var(--cor-borda); border-radius:var(--raio-p);
  background:var(--sup); color:var(--cor-texto); cursor:pointer;
  transition:border-color var(--t-rapido) ease-out, background-color var(--t-rapido) ease-out,
             transform var(--t-rapido) var(--curva); }
.regua-referencia .nivel-regua { cursor:default; }
.nivel-regua:hover:not(:disabled):not(.marcado) { border-color:var(--cor-primaria); }
.regua-escolha .nivel-regua:active:not(:disabled) { transform:scale(.985); }
.nivel-regua:disabled { cursor:default; }
/* Texto sobre cor sólida usa o par que o tema já troca (--prim-txt: branco no claro,
   quase-preto no escuro). Com branco fixo, o âmbar e o verde do tema escuro ficavam
   ilegíveis. O corpo é 19px bold — tamanho grande de acessibilidade, o que traz o
   âmbar do tema claro para dentro do AA. */
.nivel-rotulo { display:block; padding:7px 10px; border-radius:var(--raio-p);
  font-weight:800; font-size:19px; font-variant-numeric:tabular-nums; color:var(--prim-txt); }
.nivel-descricao { font-size:12.5px; line-height:1.35; color:var(--cor-texto-fraco); overflow-wrap:anywhere; }
.nivel-regua.marcado { border-color:var(--cor-primaria); background:var(--cor-info-sut); }
.nivel-regua.marcado .nivel-descricao { color:var(--cor-texto); }
.nivel-regua.estilo-sucesso .nivel-rotulo { background:var(--cor-sucesso); }
.nivel-regua.estilo-info    .nivel-rotulo { background:var(--cor-info); }
.nivel-regua.estilo-alerta  .nivel-rotulo { background:var(--cor-alerta); }
.nivel-regua.estilo-erro    .nivel-rotulo { background:var(--cor-erro); }
.nivel-regua.estilo-neutro  .nivel-rotulo { background:var(--cor-texto-fraco); }
@media (prefers-reduced-motion:reduce) { .nivel-regua { transition:none; } }
/* a mesma etiqueta, em linha, na tabela de Parâmetros */
.etiqueta-regua { display:inline-block; padding:3px 10px; }

.escala-comportamento { display:grid; gap:var(--e-3); }
.competencia { border:1px solid var(--cor-borda); border-radius:var(--raio-p); padding:var(--e-3) var(--e-4); }
.competencia header { display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }
.competencia h4 { margin:0; font-size:13.5px; font-weight:800; font-family:var(--fonte-texto); }
.competencia .notas { display:flex; gap:6px; margin-left:auto; }
.nota-opcao { all:unset; cursor:pointer; min-width:38px; text-align:center; padding:6px 10px;
  border:1px solid var(--cor-borda); border-radius:var(--raio-p); font-weight:700; font-size:13px;
  transition:all var(--t-rapido) ease-out; }
.nota-opcao:hover { border-color:var(--cor-primaria); color:var(--cor-primaria); }
.nota-opcao[aria-pressed="true"] { background:var(--cor-primaria); color:var(--cor-primaria-txt);
  border-color:var(--cor-primaria); }
.competencia .guia { margin-top:var(--e-2); font-size:12px; color:var(--cor-texto-fraco); }
.competencia .guia b { color:var(--cor-texto); font-weight:700; }

/* ---------- calendário Q1–Q4 ---------- */
.grade-marcos { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.marco { background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio);
  padding:var(--e-4); box-shadow:var(--sombra-1); display:flex; flex-direction:column; gap:var(--e-2); }
.marco.concluido { border-color:color-mix(in srgb, var(--cor-sucesso) 45%, transparent); }
.marco .trimestre { font-family:var(--fonte-titulo); font-size:26px; line-height:1; color:var(--cor-primaria); }
.marco h4 { margin:0; font-size:14px; font-weight:800; font-family:var(--fonte-texto); }
.marco .responsavel { font-size:12px; color:var(--cor-texto-fraco); }
.marco ul { margin:0; padding-left:18px; font-size:12.5px; color:var(--cor-texto-fraco); }
.marco ul li { margin-bottom:3px; }
.marco footer { margin-top:auto; display:flex; align-items:center; gap:var(--e-2);
  padding-top:var(--e-2); border-top:1px solid var(--cor-borda); }

/* ---------- matriz de bônus (tela Ciclos) ---------- */
.matriz-bonus td .entrada { width:88px; text-align:right; padding:7px 10px; }
.matriz-bonus th { text-align:center; }
.matriz-bonus td.faixa { font-weight:700; }
.matriz-bonus td.faixa small { display:block; font-weight:400; color:var(--cor-texto-fraco); font-size:11.5px; }

/* ---------- auditoria ---------- */
.linha-detalhe td { background:var(--cor-superficie-2); padding:var(--e-4) 18px; }
.diferenca { display:grid; gap:6px; font-size:12.5px; }
.diferenca .campo-nome { font-weight:700; }
.diferenca .antes { color:var(--cor-erro); text-decoration:line-through; }
.diferenca .depois { color:var(--cor-sucesso); font-weight:700; }
.grade-detalhe { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--e-3); }

/* ---------- listas de definição (detalhes de registro) ---------- */
.definicoes { display:grid; gap:var(--e-3); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.definicoes div { min-width:0; }
.definicoes dt { font-size:11.5px; font-weight:700; color:var(--cor-texto-fraco);
  text-transform:uppercase; letter-spacing:.04em; }
.definicoes dd { margin:2px 0 0; font-size:13.5px; overflow-wrap:anywhere; }

/* ---------- abas ---------- */
.abas { display:flex; gap:var(--e-1); border-bottom:1px solid var(--cor-borda); margin-bottom:var(--e-4); }
.aba { all:unset; cursor:pointer; padding:9px 14px; font-size:13px; font-weight:700;
  color:var(--cor-texto-fraco); border-bottom:2px solid transparent; transition:all var(--t-rapido); }
.aba:hover { color:var(--cor-texto); }
.aba[aria-selected="true"] { color:var(--cor-primaria); border-bottom-color:var(--cor-primaria); }

/* ---------- relatórios ---------- */
.filtros-relatorio { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  padding:var(--e-3) var(--e-4); background:var(--cor-superficie); border:1px solid var(--cor-borda);
  border-radius:var(--raio); box-shadow:var(--sombra-1); }
.filtros-relatorio > .fraco { display:inline-flex; align-items:center; gap:6px; margin-right:var(--e-2); }
.grade-relatorios { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.card-relatorio { display:flex; flex-direction:column; gap:var(--e-2); cursor:pointer;
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio);
  padding:var(--e-4); box-shadow:var(--sombra-1);
  transition:border-color var(--t-rapido) ease-out, box-shadow var(--t-rapido) ease-out,
             transform var(--t-rapido) ease-out; }
.card-relatorio:hover { border-color:var(--cor-primaria); box-shadow:var(--sombra-2); transform:translateY(-2px); }
.card-relatorio:focus-visible { outline:2px solid var(--cor-primaria); outline-offset:2px; }
.card-relatorio.ativo { border-color:var(--cor-primaria); box-shadow:var(--sombra-2); }
.card-relatorio header { display:flex; align-items:center; gap:var(--e-2); }
.card-relatorio h3 { margin:0; font-family:var(--fonte-texto); font-size:15px; font-weight:800;
  text-transform:none; letter-spacing:0; }
.card-relatorio p { margin:0; font-size:12.5px; color:var(--cor-texto-fraco); }
.card-relatorio footer { margin-top:auto; padding-top:var(--e-3); display:flex; gap:var(--e-2); }
.card-relatorio footer .btn { flex:1; justify-content:center; }
.marca-visualizando { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--cor-primaria); }

/* ---------- fases do ciclo (Q1 e Q4) ---------- */
.grade-fases { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.fase { background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio);
  padding:var(--e-4); box-shadow:var(--sombra-1); display:flex; flex-direction:column; gap:var(--e-2);
  border-left:4px solid var(--cor-primaria); }
.fase.concluida { border-left-color:var(--cor-sucesso); }
.fase .selo-fase { display:flex; align-items:center; gap:var(--e-2); }
.fase .trimestre { font-family:var(--fonte-titulo); font-size:24px; line-height:1; color:var(--cor-primaria); }
.fase h4 { margin:0; font-size:15px; font-weight:800; font-family:var(--fonte-texto);
  text-transform:none; letter-spacing:0; }
.fase .responsavel { font-size:12px; color:var(--cor-texto-fraco); }
.fase ul { margin:0; padding-left:18px; font-size:12.5px; color:var(--cor-texto-fraco); }
.fase ul li { margin-bottom:3px; }
.fase .progresso-fase { display:flex; align-items:baseline; gap:6px; font-size:12.5px;
  color:var(--cor-texto-fraco); }
.fase .progresso-fase b { font-size:20px; color:var(--cor-texto); font-variant-numeric:tabular-nums; }
.fase footer { margin-top:auto; display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  padding-top:var(--e-2); border-top:1px solid var(--cor-borda); }

/* estado de cada fase na lista de colaboradores */
.estado-fase { display:inline-flex; flex-direction:column; gap:2px; }
.estado-fase small { color:var(--cor-texto-fraco); font-size:11px; }
.pendencia-lista { margin:0; padding-left:16px; font-size:11.5px; color:var(--cor-texto-fraco); }

/* ---------- metas corporativas do ciclo ---------- */
.tabela-metas-corporativas td .entrada { width:100%; }
.tabela-metas-corporativas td.num .entrada { width:92px; text-align:right; }
.tabela-metas-corporativas th.col-peso, .tabela-metas-corporativas th.col-realizado { width:120px; }
.tabela-metas-corporativas th.col-acao { width:52px; }

/* ---------- blocos de metas (editor de avaliação) ---------- */
.bloco-resultado { display:grid; gap:var(--e-3); }
.subtitulo-bloco { display:flex; align-items:center; gap:var(--e-2); padding:0 var(--e-4);
  font-size:12.5px; color:var(--cor-texto-fraco); }
.subtitulo-bloco b { color:var(--cor-texto); font-size:13.5px; }
.peso-efetivo { margin-left:auto; font-variant-numeric:tabular-nums; }
.metas-corporativas-leitura { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.metas-corporativas-leitura li { display:flex; gap:var(--e-3); align-items:baseline;
  padding:8px 0; border-bottom:1px dashed var(--cor-borda); font-size:13px; }
.metas-corporativas-leitura li:last-child { border-bottom:0; }
.metas-corporativas-leitura .peso { color:var(--cor-texto-fraco); font-size:12px; white-space:nowrap; }
.metas-corporativas-leitura .realizado { margin-left:auto; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- telas de erro (404 · 403 · 500 · falha de carregamento) ---------- */
.erro-tela { display:grid; justify-items:center; text-align:center; gap:var(--esp-2);
  padding:var(--esp-7) var(--esp-5); max-width:560px; margin:var(--esp-6) auto; }
.erro-marca { width:56px; height:56px; display:grid; place-items:center; border-radius:var(--raio-4);
  background:var(--sup2); border:1px solid var(--borda); color:var(--txt2); }
.erro-codigo { font-family:var(--fonte-titulo); font-size:44px; line-height:1; color:var(--prim);
  letter-spacing:.04em; }
.erro-tela h2 { font-size:var(--tit-md); }
.erro-tela p { margin:0; color:var(--txt2); font-size:var(--txt-md); max-width:42ch; }
.erro-detalhe { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; /* bcm-ok: endereço técnico pede monoespaçada */ font-size:var(--txt-xs);
  background:var(--sup2); border:1px solid var(--borda); border-radius:var(--raio-2); padding:6px 10px; }
.erro-acoes { display:flex; gap:var(--esp-2); margin-top:var(--esp-3); flex-wrap:wrap; justify-content:center; }

/* ---------- Minha conta: Meu perfil ---------- */
.perfil-identidade { display:flex; flex-wrap:wrap; gap:var(--e-6); align-items:flex-start; }
.perfil-avatar { display:flex; gap:var(--e-4); align-items:center; }
.perfil-avatar-acoes { display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2); }
/* Paleta FECHADA de oito, e não um seletor livre de cor: cor escolhida à mão vira
 * texto ilegível na metade das vezes, e o avatar é justamente o elemento que
 * precisa ser lido de relance. As oito carregam branco nos dois temas. */
.avatar-cores { display:flex; flex-wrap:wrap; gap:var(--e-2); }
.avatar-cor { width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid transparent; transition:box-shadow var(--t-rapido), border-color var(--t-rapido); }
.avatar-cor[aria-checked="true"] { border-color:var(--cor-texto); box-shadow:var(--anel); }
.avatar-cor:focus-visible { outline:2px solid var(--prim); outline-offset:2px; }