/* =========================================================
   Keycloak 26+ | Tema Login UES
   CSS-only | Compatible con keycloak.v2
   ========================================================= */

/* -------------------------
   Variables institucionales
   ------------------------- */
:root {
  --ues-gray: rgb(73, 80, 87);
  --ues-red: rgb(100, 0, 12);
  --ues-white: rgb(255, 255, 255);

  --pf-v5-c-button--m-primary--BackgroundColor: rgb(100, 0, 12);
  --pf-v5-c-button--m-primary--BackgroundColor-hover: #7a000f;
  --pf-v5-c-button--m-primary--BackgroundColor-active: #5a000b;

  --pf-v5-c-button--m-primary--Color: rgb(255, 255, 255);
}

/* -------------------------
   Reset suave
   ------------------------- */
html, body {
  height: 100%;
  margin: 0;
}

/* -------------------------
   Fondo institucional
   ------------------------- */
body {
  background-color: var(--ues-gray);
  background-image: url("../img/bg-ues.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* -------------------------
   Ocultar encabezado del reino
   ------------------------- */
#kc-header,
#kc-header-wrapper,
#kc-header-title {
  display: none !important;
}

/* -------------------------
   Tarjeta de login
   ------------------------- */
#kc-content {
  background: rgba(32, 36, 40, 0.92);
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  max-width: 420px;
  width: 100%;
}

/* Centrado vertical */
#kc-content-wrapper {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-left: 4rem;
}

/* -------------------------
   Logo institucional (CSS-only)
   ------------------------- */
#kc-page-title {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
}

/* Ocultamos texto pero dejamos nodo */
#kc-page-title span {
  display: none;
}

/* Logo */
#kc-page-title::before {
  content: "";
  display: block;
  width: 180px;
  height: 90px;
  margin: 0 auto 1rem auto;
  background-image: url("../img/logo-ues.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* -------------------------
   Campos de formulario
   ------------------------- */
.kc-input,
input[type="text"],
input[type="password"],
input[type="email"] {
  background-color: #1f2327;
  border: 1px solid #444;
  color: var(--ues-white);
  border-radius: 6px;
}

input::placeholder {
  color: #bbb;
}

input:focus {
  border-color: var(--ues-red);
  box-shadow: 0 0 0 1px var(--ues-red);
}

/* -------------------------
   Botón principal
   ------------------------- */
input[type="submit"],
button[type="submit"] {
  background-color: var(--ues-red);
  color: var(--ues-white);
  border: none;
  border-radius: 6px;
  padding: 0.7rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: rgb(120, 0, 16);
}

/* -------------------------
   Enlaces
   ------------------------- */
a {
  color: var(--ues-white);
}

a:hover {
  color: var(--ues-red);
}

/* -------------------------
   Mensajes de error
   ------------------------- */
.kc-feedback-text,
.kc-feedback-text.error {
  color: #ffb3b3;
}

/* -------------------------
   Selector de idioma
   ------------------------- */
#kc-locale {
  margin-bottom: 1rem;
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 1024px) {
  body {
    background-position: center top;
    background-size: 80%;
  }

  #kc-content-wrapper {
    justify-content: center;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  #kc-content {
    padding: 2rem 1.5rem;
  }

  #kc-page-title::before {
    width: 140px;
    height: 70px;
  }
}


.pf-v5-c-login__container {
  grid-template-columns: 1fr !important;
  justify-items: center;
}



/* Light mode */
html.pf-v5-theme-light {
  --pf-v5-global--primary-color--100: rgb(100, 0, 12);
  --pf-v5-global--primary-color--200: #7a000f;
  --pf-v5-global--primary-color--300: #5a000b;
}

/* Dark mode */
html.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: rgb(100, 0, 12);
  --pf-v5-global--primary-color--200: #7a000f;
  --pf-v5-global--primary-color--300: #5a000b;

  --pf-v5-global--Color--100: rgb(255, 255, 255);
  --pf-v5-global--BorderColor--100: rgba(255, 255, 255, 0.35);
  --pf-v5-c-button--m-secondary--BackgroundColor-hover: rgba(255, 255, 255, 0.12);
  --pf-v5-c-button--m-secondary--BackgroundColor-active: rgba(255, 255, 255, 0.2);
}


.pf-v5-c-login {

  /* PRIMARY */
  --pf-v5-c-button--m-primary--BackgroundColor: rgb(100, 0, 12);
  --pf-v5-c-button--m-primary--BackgroundColor-hover: #7a000f;
  --pf-v5-c-button--m-primary--BackgroundColor-active: #5a000b;
  --pf-v5-c-button--m-primary--Color: rgb(255, 255, 255);

  /* SECONDARY */
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--BackgroundColor-hover: rgba(100, 0, 12, 0.15);
  --pf-v5-c-button--m-secondary--BackgroundColor-active: rgba(100, 0, 12, 0.25);

  --pf-v5-c-button--m-secondary--Color: rgb(255, 255, 255);
  --pf-v5-c-button--m-secondary--after--BorderColor: rgba(255, 255, 255, 0.4);
}


.pf-v5-c-login
.pf-v5-c-button.pf-m-secondary {
  color: rgb(255, 255, 255) !important;
}

/* Hover */
.pf-v5-c-login
.pf-v5-c-button.pf-m-secondary:hover {
  background-color: rgba(100, 0, 12, 0.15) !important;
  color: rgb(255, 255, 255) !important;
}

/* Active */
.pf-v5-c-login
.pf-v5-c-button.pf-m-secondary:active {
  background-color: rgba(100, 0, 12, 0.25) !important;
}