/*
 * Marca de AULEDUC sobre keycloak.v2 (PatternFly 5). Valores copiados de packages/tokens/src/tokens.css
 * (Keycloak no lee las variables de la web): si cambia un token, se cambia aquí también.
 * Solo modo claro. Nunito servida desde el propio tema: sin peticiones a terceros.
 */

@font-face {
  font-family: 'Nunito AULEDUC';
  src: url('../fonts/nunito-latin-variable.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --au-canvas: #F6F8FD;
  --au-surface: #FFFFFF;
  --au-surface-subtle: #F3F5FA;
  --au-border: #E7EAF5;
  --au-border-strong: #D3D8EC;
  --au-text: #131C55;
  --au-text-secondary: #36427A;
  --au-text-muted: #56618F;
  --au-primary: #5A36F7;
  --au-primary-strong: #5534F0;
  --au-primary-edge: #4322C8;
  --au-primary-soft: #ECE6FF;
  --au-gradient-hero: linear-gradient(155deg, #D9ECFF 0%, #E9E4FF 52%, #FFE2F1 100%);
  --au-gradient-primary: linear-gradient(90deg, #5A36F7 0%, #6A45FF 55%, #7350FF 100%);
  --au-shadow-soft: 0 3px 0 #DCE1F0, 0 6px 14px rgba(19, 28, 85, 0.06);
  --au-shadow-card: 0 2px 4px rgba(19, 28, 85, 0.03), 0 10px 28px rgba(19, 28, 85, 0.07);
  --au-shadow-primary: 0 4px 0 #4322C8, 0 10px 22px rgba(90, 54, 247, 0.32);

  --pf-v5-global--FontFamily--text: 'Nunito AULEDUC', Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: 'Nunito AULEDUC', Arial, sans-serif;
  --pf-v5-global--FontFamily--sans-serif: 'Nunito AULEDUC', Arial, sans-serif;
  --pf-v5-global--Color--100: var(--au-text);
  --pf-v5-global--Color--200: var(--au-text-secondary);
  --pf-v5-global--primary-color--100: var(--au-primary);
  --pf-v5-global--primary-color--200: var(--au-primary-edge);
  --pf-v5-global--link--Color: var(--au-primary-strong);
  --pf-v5-global--link--Color--hover: var(--au-primary-edge);
  --pf-v5-global--BorderColor--100: var(--au-border-strong);
  --pf-v5-global--BackgroundColor--100: var(--au-surface);
  --pf-v5-global--active-color--100: var(--au-primary);
}

html.login-pf,
html.login-pf body,
#keycloak-bg {
  min-height: 100%;
  background: var(--au-canvas);
  color: var(--au-text);
  font-family: 'Nunito AULEDUC', Arial, sans-serif;
}

.pf-v5-c-login {
  position: relative;
  min-height: 100dvh;
  padding: 24px 16px 48px;
  background: var(--au-gradient-hero);
  overflow-x: hidden;
}

/*
 * Lucas y Sofía, como el pie del menú de la web: a los lados cuando hay sitio y, en el móvil y la
 * tableta, juntos bajo la tarjeta, en un hueco reservado (el relleno de abajo) para no tapar nada.
 * Sin ellos, a 390 px quedaban unos 250 px de degradado vacío bajo la tarjeta.
 */
.pf-v5-c-login::before,
.pf-v5-c-login::after {
  content: '';
  position: absolute;
  bottom: 16px;
  width: 128px;
  height: 128px;
  background: center / contain no-repeat;
  pointer-events: none;
}

.pf-v5-c-login::before {
  left: calc(50% - 136px);
  background-image: url('../img/lucas.webp');
}

.pf-v5-c-login::after {
  right: calc(50% - 136px);
  background-image: url('../img/sofia.webp');
}

@media (max-width: 1023px) {
  .pf-v5-c-login {
    padding-bottom: 160px;
  }
}

@media (min-width: 1024px) {
  .pf-v5-c-login::before,
  .pf-v5-c-login::after {
    bottom: 24px;
    width: 240px;
    height: 240px;
  }

  .pf-v5-c-login::before {
    left: max(24px, calc(50% - 560px));
  }

  .pf-v5-c-login::after {
    right: max(24px, calc(50% - 560px));
  }
}

/* keycloak.v2 fija la columna a 34rem y pinta una franja azul encima de la tarjeta: fuera las dos. */
.pf-v5-c-login__container {
  position: relative;
  z-index: 1;
  /* Pista fija: el contenedor se ajusta a su contenido, así que un 1fr o un % se encogían. */
  grid-template-columns: min(30rem, calc(100vw - 32px));
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

.pf-v5-c-login__main-header {
  border-top: 0;
}

/* La marca: el logo como imagen y el nombre del realm («AULEDUC») como texto para el lector. */
.pf-v5-c-login__header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0;
}

#kc-header-wrapper {
  width: 168px;
  height: 112px;
  overflow: hidden;
  background: url('../img/logo.webp') center / contain no-repeat;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
}

.pf-v5-c-login__main {
  padding: 8px 0 0;
  border-radius: 28px;
  background: var(--au-surface);
  box-shadow: var(--au-shadow-card);
}

.pf-v5-c-login__main-header {
  padding-inline: 24px;
}

.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding-inline: 24px;
}

#kc-page-title {
  color: var(--au-text);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.pf-v5-c-form__label-text {
  color: var(--au-text);
  font-size: 1rem;
  font-weight: 800;
}

/*
 * Un solo estilo de campo, el de la web (.entrada): fondo blanco, radio de 14 px (--au-radius-md) y
 * borde de 1 px. El borde lo pinta el ::before de PatternFly; su raya inferior de hover (::after), fuera.
 */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 14px;
  --pf-v5-c-form-control--before--BorderRadius: 14px;
  --pf-v5-c-form-control--after--BorderRadius: 14px;
  --pf-v5-c-form-control--before--BorderColor: var(--au-border-strong);
  --pf-v5-c-form-control--before--BorderWidth: 1px;
  --pf-v5-c-form-control--after--BorderColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--BackgroundColor: var(--au-surface);
  min-height: 48px;
  border-radius: 14px;
  background: var(--au-surface);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 700;
}

.pf-v5-c-form-control::before {
  border: 1px solid var(--au-border-strong);
  border-radius: 14px;
}

.pf-v5-c-form-control::after {
  border-color: transparent;
  border-radius: 14px;
}

/* La caja de dentro (el <input>) no lleva ni fondo, ni radio, ni anillo propio: solo el contorno de fuera. */
.pf-v5-c-form-control > input {
  border-radius: 14px;
  background: transparent;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
  outline: none;
}

/* Un solo anillo de foco, el de la web, en el contorno exterior. */
.pf-v5-c-form-control:focus-within {
  outline: 3px solid var(--au-primary-strong);
  outline-offset: 2px;
}

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 9999px;
  --pf-v5-c-button--after--BorderRadius: 9999px;
  --pf-v5-c-button--FontWeight: 800;
  border-radius: 9999px;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--au-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--au-primary-edge);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--au-primary-edge);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--au-primary-edge);
  min-height: 52px;
  background: var(--au-gradient-primary);
  box-shadow: var(--au-shadow-primary);
  font-size: 1.0625rem;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--au-primary-strong);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--au-border-strong);
  min-height: 48px;
  background: var(--au-surface);
  box-shadow: var(--au-shadow-soft);
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-login a {
  color: var(--au-primary-strong);
  font-weight: 800;
}

/*
 * El ojo de la contraseña, dentro del campo (a 12 px del borde derecho), no en una caja aparte. El campo
 * deja sitio a la derecha para que el texto no pase por debajo del botón.
 */
.pf-v5-c-input-group {
  position: relative;
}

.pf-v5-c-input-group > .pf-v5-c-input-group__item:not(.pf-m-fill) {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;
  transform: translateY(-50%);
}

.pf-v5-c-input-group .pf-v5-c-form-control > input {
  padding-right: 52px;
}

.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--BorderRadius: 10px;
  --pf-v5-c-button--after--BorderRadius: 10px;
  --pf-v5-c-button--m-control--after--BorderColor: transparent;
  --pf-v5-c-button--m-control--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--Color: var(--au-primary-strong);
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
}

.pf-v5-c-button.pf-m-control::after {
  border: 0;
}

.pf-v5-c-button.pf-m-control:hover {
  background: var(--au-primary-soft);
}

/* «¿Aún no tienes cuenta? Date de alta»: el alta es de la web (footer.ftl). */
.auleduc-alta {
  margin: 0;
  padding-top: 8px;
  color: var(--au-text-secondary);
  font-weight: 600;
  text-align: center;
}

.auleduc-alta a {
  color: var(--au-primary-strong);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* El alta empieza en la web («Date de alta»): fuera el «Crear cuenta» propio de Keycloak en la pantalla de entrar,
   con su banda (si no, queda una raya suelta bajo «Entrar»). */
#kc-info:has(> #kc-info-wrapper > #kc-registration-container),
#kc-registration-container {
  display: none;
}

/* Páginas de error: «Volver a entrar» y, con el registro abierto, «Date de alta» (footer.ftl). */
.auleduc-salidas {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

/* «¿Has olvidado la contraseña?» con aire bajo el campo: iba a 6 px, pegado. */
.pf-v5-c-form__helper-text:has(a[href*='reset-credentials']) {
  margin-top: 8px;
}

/* Pie de la tarjeta: los textos legales de la web (footer.ftl), en dos renglones de dos; en uno solo
   repartidos por el ancho, a 1440 «Aviso legal» se quedaba solo en el segundo. */
.auleduc-legal {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  justify-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 16px 0 32px;
  list-style: none;
  font-size: 0.875rem;
}

.auleduc-legal a {
  color: var(--au-text-secondary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--au-primary-strong);
  outline-offset: 2px;
}

.pf-v5-c-alert {
  border-radius: 16px;
}

.pf-v5-c-login__main-footer-band {
  margin-top: 8px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--au-border);
  border-radius: 0;
  background: transparent;
  color: var(--au-text-secondary);
  font-weight: 600;
}

.pf-v5-c-check__label {
  color: var(--au-text-secondary);
  font-weight: 600;
}

@media (min-width: 768px) {
  .pf-v5-c-login {
    padding-top: 40px;
  }

  #kc-header-wrapper {
    width: 210px;
    height: 140px;
  }

  .pf-v5-c-login__main-header,
  .pf-v5-c-login__main-body,
  .pf-v5-c-login__main-footer {
    padding-inline: 40px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}