/* ==========================================================================
 *  FAIXA DE ALERTA CLINICO — kit Nivel 2, "contexto hospitalar"
 *  Criada em 28/08/2026.
 * ==========================================================================
 *  Fica ACIMA da identificacao do paciente (.cl-pac), em toda tela clinica.
 *  As regras do kit que viraram CSS aqui, uma a uma:
 *
 *   "nao fecha, nao colapsa, nao expira"  -> nao existe botao de fechar, nem
 *      max-height, nem transition de saida. Nao ha como esconder esta faixa.
 *
 *   "cor de risco e vocabulario fechado"  -> so dois niveis: critico (vermelho)
 *      e atencao (dourado). Nenhum outro componente do portal pode usar estas
 *      duas cores para enfeite; e por isso que elas nao vem dos tokens gerais.
 *
 *   "nada abaixo de 13px em tela de plantao. Monitor de posto de enfermagem e
 *      velho, longe e sujo."                -> 13px e o PISO, inclusive na linha
 *      de procedencia, que e o texto menor da faixa.
 *
 *   "nunca esconda dado clinico atras de hover" -> a procedencia (quem confirmou
 *      e quando) esta escrita na faixa, nao num title=.
 * ========================================================================== */

.cl-alertas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sem alerta a faixa nao ocupa espaco nenhum — nao ha "faixa vazia" na tela. */
.cl-alertas:empty { display: none; }

.cl-alertas.tem,
.cl-alertas.falhou { margin: 0 0 12px; }

.cl-al-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 240px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid;
  border-left-width: 5px;          /* a barra lateral e o que se ve de longe */
  font-size: 14px;
  line-height: 1.35;
}

.cl-al-item b {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
}

/* Procedencia: menor, mas nunca abaixo do piso de 13px do kit. */
.cl-al-proc {
  font-style: normal;
  font-size: 13px;
  opacity: .85;
}

/* --- vermelho: contraindicacao e isolamento ------------------------------ */
.cl-al-item.critico {
  background: #fdf1f1;
  border-color: #d98b8b;
  border-left-color: #b32020;
  color: #7d1717;                  /* 8,9:1 sobre #fdf1f1 */
}

/* --- dourado: atencao, incerteza ----------------------------------------- */
.cl-al-item.atencao {
  background: #fdf7e8;
  border-color: #dcc079;
  border-left-color: #a67c0d;
  color: #6b4e05;                  /* 8,4:1 sobre #fdf7e8 */
}

/* Falha de carga se parece com alerta critico DE PROPOSITO: a ausencia de
   faixa vermelha e lida como "paciente sem alergia", e essa leitura errada e
   justamente o risco. Melhor a equipe conferir a toa do que nao conferir. */
.cl-alertas.falhou .cl-al-item { flex-basis: 100%; }

/* --- por que NAO ha bloco de tema escuro aqui -----------------------------
   Havia um @media (prefers-color-scheme: dark) nesta folha e ele estava ERRADO:
   o portal nao tem tema escuro. Ele nao marca data-theme e o fundo e sempre
   #e3ead8 (ver [fundo do portal chapado], 21/08/2026). Com o sistema
   operacional em modo escuro, a faixa saia vinho-escura no meio de uma tela
   clara — destoando de tudo em volta justamente no elemento que precisa parecer
   parte da tela para ser levado a serio.

   Esta faixa vive so no portal, que e claro. Se um dia ela for levada as telas
   hospitalares (leitos, higienizacao, internacao), que TEM fundo escuro proprio,
   e la que a variante escura deve nascer — escopada naquelas telas, nao na
   preferencia do sistema operacional de quem esta olhando.
   -------------------------------------------------------------------------- */

/* Impressao: o alerta acompanha o documento. Um prontuario impresso sem a
   alergia e a mesma falha, so que em papel. */
@media print {
  .cl-al-item { border: 1px solid #000 !important; border-left-width: 5px !important; color: #000 !important; background: none !important; }
}