/* ===========================================================================
 * Foreman UEA — identidad institucional en la pantalla de acceso
 *
 * Se INYECTA desde el proxy central (172.16.1.77); no se instala dentro de
 * Foreman. Esa decisión es deliberada:
 *
 *   - sobrevive a cualquier actualización de Foreman, porque no toca su código
 *     ni sus assets, cuyo nombre lleva una huella que cambia en cada versión;
 *   - no interfiere con foreman-installer, que reconfigura la instancia entera
 *     y descartaría cualquier retoque hecho por dentro;
 *   - se revierte quitando un bloque del virtual host.
 *
 * Paleta institucional, la misma del portal VDI y del portal Quipux, para que
 * los tres se reconozcan como la misma universidad.
 *
 * Selectores: Foreman 3.11 usa el patrón clásico login-pf de PatternFly.
 * Verificados sobre el DOM real el 2026-08-16.
 * ======================================================================== */

:root {
  --uea-azul: #2d4a6f;
  --uea-azul-oscuro: #1e3a5f;
  --uea-azul-profundo: #162d49;
  --uea-acento: #ff9800;

  /* Superficies y texto en tema claro. */
  --uea-tarjeta: #ffffff;
  --uea-texto: #1f2933;
  --uea-texto-suave: #52606d;
  --uea-borde: #d7dde3;
}

/* ---------------------------------------------------------------------------
 * Fondo: fotografía del campus bajo un velo azul institucional.
 *
 * El velo va del 62 % al 88 %: por debajo, el texto blanco pierde contraste
 * sobre las zonas claras de la fotografía; por encima, la imagen desaparece y
 * el fondo queda como un rectángulo liso.
 * ------------------------------------------------------------------------ */
/* `login-pf` no es el body: es un DIV que envuelve la página, y dentro va
 * `login-pf-page`, más corta que la ventana. Vestir solo esta última deja al
 * descubierto una franja inferior con el degradado original del producto.
 * Por eso el fondo va en el contenedor, que sí ocupa todo el alto, y la página
 * interior se vuelve transparente para no pintar la imagen dos veces.
 *
 * El color de respaldo cubre el instante previo a que cargue la fotografía y
 * cualquier zona que quedara descubierta: nunca debe asomar el blanco. */
body,
body.login-pf,
div.login-pf {
  background-color: var(--uea-azul-profundo) !important;
}

body.login-pf,
div.login-pf {
  background-image:
    linear-gradient(
      160deg,
      rgba(30, 58, 95, 0.62) 0%,
      rgba(22, 45, 73, 0.88) 100%
    ),
    url('/branding-uea/fondo-uea.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

.login-pf-page {
  background: transparent !important;
  min-height: 100vh !important;
}

/* ---------------------------------------------------------------------------
 * Logotipo: sustituye el casco de Foreman por la marca institucional.
 *
 * Se usa la versión apaisada porque el hueco del encabezado lo es. El logotipo
 * institucional es oscuro y aquí va sobre fondo azul, así que se pasa a blanco
 * con brightness(0) invert(1): conserva los trazos finos y lleva el contraste
 * muy por encima del mínimo exigible.
 * ------------------------------------------------------------------------ */
.login-pf-brand {
  content: url('/branding-uea/logo-apaisado-uea.png') !important;
  width: auto !important;
  max-width: 340px !important;
  max-height: 96px !important;
  height: auto !important;
  margin: 0 auto 0.25rem !important;
  filter: brightness(0) invert(1);
}

/* Rótulo institucional bajo la marca. */
.login-pf-page-header::after {
  content: 'Universidad Estatal Amazónica';
  display: block;
  text-align: center;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.35rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* «Bienvenido» */
.login-pf-page-header h1,
.login-pf-header h1 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
 * Tarjeta del formulario: un filete institucional arriba la ancla a la marca
 * sin ensuciar el interior, que debe seguir siendo blanco y legible.
 * ------------------------------------------------------------------------ */
.card-pf {
  background: var(--uea-tarjeta) !important;
  border: 1px solid var(--uea-borde) !important;
  border-top: 4px solid var(--uea-acento) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

.card-pf .login-pf-header h1,
.card-pf h1 {
  color: var(--uea-texto) !important;
  text-shadow: none !important;
}

/* Campos: el foco se marca con el acento institucional, visible para quien
 * navega con teclado. */
.login_card_input,
.card-pf .form-control {
  border: 1px solid var(--uea-borde) !important;
  border-radius: 4px !important;
  color: var(--uea-texto) !important;
  background: #ffffff !important;
}

.login_card_input:focus,
.card-pf .form-control:focus {
  border-color: var(--uea-azul) !important;
  outline: 2px solid var(--uea-acento) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

.card-pf .form-control::placeholder {
  color: var(--uea-texto-suave) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Botón de acceso. Blanco sobre el azul institucional supera holgadamente el
 * contraste mínimo AA para texto normal.
 * ------------------------------------------------------------------------ */
.login-pf-submit-button,
.card-pf .btn-primary {
  background: var(--uea-azul) !important;
  border: 1px solid var(--uea-azul-oscuro) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease-in-out;
}

.login-pf-submit-button:hover,
.card-pf .btn-primary:hover {
  background: var(--uea-azul-oscuro) !important;
}

.login-pf-submit-button:focus-visible,
.card-pf .btn-primary:focus-visible {
  outline: 3px solid var(--uea-acento) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
 * Mensaje de error. Se conserva el rojo de aviso, que no debe teñirse de
 * institucional porque su función es alertar.
 *
 * Foreman anida DOS elementos con la misma clase: el externo es un contenedor
 * permanente, con min-height en línea y un ReactCollapse dentro; el interno es
 * el que recibe el texto cuando hay algo que decir. Estilizar el externo deja
 * una barra roja fija sobre el formulario —una alerta que nadie disparó—, y
 * `:empty` no la retira porque el contenedor sí tiene hijos.
 *
 * Por eso el borde se aplica solo al interno y solo cuando lleva contenido.
 * ------------------------------------------------------------------------ */
.login-form-error {
  border-left: 0 !important;
}

.ReactCollapse--content .login-form-error:not(:empty) {
  border-left: 3px solid #c9190b !important;
  padding-left: 0.6rem;
}

/* ---------------------------------------------------------------------------
 * Pie: la versión de Foreman y los enlaces, legibles sobre el fondo oscuro.
 * ------------------------------------------------------------------------ */
.login-pf-page-footer,
.login-pf-caption {
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.login-pf-page-footer-link,
.login-pf-page-footer a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Tema oscuro del sistema operativo del visitante.
 *
 * El fondo ya es oscuro en ambos temas, así que aquí solo se adapta la tarjeta,
 * que es la única superficie clara. Se invierte el par: superficie oscura con
 * texto claro, manteniendo el contraste en el mismo orden de magnitud.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --uea-tarjeta: #1b2733;
    --uea-texto: #e8eef4;
    --uea-texto-suave: #9fb0c0;
    --uea-borde: #2f4152;
  }

  /* border-color a secas alcanzaría también el borde superior y borraría el
   * filete institucional, que es lo único que ancla la tarjeta a la marca. */
  .card-pf {
    background: var(--uea-tarjeta) !important;
    border-color: var(--uea-borde) !important;
    border-top-color: var(--uea-acento) !important;
  }

  .card-pf .login-pf-header h1,
  .card-pf h1 {
    color: var(--uea-texto) !important;
  }

  .login_card_input,
  .card-pf .form-control {
    background: #223142 !important;
    color: var(--uea-texto) !important;
    border-color: var(--uea-borde) !important;
  }

  .card-pf .form-control::placeholder {
    color: var(--uea-texto-suave) !important;
  }

  /* En tema oscuro el azul institucional pierde separación contra la tarjeta,
   * así que el botón sube a un tono más claro para conservar el contraste. */
  .login-pf-submit-button,
  .card-pf .btn-primary {
    background: #3f6698 !important;
    border-color: #557dae !important;
  }

  .login-pf-submit-button:hover,
  .card-pf .btn-primary:hover {
    background: #4d76aa !important;
  }
}

/* ---------------------------------------------------------------------------
 * Móvil. La pantalla de acceso debe caber sin desplazamiento horizontal.
 * ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .login-pf-brand {
    max-width: 78vw !important;
    max-height: 74px !important;
  }

  .login-pf-page-header::after {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .card-pf {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  /* El fondo fijo provoca saltos al aparecer el teclado en móvil. */
  body.login-pf,
  div.login-pf {
    background-attachment: scroll !important;
  }
}

/* Quien haya pedido menos movimiento no debe recibir transiciones. */
@media (prefers-reduced-motion: reduce) {
  .login-pf-submit-button,
  .card-pf .btn-primary {
    transition: none !important;
  }
}