/* ==========================================================================
   PROCEDIMENTOS E PROTOCOLOS — Gestão de Pacientes (03/11/2026)
   --------------------------------------------------------------------------
   Pedido do dono: fundo preto absoluto (#000000); bordas, eixo da linha do
   tempo, títulos e botões primários em Dourado Oficial (#FFD700) e Amarelo
   Caramelo (#D4A373); texto branco/gelo (#FFFFFF / #EAEAEA); cores semânticas
   dos pilares só nos selos, ícones e indicadores dos cartões; vidro jateado
   PLANO, retângulos com cantos de 8 a 12 px, nada orgânico; sans-serif do
   sistema (sem "Quiche Sans"); texto clínico, termos e eventos adversos
   JUSTIFICADOS.

   Tokens LOCAIS (`.pp-modulo` e as janelas `.pp-janela`), como rh.css e
   estoque-visoes.css: nada aqui alcança outra tela. As janelas são filhas
   diretas do <body> com `portal-overlay` (escape da regra do tema
   `.lg-ambiente > *:not(.portal-overlay)`). Cores sempre por CLASSE: a CSP não
   deixa <style> por script, e o tema claro é a camada `html.tema-claro` do fim
   desta folha.
   ========================================================================== */

.pp-modulo, .pp-janela {
  --pp-preto: #000000;
  --pp-ouro: #FFD700;
  --pp-caramelo: #D4A373;
  --pp-liga: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  --pp-texto: #FFFFFF;
  --pp-gelo: #EAEAEA;
  --pp-fraco: rgba(234, 234, 234, 0.64);
  --pp-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022));
  --pp-vidro-forte: linear-gradient(180deg, rgba(22, 20, 14, 0.94), rgba(8, 8, 8, 0.96));
  --pp-fosco: blur(18px) saturate(150%);
  --pp-borda: rgba(255, 215, 0, 0.26);
  --pp-borda-forte: rgba(255, 215, 0, 0.55);
  --pp-borda-caramelo: rgba(212, 163, 115, 0.36);
  --pp-sombra: 0 10px 30px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --pp-canto-1: 12px;
  --pp-canto-2: 10px;
  --pp-canto-3: 8px;
  --pp-critico: #FF3333;
  --pp-alerta: #F1C40F;
  --pp-ok: #2ECC71;
  --pp-emagrecimento: #2ECC71;
  --pp-hipertrofia: #E74C3C;
  --pp-soroterapia: #3498DB;
  --pp-estetica: #9B59B6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--pp-gelo);
}

.pp-modulo {
  background: var(--pp-preto);
  border-radius: var(--pp-canto-1);
  padding: 18px;
  min-height: 60vh;
}
.pp-modulo *, .pp-janela * { box-sizing: border-box; }

/* ── texto ── */
.pp-justificado, .pp-diretrizes, .pp-tcle-texto p, .pp-notas, .pp-evento-texto { text-align: justify; hyphens: auto; }
.pp-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--pp-fraco); margin-top: 2px; letter-spacing: 0; }
.pp-vazio { color: var(--pp-fraco); padding: 18px 4px; }
.pp-dica { font-size: 12.5px; color: var(--pp-fraco); margin: 6px 0 0; }
.pp-erro-campo { color: #FF8A8A; font-size: 12px; margin-top: 4px; }
.pp-oculto { display: none !important; }
.pp-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── painel de vidro ── */
.pp-painel {
  background: var(--pp-vidro);
  -webkit-backdrop-filter: var(--pp-fosco);
  backdrop-filter: var(--pp-fosco);
  border: 1px solid var(--pp-borda);
  border-radius: var(--pp-canto-1);
  box-shadow: var(--pp-sombra);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.pp-painel h2, .pp-painel h3 { margin: 0 0 10px; color: var(--pp-ouro); font-weight: 650; letter-spacing: 0.2px; }
.pp-painel h2 { font-size: 17px; }
.pp-painel h3 { font-size: 14.5px; }

/* ── cabeçalho da aba ── */
.pp-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pp-cabecalho h1 { margin: 0; font-size: 21px; font-weight: 700; background: var(--pp-liga); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-cabecalho-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-paciente-escolha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 340px; }
.pp-paciente-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--pp-borda-forte); border-radius: var(--pp-canto-3);
  background: rgba(255, 215, 0, 0.07); color: var(--pp-texto); font-weight: 600;
}
.pp-paciente-chip small { color: var(--pp-fraco); font-weight: 400; }

/* ── botões ── */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 14px; border-radius: var(--pp-canto-3);
  border: 1px solid var(--pp-borda-caramelo); background: rgba(255, 255, 255, 0.03);
  color: var(--pp-gelo); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pp-btn:hover:not(:disabled) { border-color: var(--pp-borda-forte); background: rgba(255, 215, 0, 0.08); }
.pp-btn:focus-visible { outline: 2px solid var(--pp-ouro); outline-offset: 2px; }
.pp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pp-btn-ouro { background: var(--pp-liga); color: #000; border-color: transparent; }
.pp-btn-ouro:hover:not(:disabled) { background: linear-gradient(135deg, #FFE24D 0%, #E0B484 100%); }
.pp-btn-grande { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.pp-btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.pp-btn-perigo { border-color: rgba(255, 51, 51, 0.6); color: #FFB3B3; }
.pp-btn-link { background: none; border: 0; color: var(--pp-ouro); padding: 0; min-height: 0; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }

/* ── abas internas (os 5 pilares operacionais) ── */
.pp-abas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--pp-borda); margin-bottom: 16px; padding-bottom: 8px; }
.pp-aba {
  min-height: 36px; padding: 7px 14px; border-radius: var(--pp-canto-3); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--pp-fraco);
  font: inherit; font-size: 13.5px; font-weight: 600;
}
.pp-aba:hover { color: var(--pp-gelo); border-color: var(--pp-borda-caramelo); }
.pp-aba[aria-selected="true"] { color: #000; background: var(--pp-liga); }
.pp-aba:focus-visible { outline: 2px solid var(--pp-ouro); outline-offset: 2px; }
.pp-aba-num { display: inline-block; min-width: 18px; margin-right: 4px; opacity: 0.8; }

/* ── campos ── */
.pp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.pp-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pp-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--pp-fraco); font-weight: 600; letter-spacing: 0.2px; }
.pp-campo input, .pp-campo select, .pp-campo textarea, .pp-busca input {
  font: inherit; font-size: 14px; color: var(--pp-texto); background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-3);
  min-height: 38px; padding: 8px 10px; width: 100%;
}
.pp-campo textarea { min-height: 84px; resize: vertical; text-align: justify; }
.pp-campo input:focus, .pp-campo select:focus, .pp-campo textarea:focus, .pp-busca input:focus { outline: none; border-color: var(--pp-ouro); box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18); }
.pp-campo.pp-com-erro input, .pp-campo.pp-com-erro select, .pp-campo.pp-com-erro textarea { border-color: var(--pp-critico); }
.pp-campo select option { background: #111; color: #fff; }
/* Obrigatório: o asterisco fica AO LADO do rótulo (e não depois do campo): o rótulo e o * na 1ª linha
   da grade, o campo e o erro ocupam a largura toda nas linhas de baixo. */
.pp-campo.pp-obrig { display: grid; grid-template-columns: auto 1fr; column-gap: 4px; align-items: center; justify-items: start; }
.pp-campo.pp-obrig > * { grid-column: 1 / -1; justify-self: stretch; }
.pp-campo.pp-obrig::after { content: '*'; color: var(--pp-ouro); grid-row: 1; grid-column: 2; }
.pp-linha-campos { display: flex; gap: 8px; align-items: flex-end; }
.pp-linha-campos > * { flex: 1 1 0; }
.pp-pa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.pp-pa span { color: var(--pp-fraco); }

/* segmentado (vias, Sim/Não, origem do insumo) */
.pp-segmento { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-3); overflow: hidden; }
.pp-segmento button {
  font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--pp-gelo); border: 0; border-right: 1px solid var(--pp-borda-caramelo);
}
.pp-segmento button:last-child { border-right: 0; }
.pp-segmento button[aria-pressed="true"] { background: var(--pp-liga); color: #000; }
/* Checklist: a resposta que BARRA fica vermelha, a que só AVISA fica âmbar, a segura fica verde —
   por pergunta (em "Exames validados?" o SIM é o seguro). */
.pp-segmento button.pp-risco[aria-pressed="true"] { background: var(--pp-critico); color: #fff; }
.pp-segmento button.pp-atencao[aria-pressed="true"] { background: var(--pp-alerta); color: #000; }
.pp-segmento button.pp-seguro[aria-pressed="true"] { background: rgba(46, 204, 113, 0.85); color: #000; }
.pp-segmento button:focus-visible { outline: 2px solid var(--pp-ouro); outline-offset: -2px; }

/* ── busca com lista (paciente, insumo) ── */
.pp-busca { position: relative; flex: 1 1 260px; }
.pp-sugestoes {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow: auto;
  background: var(--pp-vidro-forte); border: 1px solid var(--pp-borda-forte); border-radius: var(--pp-canto-2);
  box-shadow: var(--pp-sombra); padding: 4px;
}
.pp-sugestao { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--pp-canto-3); background: transparent; border: 0; color: var(--pp-gelo); font: inherit; font-size: 13.5px; cursor: pointer; }
.pp-sugestao:hover, .pp-sugestao:focus-visible { background: rgba(255, 215, 0, 0.1); outline: none; }
.pp-sugestao small { display: block; color: var(--pp-fraco); font-size: 12px; }

/* ── selos (badges) ── */
.pp-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; border: 1px solid transparent; white-space: nowrap; }
.pp-selo-ok { background: rgba(46, 204, 113, 0.14); color: #7DEBA9; border-color: rgba(46, 204, 113, 0.4); }
.pp-selo-alerta { background: rgba(241, 196, 15, 0.14); color: var(--pp-alerta); border-color: rgba(241, 196, 15, 0.45); }
.pp-selo-critico { background: rgba(255, 51, 51, 0.16); color: #FF8A8A; border-color: rgba(255, 51, 51, 0.5); }
.pp-selo-neutro { background: rgba(255, 255, 255, 0.06); color: var(--pp-gelo); border-color: rgba(255, 255, 255, 0.14); }
.pp-selo-ouro { background: rgba(255, 215, 0, 0.1); color: var(--pp-ouro); border-color: var(--pp-borda-forte); }

/* cor do pilar: indicador lateral, ícone e selo */
.pp-pilar-Emagrecimento { --pp-cor: var(--pp-emagrecimento); }
.pp-pilar-Hipertrofia { --pp-cor: var(--pp-hipertrofia); }
.pp-pilar-Soroterapia { --pp-cor: var(--pp-soroterapia); }
.pp-pilar-Estetica { --pp-cor: var(--pp-estetica); }
.pp-selo-pilar { background: color-mix(in srgb, var(--pp-cor) 16%, transparent); color: var(--pp-cor); border-color: color-mix(in srgb, var(--pp-cor) 55%, transparent); }
.pp-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--pp-canto-3); color: var(--pp-cor, var(--pp-ouro)); background: color-mix(in srgb, var(--pp-cor, #FFD700) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pp-cor, #FFD700) 50%, transparent); flex: 0 0 auto; }
.pp-icone svg { width: 20px; height: 20px; }

/* ── avisos ── */
.pp-aviso { border-radius: var(--pp-canto-2); padding: 10px 14px; margin: 10px 0; font-size: 13.5px; border: 1px solid; }
.pp-aviso ul { margin: 6px 0 0 18px; padding: 0; }
.pp-aviso-alerta { background: rgba(241, 196, 15, 0.09); border-color: rgba(241, 196, 15, 0.5); color: #F7DC6F; }
.pp-aviso-info { background: rgba(255, 215, 0, 0.05); border-color: var(--pp-borda); color: var(--pp-gelo); }
.pp-aviso-critico { background: rgba(255, 51, 51, 0.12); border: 2px solid var(--pp-critico); color: #FFD6D6; }
.pp-aviso-critico strong:first-child { color: var(--pp-critico); letter-spacing: 0.4px; }
.pp-aviso-ok { background: rgba(46, 204, 113, 0.08); border-color: rgba(46, 204, 113, 0.45); color: #A9F0C6; }

/* ── 1. REGISTRO ── */
.pp-registro-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pp-resumo-paciente { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pp-resumo-item { border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-2); padding: 10px 12px; }
.pp-resumo-item h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--pp-caramelo); }
.pp-resumo-item ul { margin: 0; padding-left: 16px; font-size: 13px; }

/* ── 2. BIBLIOTECA ── */
.pp-pilar-bloco { border: 1px solid var(--pp-borda); border-left: 4px solid var(--pp-cor); border-radius: var(--pp-canto-1); margin-bottom: 12px; background: var(--pp-vidro); overflow: hidden; }
.pp-pilar-bloco > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 700; color: var(--pp-texto); }
.pp-pilar-bloco > summary::-webkit-details-marker { display: none; }
.pp-pilar-bloco > summary::after { content: '▸'; margin-left: auto; color: var(--pp-ouro); transition: transform 0.2s ease; }
.pp-pilar-bloco[open] > summary::after { transform: rotate(90deg); }
.pp-pilar-bloco > summary:focus-visible { outline: 2px solid var(--pp-ouro); outline-offset: -2px; }
.pp-pilar-corpo { padding: 4px 16px 16px; }
.pp-protocolos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pp-protocolo { border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-2); padding: 12px 14px; background: rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 8px; }
.pp-protocolo h4 { margin: 0; font-size: 14.5px; color: var(--pp-ouro); }
.pp-protocolo dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.8px; }
.pp-protocolo dt { color: var(--pp-fraco); }
.pp-protocolo dd { margin: 0; color: var(--pp-gelo); }
.pp-diretrizes { font-size: 13px; line-height: 1.5; white-space: pre-line; margin: 0; color: var(--pp-gelo); }
.pp-protocolo-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.pp-governanca { font-size: 12.8px; line-height: 1.5; }
.pp-calculadora { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.pp-calculadora output { display: block; font-size: 20px; font-weight: 700; color: var(--pp-ouro); }
.pp-tabela-gotas { width: 100%; border-collapse: collapse; font-size: 12.8px; margin-top: 10px; }
.pp-tabela-gotas th, .pp-tabela-gotas td { border-bottom: 1px solid var(--pp-borda); padding: 6px 8px; text-align: left; }
.pp-tabela-gotas th { color: var(--pp-caramelo); font-weight: 600; }

/* ── 3. SEGURANÇA / 4. ESTOQUE (tabelas) ── */
.pp-tabela-caixa { overflow-x: auto; border: 1px solid var(--pp-borda); border-radius: var(--pp-canto-2); }
.pp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-tabela th, .pp-tabela td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 215, 0, 0.12); text-align: left; vertical-align: top; }
.pp-tabela th { color: var(--pp-caramelo); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; background: rgba(255, 215, 0, 0.04); }
.pp-tabela tr:last-child td { border-bottom: 0; }
.pp-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ── 5. LINHA DO TEMPO ── */
.pp-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.pp-chip {
  font: inherit; font-size: 12.8px; font-weight: 600; min-height: 32px; padding: 5px 12px; cursor: pointer;
  border-radius: var(--pp-canto-3); border: 1px solid var(--pp-borda-caramelo); background: transparent; color: var(--pp-gelo);
}
.pp-chip[aria-pressed="true"] { border-color: var(--pp-ouro); background: rgba(255, 215, 0, 0.12); color: var(--pp-texto); }
.pp-chip:focus-visible { outline: 2px solid var(--pp-ouro); outline-offset: 2px; }
.pp-chip-conta { opacity: 0.7; font-weight: 500; margin-left: 2px; }
.pp-barra-tempo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.pp-linha { position: relative; padding-left: 30px; }
.pp-linha::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--pp-ouro), var(--pp-caramelo)); border-radius: 2px; }
.pp-cartao {
  position: relative; margin-bottom: 14px; border: 1px solid var(--pp-borda); border-left: 4px solid var(--pp-cor, var(--pp-ouro));
  border-radius: var(--pp-canto-1); background: var(--pp-vidro); -webkit-backdrop-filter: var(--pp-fosco); backdrop-filter: var(--pp-fosco);
  box-shadow: var(--pp-sombra); padding: 12px 14px 10px;
}
.pp-cartao::before { content: ''; position: absolute; left: -26px; top: 18px; width: 12px; height: 12px; border-radius: 3px; background: var(--pp-cor, var(--pp-ouro)); border: 2px solid #000; box-shadow: 0 0 0 1px var(--pp-ouro); }
.pp-cartao.pp-com-evento { border-top: 4px solid var(--pp-alerta); }
.pp-cartao.pp-com-evento::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pp-alerta); }
.pp-cartao.pp-exemplo { border-style: dashed; opacity: 0.92; }
.pp-cartao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.8px; color: var(--pp-fraco); }
.pp-cartao-topo time { color: var(--pp-gelo); font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-cartao-topo .pp-sep { opacity: 0.5; }
.pp-cartao-topo .pp-tag-evento { margin-left: auto; }
.pp-cartao-titulo { margin: 8px 0 2px; font-size: 15px; font-weight: 650; color: var(--pp-texto); line-height: 1.35; }
.pp-cartao-titulo small { color: var(--pp-caramelo); font-weight: 600; font-size: 13px; }
.pp-cartao-resp { margin: 2px 0 8px; font-size: 12.8px; color: var(--pp-fraco); }
.pp-cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(255, 215, 0, 0.14); padding-top: 8px; }
.pp-detalhe-casca { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.pp-detalhe-casca.pp-aberto { grid-template-rows: 1fr; }
.pp-detalhe-casca > div { overflow: hidden; visibility: hidden; transition: visibility 0.3s; }
.pp-detalhe-casca.pp-aberto > div { visibility: visible; }
.pp-detalhe { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; padding: 10px 0 4px; font-size: 13px; }
.pp-detalhe h5 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--pp-caramelo); }
.pp-detalhe p, .pp-detalhe ul { margin: 0; }
.pp-detalhe ul { padding-left: 16px; }
.pp-detalhe-largo { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .pp-detalhe-casca, .pp-detalhe-casca > div { transition: none; } }

/* gráfico */
.pp-graficos { display: grid; gap: 14px; }
.pp-grafico { border: 1px solid var(--pp-borda); border-radius: var(--pp-canto-2); padding: 12px 14px; background: rgba(0, 0, 0, 0.5); }
.pp-grafico h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--pp-gelo); font-weight: 650; }
.pp-grafico .pp-tela { position: relative; height: 210px; }
.pp-grafico-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }

/* ── mapa anatômico ── */
.pp-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-mapa-vista { border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-2); padding: 8px; background: rgba(0, 0, 0, 0.55); text-align: center; }
.pp-mapa-vista h5 { margin: 0 0 4px; font-size: 11.5px; letter-spacing: 1.2px; color: var(--pp-caramelo); }
.pp-mapa svg { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; touch-action: manipulation; }
.pp-corpo-forma { fill: rgba(234, 234, 234, 0.07); stroke: rgba(212, 163, 115, 0.55); stroke-width: 1.2; }
.pp-zona { fill: rgba(255, 215, 0, 0.06); stroke: rgba(255, 215, 0, 0.42); stroke-width: 1; stroke-dasharray: 3 2; cursor: crosshair; }
.pp-zona:hover, .pp-zona:focus { fill: rgba(255, 215, 0, 0.16); outline: none; stroke-dasharray: none; }
.pp-zona.pp-escolhida { fill: rgba(255, 215, 0, 0.24); stroke: var(--pp-ouro); stroke-width: 1.6; stroke-dasharray: none; }
.pp-zona.pp-sugerida { stroke: #7DEBA9; stroke-width: 1.6; stroke-dasharray: 4 2; }
.pp-mapa-lado { font-size: 11px; font-weight: 700; fill: var(--pp-ouro); }
.pp-umbigo { fill: none; stroke: rgba(212, 163, 115, 0.6); stroke-width: 1; }
.pp-ponto-anterior { stroke: #000; stroke-width: 1.4; }
.pp-ponto-num { font-size: 7px; font-weight: 700; fill: #000; pointer-events: none; }
.pp-ponto-atual { fill: var(--pp-ouro); stroke: #000; stroke-width: 1.6; pointer-events: none; }
.pp-ponto-anel { fill: none; stroke: var(--pp-ouro); stroke-width: 1.2; pointer-events: none; }
.pp-legenda-pontos { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; display: grid; gap: 3px; }
.pp-legenda-pontos li { display: flex; align-items: center; gap: 6px; }
.pp-legenda-pontos i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--pp-cor); border: 1px solid #000; }

/* ── lote / insumo ── */
.pp-lote { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-3); padding: 8px 10px; margin-top: 6px; background: rgba(0, 0, 0, 0.4); }
.pp-lote strong { color: var(--pp-texto); }
.pp-lote small { display: block; color: var(--pp-fraco); }
.pp-lote-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pp-lote-qtd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pp-fraco); }
.pp-lote-qtd input { width: 84px; min-height: 32px; font: inherit; color: var(--pp-texto); background: rgba(0, 0, 0, 0.55); border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-3); padding: 4px 8px; }

/* ── janelas (modais) ── */
.pp-janela {
  position: fixed; inset: 0; z-index: 2400; display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 16px; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto;
}
.pp-janela[hidden] { display: none; }
.pp-janela-cartao {
  width: min(1180px, 100%); background: var(--pp-vidro-forte); -webkit-backdrop-filter: var(--pp-fosco); backdrop-filter: var(--pp-fosco);
  border: 1px solid var(--pp-borda-forte); border-radius: var(--pp-canto-1); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75); color: var(--pp-gelo);
}
.pp-janela-cartao.pp-estreito { width: min(640px, 100%); }
.pp-janela-cartao.pp-medio { width: min(860px, 100%); }
.pp-janela-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--pp-borda); position: sticky; top: 0; background: rgba(8, 8, 8, 0.96); border-radius: var(--pp-canto-1) var(--pp-canto-1) 0 0; z-index: 2; }
.pp-janela-topo h2 { margin: 0; font-size: 17px; color: var(--pp-ouro); flex: 1; }
.pp-janela-fechar { background: transparent; border: 1px solid var(--pp-borda-caramelo); color: var(--pp-gelo); border-radius: var(--pp-canto-3); width: 36px; height: 36px; cursor: pointer; font-size: 18px; }
.pp-janela-corpo { padding: 16px 18px 6px; }
.pp-janela-rodape { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--pp-borda); background: rgba(8, 8, 8, 0.97); border-radius: 0 0 var(--pp-canto-1) var(--pp-canto-1); }
.pp-pendencias { margin-right: auto; font-size: 12.5px; color: var(--pp-fraco); max-width: 640px; }
.pp-secao { border: 1px solid var(--pp-borda); border-radius: var(--pp-canto-2); padding: 14px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.02); }
.pp-secao > h3 { margin: 0 0 12px; font-size: 14px; color: var(--pp-ouro); display: flex; align-items: center; gap: 8px; }
.pp-secao > h3 .pp-passo { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: var(--pp-liga); color: #000; font-size: 12px; }
.pp-form-colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.pp-checklist { display: grid; gap: 8px; }
.pp-checklist-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-3); }
.pp-checklist-item.pp-com-erro { border-color: var(--pp-critico); }
.pp-checklist-item span { font-size: 13.5px; color: var(--pp-gelo); }
.pp-hardstop { margin-top: 12px; }
.pp-hardstop .pp-grade { margin-top: 10px; }

/* TCLE */
.pp-tcle-texto { max-height: 46vh; overflow: auto; border: 1px solid var(--pp-borda-caramelo); border-radius: var(--pp-canto-2); padding: 14px 16px; background: rgba(255, 255, 255, 0.03); font-size: 13.5px; line-height: 1.6; }
.pp-tcle-texto h3 { margin: 0 0 10px; text-align: center; color: var(--pp-ouro); font-size: 15px; }
.pp-tcle-texto p { margin: 0 0 10px; }
.pp-assinatura-quadro { border: 1px dashed var(--pp-borda-forte); border-radius: var(--pp-canto-2); background: #fff; touch-action: none; width: 100%; height: 170px; display: block; cursor: crosshair; }
.pp-caixa { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--pp-gelo); cursor: pointer; }
.pp-caixa input { margin-top: 3px; width: 18px; height: 18px; accent-color: #D4A373; }

/* ── celular e tablet ── */
@media (max-width: 980px) {
  .pp-form-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp-modulo { padding: 12px; }
  .pp-grade-2 { grid-template-columns: 1fr; }
  .pp-mapa { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pp-linha { padding-left: 22px; }
  .pp-linha::before { left: 7px; }
  .pp-cartao::before { left: -20px; }
  .pp-janela { padding: 0; }
  .pp-janela-cartao { border-radius: 0; min-height: 100vh; }
  .pp-protocolos { grid-template-columns: 1fr; }
  .pp-cabecalho h1 { font-size: 18px; }
}

/* ==========================================================================
   TEMA CLARO (html.tema-claro) — contraste medido contra o fundo claro;
   o dourado da tela (#FFD700) some no branco, por isso o ouro escuro.
   ========================================================================== */
html.tema-claro .pp-modulo, html.tema-claro .pp-janela {
  --pp-ouro: #8A6A00;
  --pp-caramelo: #8C5A2B;
  --pp-texto: #111111;
  --pp-gelo: #1F1F1F;
  --pp-fraco: rgba(31, 31, 31, 0.68);
  --pp-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 242, 0.86));
  --pp-vidro-forte: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 242, 0.98));
  --pp-borda: rgba(138, 106, 0, 0.3);
  --pp-borda-forte: rgba(138, 106, 0, 0.6);
  --pp-borda-caramelo: rgba(140, 90, 43, 0.4);
  --pp-sombra: 0 8px 24px rgba(0, 0, 0, 0.1);
}
html.tema-claro .pp-modulo { background: #FBFAF6; }
html.tema-claro .pp-cabecalho h1 { background: none; color: #6B5200; }
html.tema-claro .pp-campo input, html.tema-claro .pp-campo select, html.tema-claro .pp-campo textarea, html.tema-claro .pp-busca input,
html.tema-claro .pp-lote-qtd input { background: #fff; color: #111; }
html.tema-claro .pp-campo select option { background: #fff; color: #111; }
html.tema-claro .pp-protocolo, html.tema-claro .pp-mapa-vista, html.tema-claro .pp-grafico, html.tema-claro .pp-lote { background: rgba(255, 255, 255, 0.9); }
html.tema-claro .pp-janela { background: rgba(30, 30, 30, 0.4); }
html.tema-claro .pp-janela-topo, html.tema-claro .pp-janela-rodape { background: rgba(255, 255, 255, 0.98); }
html.tema-claro .pp-btn-ouro, html.tema-claro .pp-aba[aria-selected="true"], html.tema-claro .pp-segmento button[aria-pressed="true"] { background: linear-gradient(135deg, #E9C341 0%, #D4A373 100%); color: #111; }
html.tema-claro .pp-selo-ok { color: #1F7A45; }
html.tema-claro .pp-selo-alerta { color: #7A5A00; }
html.tema-claro .pp-selo-critico { color: #B3261E; }
html.tema-claro .pp-aviso-alerta { color: #6B4E00; }
html.tema-claro .pp-aviso-critico { color: #7A1212; background: rgba(255, 51, 51, 0.08); }
html.tema-claro .pp-aviso-ok { color: #1F5E38; }
html.tema-claro .pp-corpo-forma { fill: rgba(0, 0, 0, 0.04); stroke: rgba(140, 90, 43, 0.6); }
html.tema-claro .pp-zona { fill: rgba(138, 106, 0, 0.06); stroke: rgba(138, 106, 0, 0.5); }
html.tema-claro .pp-ponto-atual { fill: #E9C341; }
html.tema-claro .pp-tabela td { border-bottom-color: rgba(138, 106, 0, 0.15); }
html.tema-claro .pp-erro-campo { color: #B3261E; }
html.tema-claro .pp-segmento button.pp-risco[aria-pressed="true"] { background: #D92B2B; color: #fff; }
html.tema-claro .pp-segmento button.pp-atencao[aria-pressed="true"] { background: #E0B000; color: #000; }
html.tema-claro .pp-segmento button.pp-seguro[aria-pressed="true"] { background: #2DB866; color: #000; }