/* Extraído de assets/js/paginas/painel.js (_injectarCSS, linhas 43-295) —
   Lote 2 da Fase 4 (dívida visual): CSS deixa de ser injectado via
   document.createElement('style') e passa a viver em ficheiro .css próprio,
   como todas as outras páginas. Os antigos tokens locais (prefixo pn) eram
   apenas sobrenomes dos globais (assets/css/variaveis.css) e foram removidos
   aqui — cada uso agora aponta directamente ao token do sistema. */

.pnl{font-family:var(--fonte);color:var(--cor-texto);padding-bottom:30px;}
.pnl *{box-sizing:border-box;}
/* Navy sólido e cantos rectos. O gradiente de três paragens e o halo dourado
   em radial-gradient contrariavam o DESIGN.md, que não usa gradiente em lado
   nenhum; e a sombra tinha o dobro do desvio e três vezes o alfa da mais
   forte do sistema. A autoridade vem do contraste
   navy/dourado e da serif, não de profundidade encenada. */
.pnl-hero{position:relative;overflow:hidden;border-radius:var(--raio-borda);
          padding:24px 28px;margin-bottom:20px;background:var(--navy);color:#fff;
          display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
          box-shadow:var(--sombra);}
.pnl-hero-l{position:relative;z-index:1;}
/* O traço dourado de abertura que todas as outras páginas põem antes do h1.
   O Painel era a única tela sem ele. */
.pnl-hero-greet::before{content:'';display:block;width:26px;height:2px;
  background:var(--gold);margin-bottom:10px;}
.pnl-hero-greet{font-family:var(--fonte-serif);font-size:26px;font-weight:700;
  letter-spacing:.01em;line-height:1.15;}
.pnl-hero-date{font-size:15px;font-weight:600;color:rgba(255,255,255,.82);margin-top:7px;}
.pnl-hero-r{position:relative;z-index:1;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
/* Task 6: os 3 números do hero também são âncora — mesmo padrão do KPI, sem
   sublinhado e sem mudar a cor herdada do texto branco sobre navy. Opacidade
   no hover, não cor: --gold é o dourado de marca, nunca cor de texto
   (DESIGN.md, regra da cor — só --gold-texto/--gold-2 servem como texto). */
.pnl-hero-stat{text-align:center;text-decoration:none;color:inherit;display:block;}
.pnl-hero-stat:hover{opacity:.85;}
.pnl-hero-stat .v{font-family:var(--fonte-serif);font-size:26px;font-weight:700;color:var(--gold-2);line-height:1;}
/* Era rgba(255,255,255,.5) sobre navy: 4,1:1, abaixo do mínimo. */
.pnl-hero-stat .l{font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.72);margin-top:5px;font-weight:700;}
.pnl-hero-div{width:1px;height:38px;background:rgba(255,255,255,.18);}
/* Barra do filtro. Vivia dentro do hero, entalada entre a saudação e as
   estatísticas: um select branco sobre a faixa navy, que roubava a atenção
   aos números — e, por ser montado em async, chegava depois do primeiro
   paint e reorganizava o hero a meio do carregamento. Aqui está colada ao
   conteúdo que altera, e a altura é reservada para não haver salto. */
.pnl-barra{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  min-height:46px;margin-bottom:16px;padding:10px 14px;background:var(--cor-superficie);
  border:1px solid var(--cor-borda);border-top:3px solid var(--gold);
  border-radius:var(--raio-borda);box-shadow:var(--sombra);}
.pnl-barra:empty{display:none;}
.pnl-barra-nota{font-size:11px;color:var(--cor-texto-secundario);margin-left:auto;
  align-self:center;}
@media (max-width: 600px){.pnl-barra-nota{margin-left:0;}}
/* Seis KPIs em três colunas: eram oito em quatro, e dois deles repetiam o
   hero. Três colunas dão duas filas cheias em vez de uma fila e meia. */
.pnl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
/* Task 6 (Lote A, Fase 3-B): o KPI passou a âncora — cada card é a porta
   para a tela e o filtro que o resolve, não só um número informativo. Sem
   levantar ao passar o rato (a resposta ao "não é clicável" de antes é dar-
   lhe a ação, não tirar a animação) — a sombra fica na Ambiente do sistema,
   em repouso. */
.pnl-kpi{background:var(--cor-superficie);border:1px solid var(--cor-borda);
         border-top:3px solid var(--gold);border-radius:var(--raio-borda);
         padding:15px 16px;position:relative;box-shadow:var(--sombra);
         text-decoration:none;color:inherit;display:block;}
.pnl-kpi:hover{border-color:var(--gold);}
.pnl-kpi .ic{position:absolute;top:14px;right:14px;font-size:18px;color:var(--gold);}
.pnl-kpi .lb{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--cor-texto-secundario);font-weight:700;}
.pnl-kpi .vl{font-family:var(--fonte-serif);font-size:26px;font-weight:700;color:var(--navy);line-height:1.05;margin-top:6px;}
.pnl-kpi .sb{font-size:11px;color:var(--cor-texto-secundario);margin-top:5px;}
.pnl-abrir{font-size:var(--texto-caption);color:var(--gold-texto);margin-top:6px;display:block;}
/* A assinatura do card é a tarja dourada de topo; o dourado é o único acento
   do sistema (DESIGN.md). As seis cores que aqui estavam eram variedade
   decorativa — navy e dourado repetiam-se em KPIs sem relação entre si.
   Sobra cor só onde ela significa estado, como nos badges de consulta. */
.k-green .ic{color:var(--cor-sucesso);}
.k-amber .ic{color:var(--cor-aviso);}
.k-red   .ic{color:var(--cor-perigo);}
.pnl-grid32{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-bottom:16px;}
.pnl-grid22{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
/* A tarja dourada de 3px é a assinatura de card do sistema, e os três
   cartões de conteúdo do Painel eram os únicos sem ela — só os KPIs, a barra
   do filtro e o rodapé a tinham. */
.pnl-card{background:var(--cor-superficie);border:1px solid var(--cor-borda);
  border-top:3px solid var(--gold);border-radius:var(--raio-borda);
  padding:18px;box-shadow:var(--sombra);}
.pnl-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pnl-card-t{font-family:var(--fonte-serif);font-size:15px;font-weight:700;color:var(--navy);
            display:flex;align-items:center;gap:8px;}
.pnl-card-t i{color:var(--gold);font-size:16px;}
.pnl-card-meta{font-size:11px;color:var(--cor-texto-secundario);}
.pnl-ag{display:flex;flex-direction:column;}
/* Task 6: cada linha da agenda de hoje liga a #/consulta/<id> — âncora, sem
   sublinhado nem mudança de cor herdada. */
.pnl-agi{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--cor-borda);
  text-decoration:none;color:inherit;}
.pnl-agi:last-child{border-bottom:none;}
.pnl-agi:hover{background:rgba(191,164,95,.06);}
.pnl-agh{font-family:var(--fonte-serif);font-weight:700;font-size:13px;color:var(--navy);
         min-width:46px;text-align:center;padding:5px 0;background:var(--cream);
         border-radius:var(--raio-borda);}
.pnl-aginfo{flex:1;min-width:0;}
.pnl-agnm{font-size:12px;font-weight:700;color:var(--cor-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pnl-agsub{font-size:11px;color:var(--cor-texto-secundario);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pnl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* Badges e alertas passam às cores semânticas do sistema (--cor-sucesso,
   --cor-aviso, --cor-perigo, --cor-info). As que aqui estavam eram uma
   segunda paleta inventada para o mesmo significado. Cor só onde significa estado; o resto
   da distinção vem do texto. O raio segue o "pill" documentado (14px). */
.pnl-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:14px;flex-shrink:0;
  letter-spacing:.04em;}
.b-realizada{background:rgba(61,107,74,.12);color:var(--cor-sucesso-texto);}
.b-confirmada{background:rgba(26,95,168,.10);color:var(--cor-info-texto);}
.b-pendente{background:rgba(181,137,58,.14);color:var(--cor-aviso-texto);}
.b-cancelada,.b-falta{background:rgba(165,32,32,.10);color:var(--cor-perigo-texto);}
/* Task 6: cada alerta liga à tela e ao filtro que o resolve — âncora, sem
   sublinhado nem mudança de cor herdada. */
.pnl-alerta{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:var(--raio-borda);margin-bottom:7px;text-decoration:none;color:inherit;}
.pnl-alerta:last-child{margin-bottom:0;}
/* Sem tarja lateral: o fundo tingido e a cor do ícone já dizem o estado, e
   a stripe lateral está reservada ao toast e à sidebar (DESIGN.md). */
.pnl-alerta.vermelho{background:rgba(165,32,32,.09);}
.pnl-alerta.amarelo{background:rgba(181,137,58,.12);}
.pnl-alerta.azul{background:rgba(26,95,168,.09);}
.pnl-alerta i{font-size:16px;flex-shrink:0;}
.pnl-alerta.vermelho i{color:var(--cor-perigo);}
.pnl-alerta.amarelo i{color:var(--cor-aviso);}
.pnl-alerta.azul i{color:var(--cor-info);}
.pnl-alerta-txt{flex:1;}
.pnl-alerta-ttl{font-size:12px;font-weight:700;color:var(--cor-texto);}
.pnl-alerta-sub{font-size:11px;color:var(--cor-texto-secundario);}
.pnl-alerta-cnt{font-family:var(--fonte-serif);font-size:18px;font-weight:700;}
.pnl-av{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold-2);
        display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.pnl-tag{display:inline-block;padding:3px 9px;border-radius:14px;font-size:10px;font-weight:700;}
/* Rodapé de continuidade. Os três cartões de análise que aqui estavam foram
   para os Relatórios; sem este ponteiro, quem os procurava no Painel ficava
   pensando que tinham desaparecido do sistema. */
.pnl-rodape{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--cor-superficie);border:1px solid var(--cor-borda);
  border-top:3px solid var(--gold);border-radius:var(--raio-borda);
  box-shadow:var(--sombra);}
.pnl-rodape > i{font-size:22px;color:var(--gold);flex-shrink:0;}
.pnl-rodape-t{font-family:var(--fonte-serif);font-size:15px;font-weight:700;color:var(--navy);}
.pnl-rodape-d{font-size:12px;color:var(--cor-texto-secundario);margin-top:3px;line-height:1.5;}
/* --gold-texto e não --gold: o dourado puro dá 2,2:1 sobre branco. O sistema
   tem um matiz próprio para dourado em texto, e este link não o usava. */
.pnl-rodape-a{margin-left:auto;flex-shrink:0;color:var(--gold-texto);text-decoration:none;
  font-weight:700;font-size:12px;white-space:nowrap;padding:14px 2px;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1.5px solid transparent;transition:border-color .18s ease;}
.pnl-rodape-a:hover{border-bottom-color:var(--gold);}
/* Link de continuidade dentro de cards. Estava com o dourado puro em style
   inline (2,2:1 sobre branco), em display:inline — 16px de altura de alvo —
   e a depender do anel de foco por omissão do navegador. O foco explícito
   segue a convenção da casa (base.css:190, componentes.css:179). */
.pnl-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-texto);text-decoration:none;
  font-weight:700;padding:14px 2px;border-bottom:1.5px solid transparent;
  transition:border-color .18s ease;}
.pnl-link:hover{border-bottom-color:var(--gold);}
.pnl-link:focus-visible,.pnl-rodape-a:focus-visible{
  outline:2px solid var(--gold-texto);outline-offset:3px;border-bottom-color:transparent;}
.pnl-vazio{text-align:center;padding:34px 10px;color:var(--cor-texto-secundario);}
.pnl-vazio i{font-size:32px;display:block;margin-bottom:8px;opacity:.55;color:var(--steel);}
/* Fila de trabalho: uma linha por pessoa, as suas pendências como chips —
   cada chip é a fonte real (tarefa, lista de espera, conversa…) e leva à
   tela que já resolve aquilo. Todas as dez fontes têm agora botão de acção
   em linha (2026-08-23, ronda de fecho): as cinco originais (tarefa,
   agenda_por_confirmar — Task 5 redo; protocolo_alerta, protocolo_etapa_
   pendente, apc — Task 7 adenda) usavam versao/CAS; as cinco últimas
   (lista_espera, funil_vencido, conversa_sem_resposta, portal_pedido_
   agenda, envio_manual_incerto) não tinham CAS na fonte, mas cada uma tinha
   um endpoint já pronto que não precisa dele — Descartar, Adiar 7 dias,
   Responder (abre o Drawer de Conversa em vez de resolver), Aprovar,
   Reconciliar (modal próprio). Nenhuma ganhou coluna versao nova. */
.pnl-fila{display:flex;flex-direction:column;}
.pnl-fila-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--cor-borda);}
.pnl-fila-row:last-child{border-bottom:none;}
.pnl-fila-info{flex:1;min-width:0;}
.pnl-fila-nome{font-size:13px;font-weight:700;color:var(--cor-texto);margin-bottom:6px;}
.pnl-fila-pend{display:flex;flex-wrap:wrap;gap:6px;}
.pnl-fila-item{display:inline-flex;align-items:center;gap:4px;}
.pnl-fila-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:14px;background:var(--cream);color:var(--cor-texto-secundario);
  text-decoration:none;border:1px solid var(--cor-borda);transition:border-color .15s ease;}
.pnl-fila-chip i{font-size:12px;color:var(--gold);}
.pnl-fila-chip:hover{border-color:var(--gold);}
.pnl-fila-chip:focus-visible{outline:2px solid var(--gold-texto);outline-offset:2px;}
/* Vermelho só quando o momento da pendência já passou o dia local da
   clínica — a mesma leitura de atraso que o relógio de dois degraus do
   backend usa para ordenar a fila (spec §Relógio de dois degraus). */
.pnl-fila-chip.atrasada{background:rgba(165,32,32,.09);color:var(--cor-perigo-texto);border-color:rgba(165,32,32,.18);}
.pnl-fila-chip.atrasada i{color:var(--cor-perigo);}
/* Botão de acção em linha: preenchido a navy/dourado para se distinguir do
   chip de navegação, que é neutro. Mesmo alvo mínimo de toque (28px aqui é
   aceitável por ser secundário a um chip de 30px já adjacente — ambos
   dentro da mesma linha de 44px de altura de toque). */
.pnl-fila-acao{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:14px;background:var(--navy);color:var(--gold-2);
  border:1px solid var(--navy);cursor:pointer;transition:opacity .15s ease;}
.pnl-fila-acao i{font-size:12px;}
.pnl-fila-acao:hover{opacity:.85;}
.pnl-fila-acao:focus-visible{outline:2px solid var(--gold-texto);outline-offset:2px;}
.pnl-fila-acao:disabled{opacity:.55;cursor:default;}
/* Agendamentos esquecidos: barras por médico + tabela clicável. Mesmo
   padrão de barra em coluna das Métricas da Plataforma (sistema_metricas.js),
   só que aqui o significado é sempre urgência — daí a cor fixa em
   --cor-perigo em vez de uma paleta por categoria. */
.pnl-esq-bars{display:flex;align-items:flex-end;gap:18px;height:110px;padding:8px 2px 0;
  overflow-x:auto;}
.pnl-esq-bcol{flex:0 0 auto;min-width:56px;display:flex;flex-direction:column;
  align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.pnl-esq-brect{width:40px;border-radius:2px 2px 0 0;background:var(--cor-perigo);
  transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.pnl-esq-bval{font-family:var(--fonte-serif);font-weight:700;font-size:13px;color:var(--navy);}
.pnl-esq-blbl{font-size:10px;color:var(--cor-texto-secundario);font-weight:600;text-align:center;
  max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pnl-esq-tabela-wrap{overflow-x:auto;overflow-y:auto;max-height:420px;margin-top:16px;}
.pnl-esq-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.pnl-esq-tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cor-texto-secundario);font-weight:700;padding:0 10px 8px;border-bottom:1px solid var(--cor-borda);}
.pnl-esq-tbl td{padding:14px 10px;border-bottom:1px solid var(--cor-borda);color:var(--cor-texto);
  vertical-align:middle;}
/* A linha é o alvo de toque: abre a consulta. 44px é o mínimo (WCAG 2.5.5);
   o padding acima só chegava a ~35px. */
.pnl-esq-tbl tbody tr{cursor:pointer;transition:background .12s ease;min-height:44px;}
.pnl-esq-tbl tbody tr:hover{background:var(--cream);}
.pnl-esq-tbl tbody tr:last-child td{border-bottom:none;}
.pnl-esq-tbl tbody tr:focus-visible{outline:2px solid var(--gold-texto);outline-offset:-2px;}
@media (max-width: 1100px){.pnl-kpis{grid-template-columns:repeat(2,1fr);}.pnl-grid32{grid-template-columns:1fr;}.pnl-grid22{grid-template-columns:1fr;}}
@media (max-width: 600px){.pnl-hero{flex-direction:column;align-items:flex-start;gap:14px;}
  .pnl-kpis{grid-template-columns:1fr;}
  .pnl-rodape{flex-wrap:wrap;}.pnl-rodape-a{margin-left:0;}}
/* Secção "Equipa" (Task 6 revista): mesmos blocos que a Visão da Equipe
   própria mostrava em assets/js/paginas/equipa.js, agora dentro do Painel.
   Reaproveita as classes eq-* tal e qual — só o container mudou de tela. */
.eq-grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;}
.eq-bloco{background:var(--cor-superficie);border:1px solid var(--cor-borda);border-top:3px solid var(--gold);
  border-radius:var(--raio-borda);padding:16px;}
.eq-bloco h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cor-texto-secundario);margin:0 0 12px;}
.eq-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;
  min-height:44px;padding:6px 0;border-bottom:1px solid var(--cor-borda);font-size:var(--texto-meta);}
.eq-linha:last-child{border-bottom:none;}
.eq-num{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--fonte-serif);font-size:19px;font-weight:700;color:var(--navy);}
.eq-num.alerta{color:var(--cor-perigo);}
.eq-num.alerta i{font-size:15px;}
button.eq-linha{width:100%;background:none;border:none;border-bottom:1px solid var(--cor-borda);
  cursor:pointer;text-align:left;font:inherit;color:inherit;}
button.eq-linha:hover{background:rgba(191,164,95,.06);}
button.eq-linha:focus-visible{outline:2px solid var(--gold-texto);outline-offset:-2px;}
.eq-vazio{font-size:12px;color:var(--cor-texto-secundario);font-style:italic;}