/* Marca Gipuzkoa sobre el CSS base Keycloak (keycloak-login.css) */

:root {
  --hodeian-primary: #005aad;
  --hodeian-primary-dark: #004996;
  --hodeian-primary-light: #e8f1fa;
  --hodeian-bg: #ffffff;
  --hodeian-text: #2b2f33;
  --hodeian-muted: #5c6570;
}

.login-pf {
  background: none;
}

.login-pf body {
  background: var(--hodeian-bg) !important;
  background-image: none !important;
  color: var(--hodeian-text);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Logo en #kc-header-wrapper (mismo sitio que el branding Keycloak) */
#kc-header {
  color: var(--hodeian-text);
}

#kc-header-wrapper {
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* Mismas medidas que div.kc-logo-text del tema Keycloak */
  height: 63px;
  width: 300px;
  max-width: 90vw;
  margin: 0 auto;
  padding: 62px 10px 20px;
  box-sizing: content-box;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: transparent !important;
}

div.kc-logo-text {
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 63px;
  width: 300px;
  margin: 0 auto;
}

/* Asegurar proporciones naturales de la caja (por si algún estilo las altera) */
.card-pf {
  max-width: 500px;
  margin: 0 auto;
  border-top-color: var(--hodeian-primary);
  border-color: var(--hodeian-primary);
}

h1#kc-page-title {
  color: var(--hodeian-text);
}

.login-pf a,
#kc-form-options a,
#kc-registration span a {
  color: var(--hodeian-primary);
}

.login-pf a:hover {
  color: var(--hodeian-primary-dark);
}

.login-pf-page .btn-primary,
.pf-c-button.pf-m-primary {
  background-color: var(--hodeian-primary);
  background-image: none;
  border-color: var(--hodeian-primary);
  color: #ffffff;
}

.login-pf-page .btn-primary:hover,
.login-pf-page .btn-primary:focus,
.login-pf-page .btn-primary:active,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus {
  background-color: var(--hodeian-primary-dark);
  border-color: var(--hodeian-primary-dark);
  color: #ffffff;
}

.pf-c-form-control:focus {
  border-color: var(--hodeian-primary);
  box-shadow: 0 0 0 2px var(--hodeian-primary-light);
}

#kc-info-wrapper {
  background: transparent;
  color: var(--hodeian-muted);
}

@media (max-width: 767px) {
  #kc-header-wrapper {
    width: 200px;
    height: 42px;
    padding: 20px 10px 15px;
  }
}