/*
 * pb-ui.css — biblioteca de componentes da plataforma PinkBlue Vet (fonte única de CSS compartilhado).
 *
 * Carregado em TODA página pelo components/theme.html (via components/painel_recursos.html), na mesma
 * posição em que antes ficava o <style> inline do painel — a cascata não mudou. Versionado com ?v=:
 * mudou este arquivo, troque a data do ?v= em components/painel_recursos.html.
 *
 * Usa os tokens (variáveis --pb-*) do :root de components/theme.html. Componente novo nasce AQUI
 * (CSS) + components/ui.html (macro) + docs/DESIGN.md (catálogo) — não dentro do template da tela.
 *
 * Cores: rosa = ação principal; azul de ação (--pb-acao-azul) = secundária; vermelho = destrutiva;
 * roxo (--pb-ia) SOMENTE em IA. Seletores com dupla classe (.pb-btn.pb-btn-x) vencem o reset do
 * Tailwind em [type=button].
 */

/* ───────────── Painel de edição padrão (components/painel.html) ───────────── */
.pb-painel[hidden] { display: none !important; }
.pb-painel { position: fixed; inset: 0; z-index: var(--pb-z-painel); display: flex; align-items: flex-end; justify-content: center; }
.pb-painel-fundo { position: absolute; inset: 0; background: var(--pb-veu); animation: pbPainelFade .15s ease; }
.pb-painel-caixa { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 0;
  max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px - env(safe-area-inset-top));
  background: var(--pb-branco); color: var(--pb-tinta); border-radius: var(--pb-raio-folha) var(--pb-raio-folha) 0 0; box-shadow: var(--pb-sombra-folha);
  animation: pbPainelSobe .22s cubic-bezier(.2,.8,.2,1); outline: none; }
.pb-painel[data-altura="cheia"] .pb-painel-caixa { height: calc(100vh - 12px); height: calc(100dvh - 12px - env(safe-area-inset-top)); }
.pb-painel-alca { flex: none; width: 38px; height: 4px; margin: 8px auto -4px; border-radius: 9px; background: #E3D8E0; }
.pb-painel-cabeca { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--pb-linha-3); }
.pb-painel-cabeca-texto { min-width: 0; flex: 1 1 auto; padding-top: 4px; }
.pb-painel-titulo { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--pb-tinta); overflow-wrap: anywhere; }
.pb-painel-contexto { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--pb-mudo); }
.pb-painel[data-ia] .pb-painel-cabeca { border-bottom-color: #E9DCF6; }
.pb-painel-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 18px 24px; }
.pb-painel-rodape { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 18px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pb-linha-3); background: var(--pb-branco); }
.pb-painel-rodape > .pb-rodape-esquerda { margin-right: auto; }
@media (max-width: 639px) {
  /* Celular: as ações dividem a largura (alvo de toque grande); a principal fica à direita. */
  .pb-painel-rodape > .pb-btn { flex: 1 1 0; }
}
@media (min-width: 640px) {
  .pb-painel-alca { display: none; }
  .pb-painel[data-modo="central"] { align-items: center; padding: 24px; }
  .pb-painel[data-modo="central"] .pb-painel-caixa { width: min(var(--pb-painel-w, 560px), 100%); max-height: min(88vh, 900px);
    border-radius: 18px; box-shadow: 0 22px 60px rgba(30,10,25,.32); animation: pbPainelFade .18s ease; }
  .pb-painel[data-modo="central"][data-altura="cheia"] .pb-painel-caixa { height: min(88vh, 900px); }
  .pb-painel[data-modo="lateral"] { justify-content: flex-end; align-items: stretch; }
  .pb-painel[data-modo="lateral"] .pb-painel-caixa { width: min(var(--pb-painel-w, 560px), 100%); height: 100%; max-height: none;
    border-radius: 0; box-shadow: -14px 0 44px rgba(30,10,25,.22); animation: pbPainelLado .22s cubic-bezier(.2,.8,.2,1); }
  .pb-painel-cabeca { padding: 16px 16px 14px 22px; }
  .pb-painel-corpo { padding: 18px 22px 26px; }
  .pb-painel-rodape { padding: 14px 22px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
.pb-painel[data-largura="sm"] { --pb-painel-w: 420px; }
.pb-painel[data-largura="md"] { --pb-painel-w: 560px; }
.pb-painel[data-largura="lg"] { --pb-painel-w: 680px; }
@keyframes pbPainelFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbPainelSobe { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pbPainelLado { from { transform: translateX(32px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pb-painel-caixa, .pb-painel-fundo { animation: none !important; } }

/* ── Movimento padrão (DESIGN.md §4 "Movimento") ──
   Entrada: a animação roda sozinha quando o elemento deixa de estar [hidden].
   Saída: pbMov.esconder(el) põe .pb-mov-saindo, espera a animação e só então esconde.
   .pb-mov-veu = fundo escurecido · .pb-mov-sobe = folha/painel que sobe de baixo (celular)
   .pb-mov-flutua = janela flutuante que cresce a partir do botão que a abriu (use transform-origin). */
.pb-mov-veu { animation: pbMovFade var(--pb-mov-entra) both; }
.pb-mov-sobe { animation: pbMovSobe var(--pb-mov-entra) both; }
.pb-mov-flutua { animation: pbMovFlutua var(--pb-mov-entra) both; transform-origin: bottom right; }
.pb-mov-veu.pb-mov-saindo { animation: pbMovFadeSai var(--pb-mov-sai) both; }
.pb-mov-sobe.pb-mov-saindo { animation: pbMovSobeSai var(--pb-mov-sai) both; }
.pb-mov-flutua.pb-mov-saindo { animation: pbMovFlutuaSai var(--pb-mov-sai) both; }
.pb-mov-saindo { pointer-events: none; }
@keyframes pbMovFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbMovFadeSai { from { opacity: 1; } to { opacity: 0; } }
@keyframes pbMovSobe { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes pbMovSobeSai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 20px, 0); } }
@keyframes pbMovFlutua { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pbMovFlutuaSai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .pb-mov-veu, .pb-mov-sobe, .pb-mov-flutua { animation: none !important; } }
html.pb-painel-aberto, html.pb-painel-aberto body { overflow: hidden !important; }

/* Botão Fechar: alvo de 44px, "×" bem visível. */
button.pb-fechar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--pb-linha-2); border-radius: 12px; background-color: var(--pb-branco); color: var(--pb-texto); cursor: pointer; transition: background-color .12s; }
button.pb-fechar:hover { background-color: var(--pb-fundo); color: var(--pb-tinta); }
button.pb-fechar:focus-visible { outline: 2px solid var(--pb-rosa); outline-offset: 2px; }
button.pb-fechar svg { width: 20px; height: 20px; }
button.pb-fechar.hidden, button.pb-fechar[hidden] { display: none; }
button.pb-fechar.pb-fechar-compacto { width: 40px; height: 40px; border-radius: var(--pb-raio-controle); }

/* ───────────── Botões ───────────── */
.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center;
  cursor: pointer; text-decoration: none; transition: background-color .12s, border-color .12s, color .12s; }
.pb-btn:focus-visible { outline: 2px solid var(--pb-rosa); outline-offset: 2px; }
.pb-btn[disabled], .pb-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pb-btn.pb-btn-primario { background-color: var(--pb-rosa); color: #fff; }
.pb-btn.pb-btn-primario:hover { background-color: var(--pb-rosa-escuro); }
.pb-btn.pb-btn-secundario { background-color: var(--pb-acao-azul-fundo); color: var(--pb-acao-azul); border-color: var(--pb-acao-azul-borda); }
.pb-btn.pb-btn-secundario:hover { background-color: var(--pb-acao-azul-hover); }
.pb-btn.pb-btn-neutro { background-color: var(--pb-branco); color: var(--pb-texto-2); border-color: var(--pb-linha-2); }
.pb-btn.pb-btn-neutro:hover { background-color: var(--pb-fundo); color: var(--pb-tinta); }
.pb-btn.pb-btn-perigo { background-color: var(--pb-erro); color: #fff; }
.pb-btn.pb-btn-perigo:hover { background-color: var(--pb-erro-escuro); }
.pb-btn.pb-btn-perigo-contorno { background-color: var(--pb-branco); color: var(--pb-erro); border-color: var(--pb-erro-borda); }
.pb-btn.pb-btn-perigo-contorno:hover { background-color: var(--pb-erro-fundo); }
/* WhatsApp: verde oficial e símbolo oficial em toda a plataforma; o link abre a conversa no ChatPro. */
.pb-btn.pb-btn-whatsapp { background-color: var(--pb-whatsapp, #25D366); color: #fff; }
.pb-btn.pb-btn-whatsapp:hover { background-color: var(--pb-whatsapp-escuro, #1EBE5D); }
.pb-btn.pb-btn-ia { background-color: var(--pb-ia); color: #fff; }
.pb-btn.pb-btn-ia:hover { background-color: var(--pb-ia-escuro); }
.pb-btn.pb-btn-bloco { width: 100%; }
.pb-btn[hidden], .pb-btn.hidden { display: none !important; }

/* Link de ação em listas (Marcar todos / Limpar…): azul, com alvo de toque confortável. */
button.pb-link-acao, a.pb-link-acao { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px;
  background-color: transparent; color: var(--pb-acao-azul); font-size: 12.5px; font-weight: 800; cursor: pointer; }
button.pb-link-acao:hover, a.pb-link-acao:hover { background-color: var(--pb-acao-azul-fundo); }
button.pb-link-acao.pb-link-acao-neutro { color: var(--pb-mudo); }
button.pb-link-acao.pb-link-acao-neutro:hover { background-color: var(--pb-fundo); color: var(--pb-texto-2); }

/* ───────────── Campos ───────────── */
.pb-rotulo { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--pb-mudo); }
.pb-campo { display: block; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--pb-linha-2); border-radius: var(--pb-raio-controle);
  background-color: var(--pb-branco); color: var(--pb-tinta); font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; }
.pb-campo:focus { border-color: var(--pb-rosa); box-shadow: 0 0 0 3px rgba(240,40,155,.15); }
.pb-check { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--pb-rosa); cursor: pointer; }

/* Seletor padrão (static/escolha.js): o <select> fica escondido e um botão com o visual do campo abre a lista. */
select.pbe-nativo { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
button.pbe-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  cursor: pointer; background-color: var(--pb-branco); background-image: none; }
button.pbe-botao.pb-campo, button.pbe-botao.w-full, button.pbe-botao.block { display: flex; }
button.pbe-botao:disabled { cursor: not-allowed; opacity: .6; }
button.pbe-botao.hidden, button.pbe-botao[hidden] { display: none !important; }
.pbe-valor { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbe-vazio .pbe-valor { color: var(--pb-mudo); }
.pbe-seta { width: 16px; height: 16px; flex: none; color: var(--pb-mudo); transition: transform .15s; }
button.pbe-botao[aria-expanded="true"] .pbe-seta { transform: rotate(180deg); }
.pbe-fundo { position: fixed; inset: 0; z-index: var(--pb-z-seletor); }
.pbe-fundo-cel { background: rgba(30,10,25,.4); animation: pbPainelFade .15s ease; }
.pbe-caixa { position: fixed; z-index: 121; display: flex; flex-direction: column; background: var(--pb-branco); color: var(--pb-tinta); outline: none; }
.pbe-menu { border: 1px solid var(--pb-linha); border-radius: 12px; box-shadow: 0 14px 36px rgba(30,10,25,.18); overflow: hidden;
  animation: pbPainelFade .12s ease; }
.pbe-folha { left: 0; right: 0; bottom: 0; max-height: 70vh; max-height: 70dvh; border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -12px 36px rgba(30,10,25,.25); animation: pbPainelSobe .2s cubic-bezier(.2,.8,.2,1); }
.pbe-folha .pbe-alca { display: block; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 99px; background: var(--pb-linha-2); flex: none; }
.pbe-titulo { flex: none; padding: 6px 18px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-mudo); }
.pbe-busca { flex: none; padding: 8px; border-bottom: 1px solid var(--pb-linha-3); }
.pbe-folha .pbe-busca { padding: 4px 14px 10px; }
.pbe-busca input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--pb-linha-2); border-radius: 9px; font-size: 13.5px; outline: none; }
.pbe-busca input:focus { border-color: var(--pb-rosa); }
.pbe-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.pbe-folha .pbe-lista { padding: 2px 8px 10px; }
.pbe-grupo { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-mudo-2); }
button.pbe-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--pb-texto); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.pbe-folha button.pbe-item { min-height: 44px; padding: 10px 12px; font-size: 14.5px; }
button.pbe-item:hover, button.pbe-item:focus-visible { background: var(--pb-fundo-2); outline: none; }
button.pbe-item:disabled { color: #C9BFC6; cursor: default; }
button.pbe-item svg { width: 17px; height: 17px; flex: none; color: var(--pb-rosa); visibility: hidden; }
button.pbe-item.pbe-sel { color: var(--pb-rosa-escuro); font-weight: 800; background: var(--pb-rosa-suave); }
button.pbe-item.pbe-sel svg { visibility: visible; }
button.pbe-item.pbe-item-vazio:not(.pbe-sel) { color: var(--pb-mudo); }
.pbe-nada { padding: 14px 10px; font-size: 13px; color: var(--pb-mudo-2); }

/* Grupo de caixas de seleção (permissões) */
.pb-grupo { border: 1px solid var(--pb-linha); border-radius: var(--pb-raio-card); background: var(--pb-branco); overflow: hidden; }
.pb-grupo + .pb-grupo { margin-top: 12px; }
.pb-grupo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; background: var(--pb-fundo-2); border-bottom: 1px solid var(--pb-linha-3); }
.pb-grupo-cabeca h4 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pb-texto-2); }
.pb-grupo-acoes { display: flex; gap: 2px; flex: none; }
.pb-opcao { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; border-top: 1px solid var(--pb-linha-3); }
.pb-opcao:first-of-type { border-top: 0; }
.pb-opcao:hover { background: #FCF9FB; }
.pb-opcao-texto { min-width: 0; }
.pb-opcao-titulo { display: block; font-size: 14px; font-weight: 700; color: var(--pb-texto); line-height: 1.35; }
.pb-opcao-ajuda { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--pb-mudo); }

/* Zona de perigo: no fim do corpo, separada das ações de salvar. */
.pb-zona-perigo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 14px; border: 1px solid var(--pb-erro-borda); border-radius: var(--pb-raio-card); background: #FFF7F8; }
.pb-zona-perigo-texto { flex: 1 1 220px; min-width: 0; }
.pb-zona-perigo h3 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--pb-erro); }
.pb-zona-perigo p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: #8B5560; }

/* ═════════════ Base nova (fase 1 da padronização) — ainda sem uso nas telas ═════════════
   Macros em components/ui.html. Ao migrar uma tela, troque o mini design system local
   (pr-, rd-, mc-, dp-, lb-, crm-cfg-, mn-…) por estas classes. */

/* Cartão: superfície branca com borda e sombra leve. */
.pb-card { background: var(--pb-branco); border: 1px solid var(--pb-linha); border-radius: var(--pb-raio-card); box-shadow: var(--pb-sombra-card); }
.pb-card-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--pb-linha-3); }
.pb-card-titulo { margin: 0; font-size: 14px; font-weight: 800; color: var(--pb-tinta); }
.pb-card-corpo { padding: 14px 16px; }
.pb-card-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--pb-linha-3); }

/* Chip de filtro (liga/desliga): aria-pressed="true" = ativo. */
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.pb-chip, a.pb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--pb-linha-2); border-radius: var(--pb-raio-pilula); background-color: var(--pb-branco);
  color: var(--pb-texto-2); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background-color .12s, border-color .12s, color .12s; }
button.pb-chip:hover, a.pb-chip:hover { background-color: var(--pb-fundo); color: var(--pb-tinta); }
button.pb-chip:focus-visible, a.pb-chip:focus-visible { outline: 2px solid var(--pb-rosa); outline-offset: 2px; }
button.pb-chip[aria-pressed="true"], a.pb-chip[aria-current="true"] { background-color: var(--pb-rosa-claro); border-color: var(--pb-rosa); color: var(--pb-rosa-escuro); }
.pb-chip-contagem { font-size: 11px; font-weight: 800; color: var(--pb-mudo); }
button.pb-chip[aria-pressed="true"] .pb-chip-contagem, a.pb-chip[aria-current="true"] .pb-chip-contagem { color: var(--pb-rosa-escuro); }

/* Pílula de status (somente leitura). Tons: ok, aviso, erro, info, neutro, marca. */
.pb-pilula { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--pb-raio-pilula);
  font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap;
  background: var(--pb-fundo); color: var(--pb-texto-2); }
.pb-pilula-ok     { background: var(--pb-ok-fundo);        color: var(--pb-ok); }
.pb-pilula-aviso  { background: var(--pb-aviso-fundo);     color: var(--pb-aviso); }
.pb-pilula-erro   { background: var(--pb-erro-fundo);      color: var(--pb-erro); }
.pb-pilula-info   { background: var(--pb-acao-azul-fundo); color: var(--pb-acao-azul); }
.pb-pilula-neutro { background: var(--pb-fundo);           color: var(--pb-texto-2); }
.pb-pilula-marca  { background: var(--pb-rosa-claro);      color: var(--pb-rosa-escuro); }

/* Estado vazio: ícone, título, texto e (opcional) uma ação. */
.pb-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--pb-mudo); }
.pb-vazio-icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: var(--pb-raio-pilula);
  background: var(--pb-fundo); color: var(--pb-mudo-2); }
.pb-vazio-icone svg { width: 24px; height: 24px; }
.pb-vazio-titulo { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--pb-tinta); }
.pb-vazio-texto { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.5; }
.pb-vazio-acao { margin-top: 10px; }

/* Aviso em linha (faixa). Tons: info (padrão), ok, aviso, erro. */
.pb-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--pb-acao-azul-borda);
  border-radius: var(--pb-raio-controle); background: var(--pb-acao-azul-fundo); color: var(--pb-acao-azul);
  font-size: 13px; font-weight: 600; line-height: 1.45; }
.pb-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pb-aviso-ok    { border-color: #BFE5D0;              background: var(--pb-ok-fundo);    color: var(--pb-ok); }
.pb-aviso-aviso { border-color: #EED9B0;              background: var(--pb-aviso-fundo); color: var(--pb-aviso); }
.pb-aviso-erro  { border-color: var(--pb-erro-borda); background: var(--pb-erro-fundo); color: var(--pb-erro); }

/* Campo de busca com lupa: <label class="pb-busca"><svg…/><input type="search"></label> */
.pb-busca { position: relative; display: flex; align-items: center; }
.pb-busca > svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--pb-mudo-2); pointer-events: none; }
.pb-busca > input { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px; border: 1px solid var(--pb-linha-2);
  border-radius: var(--pb-raio-controle); background: var(--pb-branco); color: var(--pb-tinta); font-size: 14px; outline: none;
  transition: border-color .12s, box-shadow .12s; }
.pb-busca > input::placeholder { color: var(--pb-mudo-2); }
.pb-busca > input:focus { border-color: var(--pb-rosa); box-shadow: 0 0 0 3px rgba(240,40,155,.15); }

/* Indicador de carregamento (giro). Tamanho pelo font-size do pai; cor = currentColor. */
.pb-giro { display: inline-block; width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--pb-raio-pilula); animation: pbGiro .7s linear infinite; vertical-align: -.125em; }
@keyframes pbGiro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pb-giro { animation-duration: 1.6s; } }

/* Etiqueta de pessoa (macro pessoa() de components/ui.html + pbPessoa do pb-ui.js): círculo com a foto (ou as
   iniciais em cor estável pelo id) + nome curto. `.pb-pessoa-so-foto`: só a miniatura; nome e perfil na dica
   (passar o mouse / focar) e no popover (tocar). A foto cobre as iniciais; se não carregar, some e elas ficam. */
.pb-pessoa { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.pb-pessoa-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; overflow: hidden;
  border-radius: var(--pb-raio-pilula); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  background: var(--pb-rosa-claro); color: var(--pb-rosa-escuro); user-select: none; }
.pb-pessoa-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-pessoa-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--pb-texto); }
.pb-pessoa-xs .pb-pessoa-av { width: 20px; height: 20px; font-size: 8.5px; }
.pb-pessoa-xs .pb-pessoa-nome { font-size: 11.5px; }
.pb-pessoa-md .pb-pessoa-av { width: 32px; height: 32px; font-size: 11.5px; }
.pb-pessoa-md .pb-pessoa-nome { font-size: 13px; }
.pb-pessoa-lg .pb-pessoa-av { width: 68px; height: 68px; font-size: 22px; }
.pb-pessoa-c0 { background: var(--pb-rosa-claro);      color: var(--pb-rosa-escuro); }
.pb-pessoa-c1 { background: var(--pb-acao-azul-fundo); color: var(--pb-acao-azul); }
.pb-pessoa-c2 { background: var(--pb-ok-fundo);        color: var(--pb-ok); }
.pb-pessoa-c3 { background: var(--pb-aviso-fundo);     color: var(--pb-aviso); }
.pb-pessoa-c4 { background: var(--pb-linha);           color: var(--pb-texto-2); }
.pb-pessoa-c5 { background: var(--pb-rosa-suave);      color: var(--pb-rosa); }
.pb-pessoa-inativa .pb-pessoa-av { filter: grayscale(1); opacity: .55; }
.pb-pessoa[data-pb-pessoa-dica] { cursor: default; border-radius: var(--pb-raio-pilula); }
.pb-pessoa[data-pb-pessoa-dica]:focus-visible { outline: 2px solid var(--pb-rosa); outline-offset: 2px; }
/* Dica/popover (um só, criado pelo pb-ui.js e reaproveitado). */
.pb-pessoa-pop { position: fixed; z-index: var(--pb-z-popover); max-width: 240px; padding: 8px 11px; border-radius: var(--pb-raio-controle);
  background: var(--pb-tinta); color: var(--pb-branco); box-shadow: var(--pb-sombra-popover); pointer-events: none;
  font-size: 12.5px; line-height: 1.35; animation: pbPainelFade .12s ease; }
.pb-pessoa-pop[hidden] { display: none; }
.pb-pessoa-pop b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.pb-pessoa-pop span { display: block; margin-top: 1px; font-size: 11px; opacity: .7; }
/* Foto de perfil: ações de enviar/remover (Minha conta e Gestão de acessos). */
.pb-foto-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb-foto-acoes .pb-giro { color: var(--pb-rosa); }
.pb-foto-ajuda { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--pb-mudo); }
.pb-pessoa-casca .pb-pessoa-av { width: 30px; height: 30px; font-size: 11px; }

/* Sugestões do sistema (pb_platform/sugestoes_sistema.py; partials/_sugestao.html): lembrete discreto e dispensável,
   nunca com cara de tarefa/aviso. Cartão no Meu dia (.pb-sg) e bloco recolhido na caixa de avisos (.pb-sg-bloco). */
.pb-sg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px 10px 14px;
  border: 1px dashed var(--pb-linha-2); border-radius: var(--pb-raio-card); background: var(--pb-branco); color: var(--pb-texto); }
.pb-sg-icone { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px;
  background: var(--pb-fundo); color: var(--pb-mudo); }
.pb-sg-texto { min-width: 0; flex: 1 1 200px; }
.pb-sg-rotulo { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--pb-mudo-2); }
.pb-sg-titulo { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; color: var(--pb-tinta); }
.pb-sg-sub { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--pb-texto-2); }
.pb-sg-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.pb-sg-acoes form { margin: 0; }
.pb-sg-acoes .pb-btn { min-height: 36px; padding: 0 14px; font-size: 12.5px; }
.pb-sg-dispensar { min-height: 36px; padding: 0 10px; border: 0; background: transparent; font-size: 12.5px; font-weight: 800;
  color: var(--pb-mudo); cursor: pointer; border-radius: var(--pb-raio-controle); }
.pb-sg-dispensar:hover { background: var(--pb-fundo); color: var(--pb-tinta); }
.pb-sg-bloco { margin-top: 18px; border: 1px solid var(--pb-linha); border-radius: var(--pb-raio-card); background: var(--pb-branco); }
.pb-sg-bloco > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 800; color: var(--pb-texto-2); }
.pb-sg-bloco > summary::-webkit-details-marker { display: none; }
.pb-sg-bloco > summary .pb-sg-seta { margin-left: auto; transition: transform .15s; }
.pb-sg-bloco[open] > summary .pb-sg-seta { transform: rotate(180deg); }
.pb-sg-bloco .pb-sg-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }

/* ── Resultado de exame (Lab Monitor): criticidade, porquê e parâmetros ──────────────────────────
   Níveis: critico (erro) · atencao (aviso) · alterado (fora da referência, sem regra) · normal.
   Linha de parâmetro: .pb-res-linha + .is-fora (fora da referência) + .is-critico/.is-atencao (disparou regra). */
.pb-crit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--pb-raio-pilula);
  font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; background: var(--pb-fundo); color: var(--pb-texto-2); }
.pb-crit::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.pb-crit-critico  { background: var(--pb-erro); color: var(--pb-branco); }
.pb-crit-atencao  { background: var(--pb-aviso-fundo); color: var(--pb-aviso); }
.pb-crit-alterado { background: var(--pb-fundo); color: var(--pb-texto-2); border: 1px solid var(--pb-linha-2); }
.pb-crit-normal   { background: var(--pb-ok-fundo); color: var(--pb-ok); }
.pb-crit-ponto { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--pb-mudo-2); }
.pb-crit-ponto.is-critico { background: var(--pb-erro); box-shadow: 0 0 0 3px var(--pb-erro-fundo); }
.pb-crit-ponto.is-atencao { background: var(--pb-aviso); }

.pb-porque { margin: 2px 0 10px; padding: 10px 12px; border: 1px solid var(--pb-linha); border-left-width: 4px;
  border-radius: var(--pb-raio-controle); background: var(--pb-fundo-2); font-size: 12.5px; line-height: 1.45; color: var(--pb-texto); }
.pb-porque-critico { border-color: var(--pb-erro-borda); border-left-color: var(--pb-erro); background: var(--pb-erro-fundo); }
.pb-porque-atencao { border-color: #EED9B0; border-left-color: var(--pb-aviso); background: var(--pb-aviso-fundo); }
.pb-porque-titulo { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-mudo); }
.pb-porque-critico .pb-porque-titulo { color: var(--pb-erro-escuro); }
.pb-porque-atencao .pb-porque-titulo { color: var(--pb-aviso); }
.pb-porque ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.pb-porque li { display: flex; gap: 8px; align-items: flex-start; }
.pb-porque-ponto { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--pb-mudo-2); }
.pb-porque-ponto.is-critico { background: var(--pb-erro); }
.pb-porque-ponto.is-atencao { background: var(--pb-aviso); }
.pb-porque-regra { font-weight: 800; color: var(--pb-tinta); }
.pb-porque-valores { font-weight: 700; color: var(--pb-texto); font-variant-numeric: tabular-nums; }
.pb-porque-cond { display: block; font-size: 11.5px; color: var(--pb-mudo); }
.pb-porque-rodape { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 11.5px; color: var(--pb-mudo); }
.pb-porque details { font-size: 11.5px; color: var(--pb-mudo); }
.pb-porque-fund { display: block !important; margin-top: 4px !important; }
.pb-porque-fund li { display: block; margin-top: 4px; line-height: 1.45; }
.pb-exame[open] > summary .pb-exame-resumo { display: none; }
.pb-porque summary { cursor: pointer; font-weight: 700; width: fit-content; }
.pb-porque-simples { margin: 2px 0 10px; font-size: 12px; color: var(--pb-texto-2); }
.pb-porque-simples.is-normal { color: var(--pb-ok); font-weight: 700; }

.pb-res { border: 1px solid var(--pb-linha); border-radius: var(--pb-raio-controle); overflow: hidden; background: var(--pb-branco); }
.pb-res.so-fora .pb-res-linha:not(.is-fora), .pb-res.so-fora .pb-res-texto { display: none; }
.pb-res-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  padding: 7px 10px 7px 12px; border-top: 1px solid var(--pb-linha-3); border-left: 3px solid transparent; }
.pb-res-linha:first-child, .pb-res-texto:first-child { border-top: 0; }
.pb-res-nome { min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--pb-texto-2); overflow-wrap: anywhere; }
.pb-res-ref { display: block; margin-top: 1px; font-size: 10.5px; color: var(--pb-mudo-2); font-variant-numeric: tabular-nums; }
.pb-res-valores { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pb-res-valor { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--pb-texto-2); font-variant-numeric: tabular-nums; }
.pb-res-valor .pb-res-ref { margin: 0 2px 0 0; font-weight: 500; }
.pb-res-seta { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 6px;
  font-size: 11px; font-weight: 800; background: var(--pb-tinta); color: var(--pb-branco); }
.pb-res-linha.is-fora { background: var(--pb-fundo-2); border-left-color: var(--pb-mudo-2); }
.pb-res-linha.is-fora .pb-res-nome { color: var(--pb-tinta); font-weight: 700; }
.pb-res-linha.is-fora .pb-res-valor { color: var(--pb-tinta); font-weight: 800; }
.pb-res-linha.is-atencao { background: var(--pb-aviso-fundo); border-left-color: var(--pb-aviso); }
.pb-res-linha.is-atencao .pb-res-valor { color: var(--pb-aviso); }
.pb-res-linha.is-atencao .pb-res-seta { background: var(--pb-aviso); }
.pb-res-linha.is-critico { background: var(--pb-erro-fundo); border-left-color: var(--pb-erro); }
.pb-res-linha.is-critico .pb-res-valor { color: var(--pb-erro); }
.pb-res-linha.is-critico .pb-res-seta { background: var(--pb-erro); }
.pb-res-regua { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; width: 66px; height: 5px; }
.pb-res-regua > i { border-radius: 2px; background: var(--pb-linha-2); }
.pb-res-regua > i:nth-child(2) { background: var(--pb-ok-fundo); box-shadow: inset 0 0 0 1px #BFE5D0; }
.pb-res-regua > b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 999px;
  border: 2px solid var(--pb-branco); background: var(--pb-ok); box-shadow: 0 0 0 1px rgba(30,10,25,.12); }
.pb-res-linha.is-fora .pb-res-regua > b { background: var(--pb-tinta); }
.pb-res-linha.is-atencao .pb-res-regua > b { background: var(--pb-aviso); }
.pb-res-linha.is-critico .pb-res-regua > b { background: var(--pb-erro); }
.pb-res-texto { padding: 7px 12px; border-top: 1px solid var(--pb-linha-3); font-size: 12px; line-height: 1.45; color: var(--pb-texto-2);
  overflow-wrap: anywhere; }
.pb-res-texto b { color: var(--pb-texto); }
.pb-res-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pb-res-filtro .pb-chip { min-height: 30px; padding: 0 11px; font-size: 12px; }