/* ============================================================
   Hospital São José — telas de identidade (Keycloak).
   Layout no template.ftl; as telas de conteúdo vêm do keycloak.v2
   e são vestidas aqui. Tokens espelham o app (verde salvia + dourado).
   ============================================================ */

:root {
  color-scheme: light;

  --hsj-green: #4d6b5d;
  --hsj-green-dark: #3a5648;
  --hsj-green-darker: #2c4237;
  --hsj-green-light: #6b8b7b;
  --hsj-green-lighter: #e8efeb;
  --hsj-gold: #c9b67c;
  --hsj-gold-dark: #a89558;
  --hsj-gold-light: #e8dfc8;
  --hsj-surface: #f5f3ef;
  --hsj-field-border: #d7cfbe;
  --hsj-white: #ffffff;
  --hsj-text: #2c3332;
  --hsj-text-secondary: #5a6564;
  --hsj-text-muted: #8a9291;
  --hsj-danger: #b3261e;

  --hsj-radius: 14px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---------- Layout ---------- */
html,
body {
  height: 100%;
  /* Impede o "font boosting" (text autosizing) do Android: sem isto, o navegador
     do celular inflava as fontes e, como as margens são em rem, o formulário
     inteiro ficava espaçado/desalinhado — só no aparelho, nunca no desktop. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html {
  background: var(--hsj-green-darker);
}
body#keycloak-bg {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--hsj-text);
  /* Brilho verde no topo + preenchimento sólido escuro. O `fixed` prende o
     gradiente à viewport: em páginas altas (ex.: MFA) não há emenda/degradê —
     abaixo do brilho fica o verde escuro uniforme (mesma cor final do gradiente). */
  background-color: var(--hsj-green-darker);
  background-image: radial-gradient(1200px 600px at 50% -10%, var(--hsj-green) 0%, var(--hsj-green-darker) 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.hsj-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.hsj-brand {
  text-align: center;
}
.hsj-brand__logo {
  width: 108px;
  height: 108px;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.hsj-card {
  width: 100%;
  max-width: 480px;
  background: var(--hsj-white);
  border-radius: 20px;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.hsj-card__title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hsj-green-dark);
}

.hsj-footnote {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--hsj-green-lighter);
  opacity: 0.75;
}

/* Link "voltar ao site" — sobre o fundo verde, cor clara. */
.hsj-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--hsj-gold-light);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.hsj-back:hover {
  color: #ffffff;
}
.hsj-back__arrow {
  display: inline-block;
  transition: transform 0.15s;
}
.hsj-back:hover .hsj-back__arrow {
  transform: translateX(-3px);
}

/* Cabeçalho do Keycloak (título de realm) — escondido: usamos a marca própria. */
#kc-header,
#kc-header-wrapper {
  display: none;
}

/* ---------- Campos ---------- */
label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hsj-text-secondary);
}

.pf-v5-c-form__group {
  margin-bottom: 1.05rem;
}

/* Telas HERDADAS (não-login): a moldura fica no wrapper pf, input transparente.
   O login usa markup próprio (.hsj-input) — ver o bloco "Campos HSJ" abaixo. */
.pf-v5-c-form-control,
select {
  width: 100%;
  box-sizing: border-box;
  background: var(--hsj-surface);
  border: 1.5px solid var(--hsj-field-border);
  border-radius: 10px;
  color: var(--hsj-text);
  font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pf-v5-c-form-control {
  padding: 0;
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.8rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus {
  outline: none;
}
select:focus,
.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  border-color: var(--hsj-green);
  box-shadow: 0 0 0 3px rgba(77, 107, 93, 0.15);
}

/* Erro de validação */
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-input-group:has(.pf-m-error) .pf-v5-c-form-control {
  border-color: var(--hsj-danger);
}
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text {
  font-size: 0.78rem;
  color: var(--hsj-text-muted);
}
.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text.pf-m-error {
  color: var(--hsj-danger);
}

/* Campo somente-leitura (username confirmado) */
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control:has(input[readonly]) {
  background: var(--hsj-green-lighter);
  border-color: transparent;
}

/* ---------- Input group (campo + botão de mostrar senha) ----------
   A moldura fica no PRÓPRIO input-group; o campo e o botão do olho ficam
   transparentes por dentro, formando um só campo (o olho vira um ícone dentro
   do campo, não uma caixa colada). O foco é tratado no bloco de :focus-within
   acima, junto com os demais campos. */
.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--hsj-surface);
  border: 1.5px solid var(--hsj-field-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pf-v5-c-input-group__item.pf-m-fill,
.pf-v5-c-input-group__item:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-v5-c-input-group .pf-v5-c-form-control {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.pf-v5-c-button.pf-m-control {
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: var(--hsj-text-muted);
  padding: 0 0.9rem;
}
/* PatternFly desenha uma linha inferior no controle via ::after — removemos. */
.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
  display: none !important;
}
.pf-v5-c-button.pf-m-control:hover {
  color: var(--hsj-green);
}

/* ============================================================
   Campos HSJ — markup próprio (field.ftl). Sem wrappers do PatternFly,
   então o foco é um anel arredondado limpo (nada de borda quadrada).
   ============================================================ */
.hsj-field {
  margin-bottom: 1.05rem;
}
.hsj-field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hsj-text-secondary);
}
.hsj-field__req {
  color: var(--hsj-danger);
  margin-left: 0.15rem;
}

/* Caixa do campo — no <input> de texto e no wrapper do campo de senha. */
.hsj-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--hsj-surface);
  border: 1.5px solid var(--hsj-field-border);
  border-radius: 10px;
  color: var(--hsj-text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hsj-input:focus,
.hsj-input:focus-within {
  outline: none;
  border-color: var(--hsj-green);
  box-shadow: 0 0 0 3px rgba(77, 107, 93, 0.15);
}
.hsj-input--error {
  border-color: var(--hsj-danger);
}

/* Campo com afixo (senha + olho): a caixa vira flex; o input fica sem moldura. */
.hsj-input--with-affix {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.hsj-input__control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 0.65rem 0.85rem;
}
.hsj-input__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--hsj-text-muted);
  cursor: pointer;
  padding: 0 0.85rem;
}
.hsj-input__toggle:hover {
  color: var(--hsj-green);
}

/* Erro sob o campo */
.hsj-field__error {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--hsj-danger);
}

/* Helper (esqueci-senha, lembrar-me) */
.hsj-field__helper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
.hsj-link {
  color: var(--hsj-gold-dark);
  font-size: 0.82rem;
  text-decoration: none;
}
.hsj-link:hover {
  color: var(--hsj-green);
  text-decoration: underline;
}

/* Checkbox lembrar-me */
.hsj-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--hsj-text-secondary);
  cursor: pointer;
}
.hsj-check input {
  accent-color: var(--hsj-green);
  width: 1rem;
  height: 1rem;
}

/* ---------- Botões ---------- */
.pf-v5-c-button.pf-m-primary,
input[type="submit"],
#kc-login {
  width: 100%;
  background: var(--hsj-green);
  border: 0;
  border-radius: 12px;
  color: var(--hsj-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.72rem 1rem;
  margin-top: 0.4rem;
  cursor: pointer;
  transition: background 0.15s;
}
.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
#kc-login:hover {
  background: var(--hsj-green-dark);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: var(--hsj-gold-dark);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-secondary {
  border-radius: 12px;
  width: 100%;
  padding: 0.66rem 1rem;
}
.pf-v5-c-button.pf-m-secondary:hover {
  background: rgba(176, 141, 63, 0.06);
}

/* A "borda" e o realce de foco do botão no PatternFly v5 vêm do pseudo-elemento
   ::after (border-color = --pf-...-primary-color--100 = AZUL) e, no foco, ele
   ainda ENGROSSA a borda (width md) — era esse o "retângulo azul". Forçamos o
   ::after a ser dourado, 1px, em TODOS os estados. É a correção de fato. */
.pf-v5-c-button.pf-m-secondary::after {
  border-color: var(--hsj-gold-light) !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}
.pf-v5-c-button.pf-m-secondary:hover::after,
.pf-v5-c-button.pf-m-secondary:focus::after,
.pf-v5-c-button.pf-m-secondary:focus-visible::after,
.pf-v5-c-button.pf-m-secondary:active::after {
  border-color: var(--hsj-gold-dark) !important;
  border-width: 1px !important;
}
.pf-v5-c-button.pf-m-link::after {
  border-color: transparent !important;
}

/* Foco por TECLADO: anel dourado sutil (acessibilidade). Clique de mouse não
   ganha anel — só o ::after dourado acima. Nunca o outline azul do browser. */
.pf-v5-c-button:focus-visible,
input[type="submit"]:focus-visible,
#kc-login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.25);
}

/* Links de texto (esqueci senha, voltar) */
a {
  color: var(--hsj-gold-dark);
}
a:hover {
  color: var(--hsj-green);
}

/* ---------- Alertas ---------- */
.pf-v5-c-alert {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.86rem;
  border: 1px solid transparent;
}
.pf-v5-c-alert.pf-m-danger {
  background: #fbeae8;
  border-color: #f0c8c3;
  color: var(--hsj-danger);
}
.pf-v5-c-alert.pf-m-success {
  background: var(--hsj-green-lighter);
  border-color: #cfe0d6;
  color: var(--hsj-green-dark);
}
.pf-v5-c-alert.pf-m-info,
.pf-v5-c-alert.pf-m-warning {
  background: var(--hsj-gold-light);
  border-color: #e0d3a8;
  color: var(--hsj-gold-dark);
}

/* Checkbox "lembrar-me" */
.pf-v5-c-check__label {
  font-size: 0.85rem;
  color: var(--hsj-text-secondary);
}

/* Rodapé/infos do card */
#kc-info,
.pf-v5-c-login__main-footer-band {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--hsj-text-secondary);
}

/* --------------------------------------------------------------------------
   Foco: nunca o outline azul do browser em nenhum controle do login.
   Regra abrangente e com prioridade (o botão Cancelar do update-password vem
   do template base e recebia o outline padrão do sistema).
   -------------------------------------------------------------------------- */
#keycloak-bg :focus,
#keycloak-bg button:focus,
#keycloak-bg input:focus,
#keycloak-bg a:focus,
#keycloak-bg select:focus {
  outline: none !important;
}
#keycloak-bg button:focus-visible,
#keycloak-bg input[type="submit"]:focus-visible,
#keycloak-bg .pf-v5-c-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.30) !important;
}
/* Cancelar (name=cancel-aia / id=kc-cancel), qualquer estado: sem azul.
   Cobre também o ::after (de onde vem o azul) caso o botão não seja .pf-m-secondary. */
[name="cancel-aia"],
#kc-cancel {
  border: 0 !important;
  box-shadow: none !important;
  color: var(--hsj-gold-dark) !important;
}
[name="cancel-aia"]::after,
#kc-cancel::after,
[name="cancel-aia"]:focus::after,
#kc-cancel:focus::after,
[name="cancel-aia"]:focus-visible::after,
#kc-cancel:focus-visible::after {
  border-color: var(--hsj-gold-light) !important;
  border-width: 1px !important;
}

/* --------------------------------------------------------------------------
   MFA / Configuração do autenticador (login-config-totp)
   A lista de passos vinha sem estilo (apps soltos, tudo apertado, QR à
   esquerda). Aqui damos hierarquia, respiro e centralizamos o QR.
   -------------------------------------------------------------------------- */
/* Contador próprio: o número fica na MARGEM do card (mesma linha vertical dos
   rótulos do formulário e dos botões); o texto recua (hanging) e alinha certinho
   quando quebra. Sem os markers nativos, que empurravam tudo para a direita. */
#kc-totp-settings {
  list-style: none;
  counter-reset: totp;
  margin: 0 0 1.5rem;
  padding-left: 0;
  color: var(--hsj-text);
}
#kc-totp-settings > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1.35rem;
  line-height: 1.55;
}
#kc-totp-settings > li::before {
  counter-increment: totp;
  content: counter(totp) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hsj-gold-dark);
  font-weight: 700;
}
#kc-totp-settings p {
  margin: 0 0 0.5rem;
}
#kc-totp-settings > li > p:last-child {
  margin-bottom: 0;
}
/* Segundo parágrafo do passo 3 (dica do nome do dispositivo): texto de apoio. */
#kc-totp-settings > li:last-child > p:last-child {
  color: var(--hsj-text-secondary);
  font-size: 0.9rem;
}

/* Apps suportados: lista limpa e indentada, com marcador dourado. */
#kc-totp-supported-apps {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#kc-totp-supported-apps li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--hsj-text-secondary);
  font-size: 0.92rem;
}
#kc-totp-supported-apps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hsj-gold-dark);
}

/* QR: centralizado e emoldurado num cartão claro. */
#kc-totp-secret-qr-code {
  display: block;
  width: 200px;
  height: auto;
  margin: 1rem auto 0.85rem;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--hsj-gold-light);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(44, 66, 55, 0.08);
  image-rendering: pixelated;
}

/* Links "não consegue ler o QR?" / "usar código" centralizados e dourados. */
#mode-manual,
#mode-barcode {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hsj-gold-dark);
  margin: 0.15rem 0 0;
}

/* Chave secreta (modo manual): caixa monoespaçada legível. */
#kc-totp-secret-key {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: var(--hsj-surface);
  border: 1px solid var(--hsj-field-border);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  word-break: break-all;
}

/* ============================================================
   Compactação em telas de celular.
   Sem isto o layout (logo de 108px + paddings/margens generosos) fica MAIS ALTO
   que a viewport do aparelho e a tela de login precisa de rolagem. Aqui
   encolhemos logo, paddings, margens e o título para caber sem scroll — o
   desktop/web (largura > 480px) segue espaçoso. Também usamos 100dvh (altura
   dinâmica) em vez de 100vh, para o conteúdo centralizar na área realmente
   visível, sem ficar atrás da barra de endereço do navegador.
   ============================================================ */
@media (max-width: 480px) {
  .hsj-shell {
    gap: 0.9rem;
    padding: 1rem 1rem;
    min-height: 100dvh;
  }
  .hsj-brand__logo {
    width: 92px;
    height: 92px;
    border-radius: 18px;
  }
  .hsj-card {
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 16px;
  }
  .hsj-card__title {
    margin-bottom: 1rem;
    font-size: 1.35rem;
  }
  .hsj-field {
    margin-bottom: 0.65rem;
  }
}