/* ==========================================================================
   Sistema de Gestão da Qualidade — folha de estilo única.
   Organizada em blocos: base, layout, componentes, gráficos.
   ========================================================================== */

:root {
  /* Tema claro fixo: mesmo que o Windows esteja no modo escuro, os campos
     de formulario continuam brancos. */
  color-scheme: light;

  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --borda: #e2e7ef;
  --texto: #1c2430;
  --texto-fraco: #6b7789;
  --primaria: #1f5fbf;
  --primaria-escura: #17499a;

  /* Paleta do painel do Power BI: vinho + cinza */
  --bi-vinho: #A5122A;
  --bi-vinho-escuro: #7C0D1F;
  --bi-cinza: #7E8082;

  --azul: #2b7de0;
  --verde: #1f9d61;
  --laranja: #e08a1e;
  --vermelho: #A5122A;
  --roxo: #7a53c4;
  --cinza: #8a94a4;
  --preto: #1c2430;
  --amarelo: #C9A227;   /* "em atraso", como no painel */

  /* Cores extras para o Status geral: são 9 status, e antes 3 deles
     dividiam o mesmo roxo e 2 o mesmo azul - na rosca viravam uma fatia só
     aos olhos. Cada legenda passou a ter a sua. */
  --turquesa: #12a5a5;
  --indigo:   #4b56d2;
  --rosa:     #c2478f;
  --ambar:    #d97706;
  --grafite:  #5b6472;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 14px rgba(20, 30, 50, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 24px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 0 0 14px; }
h3 { font-size: 14px; margin: 18px 0 6px; color: var(--texto-fraco); }

/* Alvo principal: 1920x1080. Em telas menores os @media do fim do arquivo
   reduzem tudo automaticamente. */
.container { max-width: 1760px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   Layout do módulo: menu lateral fixo + conteúdo
   ========================================================================== */
.layout { display: grid; grid-template-columns: 200px 1fr; align-items: start; }

.lateral {
  position: sticky; top: 60px;          /* 60px = altura da barra do topo */
  align-self: start;
  height: calc(100vh - 60px);
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.lateral .item {
  padding: 9px 12px; border-radius: 7px;
  color: var(--texto-fraco); font-size: 13.5px; font-weight: 500;
}
.lateral .item:hover { background: var(--fundo); text-decoration: none; color: var(--texto); }
.lateral .item.ativo {
  background: var(--bi-vinho); color: #fff; font-weight: 600;
}

/* Em tela estreita o menu lateral vira uma GAVETA (ver o fim do arquivo). */

/* ===== Topo ===== */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 10;
}
.topo-inner {
  display: flex; align-items: center; height: 60px; gap: 20px;
  max-width: 1760px; margin: 0 auto; padding: 0 24px;
}
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topo-acoes > a:not(.botao) { color: var(--texto-fraco); font-size: 13.5px; }

/* ===== Abas de módulo =====
   Todas do MESMO tamanho e cada nome numa LINHA SÓ (22/09/2026). Antes cada
   aba media o tamanho do próprio nome — "PAT" minúsculo, "Ocorrências e
   NATs" comprido — e os nomes longos quebravam em duas ou três linhas.

   `flex: 1 1 0` divide o espaço que sobra na barra em oito partes iguais, e
   o `min-width: 0` é o que permite encolher (sem ele o conteúdo trava a
   largura e a barra estoura). O `nowrap` garante a linha única; a reticência
   é a rede de segurança para uma tela estreita demais, para o texto nunca
   sair por cima da aba vizinha.

   Os ÍCONES saíram: com eles o nome mais longo ("Controle de Mudanças") não
   cabia em uma linha na largura que sobra, e ele preferiu a linha única. */
.modulos {
  display: flex; align-items: center; gap: 4px;
  margin-left: 14px; flex: 1 1 auto; min-width: 0;
}
.modulo {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  color: var(--texto-fraco);
}
.modulo-icone { display: none; }
.modulo:hover { background: var(--fundo); text-decoration: none; }
.modulo.ativo { background: var(--bi-vinho); color: #fff; }

/* O botão da direita ("+ Nova ocorrência") também quebrava em duas linhas e
   ficava mais alto que o resto da barra. */
.topo-acoes .botao { white-space: nowrap; }
.topo-acoes { flex: none; }

.marca { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--texto); font-size: 16px; }
.marca:hover { text-decoration: none; }

/* O logo da empresa abre a barra. Altura fixa e largura automática: travar só
   a altura mantém a proporção em qualquer tela.
   Trocado para a INTRALOG em 12/10/2026 (era a JSL). O arquivo novo é
   350x100 — mais largo que o anterior (880x352), então a 30px de altura ele
   ocupa ~105px contra os 75px de antes; as abas do topo encolhem um pouco
   para caber, e isso já está conferido a 1920 e 1366. */
.marca-logo { height: 30px; width: auto; display: block; }

/* Traço separando o logo da empresa do nome do sistema — um é a marca da
   empresa, o outro é este site; sem a divisória os dois parecem uma coisa só. */
.marca-nome {
  padding-left: 12px; border-left: 1px solid var(--borda);
  color: var(--texto-fraco); font-weight: 600; white-space: nowrap;
}
.marca:hover .marca-nome { color: var(--texto); }

@media (max-width: 900px) {
  /* em tela estreita o nome sai e fica só o logo: a barra tem 60px e as abas
     dos módulos precisam do espaço */
  .marca-nome { display: none; }
}
.menu { display: flex; align-items: center; gap: 6px; }
.menu a { padding: 7px 12px; border-radius: 7px; color: var(--texto-fraco); font-weight: 500; }
.menu a:hover { background: var(--fundo); text-decoration: none; }
.menu a.ativo { color: var(--primaria); background: #eaf1fd; }

.conteudo { padding: 22px 26px 50px; min-width: 0; }  /* min-width:0 deixa a tabela larga rolar */
.rodape { padding: 0 26px 30px 226px; color: var(--texto-fraco); font-size: 12px; }
@media (max-width: 900px) { .rodape { padding-left: 26px; } }

.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1500px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grade-4 { grid-template-columns: 1fr; } }

/* ===== Painéis e grades ===== */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  margin-bottom: 18px;
}
fieldset.painel { border: 1px solid var(--borda); }
legend { font-weight: 600; font-size: 14px; padding: 0 6px; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } }

/* Os 8 gráficos do dashboard. Em 1920 cabem 4 por linha (2 linhas),
   o que economiza bastante rolagem numa tela de 1080 de altura. */
.grade-graficos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1600px) { .grade-graficos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .grade-graficos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .grade-graficos { grid-template-columns: 1fr; } }

.painel-cabecalho { display: flex; justify-content: space-between; align-items: center; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--texto-fraco); }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.ponto.azul { background: var(--azul); }
.ponto.verde { background: var(--verde); }

/* ===== Cartões de indicador ===== */
/* São 6 cartões. Usamos 6 / 3 / 2 colunas — divisores exatos de 6,
   assim nunca sobra um cartão sozinho na última linha. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px; margin-bottom: 18px;
}
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.cartao.alerta { border-color: #f2c2c2; background: #fff7f7; }
.cartao-rotulo { font-size: 12px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .03em; }
.cartao-valor { font-size: 30px; font-weight: 650; line-height: 1.1; }
.cartao-valor small { font-size: 15px; font-weight: 500; color: var(--texto-fraco); }
.cartao.alerta .cartao-valor { color: var(--vermelho); }
.cartao-nota { font-size: 11px; color: var(--texto-fraco); }

/* ==========================================================================
   Faixa vermelha do topo, no estilo do painel
   ========================================================================== */
.faixa {
  background: var(--bi-vinho);
  border-radius: var(--raio);
  padding: 16px 22px 18px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.faixa h1 {
  color: #fff; margin: 0; font-size: 27px; font-weight: 600;
  font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em;
}
.faixa-cartoes {
  flex: 1; display: grid; gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Os 6 KPIs cabem lado a lado em 1920. Em janela estreita eles não cabem, e
   sem estas quebras os números se escreviam por cima uns dos outros. */
@media (max-width: 1250px) { .faixa-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .faixa-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .faixa-cartoes { grid-template-columns: 1fr; } }
.kpi {
  background: #fff; border-radius: 8px; padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.kpi-valor { font-size: 21px; font-weight: 700; color: var(--preto); line-height: 1.2; }
.kpi-rotulo { font-size: 10.5px; color: #5c6674; margin-top: 2px; }
.kpi-alerta .kpi-valor { color: var(--bi-vinho); }

/* ==========================================================================
   Gráficos em SVG
   ========================================================================== */
.svg-caixa { width: 100%; }
.grafico-svg { width: 100%; height: auto; display: block; }

.grafico-svg .col-vermelha { fill: var(--bi-vinho); }
.grafico-svg .col-cinza { fill: var(--bi-cinza); }

/* Área clicável de cada coluna. A "zona" é um retângulo transparente que vai
   da base ao topo: sem ela, colunas baixas seriam difíceis de acertar. */
.grafico-svg .col-alvo { cursor: pointer; }
.grafico-svg .zona { fill: transparent; }
.grafico-svg .col-alvo:hover .zona { fill: rgba(165, 18, 42, .07); }
.grafico-svg .col-alvo:hover .col { filter: brightness(1.18); }
.grafico-svg .col-alvo:focus-visible .zona { fill: rgba(165, 18, 42, .14); }
.grafico-svg .col-alvo:focus { outline: none; }
.rosca .col-alvo:hover .fatia { stroke-width: 36; }
.rosca .fatia { transition: stroke-width .12s; }

/* ===== Balão de informação ===== */
.dica {
  position: fixed; z-index: 50; pointer-events: none;
  background: #1c2430; color: #fff; border-radius: 8px;
  padding: 9px 12px; max-width: 280px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  display: grid; gap: 1px; font-size: 12.5px; line-height: 1.35;
}
.dica[hidden] { display: none; }
.dica strong { font-size: 13px; }
.dica span { font-size: 19px; font-weight: 700; }
.dica small { color: #c3ccd8; }
.dica em { color: #94a3b4; font-style: normal; font-size: 11px; margin-top: 3px; }

.grafico-svg .grade { stroke: #e6eaf0; stroke-width: 1; stroke-dasharray: 4 4; }
.grafico-svg .eixo { stroke: #c9d0da; stroke-width: 1.5; }

/* Textos dentro do SVG. Como o SVG é redimensionado, os tamanhos aqui são
   relativos à "tela" de 1000x380 definida no graficos.py. */
.grafico-svg text { font-family: inherit; fill: var(--texto); }
.grafico-svg .rotulo-valor { font-size: 17px; font-weight: 700; text-anchor: middle; }
.grafico-svg .rotulo-perc { font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--bi-vinho); }
.grafico-svg .rotulo-cat { font-size: 14px; text-anchor: end; fill: var(--texto-fraco); }
.grafico-svg .rotulo-pareto { font-size: 13px; font-weight: 600; text-anchor: middle; fill: #333; }

.grafico-svg .pareto { fill: none; stroke: #1c2430; stroke-width: 2; }
.grafico-svg .pareto-ponto { fill: #1c2430; }

/* ===== Rosca (donut) ===== */
.rosca-linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rosca { width: 200px; height: 200px; flex: none; transform: rotate(-90deg); }
.rosca .fatia { fill: none; stroke-width: 30; }
.rosca .fatia.vermelho { stroke: var(--bi-vinho); }
.rosca .fatia.azul { stroke: var(--azul); }
.rosca .fatia.verde { stroke: var(--verde); }
.rosca .fatia.laranja { stroke: var(--laranja); }
.rosca .fatia.roxo { stroke: var(--roxo); }
.rosca .fatia.cinza { stroke: var(--cinza); }
/* o texto do centro precisa desgirar, senão fica de lado */
.rosca text { transform: rotate(90deg); transform-origin: 100px 100px; text-anchor: middle; }
.rosca .rosca-total { font-size: 30px; font-weight: 700; fill: var(--texto); }
.rosca .rosca-nota { font-size: 12px; fill: var(--texto-fraco); }

.rosca-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; display: grid; gap: 6px; }
.rosca-legenda li { font-size: 13px; }
/* a linha toda é o alvo do clique - fatia pequena no anel é inclicável */
.legenda-item {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 9px;
  align-items: center; padding: 6px 8px; border-radius: 7px;
  color: var(--texto); border: 1px solid transparent;
}
a.legenda-item:hover {
  background: var(--fundo); border-color: var(--borda); text-decoration: none;
}
a.legenda-item:hover .rosca-nome { color: var(--texto); }
.rosca-nome { color: var(--texto-fraco); }
.rosca-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.rosca-perc { color: var(--texto-fraco); font-size: 12px; width: 42px; text-align: right; }

.ponto.vermelho { background: var(--bi-vinho); }
.ponto.cinza { background: var(--bi-cinza); }
.ponto.preto { background: #1c2430; }
.ponto.laranja { background: var(--laranja); }
.ponto.roxo { background: var(--roxo); }
.ponto.amarelo { background: var(--amarelo); }
.ponto.verde { background: var(--verde); }
.ponto.azul { background: var(--azul); }
.rosca .fatia.amarelo { stroke: var(--amarelo); }
.etiqueta.amarelo { background: var(--amarelo); }

/* ===== Gráfico mensal (colunas) ===== */
.grafico-mensal { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.barras { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.barra { width: 42%; min-height: 2px; border-radius: 3px 3px 0 0; }
.barra.azul { background: var(--azul); }
.barra.verde { background: var(--verde); }
.mes-rotulo { font-size: 11px; color: var(--texto-fraco); }

/* ===== Barras horizontais ===== */
/* O rótulo fica ACIMA da barra, ocupando a largura toda do painel.
   Assim nomes longos ("Plano de ação em andamento") nunca são cortados,
   independente da resolução da tela. */
.barras-h { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.barras-h li { display: grid; gap: 4px; font-size: 12.5px; }
.barra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.barra-rotulo { color: var(--texto-fraco); }
.barra-valor { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); }
.barra-trilho { background: var(--fundo); border-radius: 5px; height: 10px; overflow: hidden; }
.barra-preenchida { display: block; height: 100%; border-radius: 5px; }

.barra-preenchida.azul { background: var(--azul); }
.barra-preenchida.verde { background: var(--verde); }
.barra-preenchida.laranja { background: var(--laranja); }
.barra-preenchida.vermelho { background: var(--vermelho); }
.barra-preenchida.roxo { background: var(--roxo); }
.barra-preenchida.cinza { background: var(--cinza); }

/* ===== Tabelas ===== */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-fraco); padding: 8px 10px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #fafbfd; }
.rolagem { overflow-x: auto; }
.corta { max-width: 340px; }
.linha-atrasada { background: #fff7f7; }
.nowrap { white-space: nowrap; }
.link-forte { font-weight: 600; }

/* ===== Etiquetas ===== */
.etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap;
}
.etiqueta.pequena { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; }
.etiqueta.azul { background: var(--azul); }
.etiqueta.verde { background: var(--verde); }
.etiqueta.laranja { background: var(--laranja); }
.etiqueta.vermelho { background: var(--vermelho); }
.etiqueta.roxo { background: var(--roxo); }
.etiqueta.cinza { background: var(--cinza); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ===== Botões ===== */
.botao {
  display: inline-block; padding: 8px 15px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer;
}
.botao:hover { text-decoration: none; background: var(--fundo); }
.botao-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao-primario:hover { background: var(--primaria-escura); }
.botao-neutro { color: var(--texto-fraco); }
.botao-perigo { border-color: #f0c0c0; color: var(--vermelho); }
.botao-perigo:hover { background: #fdf2f2; }
.link-perigo { background: none; border: none; color: var(--vermelho); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.link-perigo:hover { text-decoration: underline; }

/* ===== Formulários ===== */
.filtros { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros input[type=search] { flex: 1; min-width: 220px; }
.filtro-data { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.filtro-data input { margin-top: 0; }

input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 7px;
  font: inherit; font-size: 14px; background: var(--superficie); color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(31, 95, 191, .12);
}
.filtros input, .filtros select { width: auto; }
textarea { resize: vertical; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-fraco); margin-bottom: 12px; }
label input, label select, label textarea { margin-top: 5px; font-weight: 400; color: var(--texto); }

.grade-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
@media (max-width: 700px) { .grade-form { grid-template-columns: 1fr; } }
.grade-form .largo, .acoes-form { grid-column: 1 / -1; }
.acoes-form { display: flex; gap: 10px; margin-top: 6px; }
.perigo { margin-top: 24px; }

.adicionar { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.adicionar summary { cursor: pointer; font-weight: 600; color: var(--primaria); margin-bottom: 12px; }

/* ===== Aviso destacado ===== */
.aviso {
  background: #fff7f7; border: 1px solid #f2c2c2; border-left: 4px solid var(--bi-vinho);
  border-radius: var(--raio); padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}

/* A versão VERDE do aviso: "está tudo certo", em vez de "cuidado". Nasceu na
   janelinha de lançar no DocAction, onde a mesma caixa diz as duas coisas
   conforme a NAT esteja completa ou não. */
.aviso-ok {
  background: #f4fbf6; border: 1px solid #c4e7cf; border-left: 4px solid var(--verde);
  border-radius: var(--raio); padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}
/* a lista do que falta, dentro do aviso: compacta, sem o recuo padrão do <ul> */
.aviso ul, .aviso-ok ul { margin: 6px 0; padding-left: 20px; }
.aviso li, .aviso-ok li { margin: 2px 0; }

/* ===== Régua de etapas do workflow (Controle de Mudanças) ===== */
.etapas { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.etapa { flex: 1; min-width: 96px; text-align: center; position: relative; }
.etapa-bolha {
  display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 6px;
  border-radius: 50%; background: var(--fundo); color: var(--texto-fraco);
  border: 2px solid var(--borda); font-size: 12px; font-weight: 700;
}
.etapa-nome { font-size: 11.5px; color: var(--texto-fraco); display: block; }
.etapa.feita .etapa-bolha { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapa.atual .etapa-bolha { background: var(--bi-vinho); border-color: var(--bi-vinho); color: #fff; }
.etapa.atual .etapa-nome { color: var(--bi-vinho); font-weight: 700; }
/* linha ligando as bolhas */
.etapa:not(:first-child)::before {
  content: ""; position: absolute; top: 14px; left: -50%; width: 100%;
  height: 2px; background: var(--borda); z-index: 0;
}
.etapa.feita::before, .etapa.atual::before { background: var(--verde); }
.etapa-bolha { position: relative; z-index: 1; }

.linha-apagada { opacity: .5; }
.lista-simples { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.lista-simples li { margin-bottom: 3px; }

/* ===== Matriz do plano de treinamento ===== */
.matriz .col-nome { min-width: 240px; }
.matriz .col-mes { text-align: center; width: 46px; }
.matriz .cel {
  text-align: center; font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--texto-fraco); border-left: 1px solid var(--borda);
}
.matriz .cel-ok { background: #e8f6ee; color: #12703f; font-weight: 700; }
.matriz .cel-parcial { background: #eaf1fd; color: #1b4d8f; font-weight: 600; }
.matriz .cel-atraso { background: #fdecec; color: var(--bi-vinho); font-weight: 700; }
.barra-mini { width: 70px; display: inline-block; vertical-align: middle; }
/* destaca a coluna do mês corrente na programação */
.matriz .mes-atual { color: var(--bi-vinho); font-weight: 700; }
.matriz .cel-hoje { box-shadow: inset 0 0 0 2px var(--bi-vinho); }

/* Campo "Qual setor?" que aparece embaixo do depto quando é "Outros" */
.risco-setor { margin-top: 5px; font-size: 12.5px; }

/* Cabeçalho e rodapé no estilo do formulário oficial (FORM-GRU-07) */
.folha-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bi-vinho); color: #fff; border-radius: var(--raio);
  padding: 14px 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.folha-cabecalho strong { display: block; font-size: 17px; }
.folha-cabecalho .ajuda { color: #f0d3d8; font-size: 12px; }
.folha-numero {
  background: #fff; color: var(--bi-vinho); font-weight: 700; font-size: 19px;
  padding: 7px 16px; border-radius: 8px;
}
.rodape-form {
  font-size: 11.5px; color: var(--texto-fraco); text-align: center;
  border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 6px;
}

/* Sugestão do motor de fluxo: o sistema calcula, a pessoa decide */
.sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 14px; padding: 12px 16px;
  background: #eaf1fd; border: 1px solid #c6d9f7; border-radius: var(--raio);
  font-size: 13.5px;
}

/* Blocos de análise de causa (cada um com os seus 5 porquês) */
.analise { border-left: 3px solid var(--borda); padding: 2px 0 2px 14px; margin-bottom: 18px; }
.analise:first-of-type { border-left-color: var(--bi-vinho); }
.analise-titulo { margin: 0 0 8px; font-size: 13px; color: var(--texto); text-transform: none; }

/* Atalhos por situação, no topo da lista de ações */
.atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.atalho {
  display: flex; flex-direction: column; align-items: center; min-width: 108px;
  padding: 10px 16px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
}
.atalho:hover { background: var(--fundo); text-decoration: none; }
.atalho.ativo { border-color: var(--bi-vinho); background: #fdf2f4; }
.atalho-valor { font-size: 21px; font-weight: 700; }
.atalho-rotulo { font-size: 11.5px; color: var(--texto-fraco); }
.atalho-alerta .atalho-valor { color: var(--bi-vinho); }

/* Caixas de seleção múltipla (turnos que entregam evidência) */
.caixas { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.caixa {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px 12px; border: 1px solid var(--borda); border-radius: 7px;
  background: var(--superficie); font-size: 13px; font-weight: 500;
  color: var(--texto); cursor: pointer;
}
.caixa:hover { background: var(--fundo); }
.caixa input { width: auto; margin: 0; }
.caixa:has(input:checked) {
  border-color: var(--bi-vinho); background: #fdf2f4; color: var(--bi-vinho); font-weight: 600;
}

.etiqueta-6m { margin: 6px 0 0; }

/* ==========================================================================
   Escolha encadeada turno / setor / subsetor (Plano de Ação)
   ==========================================================================
   A opção que não existe na combinação escolhida fica APAGADA em vez de
   sumir: quem olha precisa ver que ela existe, só não naquele turno. */
/* O que não pertence à combinação escolhida SOME. Já ficou apagado em vez de
   sumir, e o resultado foi uma tela com 9 setores e 16 subsetores à mostra
   quase todos inúteis — ele pediu para esconder. */
.caixa.fora { display: none; }
.escolha-antes { margin: 2px 0 8px; font-style: italic; }

/* Áreas agrupadas pelo supervisor: um bloco por nome escolhido */
.por-supervisor { display: block; }
.grupo-supervisor {
  border: 1px solid var(--borda); border-left: 3px solid var(--primaria);
  border-radius: 8px; padding: 8px 12px 10px; margin-bottom: 8px;
  background: var(--superficie);
}
.grupo-nome { font-size: 12.5px; font-weight: 700; color: var(--primaria-escura); }
.grupo-turno {
  font-size: 11px; color: var(--texto-fraco); margin-left: 8px;
  text-transform: uppercase; letter-spacing: .04em;
}
.grupo-caixas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cascata-evidencia > label { display: block; margin-top: 14px; }
.cascata-evidencia .caixa-solta { display: inline-flex; margin-top: 10px; }

.supervisores-da-escolha {
  margin: 12px 0 0; padding: 10px 14px; font-size: 13.5px;
  border: 1px solid #cfe0f7; border-left: 4px solid var(--primaria);
  border-radius: 8px; background: #eaf1fc;
}
.supervisores-da-escolha b { color: var(--primaria-escura); }

/* Lista de supervisores de um turno, com o (+) para acrescentar outro */
.resp-lista { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.resp-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .04em; color: var(--texto-fraco); margin-top: 2px; }
.resp-lista[hidden] { display: none; }
.botao-mais {
  border: 1px dashed var(--borda); background: var(--superficie);
  color: var(--primaria); border-radius: 6px; cursor: pointer;
  width: 26px; height: 24px; font-size: 15px; line-height: 1; padding: 0;
}
.botao-mais:hover { border-color: var(--primaria); background: #eaf1fc; }

/* Os 6M da análise de causa: uma linha de botões que quebra sozinha */
.caixas-6m { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }

/* Opções Conforme / Não conforme / Não aplicável do checklist */
.opcoes { display: flex; gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 4px; margin: 0;
  font-size: 12.5px; font-weight: 400; color: var(--texto); cursor: pointer;
}
.opcao input { width: auto; margin: 0; }

/* formulário curtinho dentro de uma célula da tabela */
.linha-form { display: flex; gap: 5px; align-items: center; }
.linha-form input { width: 132px; }
.linha-form .botao { padding: 5px 10px; font-size: 12.5px; }

/* ===== Paginação ===== */
.paginacao { display: flex; gap: 5px; align-items: center; justify-content: center;
             margin-top: 18px; flex-wrap: wrap; }
.pag {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 7px 11px; border: 1px solid var(--borda); border-radius: 7px;
  background: var(--superficie); color: var(--texto); font-size: 13.5px;
}
.pag:hover { background: var(--fundo); text-decoration: none; }
.pag.atual { background: var(--bi-vinho); border-color: var(--bi-vinho); color: #fff; font-weight: 600; }
.pag.desativado { color: #b6bec9; background: var(--fundo); }
.pag-reticencias { padding: 0 4px; color: var(--texto-fraco); }

/* ===== Textos auxiliares ===== */
.ajuda { font-size: 12px; color: var(--texto-fraco); font-weight: 400; }
.resumo { color: var(--texto-fraco); font-size: 13px; margin: 0 0 14px; }
.vazio { color: var(--texto-fraco); font-size: 13.5px; padding: 6px 0; }
.texto { white-space: pre-wrap; margin: 0; font-size: 14px; }
.texto.destaque { background: var(--fundo); padding: 10px 12px; border-radius: 7px; border-left: 3px solid var(--primaria); }
.migalha { font-size: 12px; color: var(--texto-fraco); }
.cabecalho-registro { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.cabecalho-registro h1 { margin: 4px 0 0; }

.lista-dados { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; margin: 0; font-size: 13.5px; }
.lista-dados dt { color: var(--texto-fraco); }
.lista-dados dd { margin: 0; }

.porques { margin: 0; padding-left: 22px; font-size: 14px; }
.porques li { margin-bottom: 5px; }

/* ==========================================================================
   Telas de notebook (até 1400px de largura).
   Tudo fica um pouco mais compacto e os 6 cartões passam para 3 colunas
   (2 linhas de 3), em vez de 4 + 2 sobrando.
   ========================================================================== */
@media (max-width: 1400px) {
  body { font-size: 14px; }
  .container { padding: 0 18px; }

  .topo-inner { height: 54px; }
  .menu a { padding: 6px 10px; font-size: 13.5px; }
  .botao { padding: 7px 13px; font-size: 13.5px; }

  h1 { font-size: 21px; margin-bottom: 16px; }
  h2 { font-size: 15px; }

  .conteudo { padding: 20px 18px 40px; }
  .painel { padding: 15px 16px; margin-bottom: 14px; }
  .grade-2 { gap: 14px; }

  .cartoes { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cartao { padding: 12px 14px; }
  .cartao-valor { font-size: 26px; }
  .cartao-rotulo { font-size: 11px; }

  .grafico-mensal { height: 140px; }
  .barras-h { gap: 8px; }
  .barras-h li { font-size: 12px; }
  .tabela { font-size: 13px; }
  .tabela td { padding: 7px 8px; }
  .corta { max-width: 260px; }
}

/* Telas estreitas (notebook pequeno em janela dividida, tablet) */
@media (max-width: 820px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   PAT — Plano Anual de Treinamento
   Os gráficos são CSS puro (não passam pelo graficos.py), mas usam a MESMA
   paleta do resto do sistema: vinho para o que foi feito, cinza para o que
   falta. Nada de cor própria - a aba tem que parecer irmã das outras.
   ========================================================================== */
/* Termômetro de aderência */
.medidor .trilha { background: var(--fundo); border-radius: 6px; height: 22px; overflow: hidden; }
.medidor .preenchimento {
  height: 100%; background: var(--verde); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  min-width: 34px;
}
.medidor.baixo .preenchimento { background: var(--bi-vinho); }
.medidor.medio .preenchimento { background: var(--laranja); }

/* Cronograma: uma coluna por mês, com a parte concluída destacada embaixo */
.grafico-mes { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 4px; }
.coluna-mes {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%; justify-content: flex-end; color: inherit;
}
a.coluna-mes:hover { text-decoration: none; }
a.coluna-mes:hover .col-barra { filter: brightness(1.15); }
.coluna-mes .col-barra {
  width: 100%; max-width: 44px; background: var(--bi-cinza);
  border-radius: 4px 4px 0 0; min-height: 2px; position: relative;
}
.coluna-mes .col-barra .feito {
  position: absolute; bottom: 0; left: 0; width: 100%;
  background: var(--bi-vinho); border-radius: 0 0 4px 4px;
}
.coluna-mes .col-num { font-size: 12px; font-weight: 700; color: var(--texto); }
.coluna-mes .col-mes { font-size: 11.5px; color: var(--texto-fraco); }
.coluna-mes.mes-atual .col-mes { color: var(--bi-vinho); font-weight: 700; }

/* Barras horizontais por área */
.grafico-barras-h { display: flex; flex-direction: column; gap: 9px; }
.linha-barra { display: grid; grid-template-columns: 150px 1fr 32px; gap: 10px;
               align-items: center; color: inherit; }
a.linha-barra:hover { text-decoration: none; }
a.linha-barra:hover .preenchimento { filter: brightness(1.15); }
.linha-barra .nome { font-size: 12.5px; text-align: right; color: var(--texto-fraco); }
.linha-barra .trilha { background: var(--fundo); border-radius: 4px; height: 16px; }
.linha-barra .preenchimento { height: 100%; border-radius: 4px; background: var(--bi-vinho); min-width: 2px; }
.linha-barra .num { font-size: 13px; font-weight: 700; }

/* A lista de atenção não pode esticar o painel ao lado */
.rolagem-lista { max-height: 320px; overflow-y: auto; }

/* Chips de status do plano (atalho de filtro, como no sistema original) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: #fff; border: 1px solid var(--borda); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; color: var(--texto);
  display: flex; gap: 8px; align-items: center;
}
.chip:hover { border-color: var(--bi-vinho); text-decoration: none; }
.chip b { font-size: 15px; }
.chip.ativo { background: var(--bi-vinho); color: #fff; border-color: var(--bi-vinho); }

/* Etiqueta do atraso calculado pelo sistema (o mês programado já passou) */
.alerta-atraso {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: bold;
  color: #b45309; background: #fef3c7; border-radius: 10px; padding: 2px 8px;
  white-space: nowrap;
}

.pat-tabela td small { color: var(--texto-fraco); display: block; font-size: 11px; }
.vazio-celula { text-align: center; padding: 26px; color: var(--texto-fraco); }

/* ==========================================================================
   Lista de sugestão de nomes (campo do colaborador)
   ========================================================================== */
/* O <label> é a âncora do posicionamento: a lista precisa nascer colada no
   campo, e é o label que embrulha os dois. */
.campo-busca { position: relative; }

.sugestoes {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 4px; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(28, 36, 48, .14);
}
.sugestoes li {
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; font-weight: 400;   /* o label é negrito; a lista não herda */
}
/* .marcada é a navegação pelo teclado; o hover é o mouse. Mesma aparência de
   propósito: quem usa os dois não vê duas linguagens diferentes. */
.sugestoes li:hover, .sugestoes li.marcada { background: #eaf1fc; }
.sugestoes li small { color: var(--texto-fraco); font-size: 11.5px; }
.sugestoes li small.ajuda { color: #8a5a00; }

/* ==========================================================================
   Reincidência de pessoas + janela flutuante (formulário de ocorrência)
   ========================================================================== */
.reincidencia {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  font-size: 13.5px; border: 1px solid var(--borda); background: #fff;
}
.reincidencia p { margin: 0; }
.reincidencia.ok { color: var(--texto-fraco); border-style: dashed; }
.reincidencia.alerta { border-color: #f0c36d; background: #fff8e6; }
.reincidencia.alerta b { color: #8a5a00; }

.nat-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.nat-lista li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; background: #fff; border: 1px solid var(--borda); border-radius: 6px;
}
.nat-lista a { font-weight: 600; }
.nat-lista small { color: var(--texto-fraco); font-size: 12px; }

/* O fundo escurecido cobre a tela inteira; a janela flutua por cima.
   position: fixed para o formulário continuar exatamente onde estava. */
.janela-fundo {
  position: fixed; inset: 0; background: rgba(16, 24, 36, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 60;
}
.janela-fundo[hidden] { display: none; }
.janela {
  background: #fff; border-radius: 10px; padding: 22px 24px;
  width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3); position: relative;
}
.janela-fechar {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--texto-fraco); cursor: pointer; padding: 4px 8px;
}
.janela-fechar:hover { color: var(--texto); }
body.sem-rolagem { overflow: hidden; }

.resumo-topo { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 16px; margin-bottom: 16px; padding-right: 30px; }
.resumo-topo h3 { margin: 0; font-size: 20px; }
.janela h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
             color: var(--texto-fraco); margin: 18px 0 6px; }
.resumo-acoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.resumo-acoes li { font-size: 13.5px; padding: 8px 10px; background: var(--fundo); border-radius: 6px; }
.resumo-acoes small { display: block; color: var(--texto-fraco); font-size: 12px; margin-top: 3px; }
.resumo-rodape { margin: 18px 0 0; }

/* Trilha do assistente de registro (1. O que aconteceu / 2. Análise).
   Classe PRÓPRIA: ".etapas" já é a régua do fluxo da ocorrência, lá em cima -
   usar o mesmo nome fazia a régua virar dois cartões empilhados. */
.passos {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.passos li {
  background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--borda);
  border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px;
  color: var(--texto-fraco);
}
.passos li small { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.passos li.atual { border-left-color: var(--primaria); color: var(--texto); }
.passos li.feita { border-left-color: var(--verde); }
.passo-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 6px;
  background: var(--fundo); font-size: 12px;
}
.passos li.atual .passo-numero { background: var(--primaria); color: #fff; }
.passos li.feita .passo-numero { background: var(--verde); color: #fff; }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr; } }

/* Bloco "Etapas do tratamento": caixa de seleção que abre os próprios campos */
.etapa-tratativa { padding: 12px 0; border-bottom: 1px solid var(--borda); }
.etapa-tratativa:last-child { border-bottom: none; padding-bottom: 0; }
.marcador { display: flex; align-items: center; gap: 9px; font-weight: 600;
            font-size: 14px; cursor: pointer; }
.marcador input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primaria);
                                   margin: 0; cursor: pointer; }
.campos-etapa { margin-top: 12px; padding-left: 26px; }
.campos-etapa[hidden] { display: none; }

/* ==========================================================================
   Situação no fluxo (tela da ocorrência)
   Três camadas empilhadas, com respiro entre elas: onde está, por onde
   passou, o que falta.
   ========================================================================== */
.fluxo-painel > * + * { margin-top: 16px; }

/* Camada 1: onde a ocorrência está agora */
.fluxo-agora { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
               background: var(--fundo); border-radius: 8px; padding: 12px 14px; }
.fluxo-agora p { margin: 0; font-size: 13.5px; color: var(--texto-fraco); flex: 1; min-width: 240px; }

/* Camada 2: a régua ganha ar em volta - antes ela colava no texto de cima */
.fluxo-painel .etapas { padding: 6px 2px 2px; }

/* Camada 3: o prazo dos 10 dias como barra */
.fluxo-prazo { border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; }
.fluxo-prazo-topo { display: flex; justify-content: space-between; gap: 14px;
                    flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
.fluxo-prazo .trilha { background: #eef1f5; border-radius: 5px; height: 10px; overflow: hidden; }
.fluxo-prazo .preenchimento { height: 100%; background: var(--verde); border-radius: 5px; }
.fluxo-prazo small { display: block; margin-top: 7px; }
.fluxo-prazo.estourado { border-color: #f2c2c2; background: #fff7f7; }
.fluxo-prazo.estourado .preenchimento { background: var(--bi-vinho); }

/* Etapa marcada como atrasada: mesma bolha, cor de alerta e uma tarja embaixo */
.etapa.atrasada .etapa-bolha { background: var(--bi-vinho); border-color: var(--bi-vinho); color: #fff; }
.etapa.atrasada .etapa-nome { color: var(--bi-vinho); font-weight: 700; }
.etapa.atrasada::before { background: var(--verde); }
.etapa-marca {
  display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--bi-vinho); border-radius: 9px; padding: 1px 7px;
}

/* Blocos de análise adicional clonados no formulário */
.analise-extra {
  border: 1px dashed var(--borda); border-radius: 8px;
  padding: 12px 14px; margin-top: 12px; background: var(--fundo);
}
.analise-extra-topo { display: flex; justify-content: space-between; align-items: center;
                      margin-bottom: 8px; }
.analise-titulo { font-size: 13px; }
.botao-texto {
  background: none; border: none; color: var(--bi-vinho); cursor: pointer;
  font-size: 12.5px; padding: 2px 4px; text-decoration: underline;
}

/* Sub-item do menu lateral: recuado, com um traço ligando ao item de cima */
.lateral .item.sub { padding-left: 26px; font-size: 13px; position: relative; }
.lateral .item.sub::before {
  content: ""; position: absolute; left: 13px; top: 0; bottom: 50%;
  border-left: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  width: 7px; border-bottom-left-radius: 4px;
}

/* ==========================================================================
   Grupos do menu que abrem e fecham (<details>)
   ==========================================================================
   O <summary> é o item de primeiro nível; a seta gira ao abrir. O marcador
   padrão do navegador é removido nos dois formatos (o ::marker do Firefox e o
   ::-webkit-details-marker do Chrome/Safari) — senão apareceria um triângulo
   preto ao lado da nossa seta. */
/* o <details> não precisa ser flex: quem alinha os filhos é a .grupo-itens,
   porque o conteúdo do <details> vive numa caixa interna do navegador */
.grupo-menu { display: block; }
.grupo-itens { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.grupo-menu > summary { list-style: none; cursor: pointer; }
.grupo-menu > summary::-webkit-details-marker { display: none; }
.grupo-menu > summary::marker { content: ""; }

.lateral .item.grupo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* o nome é link e ocupa o espaço todo: clicar nele vai para a página, e o
   resto do summary (a seta e a sobra) abre e fecha */
.lateral .item.grupo > a { color: inherit; flex: 1; text-decoration: none; }
.lateral .item.grupo:hover { background: var(--fundo); color: var(--texto); }
.lateral .item.grupo.ativo:hover { background: var(--bi-vinho); color: #fff; }

.grupo-seta {
  font-size: 15px; line-height: 1; opacity: .55;
  transition: transform .12s ease;
}
.grupo-menu[open] > summary .grupo-seta { transform: rotate(90deg); }

/* Formulário de "Concluir" dentro da célula da tabela */
.em-linha { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.em-linha input[type="date"] { width: 140px; }
.em-linha input[type="text"] { width: 150px; }
.botao.pequeno { padding: 5px 10px; font-size: 12.5px; }

/* Barra de filtro compartilhada pelas abas do módulo */
.filtro-modulo {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 18px;
}
.filtro-modulo label { display: flex; flex-direction: column; gap: 3px;
                       font-size: 12px; color: var(--texto-fraco); }
.filtro-modulo input, .filtro-modulo select { font-size: 13.5px; }
.filtro-modulo-titulo {
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-fraco); align-self: center;
  padding-right: 4px; border-right: 1px solid var(--borda); margin-right: 4px;
}
/* Etiquetas do que está filtrado agora. Ficam logo abaixo da barra porque
   boa parte delas nasce do clique num gráfico, e não de um campo da barra. */
.filtro-etiquetas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -10px 0 18px;
}
.filtro-etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto);
  background: #eaf1fc; border: 1px solid #cfe0f7;
  border-radius: 14px; padding: 3px 6px 3px 11px;
}
.filtro-etiqueta b { font-weight: 700; color: var(--primaria-escura); }
.filtro-etiqueta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  color: var(--primaria-escura); text-decoration: none;
  font-size: 14px; line-height: 1;
}
.filtro-etiqueta a:hover { background: var(--primaria); color: #fff; }
.filtro-ver-lista { font-size: 12.5px; font-weight: 600; }

/* A barra de período da home usa a mesma caixa do filtro do módulo; os
   atalhos são botões e precisam ficar na linha de baixo dos rótulos. */
.home-periodo { align-items: center; }
.home-periodo .botao.pequeno { text-decoration: none; }
.home-fora-periodo {
  font-size: 11.5px; color: #8a5a00; margin-top: 3px;
}

/* Linha do prazo da entrevista, na tela da ocorrência */
.fluxo-entrevista {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; font-size: 13.5px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
}
.fluxo-entrevista.estourado { border-color: #f0c36d; background: #fff8e6; }

/* ==========================================================================
   Vencimento de uma etapa (hoje: a entrevista) no formulário
   ==========================================================================
   Ocupa a LARGURA TODA da grade e fica embaixo do campo, não ao lado dele:
   como texto pequeno na coluna da direita, a data limite passava batido -
   que é justamente o contrário do que ela existe para fazer. */
.grade-form .prazo-etapa {
  /* na coluna AO LADO do campo, e alinhada pela base: a label do campo tem
     uma linha de texto em cima, então sem o align-self a caixa subiria e
     ficaria desencontrada do campo de data */
  align-self: end;
  /* rótulo e data na primeira linha, explicação na segunda: em três linhas a
     caixa ficava mais alta que o campo ao lado e as bases desencontravam */
  display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 14px;
  border: 1px solid #cfe0f7; border-left: 4px solid var(--primaria);
  border-radius: 8px; background: #eaf1fc;
}
.prazo-rotulo {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primaria-escura);
}
/* o número é o que a pessoa precisa enxergar de longe */
.prazo-data { font-size: 21px; font-weight: 700; color: var(--texto); line-height: 1.15; }
.prazo-texto { font-size: 12.5px; color: var(--texto-fraco); flex-basis: 100%; }

.prazo-etapa.atrasada {
  border-color: #f0c36d; border-left-color: var(--ambar); background: #fff8e6;
}
.prazo-etapa.atrasada .prazo-rotulo { color: #8a5a00; }
.prazo-etapa.atrasada .prazo-data { color: #8a5a00; }

/* sem data de formalização não há número para mostrar */
.prazo-etapa.sem-data {
  border-color: var(--borda); border-left-color: var(--cinza); background: #fff;
}
.prazo-etapa.sem-data .prazo-rotulo { color: var(--texto-fraco); }

/* Caixa de turno/área com o campo do responsável embaixo */
.caixas-resp { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px;
               align-items: flex-start; }
.caixa-resp { display: flex; flex-direction: column; gap: 5px; }
.campo-responsavel {
  font-size: 12.5px; padding: 5px 8px; max-width: 190px;
  border: 1px solid var(--borda); border-radius: 6px;
}
.campo-responsavel[hidden] { display: none; }

/* Cores extras — precisam existir nas três formas de uso */
.rosca .fatia.turquesa { stroke: var(--turquesa); }
.rosca .fatia.indigo   { stroke: var(--indigo); }
.rosca .fatia.rosa     { stroke: var(--rosa); }
.rosca .fatia.ambar    { stroke: var(--ambar); }
.rosca .fatia.grafite  { stroke: var(--grafite); }

.ponto.turquesa { background: var(--turquesa); }
.ponto.indigo   { background: var(--indigo); }
.ponto.rosa     { background: var(--rosa); }
.ponto.ambar    { background: var(--ambar); }
.ponto.grafite  { background: var(--grafite); }

.etiqueta.turquesa { background: var(--turquesa); }
.etiqueta.indigo   { background: var(--indigo); }
.etiqueta.rosa     { background: var(--rosa); }
.etiqueta.ambar    { background: var(--ambar); }
.etiqueta.grafite  { background: var(--grafite); }

/* ==========================================================================
   Tela de entrada
   ========================================================================== */
body.tela-entrar {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--fundo); margin: 0;
}
.cartao-entrar {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 30px 32px; width: min(380px, 92vw);
  box-shadow: 0 6px 28px rgba(16, 24, 36, .10);
  display: flex; flex-direction: column; gap: 14px;
}
.marca-entrar { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.marca-entrar strong { display: block; font-size: 17px; }
.marca-entrar small { color: var(--texto-fraco); font-size: 12px; }
.cartao-entrar label { display: flex; flex-direction: column; gap: 5px;
                       font-size: 13px; color: var(--texto-fraco); }
.cartao-entrar input {
  padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--borda); border-radius: 8px;
}
.cartao-entrar input:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }
.cartao-entrar .botao { margin-top: 8px; padding: 11px; font-size: 15px; }
.erro-entrar {
  background: #fff7f7; border: 1px solid #f2c2c2; border-left: 4px solid var(--bi-vinho);
  border-radius: 8px; padding: 10px 12px; margin: 0; font-size: 13.5px; color: #8a1020;
}

/* ==========================================================================
   HOME — o resumo de todos os módulos, na marca "Gestão da Qualidade"
   ========================================================================== */

/* A home fica fora dos módulos: sem menu lateral, o conteúdo ocupa a largura
   toda. O rodapé perde o recuo de 226px que existia por causa do menu. */
.layout.sem-lateral { grid-template-columns: 1fr; }
.layout.sem-lateral + .rodape { padding-left: 26px; }

.home-topo { margin-bottom: 22px; }
.home-topo h1 { margin-bottom: 4px; }
.home-topo p { color: var(--texto-fraco); font-size: 14px; }

/* 3 cartões por linha em 1920. Cada cartão é um módulo inteiro. */
.home-modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1400px) { .home-modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .home-modulos { grid-template-columns: 1fr; } }

.home-cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 18px 20px 14px;
  display: flex; flex-direction: column; gap: 14px;
  /* o cartão inteiro é clicável, mas os atalhos de dentro também são links:
     por isso ele não é um <a>, e sim um bloco com a ligação no título */
  transition: border-color .12s, box-shadow .12s;
}
.home-cartao:hover { border-color: #c9d4e4; box-shadow: 0 2px 4px rgba(20,30,50,.08), 0 10px 24px rgba(20,30,50,.07); }

.home-cabecalho { display: flex; align-items: center; gap: 10px; }
.home-icone {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--fundo); font-size: 17px;
}
.home-nome { font-size: 16px; font-weight: 650; color: var(--texto); }
.home-nome:hover { color: var(--primaria); text-decoration: none; }
.home-desc { font-size: 12px; color: var(--texto-fraco); margin-top: 1px; }

/* Os números do módulo. Cada um é um link para a lista que o explica. */
.home-numeros { display: flex; flex-wrap: wrap; gap: 8px; }
.home-numero {
  flex: 1 1 0; min-width: 78px;
  background: var(--fundo); border: 1px solid transparent;
  border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
a.home-numero:hover { border-color: var(--borda); background: #fff; text-decoration: none; }
.home-numero-valor { font-size: 22px; font-weight: 650; line-height: 1.15; color: var(--texto); }
.home-numero-rotulo { font-size: 11px; color: var(--texto-fraco); }
/* alerta = número que cobra alguém. Zero nunca é alerta. */
.home-numero.alerta { background: #fff7f7; }
.home-numero.alerta .home-numero-valor { color: var(--vermelho); }
a.home-numero.alerta:hover { border-color: #f2c2c2; background: #fff; }

.home-rodape {
  border-top: 1px solid var(--borda); padding-top: 10px; margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px;
}

/* separador entre os gráficos e os cartões dos módulos */
.home-titulo-secao {
  margin: 26px 0 12px; font-size: 15px; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}

/* Botões do cabeçalho de um registro (Editar, Imprimir...). Lado a lado, e
   sem encolher: o título ao lado pode ser longo. */
.acoes-registro { display: flex; gap: 8px; flex: none; }

/* A janela curta de reincidência (30 dias) no bloco "Pessoas envolvidas".
   Fica acima da lista porque é o número que decide o tratamento. */
.janela-nat {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 7px; font-size: 14px;
}
.janela-nat small { font-weight: 400; color: inherit; opacity: .75; }
.janela-nat.grave { background: #fdecec; border: 1px solid #f2c2c2; color: var(--vermelho); }
.janela-nat.calma { background: #eef7f1; border: 1px solid #cfe6d9; color: #1f6b47; }

/* O logo também abre a tela de entrada — é a primeira coisa que se vê quando
   o sistema estiver publicado com senha. */
.marca-logo-entrar { height: 34px; width: auto; display: block; }

/* ==========================================================================
   LISTA DE PRESENÇA
   ========================================================================== */

/* --- Painel do instrutor --- */
.painel-link { border-color: #cfe0f7; background: #f5f9ff; }
.link-assinatura {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px;
}
.link-assinatura code {
  flex: 1; min-width: 240px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 15px; font-weight: 600; color: var(--primaria); word-break: break-all;
}
/* a assinatura na tabela é só uma miniatura de conferência */
.assinatura-mini {
  height: 34px; width: auto; max-width: 150px;
  background: #fff; border: 1px solid var(--borda); border-radius: 5px;
}
.selo, .selo-cheio {
  font-size: 12px; color: var(--texto-fraco); word-break: break-all;
}
.selo-cheio {
  display: block; padding: 8px 10px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 7px;
}
.selo-cheio.diferente { color: var(--vermelho); border-color: #f2c2c2; background: #fff7f7; }

/* --- Veredito da validação: a resposta tem que ser lida de longe --- */
.veredito {
  padding: 14px 16px; border-radius: var(--raio); margin-bottom: 16px;
  border: 1px solid var(--borda);
}
.veredito strong { display: block; font-size: 17px; margin-bottom: 4px; }
.veredito p { margin: 0; font-size: 13.5px; }
.veredito.integra  { background: #eef7f1; border-color: #cfe6d9; color: #1f6b47; }
.veredito.alterada { background: #fdecec; border-color: #f2c2c2; color: var(--vermelho); }
.veredito.aberta   { background: #fff8e6; border-color: #f0c36d; color: #8a5a00; }

/* ==========================================================================
   Tela de assinar (celular) — fora do layout do site, é uma página só
   ========================================================================== */
.tela-assinar { background: var(--fundo); padding: 14px; }
.assinar-caixa {
  max-width: 520px; margin: 0 auto;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 18px 16px;
}
.assinar-topo { text-align: center; margin-bottom: 18px; }
.assinar-topo img { height: 26px; width: auto; margin-bottom: 12px; }
.assinar-topo h1 { font-size: 19px; margin: 0 0 4px; line-height: 1.3; }
.assinar-topo p { margin: 0; color: var(--texto-fraco); font-size: 13.5px; }
.assinar-topo small { color: var(--texto-fraco); font-size: 12px; }

/* Campos grandes: isto é usado com o dedo, em pé, às vezes no pátio. */
.tela-assinar label { display: block; margin-bottom: 14px; font-size: 13.5px; }
.tela-assinar input[type="text"] { font-size: 16px; padding: 12px; }
/* 16px não é capricho: abaixo disso o iPhone dá zoom sozinho ao focar */

.campo-assinatura { margin-bottom: 16px; }
.rotulo-assinatura {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--texto-fraco); margin-bottom: 5px;
}
.quadro-assinatura {
  display: block; width: 100%; height: 170px;
  background: #fff; border: 2px dashed var(--borda); border-radius: 10px;
  touch-action: none;     /* sem isto o dedo rola a página em vez de desenhar */
  cursor: crosshair;
}
.assinatura-acoes {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.largura-total { width: 100%; justify-content: center; text-align: center; padding: 14px; font-size: 16px; }

.assinar-aviso {
  padding: 14px 16px; border-radius: 10px; margin-bottom: 16px;
  border: 1px solid var(--borda); font-size: 14px;
}
.assinar-aviso strong { display: block; font-size: 16px; margin-bottom: 4px; }
.assinar-aviso p { margin: 0; }
.assinar-aviso.pronto    { background: #eef7f1; border-color: #cfe6d9; color: #1f6b47; }
.assinar-aviso.erro      { background: #fdecec; border-color: #f2c2c2; color: var(--vermelho); }
.assinar-aviso.encerrada { background: #fff8e6; border-color: #f0c36d; color: #8a5a00; }

.assinar-rodape {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borda);
  text-align: center; color: var(--texto-fraco); font-size: 11.5px;
}

/* QR na tela do instrutor: o código é o assunto, o texto acompanha. */
.qr-bloco { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.qr-codigo {
  flex: none; line-height: 0; padding: 10px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
}
/* O tamanho vem pronto do app.py (80mm ~ 300px), com viewBox. Aqui só se
   diz que é bloco: mandar largura por CSS cortava o código, porque o SVG em
   pixels do segno não tem viewBox. */
.qr-codigo svg { display: block; }
.qr-texto { flex: 1; min-width: 240px; }
.qr-texto p { margin: 0 0 10px; }
.qr-alternativa { margin: 12px 0; }
.qr-alternativa summary {
  cursor: pointer; color: var(--primaria); font-size: 13px; margin-bottom: 8px;
}
@media (max-width: 720px) {
  /* em tela estreita o QR encolhe junto — agora pode, porque tem viewBox */
  .qr-bloco { justify-content: center; }
  .qr-codigo svg { width: min(300px, 70vw); height: auto; }
}

/* Checklist do "por que o celular não abre": cada linha diz se já está
   vencida ou o que falta fazer. */
.checklist-rede { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.checklist-rede li { padding-left: 26px; position: relative; font-size: 13.5px; }
.checklist-rede li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; font-size: 15px;
}
.checklist-rede li.ok::before     { content: "✓"; color: var(--verde); }
.checklist-rede li.falta::before  { content: "✕"; color: var(--vermelho); }
.checklist-rede li.duvida::before { content: "?"; color: var(--laranja); }
.checklist-rede li.ok { color: var(--texto-fraco); }
.checklist-rede code {
  background: #fff; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--borda); font-size: 12.5px;
}

/* Bloco de Aprovação do CM: papel marcado como "não se aplica" fica apagado
   na tela, para se ver de relance quais valem para aquele CM. */
.centro-celula { text-align: center; vertical-align: middle; }
.marca-remover { width: 17px; height: 17px; cursor: pointer; }
.linha-removida { opacity: .45; }
.linha-removida input[type="text"],
.linha-removida input[type="date"],
.linha-removida select { background: var(--fundo); }

/* ===== Barras deitadas ===== */
.grafico-deitado { width: 100%; height: auto; display: block; }
/* o trilho é o "quanto falta": uma sombra levíssima, nunca compete com a barra */
.grafico-deitado .trilho-barra { fill: var(--fundo); }
.grafico-deitado .barra-deitada { fill: var(--bi-vinho); }
.grafico-deitado .col-alvo:hover .barra-deitada { fill: var(--bi-vinho-escuro); }
.grafico-deitado .rotulo-deitado { font-size: 20px; fill: var(--texto); font-weight: 500; }
.grafico-deitado .valor-deitado {
  font-size: 22px; fill: var(--texto); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.grafico-deitado a { cursor: pointer; }

/* ==========================================================================
   HOME — hierarquia: o que cobra ação primeiro, contexto depois
   ========================================================================== */
.home-cabecalho { margin-bottom: 20px; }
.home-cabecalho h1 { margin: 0 0 3px; }

/* ---- Bloco 1: precisa de atenção ---- */
.atencao-bloco {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 4px solid var(--bi-vinho);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 20px 18px; margin-bottom: 18px;
}
.atencao-bloco.vazio-bom { border-left-color: var(--verde); }
.atencao-bloco.vazio-bom p { margin: 0; color: var(--texto-fraco); font-size: 14px; }
/* Fica acima da caixa, como cabeçalho da seção. Maior, na cor cheia do texto
   e em 800: em 13px, cinza e com espaçamento de letra, o "negrito" não
   aparecia — parecia legenda, não título. */
.atencao-titulo {
  margin: 0 0 10px; font-size: 17px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto); font-weight: 800;
}
.atencao-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.atencao-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 9px;
  background: var(--fundo); border: 1px solid transparent;
}
.atencao-item:hover {
  text-decoration: none; background: #fff; border-color: #f2c2c2;
  box-shadow: var(--sombra);
}
/* O número é o assunto: proporcional (não tabular) porque está sozinho e
   grande — dígitos de largura igual deixam "121" frouxo nesse tamanho. */
.atencao-numero { font-size: 30px; font-weight: 650; line-height: 1.05; color: var(--bi-vinho); }
.atencao-oque { font-size: 13.5px; color: var(--texto); line-height: 1.3; }
/* Abre o cartão, em negrito: primeiro se sabe de QUEM é a pendência, depois
   quanto ela é. Antes ficava no rodapé, em cinza claro, e passava batido. */
.atencao-modulo {
  font-size: 11.5px; color: var(--texto); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 800; margin-bottom: 4px;
}

/* ---- Bloco 2: volume da operação, deliberadamente SEM cor de alarme ---- */
.numeros-gerais {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
@media (max-width: 1100px) { .numeros-gerais { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .numeros-gerais { grid-template-columns: 1fr; } }
.numero-geral {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 18px;
}
.numero-valor {
  display: block; font-size: 27px; font-weight: 650; line-height: 1.1; color: var(--texto);
}
.numero-rotulo { display: block; font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; }

/* o cartão de módulo usa cabeçalho próprio (o .home-cabecalho agora é da página) */
.home-cabecalho-cartao { display: flex; align-items: center; gap: 10px; }

/* Campo preenchido pelo histórico: fundo levemente destacado enquanto for
   sugestão. Mexeu nele, vira digitação normal e o destaque sai. */
.campo-sugerido { background: #f5f9ff; border-color: #cfe0f7; }

/* As fichas da tela da ocorrência: 4 colunas em tela larga, 2 no meio do
   caminho, 1 no estreito. Em duas colunas cada ficha ficava com 900px para
   sete linhas curtas, e o olho percorria a tela à toa. */
.grade-fichas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 1500px) { .grade-fichas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grade-fichas { grid-template-columns: 1fr; } }
.ficha-sub {
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-fraco); margin: 14px 0 4px;
}

/* Link discreto no topo (dicionário de campos) */
.link-discreto { font-size: 12.5px; color: var(--texto-fraco); }
.link-discreto:hover { color: var(--primaria); }

/* Dicionário de campos: a linha do campo que ninguém preenche fica apagada,
   para a varredura visual achar depressa o que está em uso */
.linha-apagada td { opacity: .45; }

/* As duas abas da lista de ocorrências (Em aberto / Fechadas) */
.abas-registros { margin-bottom: 4px; }

/* Bloco do lançamento quando está travado: vira ficha, não formulário */
.lancamento-travado {
  border: 1px solid var(--borda); border-left: 3px solid var(--verde);
  border-radius: 8px; padding: 12px 14px; background: var(--fundo);
}
.lancamento-travado .lista-dados { margin: 10px 0 6px; }

/* ==========================================================================
   Janela de confirmação (<dialog>)
   ==========================================================================
   Usada pelo "Lançada" da aba do DocAction. O <dialog> nativo já dá Esc,
   foco preso e fundo escuro; aqui é só a aparência. */
.janela-dialogo {
  border: none; border-radius: 10px; padding: 22px 24px;
  width: min(560px, calc(100vw - 32px));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  color: var(--texto); background: var(--superficie);
}
.janela-dialogo::backdrop { background: rgba(16, 24, 36, .55); }
.janela-dialogo h3 { margin: 0 0 4px; font-size: 18px; }
.janela-dialogo label { display: block; margin-top: 14px; }
.janela-dialogo input[type="text"], .janela-dialogo textarea { width: 100%; }
.janela-dialogo .acoes-form { margin-top: 18px; }

/* ==========================================================================
   Menu em tela estreita: os grupos deitam junto com o resto
   ==========================================================================
   Precisa vir DEPOIS do bloco dos grupos, lá em cima: media query não
   aumenta especificidade, então a regra base `.grupo-itens {flex-direction:
   column}` venceria só por estar escrita depois. Foi o que aconteceu na
   primeira tentativa — os filhos continuavam empilhando embaixo do pai e a
   faixa horizontal virava um bloco alto. */
/* ===== Coluna "Travado em" (lista de ocorrências em aberto) ===== */
/* Uma etapa por linha: são frases ("cadastrar o plano de ação"), não palavras
   soltas — lado a lado esticavam a tabela, que já é larga. Cada etiqueta é um
   link para onde se resolve aquela etapa, e por isso não leva sublinhado: a
   pílula já se apresenta como algo em que se clica. */
.travado { min-width: 170px; }
.travado a.etiqueta {
  display: block; margin: 0 0 4px; text-align: center;
  white-space: normal; line-height: 1.35;
}
.travado a.etiqueta:last-child { margin-bottom: 0; }
.travado a.etiqueta:hover { filter: brightness(0.9); text-decoration: none; }
/* o "nada — encerrada" é <span>, não link: só tira o recuo do .pequena */
.travado > .etiqueta { margin-left: 0; }

/* Tabela que EXPLICA em vez de listar dados (a dos relógios das Pendências do
   fluxo). Fonte um pouco menor e a 1ª coluna estreita: é texto corrido dentro
   de uma tabela, não um relatório. */
.tabela-explica { font-size: 13px; margin-bottom: 14px; }
.tabela-explica td:first-child { white-space: nowrap; width: 1%; }
.tabela-explica td { vertical-align: top; }

/* ===== Campo com prefixo fixo (o "NAT" do Cod. NAT) =====
   O prefixo é parte do código, mas não se digita: fica colado à esquerda do
   campo, com a mesma altura e a borda compartilhada, para ler como uma coisa
   só ("NAT 315 - 2026") em vez de um rótulo solto ao lado de uma caixa. */
.campo-com-prefixo { display: flex; align-items: stretch; }
.campo-com-prefixo .prefixo-fixo {
  display: flex; align-items: center; padding: 0 11px;
  background: var(--fundo); border: 1px solid var(--borda); border-right: none;
  border-radius: 7px 0 0 7px;
  font-weight: 700; font-size: 13px; letter-spacing: .5px;
  color: var(--texto-fraco); user-select: none; white-space: nowrap;
}
/* margin: 0 é o que faz o prefixo ter a MESMA altura do campo: o input da
   grade tem margem embaixo, ela esticava a caixa e sobravam 5px de prefixo */
.campo-com-prefixo input {
  flex: 1; min-width: 0; margin: 0; border-radius: 0 7px 7px 0;
}
/* o foco tem que acender a caixa inteira, senão o prefixo parece de fora */
.campo-com-prefixo:focus-within .prefixo-fixo { border-color: var(--primaria); }

/* ===== Blocos do formulário que abrem e fecham =====
   O <legend> do fieldset é um elemento teimoso: por padrão ele fica montado
   EM CIMA da borda, abrindo um entalhe nela. Com o bloco fechado isso ficava
   feio — o título solto e, embaixo, uma listra vazia que parecia um campo.

   `float: left` + `width: 100%` tira a legenda de cima da borda e a faz
   ocupar a largura toda: ela vira o CABEÇALHO do cartão, e o bloco fechado
   passa a ser uma barra inteira e limpa. O `clear: both` no corpo é o que
   traz o conteúdo de volta para baixo do float quando o bloco abre. */
.painel.recolhivel { padding: 0; overflow: hidden; }
.painel.recolhivel > legend {
  float: left; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 13px 18px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.painel.recolhivel > legend:hover { background: var(--fundo); }
.painel.recolhivel > legend:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: -2px;
}
/* a seta gira em vez de trocar de caractere, para o clique não piscar */
.painel.recolhivel > legend::before {
  content: "›"; font-size: 17px; line-height: 1; color: var(--texto-fraco);
  transform: rotate(90deg); transition: transform .15s; flex: none;
}
.painel.recolhido > legend::before { transform: rotate(0deg); }

/* fechado: a barra é o bloco inteiro, e o cinza claro diz "tem coisa aqui
   dentro" sem precisar de mais nada */
.painel.recolhido > legend { background: var(--fundo); }
.painel.recolhido > legend:hover { background: var(--borda); }
.painel.recolhido { margin-bottom: 10px; }
.painel.recolhido > .bloco-corpo { display: none; }

/* aberto: uma linha separa o cabeçalho do conteúdo */
.painel.recolhivel:not(.recolhido) > legend { border-bottom: 1px solid var(--borda); }
.painel.recolhivel > .bloco-corpo { clear: both; padding: 16px 20px 18px; }

/* Bloco travado (a análise de causa antes da entrevista): esmaecido, para se
   ler como "ainda não é a hora" e não como "quebrado". O aviso dentro dele
   fica em tom normal — é a única coisa ali que precisa ser lida. */
.painel.bloco-travado > .bloco-corpo { opacity: .55; }
.painel.bloco-travado > .bloco-corpo .aviso { opacity: 1; }
.painel.bloco-travado input:disabled,
.painel.bloco-travado textarea:disabled,
.painel.bloco-travado select:disabled { background: var(--fundo); cursor: not-allowed; }


/* ===== Exemplo dentro do campo =====
   O texto de exemplo tem que parecer EXEMPLO, e não recado do sistema nem
   conteúdo já digitado. Uma pessoa testando leu o placeholder da caixa de
   descrição como se fosse uma mensagem para ela — daí duas mudanças: todo
   exemplo começa com "Ex.:" (no HTML) e o cinza aqui é bem mais claro que o
   do texto de verdade, para a diferença ser óbvia antes de ler. */
input::placeholder,
textarea::placeholder {
  color: #b9c0cc;
  opacity: 1;              /* Firefox esmaece por conta própria sem isto */
}
/* com o campo em foco o exemplo clareia mais ainda: quem está digitando não
   precisa mais dele, e o texto que aparece tem que dominar */
input:focus::placeholder,
textarea:focus::placeholder { color: #d3d8e0; }

/* A ÚLTIMA etapa alcançada ("Concluído") fica verde e em negrito, não vinho.
   O vinho diz "é aqui que ela está parada", e a régua de uma NAT concluída
   terminava em vermelho — lido como problema, quando é o contrário. */
.etapa.final .etapa-nome { color: var(--verde); font-weight: 700; }


/* ==========================================================================
   PORTAL (home) e topo sem abas — 08/10/2026, pedido do gestor
   ========================================================================== */

/* Topo: "← Início" + nome do módulo com seletor */
.modulos { gap: 12px; margin-left: 10px; }
.btn-inicio { white-space: nowrap; text-decoration: none; }
.troca-modulo { position: relative; }
.troca-modulo summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 8px;
  background: var(--bi-vinho); color: #fff; font-size: 14px; font-weight: 650;
}
.troca-modulo summary::-webkit-details-marker { display: none; }
.troca-modulo summary:hover { background: var(--bi-vinho-escuro); }
.troca-modulo .seta { font-size: 11px; opacity: .85; }
.troca-lista {
  position: absolute; top: 44px; left: 0; min-width: 240px; z-index: 30;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(20,30,50,.16);
  padding: 6px; display: flex; flex-direction: column;
}
.troca-lista a {
  padding: 9px 12px; border-radius: 7px; color: var(--texto);
  font-size: 14px; font-weight: 500;
}
.troca-lista a:hover { background: var(--fundo); text-decoration: none; }
.troca-lista a.ativo { background: #fbeef0; color: var(--bi-vinho); font-weight: 650; }

/* Home */
.portal-topo { margin: 8px 0 26px; }
.portal-saudacao { margin: 0 0 4px; font-size: 15px; color: var(--bi-vinho); font-weight: 650; }
.portal-topo h1 { margin: 0 0 4px; font-size: 32px; letter-spacing: -.01em; }
.portal-data { margin: 0; color: var(--texto-fraco); font-size: 14px; }

.portal-titulo {
  margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-fraco); font-weight: 700;
}
.portal-grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px;
}
@media (max-width: 1500px) { .portal-grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .portal-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .portal-grade { grid-template-columns: 1fr; } }

.portal-cartao {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-top: 4px solid var(--bi-vinho);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 20px 20px 16px; min-height: 190px; color: var(--texto);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.portal-cartao:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: #d9b3ba; border-top-color: var(--bi-vinho);
  box-shadow: 0 4px 8px rgba(20,30,50,.08), 0 14px 30px rgba(20,30,50,.10);
}
.portal-icone {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: #fbeef0; font-size: 23px; margin-bottom: 8px;
}
.portal-nome { font-size: 18px; font-weight: 700; line-height: 1.2; }
.portal-desc { font-size: 13px; color: var(--texto-fraco); line-height: 1.4; flex: 1; }
.portal-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--borda);
}
.portal-etiqueta {
  font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
}
.portal-etiqueta.alerta { background: #fdecec; color: var(--vermelho); }
.portal-etiqueta.ok { background: #e8f6ee; color: #1f6b47; }
.portal-abrir { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--bi-vinho); }
.portal-cartao:hover .portal-abrir { text-decoration: underline; }

/* nome do módulo numa linha só; em tela estreita encurta com reticências em
   vez de quebrar e estourar o botão */
.troca-modulo summary { white-space: nowrap; }
.troca-modulo .modulo-atual { overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
@media (min-width: 900px) { .troca-modulo .modulo-atual { max-width: 320px; } }
.modulos { min-width: 0; flex: 0 1 auto; }


/* ==========================================================================
   MENU LATERAL RESPONSIVO — 08/10/2026
   --------------------------------------------------------------------------
   Um botão ☰ no topo (só nas páginas de módulo) serve aos dois casos:
     - tela larga: recolhe/expande o menu (a escolha fica lembrada);
     - tela estreita (<= 900px): abre a GAVETA por cima do conteúdo, com
       fundo escurecido; fecha ao tocar fora, num link ou com Esc.
   Antes, em tela estreita o menu virava uma faixa horizontal rolável, que
   escondia metade dos itens e quebrava os grupos.
   ========================================================================== */
.btn-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 36px; flex: none; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font-size: 19px; line-height: 1;
}
.btn-menu:hover { background: var(--fundo); }
.menu-fundo { display: none; }

/* tela larga: menu recolhido */
@media (min-width: 901px) {
  body.menu-recolhido .layout { grid-template-columns: 1fr; }
  body.menu-recolhido .lateral { display: none; }
  body.menu-recolhido .rodape { padding-left: 26px; }
}

/* tela estreita: gaveta */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; top: 60px; left: 0; bottom: 0; z-index: 25;
    width: min(300px, 86vw); height: auto; overflow-y: auto;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    border-right: 1px solid var(--borda);
    box-shadow: 6px 0 24px rgba(20,30,50,.18);
    padding: 14px 10px 24px;
  }
  body.menu-aberto .lateral {
    transform: none; visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
  .menu-fundo {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 24;
    background: rgba(20,30,50,.45); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }
  /* gaveta aberta não deixa a página rolar por baixo */
  body.menu-aberto { overflow: hidden; }
  /* itens maiores: é toque, não mouse */
  .lateral .item { padding: 12px 14px; font-size: 15px; white-space: normal; }
  .lateral .item.sub { font-size: 14px; }
}

/* ações do módulo dentro da gaveta: só existem em tela estreita */
.lateral-acoes { display: none; }
@media (max-width: 900px) {
  .lateral-acoes {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 2px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--borda);
  }
  .lateral-acoes .botao { flex: 1 1 auto; text-align: center; white-space: nowrap; text-decoration: none; }
  /* o topo fica só com: ☰  ←  módulo. O resto está na gaveta. */
  .topo-acoes { display: none; }
  .rot-inicio { display: none; }
  .topo-inner { gap: 10px; padding: 0 12px; }
  .modulos { gap: 8px; margin-left: 0; min-width: 0; flex: 1 1 auto; }
  .troca-modulo { min-width: 0; flex: 1 1 auto; }
  .troca-modulo summary { width: 100%; justify-content: space-between; }
  .troca-modulo .modulo-atual { max-width: none; flex: 1; text-align: left; }
  .troca-lista { right: 0; min-width: 0; }
}


/* ==========================================================================
   TOPO COMO CAMINHO — "Início › Módulo ▾" (revisado em 08/10/2026)
   O botão vinho cheio do módulo parecia um botão de AÇÃO, brigando com o azul
   de "+ Nova ocorrência", e o "← Início" em caixa era ruído. Agora é um
   caminho de texto: o módulo atual em destaque, discreto, com a setinha de
   trocar. Estas regras vêm por último de propósito e substituem as antigas.
   ========================================================================== */
.modulos { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex: 0 1 auto; min-width: 0; }
.caminho-inicio {
  font-size: 14px; font-weight: 500; color: var(--texto-fraco);
  padding: 6px 8px; border-radius: 7px; white-space: nowrap;
}
.caminho-inicio:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.caminho-sep { color: var(--borda); font-size: 18px; line-height: 1; }
.troca-modulo summary {
  display: flex; align-items: center; gap: 6px; width: auto; height: auto;
  padding: 6px 10px; border-radius: 7px; background: transparent;
  color: var(--bi-vinho); font-size: 15px; font-weight: 700; white-space: nowrap;
}
.troca-modulo summary:hover, .troca-modulo[open] summary { background: #fbeef0; }
.troca-modulo .seta { font-size: 11px; opacity: .7; }
.troca-modulo .modulo-atual { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.troca-lista { top: 40px; }
/* ☰ mais discreto, no padrão dos botões da barra */
.btn-menu { width: 36px; height: 34px; font-size: 18px; }

@media (max-width: 900px) {
  .modulos { gap: 4px; margin-left: 0; flex: 1 1 auto; }
  .caminho-inicio, .caminho-sep { display: none; }
  .troca-modulo { flex: 1 1 auto; min-width: 0; }
  .troca-modulo summary { width: 100%; justify-content: space-between; background: #fbeef0; }
  .troca-modulo .modulo-atual { max-width: none; flex: 1; text-align: left; }
}
.troca-lista .troca-inicio { border-bottom: 1px solid var(--borda); border-radius: 7px 7px 0 0; margin-bottom: 4px; color: var(--texto-fraco); }


/* ==========================================================================
   BOTÃO ☰ REVISADO (08/10/2026)
   - A barra do topo deixa de ser centralizada em 1760px: o botão ficava
     solto, a ~90px da borda, sem alinhar com o menu lateral que ele controla.
     Agora a barra ocupa a largura toda e o ☰ fica sobre a coluna do menu.
   - Ícone desenhado em CSS (3 barras): nítido em qualquer tela e do mesmo
     tamanho em todos os navegadores, ao contrário do caractere ☰.
   ========================================================================== */
.topo-inner { max-width: none; padding: 0 20px 0 14px; gap: 14px; }
.btn-menu {
  width: 40px; height: 40px; border-radius: 10px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  transition: background .12s, border-color .12s;
}
.btn-menu:hover { background: #fbeef0; border-color: #e6c1c8; color: var(--bi-vinho); }
.btn-menu:focus-visible { outline: 2px solid var(--bi-vinho); outline-offset: 2px; }
.btn-menu .barras, .btn-menu .barras::before, .btn-menu .barras::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.btn-menu .barras { position: relative; }
.btn-menu .barras::before, .btn-menu .barras::after { content: ""; position: absolute; left: 0; }
.btn-menu .barras::before { top: -6px; }
.btn-menu .barras::after  { top: 6px; }
/* no celular, com a gaveta aberta o ícone vira um "X" de fechar. Em tela larga
   o ☰ fica sempre ☰ (o menu começa aberto, e um X o tempo todo seria estranho) */
@media (max-width: 900px) {
  .topo-inner { padding: 0 12px; gap: 10px; }
  .btn-menu[aria-expanded="true"] .barras { background: transparent; }
  .btn-menu[aria-expanded="true"] .barras::before { top: 0; transform: rotate(45deg); }
  .btn-menu[aria-expanded="true"] .barras::after  { top: 0; transform: rotate(-45deg); }
}


/* ==========================================================================
   COR POR MÓDULO — 08/10/2026
   --------------------------------------------------------------------------
   Cada módulo tem um tom CLARO (--mod-clara: fundos) e um tom mais forte do
   mesmo matiz (--mod: texto e destaques, escolhido para ler bem sobre o claro).
   O atributo data-modulo vem do <body> nas páginas do módulo e de cada
   cartão na home; quem não tem fica no vinho de sempre.
   Vermelho de ALERTA (pendências, atrasos) NÃO muda com o módulo: continua
   significando urgência em qualquer tela.
   ========================================================================== */
body, [data-modulo] { --mod: var(--bi-vinho); --mod-clara: #fbeef0; --mod-borda: #ecc8cf; }
[data-modulo="ocorrencias"]   { --mod: #B3263B; --mod-clara: #FDE8EB; --mod-borda: #F3C4CB; }
[data-modulo="mudancas"]      { --mod: #1F5FBF; --mod-clara: #E3EFFD; --mod-borda: #BBD3F4; }
[data-modulo="acao"]          { --mod: #1B7A4B; --mod-clara: #E2F5EA; --mod-borda: #B5E0C7; }
[data-modulo="auditoria"]     { --mod: #6A45B5; --mod-clara: #EEE8FA; --mod-borda: #D2C4F0; }
[data-modulo="inspecao"]      { --mod: #B85C0B; --mod-clara: #FFEEDB; --mod-borda: #F7CFA3; }
[data-modulo="procedimentos"] { --mod: #0B7C7C; --mod-clara: #DDF3F3; --mod-borda: #A9DCDC; }
[data-modulo="presenca"]      { --mod: #8A6A00; --mod-clara: #FBF3D3; --mod-borda: #EBDC9B; }
[data-modulo="pat"]           { --mod: #A3267A; --mod-clara: #FCE6F3; --mod-borda: #F1BCDD; }
[data-modulo="fornecedores"]  { --mod: #8A5A2B; --mod-clara: #F6EBDD; --mod-borda: #E6CFB3; }
[data-modulo="cincos"]        { --mod: #5A8A1F; --mod-clara: #EBF4D9; --mod-borda: #CFE3A5; }
[data-modulo="treinamentos"]  { --mod: #C2571A; --mod-clara: #FFEDE0; --mod-borda: #F6CBA9; }

/* faixa fina sob o topo, na cor do módulo */
body[data-modulo]:not([data-modulo=""]) .topo { border-bottom: 3px solid var(--mod-clara); }

/* nome do módulo no topo e botão ☰ */
.troca-modulo summary { color: var(--mod); }
.troca-modulo summary:hover, .troca-modulo[open] summary { background: var(--mod-clara); }
.troca-lista a.ativo { background: var(--mod-clara); color: var(--mod); }
.btn-menu:hover { background: var(--mod-clara); border-color: var(--mod-borda); color: var(--mod); }
.btn-menu:focus-visible { outline-color: var(--mod); }
@media (max-width: 900px) { .troca-modulo summary { background: var(--mod-clara); } }

/* menu lateral: item ativo em tom claro, com uma barra na cor do módulo */
body .lateral .item.ativo,
body .lateral .item.grupo.ativo:hover {
  background: var(--mod-clara); color: var(--mod); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--mod);
}
body .lateral .item:hover { background: var(--mod-clara); color: var(--mod); }

/* home: cartão de cada módulo na sua cor */
.portal-cartao { border-top-color: var(--mod); }
.portal-cartao:hover { border-color: var(--mod-borda); border-top-color: var(--mod); }
.portal-icone { background: var(--mod-clara); }
.portal-abrir { color: var(--mod); }
.portal-etiqueta.ok { background: var(--mod-clara); color: var(--mod); }


/* ==========================================================================
   COR DA PÁGINA POR MÓDULO — 2ª parte (08/10/2026)
   A primeira parte coloriu só os detalhes (topo, menu, cartões da home). Aqui
   a PÁGINA toda assume a cor: fundo com um leve tom do módulo, a faixa grande
   do título (era vinho em todos) e os destaques de navegação (chip e página
   atual). Páginas fora de módulo ficam como estavam.
   O tom da faixa é a cor do módulo clareada (80% + branco), como pedido: mais
   clarinha. Gráficos e vermelho de alerta NÃO mudam — "Com NAT" e atraso são
   vermelhos em qualquer módulo porque o vermelho aí é significado, não enfeite.
   ========================================================================== */
body[data-modulo]:not([data-modulo=""]) {
  background: color-mix(in srgb, var(--mod) 5%, #f4f6f9);
}
body[data-modulo]:not([data-modulo=""]) .faixa {
  background: color-mix(in srgb, var(--mod) 82%, #fff);
}
body[data-modulo]:not([data-modulo=""]) .folha-cabecalho {
  background: color-mix(in srgb, var(--mod) 82%, #fff);
}
body[data-modulo]:not([data-modulo=""]) .folha-numero { color: var(--mod); }
body[data-modulo]:not([data-modulo=""]) .chip:hover { border-color: var(--mod); }
body[data-modulo]:not([data-modulo=""]) .chip.ativo {
  background: var(--mod); border-color: var(--mod);
}
body[data-modulo]:not([data-modulo=""]) .pag.atual {
  background: var(--mod); border-color: var(--mod);
}
body[data-modulo]:not([data-modulo=""]) .atalho.ativo {
  border-color: var(--mod); background: var(--mod-clara);
}


/* ==========================================================================
   5S - Donos de rua: notas e barras. Verde = na meta, âmbar = até 15 pontos
   abaixo, vermelho = crítico. A régua vem do cinco_s.faixa().
   ========================================================================== */
.cs-trilho { flex: 1; height: 12px; background: #eef0f3; border-radius: 6px; min-width: 60px; }
.cs-barra { height: 12px; border-radius: 6px; min-width: 2px; }
.cs-barra.cs-ok { background: var(--verde); }
.cs-barra.cs-atencao { background: var(--laranja); }
.cs-barra.cs-critico { background: var(--vermelho); }
.cs-nota { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 650; }
.cs-nota.cs-ok { background: #e2f5ea; color: #14663a; }
.cs-nota.cs-atencao { background: #fff1d6; color: #8a5200; }
.cs-nota.cs-critico { background: #fdecec; color: var(--vermelho); }


/* ==========================================================================
   5S - ficha semanal na tela: a grade item x dia x turno
   ========================================================================== */
.cs-rolagem { max-height: 78vh; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; }
.cs-grade { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 1500px; width: 100%; }
.cs-grade th, .cs-grade td { border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); padding: 3px; background: #fff; }
.cs-grade thead th { position: sticky; top: 0; z-index: 3; background: #f1f3f6; text-align: center; font-size: 12px; }
.cs-grade thead tr:nth-child(2) th { top: 31px; z-index: 3; font-size: 11px; color: var(--texto-fraco); }
.cs-grade .cs-col-senso { width: 120px; }
.cs-grade .cs-col-item { min-width: 340px; text-align: left; padding-left: 8px; }
.cs-grade .cs-senso { background: var(--mod-clara); color: var(--mod); font-weight: 700; text-align: center; font-size: 12px; width: 120px; }
.cs-grade .cs-item { min-width: 340px; max-width: 420px; line-height: 1.3; padding: 4px 8px; position: sticky; left: 0; z-index: 2; box-shadow: 2px 0 0 var(--borda); }
.cs-grade .cs-cel { padding: 1px; text-align: center; width: 44px; }
.cs-grade .cs-hoje { background: #fffbe6; }
.cs-grade thead th.cs-hoje { background: #ffefb3; }
.cs-faixa-gestao td { background: #d0cece; font-weight: 700; text-align: center; letter-spacing: .04em; font-size: 12px; }

.cs-sel {
  width: 44px; height: 30px; padding: 0 2px; border: 1px solid transparent; border-radius: 6px;
  text-align: center; text-align-last: center; font-weight: 700; font-size: 13px; cursor: pointer;
  background: #fff; appearance: none; -webkit-appearance: none;
}
.cs-sel:hover { border-color: var(--borda); }
.cs-sel:focus { outline: 2px solid var(--mod); outline-offset: 1px; }
.cs-sel.cs-ok { background: #d9f2e3; color: #14663a; }
.cs-sel.cs-nc { background: #fbd9dd; color: #A5122A; }
.cs-sel.cs-na { background: #e7e9ee; color: #6b7789; }

.cs-desvio { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin: 10px 0; background: #fcfcfd; }
/* Os tipos de desvio da ficha semanal: uma GRADE de colunas iguais, não um
   flex que empurra os itens. Com texto de tamanhos muito diferentes ("Carga
   avariada" x "Palete plástico fora de nível ou apoiado diretamente no
   porta-paletes"), o flex deixava buracos enormes entre a caixa e o rótulo
   seguinte, e ninguém sabia qual caixa era de qual texto. */
.cs-tipos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 18px; margin: 10px 0;
}
.cs-tipo {
  font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 8px;
  align-items: start; line-height: 1.35; cursor: pointer;
}
/* a regra geral do sistema é `input { width: 100% }` — numa caixa de marcar
   isso a ESTICA, e era o que separava a caixinha do texto dela */
.cs-tipo input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primaria);
}
.cs-cartao-semana { border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; background: #fcfcfd; }
.cs-nota.cs-vazio { background: #eef0f3; color: #6b7789; }

/* Seção "Indicadores" da home: mesmo desenho do "Precisa de atenção", mas com a barra
   lateral cinza-azulada e o número na cor de cada módulo. */
.kpis-bloco { border-left-color: #5b6b82; margin-top: 4px; }
.kpi-item { border-color: var(--mod-borda); background: #fbfcfd; }
.kpi-item:hover { border-color: var(--mod); background: #fff; }
.kpi-item .atencao-numero { color: var(--mod); }
/* rótulos de 1 ou 2 linhas ocupam o mesmo espaço: os números ficam na mesma altura */
.kpi-item .atencao-modulo { min-height: 36px; display: flex; align-items: flex-start; line-height: 1.3; }

/* ===== Inspeção Linha Saúde (FORM-GRU-08) =====
   Telas pensadas para o CELULAR, de pé numa câmara fria: alvos grandes, uma
   pergunta por bloco e o estado da seção visível sem precisar abrir. */
.ls-progresso {
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 60px; z-index: 5;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--texto-fraco);
}
.ls-barra { flex: 1; height: 8px; background: var(--fundo); border-radius: 6px; overflow: hidden; }
.ls-barra > div { height: 100%; width: 0; background: var(--verde); transition: width .2s; }

.ls-secao > legend .ls-tipo {
  font-weight: 500; font-size: 11.5px; color: var(--texto-fraco); margin-left: 6px;
}
.ls-estado { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--texto-fraco); }
.ls-estado.completa { color: var(--verde); }
.ls-estado.tem-desvio { color: var(--bi-vinho); }

.ls-pergunta { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.ls-pergunta:last-child { border-bottom: none; }
.ls-enunciado { margin: 0 0 9px; font-size: 14px; }
.ls-obrig { color: var(--bi-vinho); font-weight: 700; }
.ls-rotulo { display: block; margin: 10px 0 5px; font-size: 13px; font-weight: 600; }

/* Sim/Não com alvo grande: dedo, não mouse */
.ls-escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-escolhas .caixa { padding: 9px 16px; font-size: 14px; }
.ls-escolhas .ls-ok:has(input:checked) { border-color: var(--verde); background: #f2fbf6; }
.ls-escolhas .ls-nok:has(input:checked) { border-color: var(--bi-vinho); background: #fdf3f5; }

/* a ramificação do "Não" é um bloco à parte, para não se confundir com a
   próxima pergunta */
.ls-ramo {
  margin-top: 12px; padding: 12px 14px;
  background: #fdf3f5; border-left: 3px solid var(--bi-vinho);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.ls-info { margin-top: 10px; }
.ls-legenda { margin: 6px 0 10px; padding-left: 18px; font-size: 12px; color: var(--texto-fraco); }

/* área bloqueada pelo CO²: o que não se avalia não fica meio visível */
.ls-secao.ls-bloqueada > legend { color: var(--bi-vinho); }

@media (max-width: 700px) {
  .ls-escolhas .caixa { flex: 1; min-width: 120px; justify-content: center; }
  .ls-progresso { top: 54px; }
}

/* ===== Cor dos indicadores da home =====
   O número diz o VALOR; a cor diz se ele é bom. Sem isso, 96% e 40% chegavam
   iguais à vista. Três estados e um quarto para "sem dados", que não é
   desempenho ruim — é ausência de base, e por isso fica apagado em vez de
   vermelho. */
.kpi-item .atencao-numero { transition: color .15s; }
.kpi-bom     .atencao-numero { color: var(--verde); }
.kpi-atencao .atencao-numero { color: var(--laranja); }
.kpi-ruim    .atencao-numero { color: var(--bi-vinho); }
.kpi-vazio   .atencao-numero { color: var(--borda); }
.kpi-vazio   .atencao-modulo,
.kpi-vazio   .atencao-oque   { opacity: .65; }

/* a leitura em palavras, embaixo do rótulo */
.kpi-leitura {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--texto-fraco);
}
.kpi-bom     .kpi-leitura { color: var(--verde); }
.kpi-atencao .kpi-leitura { color: var(--laranja); }
.kpi-ruim    .kpi-leitura { color: var(--bi-vinho); }

/* ===== Cartão de indicador com meta (desenho de 12/10/2026) =====
   A ordem de leitura é: de que módulo é > o que mede > quanto > para onde vai
   > qual a meta > está dentro dela. O número continua sendo o assunto; o
   resto existe para ele não ficar solto. */
.kpi-linha-numero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* a variação é p.p. (diferença entre dois percentuais), nunca "%" */
.kpi-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: baseline; gap: 4px; }
.kpi-delta small { font-weight: 500; color: var(--texto-fraco); font-size: 10.5px; }
.kpi-delta .kpi-seta { font-size: 10px; }
.kpi-delta.subiu { color: var(--verde); }
.kpi-delta.caiu  { color: var(--bi-vinho); }
.kpi-delta.igual { color: var(--texto-fraco); }

.kpi-meta { margin-top: 8px; font-size: 11.5px; color: var(--texto-fraco); }
.kpi-meta strong { color: var(--texto); }

.kpi-barra {
  display: block; height: 7px; margin: 5px 0 7px;
  background: var(--borda); border-radius: 6px; overflow: hidden;
}
.kpi-barra > span { display: block; height: 100%; background: var(--cinza); border-radius: 6px; }
.kpi-bom     .kpi-barra > span { background: var(--verde); }
.kpi-atencao .kpi-barra > span { background: var(--laranja); }
.kpi-ruim    .kpi-barra > span { background: var(--bi-vinho); }

/* a faixa de situação: a mesma informação da cor, dita em palavras, para
   quem não distingue verde de vermelho */
.kpi-situacao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  background: var(--fundo); color: var(--texto-fraco);
}
.kpi-marca {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--cinza); color: #fff; font-size: 10px;
}
.kpi-bom  .kpi-situacao { background: #f1faf4; color: var(--verde); }
.kpi-bom  .kpi-marca { background: var(--verde); }
.kpi-ruim .kpi-situacao { background: #fdf3f5; color: var(--bi-vinho); }
.kpi-ruim .kpi-marca { background: var(--bi-vinho); }
.kpi-atencao .kpi-situacao { background: #fff7ef; color: var(--laranja); }
.kpi-atencao .kpi-marca { background: var(--laranja); }

/* --- barra simples dentro de tabela ---------------------------------------
   A visão geral da Linha Saúde já usava `.trilha` / `.preenchimento` soltos,
   sem nenhuma regra que os pegasse: a barra existia no HTML e não aparecia.
   Esta regra genérica atende aquela tela e a aderência de treinamento. */
.tabela .trilha {
  background: var(--fundo); border-radius: 5px; height: 10px; overflow: hidden;
}
.tabela .preenchimento {
  height: 100%; background: var(--bi-vinho); border-radius: 5px; min-width: 2px;
}
/* onde MAIS é melhor (aderência), a barra é verde: vermelho num indicador
   cheio leria como problema */
.tabela .trilha.boa .preenchimento { background: var(--verde); }

/* o bloco "aderência x meta": o mesmo desenho do cartão da home, numa linha
   larga dentro do painel */
.kpi-situacao-larga { margin: 4px 0 0; }
.kpi-situacao-larga .kpi-barra { height: 10px; max-width: 520px; }

/* --- painel de outro sistema embutido -------------------------------------
   O painel de treinamento é gerado e publicado pelo projeto do Skore. A
   Qualidade o exibe inteiro, sem recortar: recortar significaria recalcular,
   e recalcular foi o que criou dois números para a mesma pergunta. */
.painel-externo {
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.painel-externo-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--borda);
  background: var(--fundo); font-size: 12px; color: var(--texto-fraco);
}
.painel-externo iframe {
  display: block; width: 100%; height: calc(100vh - 230px); min-height: 560px;
  border: 0;
}
.faixa-estreita { padding-bottom: 10px; }

/* Campo que a lista impressa deixa para preencher à caneta: continua
   editável, só avisa que não trava a abertura da lista. */
.opcional-no-papel > input,
.opcional-no-papel > select { border-style: dashed; }

/* --- Escolha em cartões (duas opções que precisam ser lidas) --------------
   Usada em "Como será assinada", da nova lista de presença. Lista suspensa
   esconde a segunda opção atrás de um clique; aqui as duas ficam à vista,
   cada uma com a sua explicação. */
.escolha-cartoes { display: flex; gap: 12px; flex-wrap: wrap; }
.escolha-cartao {
  flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px;
  background: #fff; cursor: pointer;
}
.escolha-cartao:hover { border-color: var(--cinza); }
.escolha-cartao.marcado { border-color: var(--azul); background: #f5f8ff; }
.escolha-cartao input { margin: 2px 0 0; width: auto; flex: none; }
.escolha-corpo { display: block; }
.escolha-corpo strong { display: block; font-size: 13.5px; }
.escolha-corpo small { display: block; margin-top: 3px; color: var(--texto-fraco); }

/* Formulário curto dentro de um painel (encerrar / reabrir uma lista):
   campo e botão em coluna, sem esticar na largura do painel. */
.formulario-estreito { max-width: 420px; }
.formulario-estreito label { display: block; margin-bottom: 10px; }
.reabrir summary {
  cursor: pointer; color: var(--bi-vinho); font-size: 12.5px; font-weight: 600;
  margin-top: 4px;
}
.reabrir[open] summary { margin-bottom: 10px; }

/* --- Cronograma de auditoria (FORM-GRU-41) -------------------------------
   Um bloco por local, com a faixa P/R atravessando os doze meses. A coluna
   do local e a do P/R são as únicas com fundo, como no formulário. */
/* a matriz é uma GRADE: precisa das linhas verticais, que a tabela comum do
   sistema não tem. E de largura fixa, senão o LOCAL ocupa metade da tela. */
.cronograma { table-layout: fixed; }
/* grade mais firme que a borda padrão do sistema: aqui a linha vertical
   é que separa um mês do outro, e no tom claro ela sumia */
.cronograma th, .cronograma td { border: 1px solid #c3cbd9; }
.cronograma .col-local { font-weight: 700; }
.cronograma .col-pr {
  background: var(--fundo); text-align: center; font-weight: 700;
}
.cronograma .col-mes, .cronograma .cel { text-align: center; padding: 4px 2px; }
.cronograma .cel-ok { background: #f1faf4; }
.cronograma .cel-atraso { background: #fdf3f5; }
.cronograma .marca {
  display: inline-block; min-width: 18px; font-weight: 700;
  color: var(--texto); text-decoration: none;
}
.cronograma .cel-ok .marca { color: var(--verde); }
.cronograma .cel-atraso .marca { color: var(--bi-vinho); }
/* local sem nenhuma marca no ano: o nome fica apagado, para saltar aos olhos
   que aquela frente ficou sem auditoria */
.cronograma .local-vazio .col-local { color: var(--texto-fraco); font-weight: 600; }
/* a faixa R fecha o bloco do local: linha mais forte embaixo */
.cronograma .linha-r td { border-bottom: 2px solid var(--cinza); }

/* Célula clicável do cronograma de auto inspeção: o P é um botão, para
   marcar e desmarcar o mês da área direto na matriz. */
.cronograma .marca-botao {
  width: 100%; min-height: 20px; padding: 2px 0; border: 0; cursor: pointer;
  background: transparent; font: inherit; font-weight: 700; color: var(--texto);
  border-radius: 4px;
}
.cronograma .marca-botao:hover { background: var(--fundo); }
.cronograma .marca-botao.marcado { color: var(--texto); }
.cronograma .cel form { margin: 0; }
.cartoes-soltos { margin-bottom: 14px; }

/* As orientações do formulário de auto inspeção: ficam recolhidas, para não
   empurrar o checklist para baixo, mas a um clique de quem vai inspecionar. */
.orientacoes summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--azul);
  margin-top: 6px;
}
.orientacoes ul { margin: 8px 0 0 18px; font-size: 12.5px; color: var(--texto-fraco); }
.orientacoes li { margin-bottom: 4px; }

/* Grade de formulário em TRÊS colunas, para o bloco em que três campos curtos
   formam uma linha só (área / data / turno da auto inspeção). */
.grade-form.grade-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grade-form.grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grade-form.grade-3 { grid-template-columns: 1fr; } }

/* --- Rótulos do gráfico de PCGs x NATs -----------------------------------
   Desenho do painel que a operação já usa: o volume em cima da coluna, o
   "% sem NAT" numa etiqueta dentro dela e a quantidade de NATs junto à
   linha de base. O % é o número que eles leem; dentro da barra ele não
   disputa espaço com o volume. */
.selo-fundo { fill: #f1f3f6; stroke: #d8dde5; stroke-width: 1; }
/* tamanhos na "tela" de 2000, para ficarem do mesmo porte dos rótulos dos
   outros gráficos do sistema */
.selo-texto {
  fill: #3b4453; font-size: 17px; font-weight: 700; text-anchor: middle;
}
.rotulo-nats {
  fill: #fff; font-size: 18px; font-weight: 700; text-anchor: middle;
}
/* total da tabela: a linha que fecha a conta precisa pesar mais */
.linha-total td {
  font-weight: 700; border-top: 2px solid var(--cinza); background: var(--fundo);
}

/* Abas de recorte (Geral / Fármaco) — o mesmo par de páginas do painel da
   operação, aqui como duas abas em vez de dois relatórios. */
.abas-recorte { display: flex; gap: 8px; margin-bottom: 12px; }
.abas-recorte .aba {
  padding: 8px 18px; border: 1px solid var(--borda); border-radius: 20px;
  background: #fff; color: var(--texto); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.abas-recorte .aba.ativa { background: var(--mod); border-color: var(--mod); color: #fff; }
.kpi-solto { font-size: 15px; }
.kpi-solto strong { font-size: 28px; }

/* --- Cabeçalho da tela de PCGs x NATs ------------------------------------
   Título à esquerda, abas à direita, e os quatro números numa faixa própria
   logo abaixo, ocupando a largura inteira. Antes os cartões moravam dentro
   da faixa vermelha, onde o título comia metade do espaço e os números
   ficavam espremidos num canto. */
.titulo-com-abas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.titulo-com-abas h1 { margin: 0; }
.cartoes-topo { margin-bottom: 18px; }
.cartoes-topo .faixa-cartoes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) {
  .cartoes-topo .faixa-cartoes { grid-template-columns: repeat(2, 1fr); }
}
.cartoes-topo .kpi {
  background: #fff; border: 1px solid var(--borda); border-radius: 14px;
  padding: 18px 20px; display: block; text-align: left;
}
.cartoes-topo .kpi-valor {
  display: block; font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--bi-vinho);
}
.cartoes-topo .kpi-rotulo {
  display: block; margin-top: 6px; font-size: 13px; color: var(--texto-fraco);
  text-transform: none; letter-spacing: 0;
}

/* Legenda do gráfico de PCGs x NATs: cada chave é a miniatura do que ela
   nomeia (coluna vinho, etiqueta cinza, número branco sobre vinho). */
.legenda-grafico {
  display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 8px;
  font-size: 13px; color: var(--texto-fraco);
}
.legenda-grafico .chave { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.chave-coluna { width: 14px; height: 14px; background: var(--bi-vinho); border-radius: 3px; }
.chave-selo { width: 22px; height: 12px; background: #f1f3f6; border: 1px solid #d8dde5; border-radius: 6px; }
.chave-nat { width: 14px; height: 14px; background: var(--bi-vinho); border-radius: 3px; position: relative; }
.chave-nat::after { content: "7"; position: absolute; inset: 0; color: #fff; font-size: 9px; font-weight: 700; text-align: center; line-height: 14px; }
.grafico-svg .rotulo-sem { fill: var(--texto); font-size: 18px; font-weight: 700; text-anchor: middle; }
.grafico-svg .rotulo-sem-peq { fill: var(--texto-fraco); font-size: 13px; text-anchor: middle; }

/* Gráfico "NATs por mês": a NAT em destaque e o total menor embaixo. */
.grafico-svg .rotulo-destaque { fill: var(--bi-vinho); font-size: 19px; }
.grafico-svg .rotulo-de { font-size: 12.5px; text-anchor: middle; fill: var(--texto-fraco); }

/* ==========================================================================
   PCGs x NATs — no desenho do painel do Power BI da operação.
   Topo em duas colunas (quantidade geral | últimos 7 dias), gráfico mensal
   embaixo. Títulos de painel numa faixa vinho, como lá.
   Os tamanhos de texto do SVG são em unidades da tela de 2000.
   ========================================================================== */
.pcg-topo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px; margin-bottom: 18px; align-items: stretch;
}
.pcg-topo > .painel { margin-bottom: 0; }
@media (max-width: 1100px) { .pcg-topo { grid-template-columns: 1fr; } }

/* ---- quantidade geral ---- */
.pcg-geral { display: flex; flex-direction: column; gap: 14px; }
.pcg-geral-titulo {
  font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto); display: flex; flex-direction: column; gap: 2px;
}
.pcg-geral-titulo small {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--texto-fraco);
}
.pcg-cartao {
  flex: 1; display: flex; align-items: center; gap: 18px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: 0 2px 4px rgba(20,30,50,.06), 0 8px 22px rgba(20,30,50,.07);
  padding: 18px 20px; position: relative; overflow: hidden;
}
/* o friso vinho à esquerda: amarra o cartão à paleta do painel */
.pcg-cartao::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(var(--bi-vinho), var(--bi-vinho-escuro));
}
.pcg-cartoes-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; }
@media (max-width: 560px) { .pcg-cartoes-par { grid-template-columns: 1fr; } }
.pcg-cartao-texto { display: flex; flex-direction: column; min-width: 0; }
.pcg-cartao-rotulo {
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bi-vinho);
}
.pcg-cartao-valor {
  font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--texto);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.pcg-cartao-largo .pcg-cartao-valor { font-size: 48px; }
.pcg-cartao-nota { font-size: 12.5px; color: var(--texto-fraco); }
.pcg-cartao-nota strong { color: var(--texto); }

.pcg-icone {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #C21E3A, var(--bi-vinho-escuro));
  box-shadow: 0 6px 14px rgba(165, 18, 42, .28);
}
.pcg-cartao-largo .pcg-icone { width: 76px; height: 76px; border-radius: 18px; }
.pcg-icone svg { width: 60%; height: 60%; }
.pcg-icone-azul { background: linear-gradient(145deg, #3B5BDB, #22348C); box-shadow: 0 6px 14px rgba(34, 52, 140, .25); }
.pcg-icone-verde { background: linear-gradient(145deg, #2fb070, #17784a); box-shadow: 0 6px 14px rgba(23, 120, 74, .25); }
.pcg-icone-grande {
  width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #d2848f, var(--bi-vinho));
}
.pcg-icone-grande svg { width: 62%; height: 62%; }
.pcg-topo-farma .pcg-geral { flex-direction: row; align-items: stretch; }

/* ---- painel com faixa vinho no título ---- */
.pcg-painel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pcg-faixa-titulo {
  background: linear-gradient(90deg, var(--bi-vinho-escuro), var(--bi-vinho));
  color: #fff; font-weight: 700; font-size: 16px; text-align: center;
  padding: 10px 16px; letter-spacing: .02em;
}
.pcg-corpo { padding: 14px 18px 16px; flex: 1; }

/* ---- tabela com barras de dado ---- */
.pcg-tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.pcg-tabela thead th {
  background: #f6eef0; color: var(--bi-vinho-escuro); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px;
  border-bottom: 2px solid var(--bi-vinho);
}
.pcg-tabela td { padding: 0 10px; height: 40px; font-size: 15px; border-bottom: 1px solid #eef0f4; }
.pcg-tabela tbody tr:nth-child(even) td { background: #fafbfc; }
.pcg-tabela tbody tr:hover td { background: #fbf3f4; }
.pcg-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.pcg-tabela .traco { color: #c3c8d0; }
.celula-barra { position: relative; min-width: 120px; }
.barra-dado {
  position: absolute; left: 10px; top: 7px; bottom: 7px; max-width: calc(100% - 20px);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(194, 30, 58, .30), rgba(194, 30, 58, .62));
}
.barra-dado.barra-nat { background: linear-gradient(90deg, rgba(59, 91, 219, .25), rgba(59, 91, 219, .55)); }
.valor-dado { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 6px; }
.pcg-tabela tfoot td {
  background: var(--bi-vinho); color: #fff; font-weight: 800; font-size: 17px;
  height: 44px; border: 0; font-variant-numeric: tabular-nums;
}
.pcg-tabela tfoot td:first-child { border-radius: 0 0 0 8px; text-transform: uppercase; }
.pcg-tabela tfoot td:last-child { border-radius: 0 0 8px 0; }

/* ---- gráfico mensal ---- */
.pcg-legenda { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin-bottom: 4px; }
.pcg-atualizado { margin-left: auto; color: var(--texto-fraco); font-size: 12px; }
.chave-nat-azul { width: 14px; height: 14px; background: #2f47b0; border-radius: 3px; }
.legenda-grafico .chave-selo { background: #6d6f72; border-color: #6d6f72; }

.pcg-grafico .pcg-col { fill: url(#pcg-vinho); }
.pcg-grafico .pcg-col-parcial { fill: url(#pcg-vinho); opacity: .45; }
.pcg-grafico .pcg-col-vazia { fill: none; stroke: #c9ced6; stroke-width: 2; stroke-dasharray: 8 6; }
.pcg-grafico .pcg-col-nat { fill: url(#pcg-azul); }
.pcg-grafico .pcg-col-nat-pior { fill: #A5122A; }
.pcg-grafico .pcg-faixa-nat { fill: #f4f6fb; }
.pcg-grafico text { font-family: "Segoe UI", system-ui, Arial, sans-serif; text-anchor: middle; }
.pcg-grafico .pcg-valor { font-size: 23px; font-weight: 800; fill: var(--texto); }
.pcg-grafico .pcg-pilula { fill: #5f6164; opacity: .82; }
.pcg-grafico .pcg-pilula-texto { font-size: 19px; font-weight: 700; fill: #fff; }
.pcg-grafico .pcg-parcial { font-size: 17px; font-weight: 700; fill: #fff; letter-spacing: .06em; text-transform: uppercase; }
.pcg-grafico .pcg-sem { font-size: 17px; fill: var(--texto-fraco); }
.pcg-grafico .pcg-nat-num { font-size: 21px; font-weight: 800; fill: #22348C; }
.pcg-grafico .pcg-nat-pior { fill: var(--bi-vinho); }
.pcg-grafico .pcg-mes { font-size: 20px; fill: var(--texto-fraco); font-weight: 600; }
.pcg-grafico .pcg-mes-atual { fill: var(--bi-vinho); font-weight: 800; }
.pcg-grafico .col-alvo:hover .pcg-col { filter: brightness(1.15); }

.pcg-detalhes summary { cursor: pointer; list-style-position: inside; }
.pcg-detalhes[open] summary { margin-bottom: 12px; }
.pcg-aviso-farma { margin-bottom: 0; }
.pcg-tabela td { vertical-align: middle; }
.barra-caixa { position: relative; height: 28px; display: flex; align-items: center; }
.barra-caixa .barra-dado { left: 0; top: 0; bottom: 0; max-width: 100%; }
/* em janela menor que 1920 os dois cartões do par ficam estreitos: o número
   encolhe junto, em vez de ser cortado */
.pcg-cartoes-par .pcg-cartao { gap: 14px; padding: 16px 16px 16px 20px; }
.pcg-cartoes-par .pcg-cartao-valor { font-size: clamp(26px, 2.1vw, 40px); }
.pcg-cartoes-par .pcg-icone { width: clamp(44px, 3.3vw, 64px); height: clamp(44px, 3.3vw, 64px); border-radius: 14px; }
.pcg-cartao-largo .pcg-cartao-valor { font-size: clamp(34px, 2.6vw, 50px); }

/* Compacto: a tela inteira cabe em 1920x1080 sem rolar (15/10/2026). */
.pcg-topo { gap: 14px; margin-bottom: 14px; }
.pcg-geral { gap: 10px; }
.pcg-geral-titulo { font-size: 15px; }
.pcg-geral-titulo small { font-size: 11.5px; }
.pcg-cartao { padding: 12px 16px 12px 20px; gap: 14px; border-radius: 12px; }
.pcg-cartao-largo .pcg-cartao-valor { font-size: clamp(28px, 2vw, 38px); }
.pcg-cartoes-par .pcg-cartao-valor { font-size: clamp(22px, 1.6vw, 30px); }
.pcg-cartao-largo .pcg-icone { width: 54px; height: 54px; border-radius: 14px; }
.pcg-cartoes-par .pcg-icone { width: clamp(38px, 2.5vw, 48px); height: clamp(38px, 2.5vw, 48px); border-radius: 12px; }
.pcg-cartao-rotulo { font-size: 11.5px; }
.pcg-cartao-nota { font-size: 11.5px; }
.pcg-faixa-titulo { font-size: 14px; padding: 7px 14px; }
.pcg-corpo { padding: 8px 14px 10px; }
.pcg-tabela thead th { font-size: 11px; padding: 5px 10px; }
.pcg-tabela td { height: 29px; font-size: 13.5px; }
.barra-caixa { height: 21px; }
.pcg-tabela tfoot td { height: 32px; font-size: 14.5px; }
.pcg-legenda { gap: 14px; font-size: 12px; margin-bottom: 0; }
/* o texto do gráfico é link (abre a lista), mas sublinhado no SVG só atrapalha */
.pcg-grafico a, .pcg-grafico a:hover { text-decoration: none; }
.chave-farma { width: 14px; height: 14px; background: #C4475B; border-radius: 3px; }
.pcg-grafico .pcg-col-farma { fill: url(#pcg-farma); }
.pcg-grafico .pcg-col-farma-pior { fill: var(--bi-vinho-escuro); }
.pcg-grafico .col-alvo:hover .pcg-col-farma { filter: brightness(1.12); }
/* cartão das NATs de fármaco (com ícone de cápsula) e o % sem NAT ocupando
   a linha de baixo inteira */
.pcg-cartao-link { color: inherit; }
.pcg-cartao-link:hover { text-decoration: none; border-color: #e7b9c1; }
.pcg-icone-farma { background: linear-gradient(145deg, #E0708A, #A5122A); box-shadow: 0 6px 14px rgba(165, 18, 42, .22); }
.pcg-cartao-cheio { grid-column: 1 / -1; }

/* Layout 15/10/2026: faixa de 4 cartões iguais, gráfico mensal, e embaixo
   os 7 dias ao lado das NATs de fármaco. Nada de cartão esticado. */
.pcg-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 8px 0 14px;
}
@media (max-width: 1200px) { .pcg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .pcg-kpis { grid-template-columns: 1fr; } }
.pcg-kpis .pcg-cartao { padding: 14px 18px 14px 22px; }
.pcg-kpis .pcg-cartao-valor { font-size: clamp(26px, 1.9vw, 36px); }
.pcg-kpis .pcg-icone { width: clamp(44px, 2.8vw, 54px); height: clamp(44px, 2.8vw, 54px); border-radius: 14px; }
.pcg-dupla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; align-items: stretch;
}
.pcg-dupla > .painel { margin-bottom: 14px; }
@media (max-width: 1100px) { .pcg-dupla { grid-template-columns: 1fr; } }
.pcg-grafico .pcg-pilula-peq { font-size: 16px; }

/* Bloco de fármaco (PIL): faixa num vinho mais claro para separar do geral */
.pcg-faixa-farma { background: linear-gradient(90deg, #A5122A, #D9707F); }
.pcg-kpis-farma { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 12px; }
@media (max-width: 900px) { .pcg-kpis-farma { grid-template-columns: 1fr; } }
.pcg-grafico .pcg-col-farma-dia { fill: url(#pcg-farma-dia); }
.pcg-grafico .pcg-fds { opacity: .6; }
.pcg-grafico .pcg-valor-peq { font-size: 21px; }
.pcg-grafico .pcg-nat-zero { font-size: 17px; fill: #b6bcc6; }
.pcg-grafico .pcg-mes-fds { fill: #a0a7b2; }
.pcg-grafico .col-alvo:hover .pcg-col-farma-dia { filter: brightness(1.12); }

/* Filtro por mês (clique no gráfico): o mês escolhido em destaque, os
   outros apagados — o mesmo comportamento do Power BI */
.pcg-grafico .col-apagada { opacity: .32; }
.pcg-grafico .col-apagada:hover { opacity: .7; }
.pcg-grafico .col-sel .zona { fill: rgba(165, 18, 42, .08); }
.pcg-limpar { color: var(--bi-vinho); font-weight: 700; }
.pcg-aviso-farma-mes { margin: 0 0 14px; }

/* ==========================================================================
   PADRÃO ÚNICO DOS PAINÉIS (16/10/2026) — o desenho do PCGs x NATs em todas
   as telas: título solto no alto, os números em cartões brancos com friso
   na cor do módulo, e o título de cada gráfico numa faixa colorida.
   Ele pediu "todos com o mesmo layout"; escolheu este. Feito aqui, pelo
   estilo, para as ~20 telas mudarem juntas sem mexer em número nenhum.
   ========================================================================== */
.faixa,
body[data-modulo]:not([data-modulo=""]) .faixa {
  background: none; padding: 0; border-radius: 0;
  display: block; margin-bottom: 16px;
}
.faixa h1 {
  color: var(--texto); font-family: inherit; font-size: 24px; font-weight: 700;
  letter-spacing: 0; margin: 0 0 12px;
}
.faixa > .ajuda, .faixa > p { color: var(--texto-fraco); margin: -6px 0 0; }
.faixa-estreita { padding-bottom: 0; }
.faixa .faixa-cartoes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.faixa .kpi {
  position: relative; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(20,30,50,.06), 0 8px 22px rgba(20,30,50,.07);
  padding: 14px 16px 14px 22px;
  /* o rótulo vem DEPOIS do número no HTML; aqui ele sobe, como no PCGs */
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  align-items: flex-start; text-align: left; gap: 2px; color: inherit;
}
.faixa .kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--mod, var(--bi-vinho));
}
a.kpi:hover { text-decoration: none; border-color: var(--mod-borda, #ecc8cf); }
.faixa .kpi-rotulo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mod, var(--bi-vinho)); margin: 0;
}
.faixa .kpi-valor {
  font-size: clamp(24px, 1.8vw, 34px); font-weight: 700; line-height: 1.1;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.faixa .kpi-alerta .kpi-valor, .faixa .kpi.kpi-alerta .kpi-valor { color: var(--bi-vinho); }

/* título de cada painel numa faixa colorida, nas telas de painel (as que
   têm a faixa de números no alto). Só o título vira faixa; legenda e ajuda
   descem para a linha de baixo, senão o ponto vermelho da legenda sumiria
   no fundo vermelho. */
body:has(.faixa) .painel > h2:first-child,
body:has(.faixa) .painel > .painel-cabecalho:first-child > h2 {
  margin: -18px -20px 12px; padding: 8px 20px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--mod, #A5122A) 80%, #000), var(--mod, #A5122A));
  color: #fff; font-size: 14px; font-weight: 700; text-align: center;
  letter-spacing: .02em; border-radius: var(--raio) var(--raio) 0 0;
}
body:has(.faixa) .painel > .painel-cabecalho:first-child {
  flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px;
}
body:has(.faixa) .painel > .painel-cabecalho:first-child > h2 {
  flex: 0 0 calc(100% + 40px); margin-bottom: 4px;
}
/* até 1400px o painel tem 15px x 16px de recuo (ver o @media lá em cima) */
@media (max-width: 1400px) {
  body:has(.faixa) .painel > h2:first-child,
  body:has(.faixa) .painel > .painel-cabecalho:first-child > h2 {
    margin-left: -16px; margin-right: -16px; margin-top: -15px;
  }
  body:has(.faixa) .painel > .painel-cabecalho:first-child > h2 { flex-basis: calc(100% + 32px); }
}
/* a faixa que fica presa no topo (pontuação do fornecedor) precisa de fundo,
   senão o formulário passa por baixo dela e os textos se misturam */
.faixa[style*="sticky"] {
  background: color-mix(in srgb, var(--mod, #A5122A) 5%, #f4f6f9);
  padding: 8px 0 10px;
}

/* ==========================================================================
   SUAVIZAÇÃO (16/10/2026) — "muito forte, ruim pra visão". O desenho fica o
   mesmo; a cor é que recua: faixas de título em tom claro com texto na cor
   do módulo, ícones em fundo claro, sombra leve, total da tabela sem bloco
   vermelho. A cor forte fica só para o que é DADO (colunas do gráfico) e
   para alerta.
   ========================================================================== */

/* títulos de painel: tom claro em vez de vermelho cheio */
body:has(.faixa) .painel > h2:first-child,
body:has(.faixa) .painel > .painel-cabecalho:first-child > h2,
.pcg-faixa-titulo, .pcg-faixa-farma {
  background: var(--mod-clara, #fbeef0);
  color: var(--mod, var(--bi-vinho));
  border-bottom: 1px solid var(--mod-borda, #ecc8cf);
  font-weight: 700; letter-spacing: .01em;
}
.pcg-faixa-titulo, .pcg-faixa-farma { font-size: 14px; }

/* cartões: friso fino, sombra leve, rótulo menos gritado */
.faixa .kpi, .pcg-cartao {
  box-shadow: 0 1px 2px rgba(20,30,50,.05);
  border-color: var(--borda);
}
.faixa .kpi::before, .pcg-cartao::before {
  width: 3px; background: var(--mod, var(--bi-vinho));
}
.faixa .kpi-rotulo, .pcg-cartao-rotulo {
  font-weight: 700; letter-spacing: .03em; color: var(--texto-fraco);
}
.faixa .kpi-valor, .pcg-cartao-valor { font-weight: 650; }

/* ícones: fundo claro e traço colorido, sem degradê nem sombra */
.pcg-icone, .pcg-icone-grande {
  background: var(--mod-clara, #fbeef0); color: var(--mod, var(--bi-vinho));
  box-shadow: none;
}
.pcg-icone-azul  { background: #e8edfb; color: #2f47b0; }
.pcg-icone-verde { background: #e3f4ea; color: #1f8a55; }
.pcg-icone-farma { background: #fbe9ee; color: #b8405a; }

/* tabela dos 7 dias: cabeçalho e total discretos */
.pcg-tabela thead th {
  background: transparent; color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
}
.pcg-tabela tfoot td {
  background: var(--mod-clara, #fbeef0); color: var(--texto);
  border-top: 1px solid var(--mod-borda, #ecc8cf);
}
.barra-dado { background: rgba(194, 30, 58, .22); }
.barra-dado.barra-nat { background: rgba(59, 91, 219, .2); }

/* etiqueta do % dentro da coluna: cinza mais leve */
.pcg-grafico .pcg-pilula { fill: #ffffff; opacity: .9; }
.pcg-grafico .pcg-pilula-texto { fill: var(--texto); }
.legenda-grafico .chave-selo { background: #fff; border-color: #c9ced6; }

/* ==========================================================================
   GRÁFICOS NUM PADRÃO SÓ (16/10/2026) — antes o PCGs x NATs tinha coluna em
   degradê, arredondada e rótulo grande, e os outros coluna lisa, quadrada e
   rótulo pequeno inclinado. Agora todos: mesma cor (vinho suave, liso),
   canto arredondado, mesmo tamanho de número, mês na horizontal.
   ========================================================================== */
:root {
  --col-dado: #C04A5E;        /* vinho suave: a cor das colunas */
  --col-dado-forte: #9E2A3E;  /* destaque (pior mês) e hover */
  --col-neutra: #B4B9C1;      /* a parte "sem NAT" das empilhadas */
  --col-nat: #5468C8;         /* NATs, na faixa de baixo do PCGs */
  --col-farma: #D98A9A;       /* fármaco */
}
.grafico-svg .col-vermelha, .grafico-svg .pcg-col { fill: var(--col-dado); }
.grafico-svg .col-cinza { fill: var(--col-neutra); }
.grafico-svg .col, .grafico-svg .pcg-col, .grafico-svg .pcg-col-nat,
.grafico-svg .pcg-col-farma, .grafico-svg .pcg-col-farma-dia { rx: 4px; ry: 4px; }
.grafico-svg .col-alvo:hover .col, .pcg-grafico .col-alvo:hover .pcg-col { filter: brightness(.92); }
.pcg-grafico .pcg-col-parcial { fill: var(--col-dado); opacity: .4; }
.pcg-grafico .pcg-col-nat { fill: var(--col-nat); }
.pcg-grafico .pcg-col-nat-pior { fill: var(--col-dado-forte); }
.pcg-grafico .pcg-col-farma, .pcg-grafico .pcg-col-farma-dia { fill: var(--col-farma); }
.pcg-grafico .pcg-col-farma-pior { fill: var(--col-dado); }
.chave-coluna { background: var(--col-dado); }
.chave-nat-azul { background: var(--col-nat); }
.chave-farma { background: var(--col-farma); }
.ponto.vermelho { background: var(--col-dado); }
.ponto.cinza { background: var(--col-neutra); }

/* textos: os mesmos tamanhos nos dois desenhos (unidades da tela do SVG) */
.grafico-svg .rotulo-valor, .pcg-grafico .pcg-valor, .pcg-grafico .pcg-valor-peq {
  font-size: 19px; font-weight: 700; fill: var(--texto);
}
.grafico-svg .rotulo-destaque { fill: var(--col-dado-forte); font-size: 20px; }
.grafico-svg .rotulo-cat, .pcg-grafico .pcg-mes { font-size: 16px; fill: var(--texto-fraco); font-weight: 600; }
.grafico-svg .rotulo-cat-reto { text-anchor: middle; }
.pcg-grafico .pcg-nat-num { font-size: 17px; fill: var(--col-nat); }
.pcg-grafico .pcg-nat-pior, .pcg-grafico .pcg-mes-atual { fill: var(--col-dado-forte); }
.pcg-grafico .pcg-pilula-texto { font-size: 16px; }

/* filtro De / Até do PCGs x NATs */
.pcg-filtro { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.pcg-filtro label { font-size: 12px; color: var(--texto-fraco); display: flex; flex-direction: column; gap: 3px; }
.pcg-filtro input[type="date"] { width: auto; padding: 6px 8px; }

/* CM encerrado: a régua inteira fica verde, inclusive a última etapa */
.etapas-encerrado .etapa.atual .etapa-bolha { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas-encerrado .etapa.atual .etapa-nome { color: var(--verde); font-weight: 700; }

/* CM em andamento: a etapa atual fica amarela (as anteriores seguem verdes) */
.etapas-andamento .etapa.atual .etapa-bolha { background: var(--amarelo); border-color: var(--amarelo); color: #fff; }
.etapas-andamento .etapa.atual .etapa-nome { color: #8a6d00; font-weight: 700; }

/* Tabela ordenavel: titulo clicavel com seta */
.tabela.ordenavel th.ordena { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela.ordenavel th.ordena:hover { color: var(--texto); }
.tabela.ordenavel th.ordena::after { content: " \2195"; opacity: .35; font-size: 11px; }
.tabela.ordenavel th.ordena[data-dir="asc"]::after { content: " \25B2"; opacity: 1; }
.tabela.ordenavel th.ordena[data-dir="desc"]::after { content: " \25BC"; opacity: 1; }

/* --- Telas do Skore (treino_sgt) --- */
.aderencia { display: inline-flex; align-items: center; gap: 8px; }
.aderencia-barra { width: 70px; height: 8px; border-radius: 4px; background: #e6e1dc; overflow: hidden; }
.aderencia-barra i { display: block; height: 100%; background: #a5122a; }
.aderencia-num { font-variant-numeric: tabular-nums; min-width: 38px; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.ficha dt { font-size: 12px; color: #6b6460; text-transform: uppercase; }
.ficha dd { margin: 2px 0 0; }
.subabas { display: flex; gap: 8px; margin: 0 0 14px; }
.subabas a { padding: 6px 14px; border-radius: 16px; background: #eee9e4; color: inherit; text-decoration: none; }
.subabas a.ativa { background: #a5122a; color: #fff; }
.atencao-numero.neutro { color: var(--texto); }
.nota-grafico { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-fraco); }

.matriz-turno td.cel { text-align: center; padding: 0; }
.matriz-turno td.cel a { display: block; padding: 7px 10px; color: inherit; text-decoration: none; }
.matriz-turno td.cel a:hover { outline: 2px solid var(--bi-vinho); outline-offset: -2px; }
.matriz-turno td.cel small { display: block; font-size: 11px; opacity: .75; }
.sgt-cabecalho { margin-bottom: 18px; }
.sgt-cabecalho h1 { margin: 0 0 8px; }
.sgt-cabecalho .filtros { margin: 0 0 6px; }

/* --- Painel de treinamento refeito (tp_*.html) --- */
.tp-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px;
  align-items: end; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; }
.tp-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.tp-filtros select { font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tp-kpi { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.tp-kpi-rotulo { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tp-kpi-valor { font-size: 30px; font-weight: 650; line-height: 1.1; }
.tp-kpi-sub { font-size: 12.5px; color: var(--texto-fraco); }
.tp-kpi-sub.aviso-sub { color: #d97706; font-weight: 600; }
.tp-verde { border-left-color: #16a34a; } .tp-verde .tp-kpi-valor { color: #16a34a; }
.tp-ambar { border-left-color: #d97706; } .tp-ambar .tp-kpi-valor { color: #d97706; }
.tp-verm { border-left-color: #dc2626; } .tp-verm .tp-kpi-valor { color: #dc2626; }
.tp-barra { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin: 9px 0; }
.tp-barra-nome { font-size: 13px; font-weight: 600; }
.tp-barra-trilho { height: 12px; background: #e8e4df; border-radius: 6px; overflow: hidden; }
.tp-barra-trilho i { display: block; height: 100%; border-radius: 6px; }
.tp-barra-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tp-area { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; background: var(--fundo); }
.tp-area-nome { font-size: 12px; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-area-pct { font-size: 24px; font-weight: 700; line-height: 1.2; }
.tp-area-trilho { height: 6px; background: #e8e4df; border-radius: 3px; overflow: hidden; margin: 4px 0; }
.tp-area-trilho i { display: block; height: 100%; }
.tp-area-sub { font-size: 12px; color: var(--texto-fraco); }
.tp-trei { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.tp-trei-nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-trei-linha { display: flex; align-items: center; gap: 8px; height: 15px; margin: 2px 0; }
.tp-trei-linha i { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.tp-trei-linha i.pend { background: rgba(220, 38, 38, .85); } .tp-trei-linha i.conc { background: rgba(22, 163, 74, .85); }
.tp-trei-linha b { font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- Pendências do painel (tp_*.html) --- */
.tp-azul { border-left-color: #1d4ed8; } .tp-azul .tp-kpi-valor { color: #1d4ed8; }
.tp-hbar { display: grid; grid-template-columns: minmax(120px, 42%) 1fr 44px; align-items: center; gap: 10px; margin: 7px 0; }
.tp-hbar-nome { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-hbar-trilho { height: 11px; background: #e8e4df; border-radius: 6px; overflow: hidden; }
.tp-hbar-trilho i { display: block; height: 100%; border-radius: 6px; }
.tp-hbar-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.tp-corta { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.tp-busca input[type=search] { min-width: 260px; }
.tp-tb { display: inline-block; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 6px; font-weight: 700; font-size: 11px; }
.tp-tb.tb { background: #1d4ed8; color: #fff; } .tp-tb.b { background: #bfdbfe; color: #1e3a8a; }
.tp-selecao { margin-bottom: 14px; }
.tp-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2px 18px; max-height: 280px; overflow: auto; margin-top: 8px; }
.tp-checklist label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 0; cursor: pointer; }
.tp-ck-nome { flex: 1; }
.tp-ck-pend { color: #dc2626; min-width: 34px; text-align: right; font-size: 11.5px; }
.tp-aderencia { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: linear-gradient(135deg, #f0fdf4, #eff6ff); border-color: #bbf7d0; }
.tp-aderencia-num { font-size: 34px; font-weight: 800; line-height: 1.1; }
.tp-cargo { font-size: 11px; border-radius: 8px; padding: 2px 8px; font-weight: 600; }
.tp-m { text-align: center; font-weight: 700; font-size: 11px; font-style: normal; padding: 3px 6px; border-radius: 4px; }
.tp-m-T { background: #dcfce7; color: #166534; }
.tp-m-A { background: #fef3c7; color: #92400e; }
.tp-m-TB { background: #1d4ed8; color: #fff; }
.tp-m-B { background: #bfdbfe; color: #1e3a8a; }
.tp-m-NA { background: #f1f5f9; color: #94a3b8; }
.tp-matriz-sc th.tp-vert { vertical-align: bottom; padding: 4px 2px; }
.tp-matriz-sc th.tp-vert span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 10.5px; display: inline-block; max-height: 150px; overflow: hidden; }
.tp-legenda-cred { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 20px; font-size: 12.5px; }
.tp-busca select, .tp-busca input[type=search], .tp-acoes select, .tp-acoes input[type=search] { width: auto; flex: 0 1 auto; }
.tp-busca input[type=search], .tp-acoes input[type=search] { min-width: 260px; }
.tp-selecao .tp-acoes select { max-width: 240px; }
.tp-checklist input[type=checkbox] { width: auto; flex: none; margin: 0; }
.tp-checklist label { white-space: normal; }

/* --- Procedimentos, Obrigatórios e Matriz (tp_*.html) --- */
.tp-rank { display: grid; grid-template-columns: 26px minmax(120px, 40%) 1fr 56px 74px; align-items: center; gap: 8px;
  padding: 6px 6px; border-left: 3px solid transparent; border-radius: 6px; color: inherit; text-decoration: none; }
.tp-rank:hover { background: #f8fafc; text-decoration: none; }
.tp-rank.ativo { background: #fef2f2; border-left-color: #dc2626; }
.tp-rank-n { color: #94a3b8; font-size: 12px; text-align: center; }
.tp-rank-nome { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-rank-pct { text-align: right; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tp-rank-novos { font-size: 10.5px; color: #94a3b8; white-space: nowrap; }
.tp-resumo-ob { display: grid; gap: 10px; margin-top: 10px; }
.tp-resumo-ob div { display: flex; flex-direction: column; gap: 1px; }
.tp-resumo-ob b { font-size: 22px; } .tp-resumo-ob small { color: var(--texto-fraco); }
tr.linha-ativa { background: #fef2f2; }
.tp-leg-matriz { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 12.5px; }
.tp-m-F { background: #fee2e2; color: #991b1b; }
.tp-m-E { background: #ede9fe; color: #5b21b6; }
.tp-m-SPT { background: #ede9fe; color: #5b21b6; opacity: .85; }
.tp-m-SPA { background: #f3e8ff; color: #7e22ce; opacity: .85; }
.tp-matriz-rolagem { max-height: 74vh; overflow: auto; }
.tp-matriz th { position: sticky; top: 0; z-index: 2; background: #1e3a5f; color: #e2e8f0; }
.tp-matriz th.simpar { background: #5b21b6; }
.tp-matriz td.tp-m { text-align: center; padding: 3px 5px; min-width: 24px; }
.tp-leg-item { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; display: flex; gap: 8px; }
.tp-leg-item b { width: 30px; flex: none; color: #1e3a5f; }
.tp-matriz th.tp-vert { vertical-align: bottom; padding: 4px 2px; width: 26px; }
.tp-matriz th.tp-vert span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 10.5px; display: inline-block; max-height: 150px; overflow: hidden; }
.tp-matriz .m-T { background: #dcfce7; color: #166534; font-weight: 700; }
.tp-matriz .m-A { background: #fef3c7; color: #92400e; font-weight: 700; }
.tp-matriz .m-TB { background: #1d4ed8; color: #fff; font-weight: 700; }
.tp-matriz .m-B { background: #bfdbfe; color: #1e3a8a; font-weight: 700; }
.tp-matriz .m-NA { background: #f8fafc; color: #94a3b8; }
.tp-matriz .m-F { background: #fee2e2; color: #991b1b; font-weight: 700; }
.tp-matriz .m-E { background: #ede9fe; color: #5b21b6; font-weight: 700; }
.tp-matriz .m-SPT { background: #ede9fe; color: #5b21b6; font-weight: 700; }
.tp-matriz .m-SPA { background: #f3e8ff; color: #7e22ce; font-weight: 700; }

/* --- Painel Executivo, Semanal, Prazos (tp_*.html) --- */
.tp-resumo-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tp-resumo-boxes div { border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; }
.tp-resumo-boxes small { font-size: 11px; color: #64748b; font-weight: 600; }
.tp-resumo-boxes b { font-size: 22px; font-weight: 800; line-height: 1.3; }
.tp-resumo-boxes em { font-size: 10.5px; color: #94a3b8; font-style: normal; }
.tp-busca label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; }
.tp-turnos-chk { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.tp-turnos-chk label { flex-direction: row; align-items: center; gap: 5px; text-transform: none; font-weight: 400; color: inherit; font-size: 13px; }
.tp-turnos-chk input[type=checkbox] { width: auto; }
.tp-legenda-sem { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; margin-bottom: 6px; }
.tp-linha-leg { display: inline-block; width: 18px; border-top: 2px solid #0f172a; vertical-align: middle; }
.tp-fase { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }

/* --- Ajustes de 16/10 (tela de treinamentos) --- */
/* fundo da página: cinza clarinho (o módulo tingia de bege) */
body[data-modulo="treinamentos"]:not([data-modulo=""]) { background: #eef0f3; }

/* filtros recolhidos */
.tp-fdet { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  margin-bottom: 14px; }
.tp-fdet > summary { cursor: pointer; padding: 9px 14px; font-weight: 700; font-size: 13.5px;
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; list-style: none; }
.tp-fdet > summary::-webkit-details-marker { display: none; }
.tp-fdet > summary small { color: var(--texto-fraco); font-weight: 400; }
.tp-fdet[open] > summary { border-bottom: 1px solid var(--borda); }
.tp-chip { background: #e8edf5; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.tp-limpar { font-size: 12px; font-weight: 600; margin-left: auto; }
.tp-fdet .tp-filtros { border: 0; border-radius: 0; margin: 0; padding: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* matriz: linhas compactas, nomes em uma linha, cabeçalho e 3 primeiras colunas fixos */
.tp-matriz { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.tp-matriz th, .tp-matriz td { padding: 2px 6px; white-space: nowrap; border-bottom: 1px solid #eef0f3; }
.tp-matriz tbody tr { height: 26px; }
.tp-matriz td:nth-child(3) { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.tp-matriz td.tp-m { padding: 0; min-width: 24px; width: 24px; text-align: center; border-left: 1px solid #fff; }
.tp-matriz th.tp-vert { padding: 4px 0; width: 24px; min-width: 24px; }
.tp-matriz-rolagem { max-height: 76vh; }
.tp-matriz tbody tr:hover td { filter: brightness(.97); }

/* progressão diária */
.tp-prog-ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 10px; font-size: 12.5px; }
.tp-prog-ctrl label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texto-fraco); }
.tp-prog-ctrl input[type=number] { width: 60px; }
.tp-prog-ctrl input[type=date], .tp-prog-ctrl select { width: auto; }
.tp-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.tp-seg a { padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--texto-fraco); text-decoration: none; background: #fff; }
.tp-seg a.ativo { background: #0f172a; color: #fff; }
.tp-seg.metrica a.ativo { background: #dc2626; }
.tp-legenda-prog { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; margin-bottom: 4px; }
.tp-prog-pt { cursor: pointer; }
.tp-prog-pt:hover circle { r: 6; }

/* --- Treinamentos / Colaboradores (tp_gestao_pessoas, tp_perfis, tp_acesso) --- */
.tp-chip-perfil { display: inline-block; background: #f3e8ff; color: #7c3aed; border-radius: 10px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 600; margin: 1px 3px 1px 0; white-space: nowrap; }
.tp-tabela-alta { max-height: 70vh; overflow: auto; }
.tp-tabela-alta thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.tp-perfis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tp-perfil-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.tp-perfil-card header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.tp-perfil-card p { margin: 0; font-size: 12.5px; color: var(--texto-fraco); }
.tp-perfil-num { display: flex; gap: 14px; font-size: 12px; color: #64748b; }
.tp-perfil-card footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-tag { background: #dbeafe; color: #1e40af; border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.subabas a small { opacity: .75; }

/* --- Lista de presença pré-preenchida --- */
.aviso-ok { background: #e8f6ee; border-color: #b6e0c6; color: #155d36; }
tr.linha-aguardando td { background: #fffbf0; }
.part-campos[hidden], [data-so-origem][hidden] { display: none !important; }

/* ==========================================================================
   Menu lateral que só aparece com o mouse (16/10/2026)
   body.menu-auto = tela larga + mouse + menu não fixado (ligado pelo script).
   Sem script nada disso vale e o menu fica fixo, como sempre foi.
   ========================================================================== */
.menu-zona { display: none; }
@media (min-width: 901px) {
  body.menu-auto .layout { grid-template-columns: 1fr; }
  body.menu-auto .rodape { padding-left: 26px; }
  body.menu-auto .lateral {
    position: fixed; top: 60px; left: 0; bottom: 0; z-index: 30;
    width: 250px; height: auto; overflow-y: auto;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
    box-shadow: 8px 0 28px rgba(20,30,50,.20);
    padding: 14px 10px 24px;
  }
  body.menu-auto.menu-hover .lateral {
    transform: none; visibility: visible;
    transition: transform .18s ease, visibility 0s;
  }
  /* a faixa sensível: 14px na borda esquerda, de cima a baixo do conteúdo */
  body.menu-auto .menu-zona {
    display: block; position: fixed; top: 60px; left: 0; bottom: 0; width: 14px; z-index: 29;
  }
  /* a abinha: lembra que ali tem um menu (some quando ele abre) */
  body.menu-auto .menu-aba {
    position: absolute; left: 0; top: 42%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    background: var(--mod, var(--bi-vinho)); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 12px 5px; border-radius: 0 7px 7px 0; opacity: .88;
    transition: opacity .15s ease;
  }
  body.menu-auto.menu-hover .menu-aba { opacity: 0; }
}

/* o ☰ só existe onde ele é necessário: tela estreita ou toque (a gaveta).
   Em tela larga com mouse o menu aparece sozinho ao passar o mouse. */
@media (min-width: 901px) and (hover: hover) {
  .btn-menu { display: none; }
}

/* ==========================================================================
   Progressão diária — redesenho (17/10/2026): colunas em vez de 6 linhas
   ========================================================================== */
.tp-prog { padding-bottom: 14px; }
.tp-prog-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: flex-start; }
.tp-prog-topo h2 { margin: 0 0 2px; }
.tp-prog-topo .resumo { margin: 0; }
.tp-prog-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-seg.claro a.ativo { background: #e8edf5; color: #0f172a; }
.tp-seg.claro a { background: #fff; }
.tp-prog-periodo { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0 4px; }
.tp-prog-mais summary { cursor: pointer; font-size: 12.5px; color: var(--texto-fraco); font-weight: 600; list-style: none; }
.tp-prog-mais summary::-webkit-details-marker { display: none; }
.tp-prog-mais summary::before { content: "▸ "; }
.tp-prog-mais[open] summary::before { content: "▾ "; }
.tp-prog-mais form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-top: 8px; padding: 10px 12px;
  background: var(--fundo); border-radius: 8px; }
.tp-prog-mais label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--texto-fraco); }
.tp-prog-mais input { width: auto; }
.tp-prog-mais input[type=number] { width: 70px; }
.tp-prog-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.tp-prog-kpis div { background: var(--fundo); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; }
.tp-prog-kpis span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.tp-prog-kpis b { font-size: 24px; line-height: 1.15; }
.tp-prog-kpis small { color: var(--texto-fraco); font-size: 11.5px; }
.tp-prog-bloco { margin-top: 10px; }
.tp-prog-bloco h3 { margin: 0 0 4px; font-size: 14px; }
.tp-prog-bloco h3 small { font-weight: 400; color: var(--texto-fraco); font-size: 12px; }
.tp-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tp-svg .grade { stroke: #e5e9ef; stroke-width: 1; }
.tp-svg .eixo { stroke: #94a3b8; stroke-width: 1; }
.tp-svg .fds { fill: #f1f4f8; }
.tp-svg .alvo { fill: transparent; }
.tp-svg .eixo-t { font-size: 12px; fill: #64748b; }
.tp-svg .eixo-m { font-size: 10px; fill: #64748b; }
.tp-svg .valor-t { font-size: 11.5px; font-weight: 700; fill: #334155; }
.tp-svg .valor-m { font-size: 9.5px; font-weight: 700; fill: #475569; }
.tp-svg .meta { stroke: #0f172a; stroke-width: 1.2; stroke-dasharray: 5 4; }
.tp-col { cursor: pointer; }
.tp-col:hover .alvo { fill: rgba(15, 23, 42, .06); }
.tp-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tp-mini { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px 4px; background: #fff; }
.tp-mini header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 2px; }
.tp-mini-num { color: var(--texto-fraco); font-size: 11.5px; }
.tp-mini-num b { color: var(--texto); }
.tp-prog-det { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 12px; }
.tp-seg.claro { flex-wrap: wrap; }
.tp-seg { max-width: 100%; }
.tp-prog-ctrl { max-width: 100%; }
@media (max-width: 600px) { .tp-prog-kpis { grid-template-columns: repeat(2, 1fr); } .tp-minis { grid-template-columns: 1fr; } }

/* escolher o turno da progressão */
.tp-prog-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
.tp-prog-chips-rot { font-size: 12.5px; font-weight: 700; color: var(--texto-fraco); margin-right: 2px; }
.tp-chip-turno { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--borda);
  border-radius: 16px; background: #fff; color: var(--texto); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.tp-chip-turno small { color: var(--texto-fraco); font-weight: 600; }
.tp-chip-turno:hover { border-color: var(--cor, #334155); text-decoration: none; }
.tp-chip-turno.ativo { background: #0f172a; border-color: #0f172a; color: #fff; }
.tp-chip-turno.ativo small { color: #cbd5e1; }
.tp-mini-titulo { color: inherit; text-decoration: none; }
.tp-mini-titulo:hover { text-decoration: underline; }

/* Pendências por Treinamento: escolher treinamentos (17/10/2026) */
.tp-sel-det { border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.tp-sel-det > summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 11px 14px;
  cursor: pointer; list-style: none; }
.tp-sel-det > summary::-webkit-details-marker { display: none; }
.tp-sel-tit { font-weight: 800; font-size: 15px; }
.tp-sel-cont { color: var(--texto-fraco); font-size: 12.5px; }
.tp-sel-cont b { color: var(--texto); }
.tp-sel-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-sel-abrir { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--mod, #c2571a); }
.tp-sel-det[open] > summary { border-bottom: 1px solid var(--borda); }
.tp-sel-ferr { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; }
.tp-sel-ferr input[type=search] { flex: 1 1 300px; min-width: 220px; }
.tp-sel-ferr .tp-seg button { padding: 5px 12px; font-size: 12.5px; font-weight: 600; border: 0; background: #fff;
  color: var(--texto-fraco); cursor: pointer; border-right: 1px solid var(--borda); font-family: inherit; }
.tp-sel-ferr .tp-seg button:last-child { border-right: 0; }
.tp-sel-ferr .tp-seg button:hover { background: #eef1f6; color: var(--texto); }
.tp-sel-ord { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--texto-fraco); }
.tp-sel-ord select { width: auto; }
.tp-sel-lista { max-height: 340px; overflow: auto; padding: 4px 8px 10px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 14px; }
.tp-sel-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 70px 38px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid #f1f3f6; }
.tp-sel-item:hover { background: #f6f8fb; }
.tp-sel-item.marcado { background: #fff3e8; }
.tp-sel-item[hidden] { display: none; }
.tp-sel-item input { width: auto; margin: 0; }
.tp-sel-nome { font-size: 12.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tp-sel-barra { height: 6px; background: #e8ebf0; border-radius: 3px; overflow: hidden; }
.tp-sel-barra i { display: block; height: 100%; background: #dc2626; border-radius: 3px; }
.tp-sel-pend { text-align: right; color: #dc2626; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tp-sel-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-top: 12px; }
.tp-sel-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700;
  color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .03em; }
.tp-sel-filtros select, .tp-sel-filtros input[type=search] { width: auto; min-width: 150px; text-transform: none;
  letter-spacing: 0; font-weight: 400; }
.tp-sel-pessoa input { min-width: 220px; }
.tp-sel-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 600px) {
  .tp-sel-lista { grid-template-columns: 1fr; }
  .tp-sel-item { grid-template-columns: 20px minmax(0, 1fr) 38px; }
  .tp-sel-item .etiqueta, .tp-sel-barra { display: none; }
  .tp-sel-botoes { margin-left: 0; }
}

.aviso-erro { background: #fdecea; border-color: #e0a29b; color: #8a1c12; }

/* ===== Menu do usuário (topo, à direita): avatar com iniciais e lista de conta ===== */
.usuario-menu { position: relative; }
.usuario-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie); color: var(--texto); font-size: 13.5px; font-weight: 550;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.usuario-menu summary::-webkit-details-marker { display: none; }
.usuario-menu summary:hover, .usuario-menu[open] summary {
  background: #fbeef0; border-color: #e9c3ca; box-shadow: 0 1px 4px rgba(165,18,42,.12);
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bi-vinho); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.usuario-nome { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-menu .seta { font-size: 10px; opacity: .65; }
.usuario-lista {
  position: absolute; right: 0; top: 46px; min-width: 220px; z-index: 40;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20,30,50,.18); padding: 6px; display: flex; flex-direction: column;
}
.usuario-cabeca { padding: 10px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; }
.usuario-cabeca small { color: var(--texto-fraco); font-size: 12px; }
.usuario-lista a { padding: 9px 12px; border-radius: 8px; color: var(--texto); font-size: 14px; font-weight: 500; }
.usuario-lista a:hover { background: var(--fundo); text-decoration: none; }
.usuario-lista a.usuario-sair { color: var(--bi-vinho); font-weight: 600; margin-top: 2px; border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; }

/* ===== Telas de usuários / senha: tabela e formulário mais arrumados ===== */
.tabela input[type="text"], .tabela input[type="password"], .tabela select { width: 100%; min-width: 120px; }
.aviso { padding: 12px 16px; border-radius: 10px; margin: 0 0 14px; background: #eef5ff; border: 1px solid #c9dcf7; color: #17499a; }
.aviso-erro { background: #fdecea; border-color: #e8b4ae; color: #8a1c12; }

/* Atalhos de administração na página inicial */
.portal-admin { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }