/*
 * Réplica visual de la SignInPage de la app (packages/auth-client).
 * Paleta: variables --brand-* inyectadas por template.ftl con la MISMA escala
 * OKLCH que usa el front (buildPrimaryCssVars sobre el primarySeed real).
 * Tonos obsidian copiados de packages/ui/src/styles.css.
 */
@font-face {
  font-family: 'RecoletaAlt';
  src: url('../fonts/RecoletaAlt-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --obsidian-200: oklch(0.768 0.006 286.44);
  --obsidian-400: oklch(0.534 0.012 286.03);
  --obsidian-700: oklch(0.258 0.007 285.91);
  --obsidian-800: oklch(0.215 0.008 285.76);
  --obsidian-900: oklch(0.179 0.004 286.04);
  --font-body: 'Fredoka', system-ui, sans-serif;
  --font-heading: 'RecoletaAlt', serif;
}

* { box-sizing: border-box; }

html, body.acadeky-login {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
}

/* Degradado animado · misma receta que bg-brand-gradient-animated (ui). */
body.acadeky-login {
  background:
    radial-gradient(ellipse at 20% 50%, var(--brand-700) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, var(--brand-800) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, var(--brand-600) 0%, transparent 40%),
    var(--brand-950);
  background-size: 200% 200%;
  animation: acadeky-gradient-flow 15s ease infinite;
}

@keyframes acadeky-gradient-flow {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 0% 50%; }
  100% { background-position: 0% 0%; }
}

/* Layout: columna centrada, igual que la SignInPage
   (min-h-dvh flex-col items-center justify-center gap-8 px-4 pb-10) */
.acadeky-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 1rem 2.5rem;
}

.acadeky-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Logo superior: máscara pintada con primary-50, como <AcadekyLogo color>. */
.acadeky-top-logo {
  width: 200px;
  height: 96px;
  background-color: var(--brand-50);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.2));
}

.acadeky-top-logo-default {
  mask-image: url('../img/logo-acadeky-large.webp');
  -webkit-mask-image: url('../img/logo-acadeky-large.webp');
}

/* text-md opacity-80 text-white */
.acadeky-tagline {
  margin: 0;
  color: #fff;
  opacity: 0.8;
  font-size: 1rem;
  text-align: center;
}

/* Card blanca: max-w-sm rounded-3xl px-6 pt-8 pb-10 shadow */
.acadeky-card {
  width: 100%;
  max-width: 24rem;
  background: #fff;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem 2.5rem;
  box-shadow: 0 8px 32px #00000025;
}

@media (min-width: 640px) {
  .acadeky-card { padding-left: 2rem; padding-right: 2rem; }
}

.acadeky-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
}

.acadeky-card-logo {
  width: 40px;
  height: auto;
  object-fit: contain;
}

/* h2: text-sm font-semibold text-obsidian-900 font-heading */
.acadeky-card-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--obsidian-900);
}

/* Botón Google: rounded-[20px] borde primary, texto obsidian-700 bold */
.acadeky-google-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 20px;
  border: 1.5px solid var(--brand-700);
  background: #fff;
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--obsidian-700);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.acadeky-google-btn:hover { background: var(--brand-50); }

.acadeky-google-icon { width: 24px; height: 24px; }

/* Divisor: "o con tu email" (uppercase 11px obsidian-400) */
.acadeky-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0.5rem;
}

.acadeky-divider span { height: 1px; flex: 1; background: var(--obsidian-200); }

.acadeky-divider em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--obsidian-400);
}

.acadeky-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Inputs: rounded-xl border obsidian-200, focus border primary-400 */
.acadeky-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--obsidian-200);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--obsidian-700);
  outline: none;
  background: #fff;
}

.acadeky-input::placeholder { color: var(--obsidian-400); }
.acadeky-input:focus { border-color: var(--brand-400); }
.acadeky-input[aria-invalid='true'] { border-color: #dc2626; }

/* Botón submit: rounded-xl bg-obsidian-800 texto blanco semibold */
.acadeky-submit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--obsidian-800);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.acadeky-submit:hover { background: var(--obsidian-700); }
.acadeky-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Email identificado en la pantalla de contraseña */
.acadeky-attempted {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--obsidian-200);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--obsidian-700);
}

.acadeky-attempted-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acadeky-attempted-change {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 600;
}

.acadeky-attempted-change:hover { text-decoration: underline; }

.acadeky-forgot {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--obsidian-400);
  text-decoration: none;
}

.acadeky-forgot:hover { color: var(--obsidian-700); }

/* Mensajes (error de credenciales, expiración, etc.) */
.acadeky-alert {
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  text-align: center;
}

.acadeky-alert-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.acadeky-alert-warning,
.acadeky-alert-info,
.acadeky-alert-success {
  border: 1px solid var(--obsidian-200);
  background: #fafafa;
  color: var(--obsidian-700);
}

/* Restos del layout base que no usamos */
#kc-registration { display: none; }

/* Footer "Desarrollado por Heysdev" (powered-by-footer del ui) */
.acadeky-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: -0.5rem;
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.15s ease;
}
.acadeky-powered:hover { color: #fff; text-decoration: underline; }
.acadeky-powered img {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  filter: brightness(0) invert(1);
}

/* Botón "volver" de la página de error (mismo estilo que el submit) */
a.acadeky-error-back { text-decoration: none; }

/* Usuario identificado (paso 2 del identity-first): avatar con inicial */
.acadeky-identified {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--obsidian-200);
  border-radius: 999px;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--obsidian-700);
}
.acadeky-identified-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
}
.acadeky-identified-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acadeky-identified-change {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}
.acadeky-identified-change:hover { text-decoration: underline; }

/* Error por campo (messagesPerField de Keycloak: "contraseña incorrecta") */
.acadeky-field-error {
  font-size: 0.8rem;
  color: #dc2626;
  text-align: center;
}

/* Formulario de contraseña plegado ────────────────────────────────────────────
   Google es el camino principal; la contraseña queda detrás de un <details>,
   que despliega sin JavaScript. */
.acadeky-pass {
  margin-top: 1rem;
}

.acadeky-pass-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0;
  /* Deliberadamente discreto: es la salida secundaria, no compite con Google. */
  font-size: 0.75rem;
  /* 300 existe: Fredoka se carga variable con wght@300..700. */
  font-weight: 300;
  color: var(--obsidian-400);
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.acadeky-pass-toggle:hover { color: var(--obsidian-700); opacity: 1; }

/* El triángulo por defecto: fuera en todos los motores. */
.acadeky-pass-toggle::-webkit-details-marker { display: none; }
.acadeky-pass-toggle::marker { content: ''; }

/* Chevron propio, que rota al abrir. */
.acadeky-pass-toggle::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.acadeky-pass[open] .acadeky-pass-toggle::after {
  transform: translateY(2px) rotate(225deg);
}

/* Foco visible por teclado: el summary es el control. */
.acadeky-pass-toggle:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Plantillas heredadas del tema padre ──────────────────────────────────────
   El tema define `stylesCommon=` vacío: no carga PatternFly. Nuestras hojas
   solo estilizan las plantillas propias (login, login-username,
   login-password, error), pero Keycloak sirve ~41 plantillas mas del padre —
   configurar OTP, olvide mi contrasena, actualizar perfil, terminos,
   confirmaciones — que salian con los controles crudos del navegador.

   Escribir 41 plantillas no es opcion. En vez de eso, se le da estilo a los
   ELEMENTOS que todas usan, dentro de la card. Es genérico a proposito: cubre
   tambien las plantillas que Keycloak agregue en el futuro.

   Solo aplica dentro de .acadeky-card para no pisar nada de las propias, que
   ya traen sus clases. */
.acadeky-card input[type='text'],
.acadeky-card input[type='email'],
.acadeky-card input[type='password'],
.acadeky-card input[type='tel'],
.acadeky-card input[type='number'],
.acadeky-card select,
.acadeky-card textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--obsidian-200);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--obsidian-700);
  background: #fff;
  outline: none;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.acadeky-card input:focus,
.acadeky-card select:focus,
.acadeky-card textarea:focus {
  border-color: var(--brand-400);
}

.acadeky-card input[aria-invalid='true'] {
  border-color: #dc2626;
}

/* El primer botón es la acción principal; los demás, secundarios. Keycloak
   suele poner "Enviar" primero y "Cancelar" después. */
.acadeky-card button,
.acadeky-card input[type='submit'],
.acadeky-card input[type='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--obsidian-800);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.acadeky-card button:hover,
.acadeky-card input[type='submit']:hover {
  background: var(--obsidian-700);
}

.acadeky-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Botón secundario: el que no es submit (típicamente "Cancelar"). */
.acadeky-card button[type='button'],
.acadeky-card input[type='button'],
.acadeky-card button[name='cancel-aia'] {
  background: #fff;
  color: var(--obsidian-700);
  border: 1px solid var(--obsidian-200);
}

.acadeky-card button[type='button']:hover,
.acadeky-card input[type='button']:hover,
.acadeky-card button[name='cancel-aia']:hover {
  background: var(--brand-50);
}

/* Los checkbox y radio no llevan ancho completo. */
.acadeky-card input[type='checkbox'],
.acadeky-card input[type='radio'] {
  width: auto;
  margin: 0 0.5rem 0 0;
  accent-color: var(--brand-600);
}

.acadeky-card label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--obsidian-700);
  margin-bottom: 0.25rem;
  text-align: left;
}

.acadeky-card a {
  color: var(--brand-600);
  text-decoration: underline;
}

.acadeky-card p,
.acadeky-card li {
  font-size: 0.875rem;
  color: var(--obsidian-400);
  text-align: left;
}

/* El QR de configurar OTP y otras imágenes sueltas. */
.acadeky-card img {
  max-width: 100%;
  height: auto;
}

/* Mensajes de Keycloak (kcFeedback*, alertas del padre). */
.acadeky-card [class*='kc-feedback'],
.acadeky-card [class*='pf-v5-c-alert'] {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  text-align: left;
  background: var(--brand-50);
  color: var(--obsidian-700);
}

/* ── Clases de Keycloak mapeadas a las nuestras ───────────────────────────────
   theme.properties apunta kcInputClass, kcButtonClass, etc. a estas clases,
   asi que las ~41 plantillas heredadas del padre las usan sin tocarlas. */

/* Los controles nativos siguen el esquema del SO si no se les dice nada: con
   el sistema en oscuro, los inputs y checkbox salian gris oscuro. */
:root { color-scheme: light; }

.acadeky-group {
  margin-bottom: 0.875rem;
  text-align: left;
}

.acadeky-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--obsidian-700);
}

.acadeky-input-wrap,
.acadeky-label-wrap {
  display: block;
}

/* Botones: fila, no apilados a lo ancho. La mayoría de las plantillas del
   padre traen una acción principal y "Cancelar" al lado. */
.acadeky-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.acadeky-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.acadeky-btn-primary {
  background: var(--obsidian-800);
  color: #fff;
}
.acadeky-btn-primary:hover { background: var(--obsidian-700); }

.acadeky-btn-default {
  background: #fff;
  color: var(--obsidian-700);
  border: 1px solid var(--obsidian-200);
}
.acadeky-btn-default:hover { background: var(--brand-50); }

.acadeky-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* `block` significa ancho completo: pisa el flex:1 de la fila. */
.acadeky-btn-block { width: 100%; }

.acadeky-checkbox {
  width: auto;
  margin: 0 0.5rem 0 0;
  accent-color: var(--brand-600);
  vertical-align: middle;
}

/* Instrucciones numeradas — la pantalla de configurar OTP es la que más las
   usa. Sin esto quedaban con la sangría por defecto del navegador. */
.acadeky-card ol,
.acadeky-card ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--obsidian-700);
}

.acadeky-card li { margin-bottom: 0.375rem; }

/* El QR y cualquier imagen suelta, centrados. */
.acadeky-card ol img,
.acadeky-card p img {
  display: block;
  margin: 1rem auto;
}