/*
 * Tema de login do Central Laghetto — por cima do keycloak.v2 (PatternFly 5), só CSS e imagens:
 * nenhum template .ftl sobrescrito, para atualizar o Keycloak sem refazer o tema.
 * Mesma cara da entrada do Painel de Disponibilidade: fundo Warm White, cartão branco com borda
 * cinza-200 e raio 16 px, logo da Laghetto no topo do cartão, título Inter em Deep Green, campos com
 * borda cinza-400 e foco petróleo, botão Forest Green em pílula. Tokens do padrão visual Laghetto.
 */
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3 Variable';
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --lg-fonte-texto: 'Source Sans 3 Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lg-fonte-titulo: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lg-laghetto-900: #0a2d23;
  --lg-laghetto-700: #12443f;
  --lg-petroleo: #2a606a;
  --lg-menta: #c7f1c5;
  --lg-fundo: #fafaf8;
  --lg-realce: #e6f0f1;
  --lg-cinza-50: #f6f8f7;
  --lg-cinza-100: #eef3f1;
  --lg-cinza-200: #e3e9e6;
  --lg-cinza-300: #cbd5d1;
  --lg-cinza-400: #84958e;
  --lg-cinza-500: #5f6f68;
  --lg-cinza-700: #3f4f49;
  --lg-cinza-900: #16221e;
  --lg-favoravel: #1f7a3f;
  --lg-favoravel-fundo: #e5f4e8;
  --lg-desfavoravel: #b42318;
  --lg-desfavoravel-fundo: #fdecea;
  --lg-atencao: #8a5a00;
  --lg-atencao-fundo: #fbf1d9;
  --lg-raio-pequeno: 8px;

  /* PatternFly → tokens da Laghetto */
  --pf-v5-global--FontFamily--text: var(--lg-fonte-texto);
  --pf-v5-global--FontFamily--text--vf: var(--lg-fonte-texto);
  --pf-v5-global--FontFamily--heading: var(--lg-fonte-titulo);
  --pf-v5-global--FontFamily--heading--vf: var(--lg-fonte-titulo);
  --pf-v5-global--Color--100: var(--lg-cinza-900);
  --pf-v5-global--Color--200: var(--lg-cinza-500);
  --pf-v5-global--link--Color: var(--lg-laghetto-700);
  --pf-v5-global--link--Color--hover: var(--lg-laghetto-900);
  --pf-v5-global--primary-color--100: var(--lg-laghetto-700);
  --pf-v5-global--primary-color--200: var(--lg-laghetto-900);
  --pf-v5-global--BackgroundColor--100: #fff;
  --pf-v5-global--danger-color--100: var(--lg-desfavoravel);
}

/* Página: fundo Warm White, sem a imagem do Keycloak */
.login-pf body,
body#keycloak-bg {
  background: var(--lg-fundo);
  color: var(--lg-cinza-900);
  font-family: var(--lg-fonte-texto);
  font-size: 15px;
}
::selection {
  background: var(--lg-menta);
  color: var(--lg-laghetto-900);
}
:focus-visible {
  outline: 2px solid var(--lg-petroleo);
  outline-offset: 2px;
}

/* ── Layout no molde da entrada da Controladoria (12/10/2026) ──────────────────────────────────────
   Painel Deep Green de ~1/3 à esquerda: símbolo + "Laghetto / CENTRAL" no alto, o símbolo gigante em Pale Mint
   a 7% como marca d'água saindo do canto de baixo, nome e texto curto embaixo. Formulário à direita, sem cartão,
   direto no fundo Warm White e alinhado no alto. O painel é o cabeçalho do keycloak.v2 (#kc-header) com o
   conteúdo de loginTitleHtml (messages_pt_BR.properties). */
.pf-v5-c-login {
  min-height: 100vh;
  padding: 0;
  display: block;
  background: var(--lg-fundo);
}
.pf-v5-c-login__container {
  display: grid;
  grid-template-columns: minmax(22rem, 4fr) minmax(0, 8fr);
  grid-template-areas: 'header main';
  grid-template-rows: 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
#kc-header {
  grid-area: header;
  display: flex;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--lg-laghetto-900) url('../img/simbolo-agua.svg') right -96px bottom -80px / 34rem auto no-repeat;
  color: #fff;
}
#kc-header-wrapper {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.lg-painel {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: 48px;
}
.lg-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.lg-simbolo {
  width: 36px;
  height: 36px;
  flex: none;
  background: url('../img/simbolo.svg') center / contain no-repeat;
}
.lg-nome {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.lg-nome-marca {
  font-family: var(--lg-fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.lg-nome-sistema {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b4d4df; /* Ice Blue (--lg-azul-claro) */
}
.lg-chamada {
  max-width: 20rem;
}
.lg-titulo {
  margin: 0;
  font-family: var(--lg-fonte-titulo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lg-menta);
}
.lg-texto {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #d9efe0;
}
/* Formulário direto no fundo, sem cartão, no alto da tela */
.pf-v5-c-login__main {
  grid-area: main;
  align-self: start;
  justify-self: center;
  width: min(24rem, calc(100% - 32px));
  margin: 16vh 0 40px;
  --pf-v5-c-login__main--BackgroundColor: transparent;
  --pf-v5-c-login__main--BoxShadow: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding-left: 0;
  padding-right: 0;
}
/* Tela estreita: o painel vira a barra do topo, só com o símbolo e o nome */
@media (max-width: 1023px) {
  .pf-v5-c-login__container {
    grid-template-columns: 1fr;
    grid-template-areas: 'header' 'main';
    grid-template-rows: auto 1fr;
  }
  #kc-header {
    background-image: none;
  }
  .lg-painel {
    padding: 16px;
  }
  .lg-chamada {
    display: none;
  }
  .pf-v5-c-login__main {
    margin-top: 40px;
  }
}

.pf-v5-c-login__main-header {
  border-top: 0;
  padding-top: 0;
  row-gap: 4px;
}
/* Subtítulo só na tela de usuário e senha */
body[data-page-id='login-login'] #kc-page-title::after {
  content: 'Use o usuário que a TI criou para você.';
  display: block;
  margin-top: 8px;
  font-family: var(--lg-fonte-texto);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--lg-cinza-500);
}
.pf-v5-c-login__main-title,
#kc-page-title {
  font-family: var(--lg-fonte-titulo);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--lg-laghetto-900);
}
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  font-family: var(--lg-fonte-texto);
}

/* Rótulos e campos (como .campo do painel) */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--lg-cinza-700);
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopColor: var(--lg-cinza-400);
  --pf-v5-c-form-control--before--BorderRightColor: var(--lg-cinza-400);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--lg-cinza-400);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--lg-cinza-400);
  /* Espessura explícita: dentro do grupo senha + botão o PatternFly zera a borda de baixo */
  --pf-v5-c-form-control--before--BorderTopWidth: 1px;
  --pf-v5-c-form-control--before--BorderRightWidth: 1px;
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--before--BorderLeftWidth: 1px;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--lg-desfavoravel);
  --pf-v5-c-form-control--FontSize: 15px;
  min-height: 40px;
  border-radius: var(--lg-raio-pequeno);
  background: #fff;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: var(--lg-raio-pequeno);
}
.pf-v5-c-form-control:hover {
  --pf-v5-c-form-control--before--BorderTopColor: var(--lg-cinza-500);
  --pf-v5-c-form-control--before--BorderRightColor: var(--lg-cinza-500);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--lg-cinza-500);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--lg-cinza-500);
}
/* Foco: a própria borda vira petróleo em 2 px (sem contorno extra por fora, que duplicava a linha) */
.pf-v5-c-form-control:focus-within {
  outline: none;
  --pf-v5-c-form-control--before--BorderTopColor: var(--lg-petroleo);
  --pf-v5-c-form-control--before--BorderRightColor: var(--lg-petroleo);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--lg-petroleo);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--lg-petroleo);
  --pf-v5-c-form-control--before--BorderTopWidth: 2px;
  --pf-v5-c-form-control--before--BorderRightWidth: 2px;
  --pf-v5-c-form-control--before--BorderBottomWidth: 2px;
  --pf-v5-c-form-control--before--BorderLeftWidth: 2px;
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
  outline: none;
}
.pf-v5-c-form-control.pf-m-readonly {
  background: var(--lg-cinza-50);
}
/* Grupo senha + botão de mostrar: cantos externos arredondados, internos retos */
.pf-v5-c-input-group > .pf-v5-c-input-group__item:first-child .pf-v5-c-form-control,
.pf-v5-c-input-group > .pf-v5-c-input-group__item:first-child .pf-v5-c-form-control::before {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border-radius: 0 var(--lg-raio-pequeno) var(--lg-raio-pequeno) 0;
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--lg-cinza-400);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--lg-cinza-400);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--lg-cinza-400);
  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--lg-cinza-400);
  color: var(--lg-cinza-700);
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border-radius: 0 var(--lg-raio-pequeno) var(--lg-raio-pequeno) 0;
}

/* Botões: Forest Green em pílula, como o "Entrar" do painel */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 999px;
  font-family: var(--lg-fonte-texto);
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--lg-laghetto-700);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--lg-laghetto-900);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--lg-laghetto-900);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--lg-laghetto-900);
  --pf-v5-c-button--m-primary--Color: #fff;
  min-height: 42px;
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--lg-laghetto-700);
  --pf-v5-c-button--m-secondary--BackgroundColor: #fff;
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--lg-laghetto-700);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--lg-cinza-50);
  --pf-v5-c-button--m-secondary--hover--Color: var(--lg-laghetto-900);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--lg-laghetto-900);
}
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--lg-laghetto-700);
  --pf-v5-c-button--m-link--hover--Color: var(--lg-laghetto-900);
}
a {
  color: var(--lg-laghetto-700);
  text-decoration-color: var(--lg-cinza-400);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--lg-laghetto-900);
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--lg-laghetto-700);
}

/* Avisos: cores de situação, nunca o verde da marca; fundo suave, sem a barra azul do PatternFly */
.pf-v5-c-alert {
  border-radius: var(--lg-raio-pequeno);
  box-shadow: none;
  border-top: 0;
  font-weight: 600;
}
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
  background: var(--lg-desfavoravel-fundo);
  --pf-v5-c-alert--m-danger__title--Color: var(--lg-desfavoravel);
  --pf-v5-c-alert--m-danger__icon--Color: var(--lg-desfavoravel);
}
.pf-v5-c-alert.pf-m-warning {
  background: var(--lg-atencao-fundo);
  --pf-v5-c-alert--m-warning__title--Color: var(--lg-atencao);
  --pf-v5-c-alert--m-warning__icon--Color: var(--lg-atencao);
}
.pf-v5-c-alert.pf-m-success {
  background: var(--lg-favoravel-fundo);
  --pf-v5-c-alert--m-success__title--Color: var(--lg-favoravel);
  --pf-v5-c-alert--m-success__icon--Color: var(--lg-favoravel);
}
.pf-v5-c-alert.pf-m-info {
  background: var(--lg-realce);
  --pf-v5-c-alert--m-info__title--Color: var(--lg-laghetto-900);
  --pf-v5-c-alert--m-info__icon--Color: var(--lg-petroleo);
}
.pf-v5-c-helper-text__item.pf-m-error,
.kc-feedback-text {
  color: var(--lg-desfavoravel);
}

/* Cadastro do autenticador: QR e passos legíveis */
#kc-totp-secret-qr-code {
  border: 1px solid var(--lg-cinza-200);
  border-radius: var(--lg-raio-pequeno);
  padding: 8px;
  background: #fff;
}
#kc-totp-settings li {
  margin-bottom: 8px;
  color: var(--lg-cinza-700);
}

/* Rodapé do cartão (ex.: "Voltar ao login") */
.pf-v5-c-login__main-footer-band {
  border-top: 1px solid var(--lg-cinza-100);
  color: var(--lg-cinza-500);
}

/* "Esqueci minha senha": linha própria, à direita, com respiro (no padrão ficava colado no campo) */
.pf-v5-c-form__helper-text {
  margin-top: 8px;
}
.pf-v5-c-form__group:has(#password) .pf-v5-c-helper-text__item:has(a) {
  margin-left: auto;
}
.pf-v5-c-form__group:has(#password) .pf-v5-c-helper-text a {
  font-size: 14px;
  font-weight: 600;
}
/* "Manter conectado" + "Esqueci minha senha" na mesma linha quando cabem; senão um embaixo do outro, cada um
   numa linha só (antes os dois quebravam em duas linhas espremidas). Caixa de 18 px, área de toque maior. */
.pf-v5-c-form__group:has(#password) .pf-v5-c-helper-text {
  flex-wrap: wrap;
  gap: 8px 16px;
}
.pf-v5-c-form__group:has(#password) .pf-v5-c-helper-text__item {
  white-space: nowrap;
}
.pf-v5-c-check {
  align-items: center;
  min-height: 24px;
}
.pf-v5-c-check__input {
  width: 18px;
  height: 18px;
}
.pf-v5-c-form__group + .pf-v5-c-form__group,
.pf-v5-c-form__group + .pf-v5-c-form__actions {
  margin-top: 4px;
}