/*
 * Cuenta Huayca: las pantallas de Keycloak con la misma familia que la landing,
 * las pantallas de cuenta de Quintral (frontend/src/index.css, "Pantallas de
 * cuenta") y el login de Catedras: campo azul con el degrade de la landing, la
 * marca (sello, "/huayca", bajada), una tarjeta blanca de 400px y la franja
 * institucional al pie (template.ftl).
 *
 * Va despues de css/login.css del tema clasico, que trae fondo con imagen,
 * mayusculas en el encabezado y otros margenes: varias reglas le ganan con
 * !important a proposito.
 */
:root {
  --hy-azul: #2563eb; --hy-azul-fuerte: #1d4ed8; --hy-azul-suave: #eff6ff;
  --hy-texto: #0f172a; --hy-texto-2: #334155; --hy-tenue: #64748b;
  --hy-borde: #cbd5e1; --hy-borde-suave: #e2e8f0;
  --hy-peligro: #b91c1c; --hy-peligro-suave: #fef2f2; --hy-peligro-borde: #fecaca;
  --hy-ok: #166534; --hy-ok-suave: #f0fdf4; --hy-ok-borde: #bbf7d0;
  --hy-radio: 16px; --hy-radio-campo: 10px;
  --hy-sombra: 0 1px 2px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.12);
  --hy-fuente: system-ui, -apple-system, "Segoe UI", Ubuntu, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Pagina: campo azul arriba, franja blanca al pie ---------- */
html.login-pf, .login-pf body { background: var(--hy-azul) !important; background-image: none !important; }
.login-pf body {
  min-height: 100vh; min-height: 100dvh; margin: 0;
  display: flex; flex-direction: column;
  font: 16px/1.5 var(--hy-fuente); color: var(--hy-texto);
  -webkit-font-smoothing: antialiased;
}
.login-pf-page {
  flex: 1; box-sizing: border-box; padding: 48px 16px 56px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(30,58,138,.55), transparent 60%),
    var(--hy-azul);
}

/* ---------- La marca ---------- */
.login-pf-page .login-pf-page-header, #kc-header { margin: 0 0 28px !important; padding: 0 !important; width: auto; }
#kc-header-wrapper.hy-marca {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 0 !important; color: #fff; text-align: left;
  font-size: inherit !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.1 !important;
  white-space: normal;
}
.hy-sello { width: clamp(68px, 9vw, 88px); height: auto; flex: none; }
.hy-nombre { font-size: clamp(34px, 5.5vw, 46px); font-weight: 500 !important; letter-spacing: .2px; line-height: 1.02; color: #fff; }
.hy-bajada { margin-top: 6px; font-size: clamp(15px, 2vw, 17px); font-weight: 400 !important; color: rgba(255,255,255,.88); }

/* ---------- La tarjeta ---------- */
.login-pf-page .card-pf {
  width: 100%; max-width: 400px !important; box-sizing: border-box; margin: 0 !important;
  padding: 28px 28px 24px !important;
  background: #fff; color: var(--hy-texto);
  border: 0 !important; border-radius: var(--hy-radio); box-shadow: var(--hy-sombra);
}
.login-pf-page .login-pf-header { margin: 0 0 18px !important; padding: 0; border: 0; }
#kc-page-title { margin: 0 !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--hy-texto); text-align: left; }
.hy-destino { margin: -16px 0 18px; font-size: 15px; color: var(--hy-tenue); }

/* ---------- Avisos ---------- */
.hy-alerta, .login-pf-page .alert-error, .login-pf-page .alert-warning,
.login-pf-page .alert-success, .login-pf-page .alert-info {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 18px !important; padding: 10px 12px !important;
  font-size: 15px; line-height: 1.45; border-radius: var(--hy-radio-campo) !important; box-shadow: none !important;
}
.hy-alerta-error, .login-pf-page .alert-error, .login-pf-page .alert-warning {
  color: var(--hy-peligro) !important; background: var(--hy-peligro-suave) !important; border: 1px solid var(--hy-peligro-borde) !important;
}
.login-pf-page .alert-success, .login-pf-page .alert-info {
  color: var(--hy-ok) !important; background: var(--hy-ok-suave) !important; border: 1px solid var(--hy-ok-borde) !important;
}
.login-pf-page .pf-c-alert__icon { display: none; }
.login-pf-page .pf-c-alert__title { margin: 0; font-size: inherit; font-weight: 500; color: inherit; }

/* ---------- Campos ---------- */
.card-pf .pf-c-form__group, .card-pf .form-group { margin: 0 0 16px !important; }
.card-pf .pf-c-form__label, .card-pf label { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--hy-texto); }
.hy-etiqueta-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.hy-etiqueta-fila label { margin: 0 !important; }
.hy-olvido { font-size: 14px; font-weight: 500; color: var(--hy-azul-fuerte) !important; text-decoration: none; white-space: nowrap; }
.hy-olvido:hover { text-decoration: underline; text-underline-offset: 3px; }

.card-pf .pf-c-form-control {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--hy-texto);
  background: #fff; border: 1px solid var(--hy-borde) !important; border-radius: var(--hy-radio-campo) !important;
  box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.card-pf .pf-c-form-control::after { display: none; }
.card-pf .pf-c-form-control:hover { border-color: #94a3b8 !important; }
.card-pf .pf-c-form-control:focus {
  outline: none; border-color: var(--hy-azul) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.22) !important;
}
.card-pf .pf-c-form-control[aria-invalid="true"] { border-color: #f87171 !important; }

/* El ojo de la contrasena, dentro del campo */
.card-pf .pf-c-input-group { position: relative; display: block; }
.card-pf .pf-c-input-group .pf-c-form-control { padding-right: 48px; }
.card-pf .pf-c-input-group .pf-c-button {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; min-height: 0;
  display: grid; place-items: center; padding: 0;
  color: var(--hy-tenue); background: transparent !important;
  border: 0 !important; border-radius: 0 var(--hy-radio-campo) var(--hy-radio-campo) 0 !important;
}
.card-pf .pf-c-input-group .pf-c-button::after { display: none; }
.card-pf .pf-c-input-group .pf-c-button:hover { color: var(--hy-texto); }
.card-pf .pf-c-input-group .pf-c-button:focus-visible { outline: 2px solid var(--hy-azul); outline-offset: -2px; }

/* Recordarme */
/* PatternFly 3 le pone a la casilla position absolute y margen negativo */
#kc-form-options .checkbox, #kc-passwd-update-form .checkbox { margin: 0; padding: 0; }
#kc-form-options .checkbox label, #kc-passwd-update-form .checkbox label {
  display: inline-flex !important; align-items: center; gap: 8px; margin: 0; padding: 0 !important;
  font-size: 14px; font-weight: 400; color: var(--hy-texto-2); cursor: pointer;
}
#kc-form-options input[type=checkbox], #kc-passwd-update-form input[type=checkbox] {
  position: static !important; flex: none; width: 16px; height: 16px; margin: 0 !important; accent-color: var(--hy-azul);
}

/* ---------- Botones ---------- */
#kc-form-buttons { margin: 20px 0 0 !important; }
.card-pf .pf-c-button.pf-m-primary, .card-pf a.hy-boton {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%;
  min-height: 46px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 600;
  color: #fff !important; background: var(--hy-azul) !important;
  border: 0 !important; border-radius: var(--hy-radio-campo) !important; box-shadow: none !important;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease;
}
.card-pf .pf-c-button.pf-m-primary:hover, .card-pf a.hy-boton:hover { background: var(--hy-azul-fuerte) !important; }
.card-pf .pf-c-button.pf-m-primary:focus-visible, .card-pf a.hy-boton:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.card-pf .pf-c-button.pf-m-primary::after { display: none; }

/* ---------- Debajo del boton ---------- */
/* El clasico le pone padding-bottom: 200px y margin-bottom: -200px a #kc-info */
#kc-info, .login-pf-page #kc-info { padding: 0 !important; margin: 18px 0 0 !important; background: none; border: 0 !important; box-shadow: none; }
#kc-info-wrapper { padding: 0 !important; background: none; border: 0 !important; }
.hy-primera { margin: 0; text-align: center; font-size: 15px; color: var(--hy-tenue); }
.hy-primera a { font-weight: 600; color: var(--hy-azul-fuerte); text-decoration: none; }
.hy-primera a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pantallas de aviso (info.ftl) y de definir la contrasena */
#kc-info-message .instruction { margin: 0 0 20px; font-size: 15px; color: var(--hy-texto-2); }
.hy-intro { margin: 0 0 20px; font-size: 15px; color: var(--hy-texto-2); }

/* ---------- Franja institucional (la de la landing y Catedras) ---------- */
.hy-pie { background: #fff; color: var(--hy-tenue); font-size: 13px; line-height: 1.5; }
.hy-pie-col {
  max-width: 1040px; margin: 0 auto; padding: 24px 32px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.hy-pie p { margin: 0; }
.hy-pie strong { color: var(--hy-texto-2); font-weight: 600; }
.hy-pie-inst { display: flex; align-items: center; gap: 16px; }
.hy-pie-inst img { display: block; height: 56px; width: auto; }
.hy-pie-inst p { padding-left: 16px; border-left: 1px solid var(--hy-borde-suave); }
.hy-pie-app { max-width: 380px; text-align: right; }

/* ---------- Celular ---------- */
@media (max-width: 560px) {
  .login-pf-page { justify-content: flex-start; padding: 32px 16px 40px !important; }
  #kc-header-wrapper.hy-marca { flex-direction: column; gap: 10px; text-align: center; }
  .login-pf-page .card-pf { padding: 22px 20px 20px !important; }
  .hy-pie-col { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
  .hy-pie-app { text-align: left; }
  .hy-pie-inst img { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-pf .pf-c-form-control, .card-pf .pf-c-button.pf-m-primary { transition: none; }
}