/* ═══ DESEMPENHO · tela de perfis ═════════════════════════════
   Estilos do módulo de desempenho. Ficam fora do styles.css de
   propósito: o módulo inteiro mora em arquivos próprios.
   Usa os tokens do design system (--borda-suave, --texto-mudo…). */
.perfis-rolagem { overflow-x: auto; padding: 0 10px 10px; }
.perfis { display: grid; min-width: 1060px; }
.perfis__cab, .perfis__linha {
  display: grid; align-items: center; gap: var(--e2);
  grid-template-columns: minmax(150px, 1.4fr) 104px 112px 112px 64px minmax(118px, 1fr) 122px 44px minmax(108px, 1fr) 80px;
}
.perfis__cab { padding: 6px 0; font-size: 12px; color: var(--texto-mudo); }
.perfis__linha { padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.perfis__nome { display: grid; min-width: 0; }
.perfis__nome small { color: var(--texto-mudo); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* campos mais justos que no resto do HUB: são dez colunas numa linha só,
   e com o respiro padrão a hora saía cortada e o Salvar caía fora do cartão */
.perfis .entrada { width: 100%; min-width: 0; padding: 9px 8px; font-size: .86rem; }
.perfis .btn { padding-left: 0; padding-right: 0; width: 100%; }
.perfis__foco { display: grid; place-items: center; min-height: 40px; cursor: pointer; position: relative; z-index: 1; border-radius: var(--r-xs); }
.perfis__foco:hover { background: var(--superficie-2); }
.perfis__foco input { width: 20px; height: 20px; cursor: pointer; accent-color: var(--primaria); }
/* travado (PJ): fica visivelmente apagado, pra não parecer defeito */
.perfis__foco:has(input:disabled) { cursor: not-allowed; opacity: .35; }
.perfis__foco:has(input:disabled):hover { background: none; }
.perfis__foco input:disabled { cursor: not-allowed; }
.perfis__estado { font-size: 12px; color: var(--texto-dim); }
.perfis__estado[data-tom="alerta"] { color: var(--wolf-vermelho); }
.perfil-meu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3); padding: 0 10px 10px; }
.perfil-meu dt { font-size: 12px; color: var(--texto-mudo); }
.perfil-meu dd { margin: 2px 0 0; }

/* ═══ DESEMPENHO · tela de entrega ════════════════════════════
   A cor da faixa nunca vai sozinha: todo número colorido tem o
   selo escrito ao lado (Verde, Amarelo, Vermelho, Sem dado).     */
.ent__nota { display: flex; align-items: center; gap: var(--e4); padding: 4px 10px 12px; flex-wrap: wrap; }
.ent__nota strong { font-family: var(--fonte-num); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ent__nota > div { display: grid; gap: 6px; justify-items: start; max-width: 60ch; }
[data-faixa="verde"] { color: var(--ok); }
[data-faixa="amarelo"] { color: var(--atencao); }
[data-faixa="vermelho"] { color: var(--alerta); }
[data-faixa="sem-dado"] { color: var(--texto-mudo); }
.ent__inds { display: grid; padding: 0 10px 8px; }
.ent__ind { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(90px, 1.4fr) 56px minmax(140px, 1.6fr); gap: var(--e3); align-items: center; padding: 9px 0; border-top: 1px solid var(--borda-suave); }
.ent__rot { display: grid; }
.ent__rot small { color: var(--texto-mudo); font-size: 12px; }
.ent__barra { height: 8px; border-radius: var(--r-full); background: var(--trilho); overflow: hidden; }
.ent__barra i { display: block; height: 100%; border-radius: var(--r-full); background: currentColor; }
.ent__val { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; text-align: right; }
.ent__det { font-size: 12px; color: var(--texto-dim); }
.ent__sem { grid-column: 2 / -1; font-size: .86rem; color: var(--texto-mudo); }
.ent__pessoa { display: grid; grid-template-columns: minmax(160px, 1fr) 60px 110px 80px; gap: var(--e3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.ent__time, .ent__atrasos { display: grid; padding: 0 10px 10px; }
.ent__sub { margin: 6px 10px 2px; font-size: .86rem; color: var(--texto-dim); font-weight: 600; }
.ent__atraso { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, 1.2fr) minmax(190px, 1.4fr); gap: var(--e3); align-items: center; padding: 7px 0; border-top: 1px solid var(--borda-suave); }
.ent__atraso a, .ent__atraso > span { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent__atraso small { color: var(--texto-mudo); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .ent__atraso { grid-template-columns: 1fr; }
  .ent__ind { grid-template-columns: 1fr 56px; }
  .ent__ind .ent__barra, .ent__ind .ent__det, .ent__sem { grid-column: 1 / -1; }
}

/* ═══ DESEMPENHO · matriz de carreira ═════════════════════════
   Onze colunas: pessoa, nível, cinco frentes, três transversais e
   o Salvar. O que falta para o próximo nível vai numa segunda
   linha, debaixo da pessoa, para não virar mais uma coluna.       */
.mtz { display: grid; min-width: 1120px; }
.mtz__cab, .mtz__linha {
  display: grid; align-items: center; gap: 6px var(--e2);
  grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) repeat(8, 78px) 80px;
}
.mtz__cab { padding: 6px 0; font-size: 12px; color: var(--texto-mudo); align-items: end; }
.mtz__cab .mtz__transv { color: var(--texto-dim); font-style: italic; }
.mtz__linha { padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.mtz .entrada { width: 100%; min-width: 0; padding: 9px 8px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mtz .btn { padding-left: 0; padding-right: 0; width: 100%; }
.mtz__falta { grid-column: 1 / -1; color: var(--texto-mudo); font-size: 12px; }
.mtz__falta:empty { display: none; }
.mtz__sem { display: grid; padding: 0 10px 10px; }
.mtz__semlinha { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: var(--e3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.mtz__legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e3); padding: 4px 10px 10px; }
.mtz__legenda div { display: grid; gap: 2px; }
.mtz__legenda small { color: var(--texto-mudo); font-size: 12px; }

/* ═══ DESEMPENHO · classificação do foco ══════════════════════ */
.cls__fila { display: grid; padding: 0 10px 10px; }
.cls__item { display: grid; grid-template-columns: minmax(180px, 1fr) 90px 80px auto auto auto auto; gap: var(--e3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.cls__valor { display: grid; min-width: 0; font-family: var(--fonte-num); font-size: .9rem; overflow-wrap: anywhere; }
.cls__valor small, .cls__vezes { color: var(--texto-mudo); font-size: 12px; font-family: var(--fonte-texto); }
.cls__form { display: grid; grid-template-columns: 130px minmax(200px, 1fr) 170px auto; gap: var(--e3); align-items: center; padding: 8px 10px; }
.cls__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 12px; }
.cls__chip { font-family: var(--fonte-num); gap: 4px; padding-right: 4px; }
.cls__chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; width: 24px; height: 24px; border-radius: var(--r-full); opacity: .7; }
.cls__chip button:hover, .cls__chip button:focus-visible { opacity: 1; background: rgba(255,255,255,.14); }
@media (max-width: 900px) { .cls__item, .cls__form { grid-template-columns: 1fr; } }

/* ═══ DESEMPENHO · foco ═══════════════════════════════════════ */
.foc__time { display: grid; padding: 0 10px 10px; overflow-x: auto; }
.foc__cab, .foc__pessoa { display: grid; grid-template-columns: minmax(180px, 1.6fr) 80px 104px 56px 76px 112px 84px 76px; gap: var(--e3); align-items: center; min-width: 860px; }
.foc__cab { padding: 6px 0; font-size: 12px; color: var(--texto-mudo); }
.foc__cab span:nth-child(n+2):not(:nth-child(3)) { text-align: right; }
.foc__pessoa { padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.foc__pessoa small { color: var(--texto-mudo); font-size: 12px; }
.foc__fora { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px var(--e4); padding: 2px 10px 12px; }
.foc__fora span { display: grid; font-size: .9rem; }
.foc__fora small { color: var(--texto-mudo); font-size: 12px; }
.foc__bloco { padding: 10px; border-top: 1px solid var(--borda-suave); display: grid; gap: 6px; }
.foc__blococab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.foc__blococab small { color: var(--texto-mudo); font-size: 12px; }
.foc__eventos { margin: 0; padding: 0 10px 8px 28px; display: grid; gap: 4px; font-size: .9rem; color: var(--texto-dim); }
.foc__bloco .foc__eventos { padding: 0 0 0 18px; }
.foc__eventos code { font-family: var(--fonte-num); font-size: .84rem; color: var(--texto); }

/* ═══ DESEMPENHO · painel geral, ocorrências e conceitos ══════ */
.pnl { display: grid; min-width: 980px; padding: 0 0 10px; }
.pnl__cab, .pnl__linha { display: grid; grid-template-columns: minmax(190px, 1.6fr) 70px 104px repeat(5, 84px) 76px; gap: var(--e3); align-items: center; }
.pnl__cab { padding: 6px 0; font-size: 12px; color: var(--texto-mudo); }
.pnl__cab span:nth-child(2), .pnl__cab span:nth-child(n+4) { text-align: right; }
.pnl__linha { padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.pnl__linha strong { font-size: 1.05rem; }
.pnl__motivo { display: block; color: var(--texto-mudo); font-size: 12px; }
.pnl__grave { margin: 0 10px 12px; padding: 10px 12px; border: 1px solid var(--alerta); border-radius: var(--r-xs); background: var(--alerta-fraco); color: var(--texto); }
.pnl__grave p { margin: 4px 0 0; color: var(--texto-dim); font-size: .9rem; }
.ent__nota--menor strong { font-size: 2rem; }
.oco__form { display: grid; grid-template-columns: minmax(150px, 1fr) 190px 150px minmax(200px, 2fr) auto auto; gap: var(--e3); align-items: center; padding: 8px 10px; }
.oco__grave { display: flex; align-items: center; gap: 8px; font-size: .86rem; white-space: nowrap; cursor: pointer; }
.oco__grave input { width: 18px; height: 18px; accent-color: var(--alerta); }
.oco__grave:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.oco__lista, .cnc { display: grid; padding: 0 10px 10px; }
.oco__item { display: grid; grid-template-columns: 96px minmax(150px, 1fr) auto minmax(160px, 2fr) auto; gap: var(--e3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda-suave); }
.oco__item small { color: var(--texto-dim); font-size: 12px; }
.cnc__perguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); padding: 4px 10px 10px; }
.cnc__perguntas div { display: grid; gap: 2px; }
.cnc__perguntas small { color: var(--texto-mudo); font-size: 12px; }
.cnc__linha { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) 90px; gap: var(--e3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda-suave); }
@media (max-width: 900px) { .oco__form, .oco__item, .cnc__linha { grid-template-columns: 1fr; } }

/* ═══ DESEMPENHO · acompanhamento (a escada) ══════════════════ */
.aco__caso { margin: 10px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--r-sm); background: var(--superficie-2); display: grid; gap: 10px; }
.aco__caso header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.aco__caso header small { color: var(--texto-mudo); font-size: 12px; flex: 1 1 220px; }
.aco__form { display: grid; gap: 10px; }
.aco__campo { display: grid; gap: 4px; font-size: 12px; color: var(--texto-mudo); }
.aco__campo .entrada { width: 100%; font-size: .9rem; color: var(--texto); }
.aco__campo textarea { resize: vertical; min-height: 68px; font-family: inherit; }
.aco__campo--curto { max-width: 260px; }
.aco__linha { display: grid; grid-template-columns: 150px minmax(200px, 1fr) auto; gap: var(--e3); align-items: center; }
.aco__form > .btn { justify-self: start; }
.aco__notas { display: grid; padding: 0 10px 4px; }
.aco__pessoa { display: grid; grid-template-columns: minmax(170px, 240px) 1fr; gap: var(--e3); align-items: center; padding: 7px 0; border-top: 1px solid var(--borda-suave); }
.aco__serie { display: flex; flex-wrap: wrap; gap: 6px; }
.aco__nota { font-family: var(--fonte-num); font-size: .84rem; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: var(--r-xs); background: var(--superficie-2); border: 1px solid transparent; }
.aco__nota--aberta { background: none; border: 1px dashed currentColor; }
.aco__feitos { display: grid; padding: 0 10px 10px; }
.aco__feito { display: grid; grid-template-columns: 92px minmax(150px, 1fr) minmax(170px, 1fr) minmax(200px, 2fr); gap: var(--e3); align-items: center; padding: 7px 0; border-top: 1px solid var(--borda-suave); font-size: .9rem; }
.aco__feito small { color: var(--texto-mudo); font-size: 12px; }
@media (max-width: 900px) { .aco__linha, .aco__pessoa, .aco__feito { grid-template-columns: 1fr; } }

/* ═══ DESEMPENHO · placar da casa ═════════════════════════════
   Vencido não é só cor: o selo diz "Vencido há N dias" e a linha
   ganha uma barra à esquerda.                                    */
.plc { display: grid; gap: 8px; padding: 0 10px 12px; }
.plc__item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--borda-suave); border-radius: var(--r-sm); background: var(--superficie-2); }
.plc__item[data-vencido] { border-color: var(--alerta); box-shadow: inset 4px 0 0 var(--alerta); }
.plc__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.plc__topo strong { font-size: 1rem; }
.plc__item small { color: var(--texto-mudo); font-size: 12px; }
.plc__editar { display: grid; grid-template-columns: 160px 150px minmax(160px, 1fr) auto auto; gap: var(--e3); align-items: center; padding-top: 6px; border-top: 1px dashed var(--borda); }
.plc__novo { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) 150px 160px auto; gap: var(--e3); align-items: center; padding: 8px 10px 12px; }
.plc__editar .entrada, .plc__novo .entrada { width: 100%; min-width: 0; padding: 9px 8px; font-size: .86rem; }
@media (max-width: 900px) { .plc__editar, .plc__novo { grid-template-columns: 1fr; } }