/* O perfil do usuário (28/09/2026). Canvas novo (Espresso). Sem largura fixa,
 * sem :hover fora de (hover:hover), gráfico rolando dentro do próprio cartão. */
.pf-wrap { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); min-width: 0; }
.hidden { display: none !important; }
.pf-topo, .pf-bloco { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-4); min-width: 0; }
.pf-nome { margin: 0; font-size: var(--t-xl); font-weight: 600; color: var(--ink-800); }
.pf-legenda { margin: 0; font-size: var(--t-xs); color: var(--ink-500); line-height: var(--lh-p); }
.pf-metas { display: grid; gap: var(--s-3); margin-top: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.pf-meta { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3);
  border: 1px solid var(--divider); border-radius: var(--r-sm); min-width: 0; }
.pf-meta h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2); font-size: var(--t-sm); font-weight: 600; }
.pf-meta h3 b { font-family: var(--font-mono); font-size: var(--t-2xl); }
.pf-bom { color: var(--ok-txt); }
.pf-ruim { color: var(--alarme-txt); }
/* uma preferência por linha: o nome à esquerda, a escolha à direita */
.pf-pref { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.pf-pref b { font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); }
.pf-grafico { width: 100%; height: clamp(10rem, 26dvh, 14rem); touch-action: pan-y; }
/* meus documentos (05/11/2026): um por linha, a ação à direita */
.pf-lista-docs { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.pf-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--divider-soft); }
.pf-doc b { font-family: var(--font-mono); font-weight: 600; margin-right: var(--s-1); }
.pf-doc .pf-legenda { display: block; margin: 2px 0 0; }
/* meus treinamentos (06/11/2026, F5): mesma linha dos documentos; à direita,
   o domínio em quatro marcas e a situação por extenso */
.pf-bloco .pf-tr-h { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-3) 0 0;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); }
.pf-tr-dir { display: flex; align-items: center; gap: var(--s-2); }
.pf-tr-sit { font-size: var(--t-xs); color: var(--ink-700); }
.pf-tr-sit.pf-ruim { color: var(--alarme-txt); }
.pf-tr-obrig { font-size: var(--t-xs); color: var(--ink-500); }
.pf-tr-nivel { display: inline-flex; gap: 3px; }
.pf-tr-nivel i { width: 10px; height: 10px; border-radius: 2px; background: var(--ink-100);
  border: 1px solid var(--ink-300); }
.pf-tr-nivel i.on { background: var(--ink-700); border-color: var(--ink-700); }
.pf-tr-legenda { margin-top: var(--s-3); }
/* quem é (05/11/2026): a foto do RH e o nome de uso. A foto é a do crachá
   (3:4), mostrada em círculo como no topo — aqui só identifica. */
.pf-pessoa { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-width: 0; }
.pf-pessoa-txt { min-width: 0; }
.pf-foto { flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; overflow: hidden; background: var(--ink-100); color: var(--ink-700);
  font-size: var(--t-lg); font-weight: 600; }
.pf-foto img { width: 100%; height: 100%; object-fit: cover; }
/* meu cadastro (05/11/2026): só leitura. Rótulo sobre o valor, em grade que
   vira uma coluna no celular. */
.pf-cadastro { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pf-campos { display: grid; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pf-campo { min-width: 0; }
.pf-campo dt { font-size: var(--t-xs); color: var(--ink-500); }
.pf-campo dd { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-800); overflow-wrap: anywhere; }
.pf-campo dd.pf-vazio { color: var(--ink-400); }
.pf-rodape { margin-top: var(--s-2); }
/* minha assinatura (05/11/2026, F2). A assinatura aparece em PAPEL branco
   mesmo no tema escuro: é como ela sai no PDF. */
.pf-volta { align-self: flex-start; }
.pf-rub-atual { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.pf-rub-papel { display: inline-grid; place-items: center; min-width: 10rem; min-height: 4rem;
  padding: var(--s-1) var(--s-2); background: white; border: 1px solid var(--divider);
  border-radius: var(--r-sm); }
.pf-rub-papel img { max-height: 5rem; max-width: min(100%, 20rem); }
.pf-rub-papel i { color: var(--ink-500); }
.pf-rub-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.pf-rub-acoes[hidden], .pf-prancheta[hidden], .pf-rub-senha[hidden] { display: none; }
.pf-rub-acoes > .pf-legenda { flex: 1 1 100%; }
/* A PRANCHETA — as três lições que a Calibração pagou (15/09/2026):
   · `touch-action: none` NÃO é acabamento: sem ele o dedo ROLA a página em vez
     de desenhar, e no tablete a prancheta simplesmente não funciona;
   · `height: auto` é OBRIGATÓRIO: o `style.css` dá altura fixa a todo `canvas`
     (os gráficos do SCADA), e altura explícita VENCE `aspect-ratio` — o traço
     era gravado esticado. O 3/1 casa com o canvas 900×300;
   · fundo branco, nunca token de tema: é PAPEL (ver base/prancheta.js). */
.pf-prancheta { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2);
  max-width: 40rem; }
.pf-prancheta canvas { width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none;
  background: white; border: 1px dashed var(--ink-300); border-radius: var(--r-xs); cursor: crosshair; }
.pf-rub-senha { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); max-width: 28rem; }
.pf-campo-senha { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--ink-700); }