/* hospital/hosp.css — a ENTRADA do acesso do hospital (senha, 2ª etapa, app autenticador, PIN, carregando), os
   diálogos do PIN e da 2ª etapa de novo, o aviso da saída automática e o botão Sair (ADR #191; contratos C4 e C5 do
   plano docs/superpowers/plans/2026-10-04-cirurgias-web.md). O tools/montar-hospital.js liga esta folha no <head>
   DEPOIS de todo o CSS da página: o #hosp-entrada já cobre o painel na 1ª pintura, antes de qualquer script.

   Cores: só os tokens da casa (tokens.css) e as cores por USO do tema escuro (tema-escuro.css,
   var(--k-<uso>-<hex>, #hex)); por isso o html.dark do painel vale aqui também, sem regra própria. Botões: os da casa
   (.btn .btn-teal / .btn.ghost / .btn-red, do dashboard.html), só com o tamanho da entrada. Exceção declarada: o fundo
   do QR é BRANCO nos dois temas (leitor de QR precisa de contraste: a mesma regra do papel, que nunca escurece).
   Medida de referência: 1366 × 768 (os computadores do hospital). */

/* ═══════════ a camada da entrada: cobre o painel inteiro até ele carregar ═══════════ */
#hosp-entrada {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; overflow: auto; box-sizing: border-box; padding: 24px 16px;
  background: var(--paper, #eef3f6); background-image: var(--grain);
  color: var(--navy, #0D2137);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px;
}
#hosp-entrada[hidden] { display: none; }

/* margin:auto dentro do flex: centra quando cabe e rola sem cortar o topo quando não cabe */
.hosp-cartao {
  margin: auto; width: 100%; max-width: 440px; overflow: hidden;
  background: var(--k-bg-ffffff, #fff);
  border: 1px solid var(--k-bd-d3dfe7, #d3dfe7); border-radius: var(--r-modal, 14px);
  box-shadow: var(--elev-3);
}
.hosp-cab {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: var(--metal); color: var(--k-tx-ffffff, #fff);
  box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.hosp-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; }
.hosp-marca { font-size: 18px; font-weight: 700; letter-spacing: .3px; }
.hosp-sub { margin-top: 2px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--k-tx-8fb6c4, #8fb6c4); }
.hosp-corpo { padding: 20px 22px 22px; }

/* ═══════════ conteúdo (o cartão da entrada e os diálogos) ═══════════ */
.hosp-form { margin: 0; }
.hosp-h { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--navy, #0D2137); }
.hosp-txt { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--k-tx-44617a, #44617a); }
.hosp-rot { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--k-tx-44617a, #44617a); }

.hosp-inp, .hosp-dig {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  border: 1px solid var(--bd-input, #cdd9e1); border-radius: var(--r-input, 6px);
  background: var(--k-bg-ffffff, #fff); color: var(--navy, #0D2137);
  box-shadow: var(--well); font-family: inherit;
}
.hosp-inp { padding: 10px 12px; font-size: 15px; }
/* os 6 dígitos (código do app, do e-mail, PIN): grandes e espaçados; o text-indent devolve o espaço do último dígito */
.hosp-dig {
  padding: 10px 12px; font-size: 28px; font-weight: 700; text-align: center;
  letter-spacing: .45em; text-indent: .45em; font-variant-numeric: tabular-nums;
}
.hosp-dig::placeholder { color: var(--k-tx-7a93a6, #7a93a6); opacity: .55; }
/* PIN mascarado sem type=password (o navegador do hospital não oferece "salvar senha") */
.hosp-mascara { -webkit-text-security: disc; }
.hosp-inp:focus, .hosp-dig:focus {
  outline: none; border-color: var(--k-bd-0e7490, #0E7490); box-shadow: var(--well), var(--focus-ring);
}

.hosp-nota { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--k-tx-b45309, #B45309); }
.hosp-info, .hosp-erro { padding: 8px 10px; font-size: 13px; line-height: 1.4; border-radius: var(--r-input, 6px); }
.hosp-info {
  margin: 0 0 12px;
  color: var(--k-tx-0e7490, #0E7490); background: var(--k-bg-e6f4f8, #e6f4f8); border: 1px solid var(--k-bd-b9dbe5, #b9dbe5);
}
.hosp-erro {
  margin: 12px 0 0;
  color: var(--k-tx-b91c1c, #b91c1c); background: var(--k-bg-fef2f2, #fef2f2); border: 1px solid var(--k-bd-fecaca, #fecaca);
}
.hosp-info:empty, .hosp-erro:empty { display: none; }
.hosp-erro + .hosp-txt { margin-top: 12px; }

.hosp-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* botão não herda a fonte (o navegador põe a dele): na entrada e nos diálogos, a mesma do cartão */
.hosp-acoes .btn { padding: 10px 18px; font-family: inherit; font-size: 14px; }
.hosp-acoes .hosp-principal { flex: 1 1 auto; }
#hosp-entrada .btn:focus-visible, .hosp-modal .btn:focus-visible {
  outline: 2px solid var(--k-bd-0e7490, #0E7490); outline-offset: 2px;
}
/* ação secundária em texto ("Receber código por e-mail", "Esqueci o PIN", "Reenviar código") */
.hosp-link {
  display: inline-block; margin: 12px 16px 0 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--k-tx-0e7490, #0E7490);
  text-decoration: underline; text-underline-offset: 2px;
}
.hosp-link:hover { filter: brightness(1.15); }
.hosp-link:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
.hosp-link:disabled { cursor: not-allowed; opacity: .6; filter: none; text-decoration: none; }

/* ═══════════ o app autenticador ═══════════ */
.hosp-qr {
  display: block; box-sizing: border-box; width: 184px; height: 184px; margin: 4px auto 12px; padding: 8px;
  background: #ffffff;   /* branco nos dois temas: leitor de QR precisa de contraste */
  border: 1px solid var(--k-bd-e3ebf0, #e3ebf0); border-radius: 8px; image-rendering: pixelated;
}
/* a chave para digitar e o id do app para o Claude: um clique seleciona tudo */
.hosp-chave, .hosp-id {
  -webkit-user-select: all; user-select: all; word-break: break-all;
  font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--navy, #0D2137);
  background: var(--k-bg-f2f7fa, #f2f7fa);
}
.hosp-chave {
  margin: 0 0 4px; padding: 8px 10px; text-align: center; font-size: 15px;
  border: 1px dashed var(--k-bd-d3dfe7, #d3dfe7); border-radius: var(--r-input, 6px);
}
.hosp-id { padding: 1px 4px; border-radius: 4px; }

/* ═══════════ carregando o painel ═══════════ */
.hosp-carregando {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 8px;
  font-size: 15px; color: var(--k-tx-44617a, #44617a);
}
.hosp-spin {
  width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%;
  border: 4px solid var(--k-bd-cdd9e1, #cdd9e1); border-top-color: var(--k-bd-0e7490, #0E7490);
  animation: hosp-gira .8s linear infinite;
}
@keyframes hosp-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hosp-spin { animation: none; } }

/* ═══════════ diálogos (o PIN e a 2ª etapa de novo): <dialog> modal, na camada de cima de tudo ═══════════ */
dialog.hosp-modal {
  box-sizing: border-box; width: 100%; max-width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px);
  margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--k-bd-d3dfe7, #d3dfe7); border-top: 4px solid var(--k-bd-0e7490, #0E7490);
  border-radius: var(--r-modal, 14px);
  background: var(--k-bg-ffffff, #fff); color: var(--navy, #0D2137); box-shadow: var(--elev-3);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px;
}
dialog.hosp-modal::backdrop { background: rgba(13, 33, 55, .45); }
.hosp-modal-corpo { padding: 18px 20px 20px; }

/* ═══════════ o aviso da saída automática (minuto 14) ═══════════ */
.hosp-aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 2147483300; transform: translateX(-50%);
  box-sizing: border-box; width: max-content; max-width: calc(100% - 32px); padding: 12px 16px;
  border-left: 4px solid var(--warn, #f59e0b); border-radius: 10px;
  background: var(--k-bg-0d2137, #0D2137); color: var(--k-tx-ffffff, #fff);
  box-shadow: 0 8px 28px rgba(13, 33, 55, .35);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.hosp-aviso[hidden] { display: none; }

/* ═══════════ o botão Sair: canto de cima à direita, sempre à vista depois do login ═══════════ */
.btn.hosp-sair {
  position: fixed; top: 8px; right: 12px; z-index: 2147483400;
  padding: 5px 14px; border-radius: 999px; font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 700;
}
.btn.hosp-sair:focus-visible { outline: 2px solid var(--k-bd-0e7490, #0E7490); outline-offset: 2px; }
/* ele fica por cima do canto direito do cabeçalho do painel e da barra da camada de impressão (#hosp-papel, do
   hosp-painel.js, onde mora o "Fechar"): os dois reservam o lugar dele */
body.hosp > header, body.hosp #hosp-papel .hosp-papel-barra { padding-right: 112px; }

/* ═══════════ app autenticador confirmado e NÃO aprovado (M-3): pode ser de quem só tem a senha ═══════════
   Na entrada, um quadro vermelho no cartão, acima das telas (que trocam o corpo inteiro); com o painel aberto, uma faixa
   fixa embaixo que não sai. #7f1d1d é o vermelho de FUNDO da casa (DESIGN-SYSTEM §2), com letra branca. */
.hosp-alerta-app {
  margin: 16px 22px 0; padding: 10px 12px; border-radius: var(--r-input, 6px);
  border: 1px solid var(--k-bd-fecaca, #fecaca); border-left: 4px solid var(--k-bd-b91c1c, #b91c1c);
  background: var(--k-bg-fef2f2, #fef2f2); color: var(--k-tx-b91c1c, #b91c1c);
  font-size: 13px; font-weight: 700; line-height: 1.45;
}
.hosp-alerta-app[hidden] { display: none; }
.hosp-alerta-faixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483350;
  box-sizing: border-box; padding: 10px 16px; text-align: center;
  background: var(--k-bg-7f1d1d, #7f1d1d); color: var(--k-tx-ffffff, #fff);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4;
}
.hosp-alerta-faixa[hidden] { display: none; }
/* a faixa não cobre o fim da página nem o aviso da saída automática */
body.hosp-com-alerta { padding-bottom: 64px; }
body.hosp-com-alerta .hosp-aviso { bottom: 84px; }

/* impressão: nada da entrada, dos avisos e dos diálogos vai para o papel */
@media print {
  #hosp-entrada, .hosp-aviso, .hosp-alerta-faixa, .btn.hosp-sair, dialog.hosp-modal { display: none !important; }
}