/* ===========================================================================
   Login de Bitsideas One
   ---------------------------------------------------------------------------
   Estructura: el fondo ocupa toda la pantalla y la tarjeta flota encima, a la
   derecha; la bienvenida va sobrepuesta a la izquierda.

   El fondo está QUIETO a propósito. Lo único que se mueve en esta pantalla
   son los iconos de los campos, que responden a lo que hace la persona; un
   lienzo en movimiento detrás de un formulario cansa y no aporta nada.

   IMAGEN DE FONDO — pendiente. Hoy el lienzo es un degradado suave. Para
   poner la ilustración definitiva basta con dejar el archivo en
   resources/img/login-bg.png y descomentar el bloque marcado abajo: el velo
   ya está calculado para que el texto sobrepuesto siga legible encima de
   cualquier imagen.

   Paleta tomada de los tokens reales de la suite
   (apps/portal/src/styles/globals.css), no inventada para esta pantalla.
   =========================================================================== */

:root {
  --b1-accent: #0099bc;
  --b1-deep: #00657a;
  --b1-ink: #08202a;
  --b1-ink-soft: #3c575f;
}

/* --- Lienzo -------------------------------------------------------------- */

html.login-pf,
body#keycloak-bg {
  height: 100%;
  background: none !important;
  background-color: #eef7f9 !important;
}
body#keycloak-bg {
  position: relative;
  overflow: hidden;
}

.b1-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.b1-photo {
  position: absolute;
  inset: 0;
  /* La foto va sobre un degradado de marca: si la imagen no cubre por
     proporción, lo que asoma sigue siendo Bitsideas y no un hueco gris. */
  background-color: #eef7f9;
  background-image:
    url("../img/login-bg.jpg"),
    linear-gradient(148deg, #ffffff 0%, #e4f5f9 48%, #cfe9f2 100%);
  background-size: cover, cover;
  /* Encuadre bajado: en una pantalla apaisada la imagen se recorta en
     vertical, y el interés (el equipo trabajando) está en la mitad baja —
     con el centro por defecto se vería sobre todo techo y ventanas. */
  background-position: center 68%, center;
  background-repeat: no-repeat, no-repeat;
}

/* Velo: aclara la mitad izquierda para que la bienvenida en tinta oscura se
   lea sin apagar la foto, y tiñe el conjunto con el teal de marca. */
.b1-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 26%,
      rgba(255, 255, 255, 0.28) 52%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(160deg, rgba(0, 153, 188, 0.1) 0%, rgba(122, 107, 232, 0.12) 100%);
}

/* --- Rejilla ------------------------------------------------------------- */

.pf-v5-c-login {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 !important;
  background: none !important;
  display: block !important;
  max-width: none !important;
}

/* PatternFly define grid-template-areas: "header" "main" y le pone
   grid-area:main a la tarjeta. Sin redefinir las áreas, todo cae en una
   sola columna aunque se cambien las columnas — por eso se declaran aquí. */
/* Bienvenida y tarjeta apiladas en la columna izquierda; la derecha queda
   libre para que se vea la imagen. */
.pf-v5-c-login__container {
  display: grid !important;
  grid-template-columns: minmax(340px, 452px) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  /* La bienvenida cruza las dos columnas para que el título quepa en una
     sola línea; la tarjeta se queda en la primera. Alinean por la
     izquierda porque comparten el mismo sangrado. */
  grid-template-areas:
    "brand brand"
    "card  ." !important;
  align-content: center;
  justify-items: start;
  row-gap: clamp(26px, 4vh, 40px) !important;
  column-gap: clamp(24px, 5vw, 72px) !important;
  width: min(1400px, 100%);
  min-height: 100vh;
  margin: 0 auto !important;
  /* El relleno superior cede en pantallas bajas para que bienvenida +
     tarjeta quepan sin scroll en un portátil de 720p. */
  padding: clamp(84px, 11vh, 116px) clamp(28px, 5vw, 72px) clamp(32px, 6vh, 56px) !important;
  max-width: none !important;
}

/* Marca, arriba a la izquierda. */
#kc-header {
  position: absolute;
  top: clamp(26px, 4vh, 42px);
  left: clamp(28px, 5vw, 72px);
  padding: 0 !important;
  margin: 0 !important;
}
#kc-header-wrapper {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--b1-ink) !important;
  text-transform: none !important;
}
.b1-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* --- Bienvenida ---------------------------------------------------------- */

.b1-brand {
  grid-area: brand;
  width: 100%;
  min-width: 0;
  /* Mismo sangrado horizontal que el contenido de la tarjeta, para que el
     título y "Acceder a tu cuenta" caigan sobre la misma vertical en vez
     de que la bienvenida quede pegada al borde. */
  padding: 0 36px;
  user-select: none;
}
.b1-brand-title {
  margin: 0 0 14px !important;
  font-size: clamp(26px, 2.5vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: var(--b1-ink) !important;
  /* En una sola línea: partido en dos se leía como dos frases. */
  white-space: nowrap;
}
.b1-brand-dot {
  color: var(--b1-accent);
}
.b1-brand-lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--b1-ink-soft);
}

/* --- Tarjeta ------------------------------------------------------------- */

.pf-v5-c-login__main {
  grid-area: card !important;
  position: relative;
  /* flex-column, no block: PatternFly le da anchos propios a las secciones
     internas (header/body/footer) pensados para su contenedor original. En
     flujo de bloque esos anchos se desbordaban del ancho de la tarjeta; como
     ítems flex con align-items:stretch quedan atados al ancho real. */
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow:
    0 30px 60px -28px rgba(8, 32, 42, 0.24),
    0 10px 24px -16px rgba(8, 32, 42, 0.14) !important;
  overflow: hidden;
}

.pf-v5-c-login__main > * {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body {
  background: transparent !important;
}
.pf-v5-c-login__main-header {
  padding: 36px 36px 4px !important;
  border-bottom: none !important;
  text-align: center;
}
.pf-v5-c-login__main-body {
  padding: 12px 36px 34px !important;
}
#kc-page-title {
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--b1-ink) !important;
}

/* --- Campos con icono ---------------------------------------------------- */

.pf-v5-c-form__label-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--b1-ink-soft) !important;
}

/* El icono se inyecta con JS (b1-stage.js) sobre .pf-v5-c-form-control, que
   envuelve solo al input — ver el comentario en b1-stage.js sobre por qué no
   sirve colgarlo del grupo completo. */
.b1-field {
  position: relative;
}
.b1-field-icon {
  position: absolute;
  top: 50%;
  left: 7px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 9px;
  background: #e4f5f9;
  color: var(--b1-accent);
  pointer-events: none;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}
.b1-field-icon svg {
  width: 16px;
  height: 16px;
}
/* Trazo que se dibuja solo al cargar. */
.b1-field-icon svg path,
.b1-field-icon svg rect,
.b1-field-icon svg circle {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: b1-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
@keyframes b1-draw {
  to { stroke-dashoffset: 0; }
}

/* Al enfocar el campo, el icono responde: se tiñe con la marca y salta.
   `.b1-field` es ahora el propio control, así que basta con su :focus-within. */
.b1-field:focus-within .b1-field-icon {
  background: linear-gradient(135deg, var(--b1-accent), var(--b1-deep));
  color: #ffffff;
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 8px 16px -7px rgba(0, 101, 122, 0.85);
}
/* El candado abre el arco cuando el campo está enfocado. */
.b1-lock-shackle {
  transform-origin: 30% 70%;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.b1-field:focus-within .b1-lock-shackle {
  transform: translateY(-1.6px) rotate(-14deg);
}

/* La caja del campo es .pf-v5-c-form-control cuando el campo va solo, y
   .pf-v5-c-input-group cuando lleva botón al lado (contraseña con el ojo).
   Se estilan las dos igual para que ambos campos midan y se vean idénticos:
   antes el de contraseña quedaba como dos cajas pegadas, una de ellas con
   borde propio. */
.pf-v5-c-form-control,
.pf-v5-c-input-group {
  display: flex !important;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(8, 32, 42, 0.11) !important;
  border-radius: 12px !important;
  background: #f6fafc !important;
  color: var(--b1-ink) !important;
  transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease !important;
}
/* Dentro de un grupo la caja la dibuja el grupo: el control se vuelve
   transparente para que se lea como un solo campo. */
.pf-v5-c-input-group .pf-v5-c-form-control {
  flex: 1 1 auto;
  min-height: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pf-v5-c-input-group__item {
  border: none !important;
  background: transparent !important;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  width: 100%;
  min-height: 46px;
  background: transparent !important;
  border: none !important;
  color: var(--b1-ink) !important;
}
/* El anillo de foco lo dibuja la caja, no el input: si no, se ven dos. */
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Sitio para el icono. */
.b1-field > input {
  padding-left: 48px !important;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-input-group::before,
.pf-v5-c-input-group::after {
  /* PatternFly dibuja el subrayado del campo con pseudo-elementos; aquí el
     foco se comunica con el borde completo, así que estorban. */
  border: none !important;
}
.pf-v5-c-form-control:hover,
.pf-v5-c-input-group:hover {
  border-color: rgba(0, 153, 188, 0.4) !important;
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  background: #ffffff !important;
  border-color: var(--b1-accent) !important;
  box-shadow: 0 0 0 4px rgba(0, 153, 188, 0.14) !important;
}
.pf-v5-c-input-group:focus-within .pf-v5-c-form-control {
  background: transparent !important;
  box-shadow: none !important;
}

/* Botón del ojo: parte del campo, no una caja aparte pegada al lado. */
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control {
  margin-right: 5px;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--b1-ink-soft) !important;
  box-shadow: none !important;
  transition: color 150ms ease, background 150ms ease !important;
}
/* La variante "control" de PatternFly dibuja su propio subrayado con un
   pseudo-elemento, igual que los campos. Dentro de nuestro campo eso deja
   una raya oscura bajo el ojo, así que se retira. */
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control::before,
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control::after {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control:focus-visible {
  outline: 2px solid var(--b1-accent);
  outline-offset: -2px;
}
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control:hover {
  color: var(--b1-accent) !important;
  background: rgba(0, 153, 188, 0.09) !important;
}

/* Aire entre campos. */
.pf-v5-c-form__group + .pf-v5-c-form__group {
  margin-top: 16px;
}
.pf-v5-c-form__label {
  margin-bottom: 6px !important;
}
/* "¿Olvidaste tu contraseña?" cuelga del campo con su texto de ayuda y
   quedaba pegado al borde inferior. */
.pf-v5-c-form__helper-text {
  margin-top: 10px !important;
}

/* --- Botón --------------------------------------------------------------- */

.pf-v5-c-button.pf-m-primary,
#kc-login {
  border: none !important;
  border-radius: 12px !important;
  padding-block: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: #ffffff !important;
  background: linear-gradient(112deg, var(--b1-accent), var(--b1-deep)) !important;
  background-size: 180% 100% !important;
  background-position: 0% 50% !important;
  box-shadow: 0 12px 24px -12px rgba(0, 101, 122, 0.85) !important;
  transition:
    background-position 420ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms ease !important;
}
.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(0, 101, 122, 0.95) !important;
}
.pf-v5-c-button.pf-m-primary:active,
#kc-login:active {
  transform: translateY(0);
}
.pf-v5-c-button.pf-m-primary:focus-visible,
#kc-login:focus-visible {
  outline: 3px solid rgba(0, 153, 188, 0.45);
  outline-offset: 2px;
}

.pf-v5-c-login__main-body a,
.pf-v5-c-button.pf-m-link {
  color: var(--b1-deep) !important;
  font-weight: 500;
  transition: color 140ms ease;
}
.pf-v5-c-login__main-body a:hover {
  color: var(--b1-accent) !important;
}

.pf-v5-c-login__footer {
  position: relative;
  z-index: 1;
  color: rgba(8, 32, 42, 0.42) !important;
}

/* --- Adaptación ---------------------------------------------------------- */

@media (max-width: 900px) {
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "card" !important;
    justify-items: stretch;
    row-gap: 26px !important;
    padding-top: 104px !important;
  }
  .b1-brand-lead { max-width: none; }
  .b1-brand-lead br { display: none; }
  .pf-v5-c-login__main { max-width: 452px !important; }
  /* Sin columna libre a la derecha, el velo cubre todo para que la
     bienvenida se siga leyendo encima de la foto. */
  .b1-scrim {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
  }
}

@media (max-width: 560px) {
  .pf-v5-c-login__main-header { padding: 28px 22px 4px !important; }
  .pf-v5-c-login__main-body { padding: 10px 22px 26px !important; }
  /* En móvil el título sí puede partirse: forzarlo a una línea lo dejaría
     ilegible o desbordando la pantalla. */
  .b1-brand-title { font-size: 26px !important; white-space: normal; }
}

/* --- Accesibilidad ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .b1-field-icon svg path,
  .b1-field-icon svg rect,
  .b1-field-icon svg circle {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .b1-field-icon,
  .b1-lock-shackle,
  .pf-v5-c-button.pf-m-primary,
  #kc-login {
    transition: none !important;
  }
}

/* ===========================================================================
   Alta de la verificación en dos pasos (login-config-totp.ftl)
   ---------------------------------------------------------------------------
   EN HORIZONTAL. La primera versión apilaba los tres pasos en vertical y no
   cabía en una ventana de portátil: había que desplazarse para llegar al
   campo del código, lo que esconde el QR justo mientras se está escaneando.
   Tres columnas y el formulario dentro de la tercera: entra completa.

   Los pasos van numerados porque el orden importa de verdad — sin la app el
   QR no sirve, y sin el QR no hay código que escribir. No es adorno.
   =========================================================================== */

/* La tarjeta deja de vivir en la columna estrecha y ocupa el ancho — con
   452px no caben tres columnas. Solo en esta pantalla: se ata a
   `:has(.b1-totp-cols)` para no tocar el login normal, que sí quiere ser
   una tarjeta estrecha a la izquierda. */
body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__container {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "brand"
    "card" !important;
  align-content: center;
  row-gap: clamp(14px, 2.5vh, 22px) !important;
  padding: clamp(74px, 9vh, 96px) clamp(28px, 5vw, 72px) clamp(24px, 4vh, 40px) !important;
}

body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__main {
  width: min(1060px, 100%) !important;
}

/* La bienvenida se recorta aquí: la tarjeta ya lleva su propio título y el
   texto de bienvenida solo robaba el alto que hace falta para que no haya
   scroll. El logo de arriba a la izquierda se queda. */
body#keycloak-bg:has(.b1-totp-cols) .b1-brand-lead {
  display: none;
}
body#keycloak-bg:has(.b1-totp-cols) .b1-brand-title {
  margin-bottom: 0 !important;
  font-size: clamp(22px, 1.9vw, 28px) !important;
}

/* Título a la izquierda, no centrado: con la tarjeta ancha, un título
   centrado sobre tres columnas alineadas a la izquierda queda a la deriva. */
body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__main-header {
  padding: 28px 34px 0 !important;
  text-align: left;
}
body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__main-body {
  padding: 8px 34px 28px !important;
}

.b1-totp-intro {
  margin: 0 0 20px;
  max-width: 78ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--b1-ink-soft);
}

/* --- Las tres columnas --------------------------------------------------- */

.b1-totp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

/* Filetes verticales entre columnas: separan los pasos sin añadir cajas.
   Van como borde de la columna siguiente para no dibujar uno suelto al
   final de la fila. */
.b1-col + .b1-col {
  padding-left: 30px;
  border-left: 1px solid #e4eef2;
}

.b1-col { min-width: 0; }

/* El número, en línea con el título del paso. Antes iba en su propia
   columna de rejilla; con columnas estrechas eso robaba ancho al texto. */
.b1-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--b1-ink);
}

.b1-step-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--b1-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.b1-step-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--b1-ink-soft);
}

/* Las apps compatibles como fichas: son opciones equivalentes entre las que
   elegir una, no una lista que haya que leer entera en orden. */
.b1-apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.b1-app {
  padding: 5px 11px;
  border: 1px solid #cfe3ea;
  border-radius: 999px;
  background: #f4fafc;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--b1-deep);
}

/* --- QR ------------------------------------------------------------------ */

.b1-qr {
  margin: 0 0 10px;
  padding: 12px;
  width: max-content;
  border: 1px solid #dcebf0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(8, 32, 42, 0.06);
}

.b1-qr img {
  display: block;
  /* Se dimensiona con vh además de px: en una ventana baja el QR encoge en
     vez de forzar scroll, y sigue siendo legible para una cámara. */
  width: min(168px, 22vh);
  height: min(168px, 22vh);
  /* El QR de Keycloak viene como PNG pequeño y al escalarlo se emborrona;
     los bordes duros son justo lo que la cámara necesita para leerlo. */
  image-rendering: pixelated;
}

/* La clave manual se transcribe a mano a otro dispositivo: monoespaciada y
   espaciada para no confundir caracteres, y seleccionable de una pasada. */
.b1-secret {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed #bcdae4;
  border-radius: 10px;
  background: #f4fafc;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  word-break: break-all;
  color: var(--b1-ink);
  user-select: all;
}

.b1-totp-params {
  margin: 0 0 12px;
  display: grid;
  gap: 5px;
  font-size: 12.5px;
}
.b1-totp-params div { display: flex; justify-content: space-between; gap: 10px; }
.b1-totp-params dt { color: var(--b1-ink-soft); }
.b1-totp-params dd { margin: 0; font-weight: 600; color: var(--b1-ink); }

.b1-totp-switch {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--b1-accent);
}

/* --- Tercera columna: el formulario -------------------------------------- */

/* Los grupos de campo de PatternFly traen su propio margen inferior pensado
   para un formulario a página completa; aquí sobra alto. */
.b1-col-form .pf-v5-c-form__group {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* El código de seis dígitos: ancho fijo por carácter para que no baile
   mientras se escribe, y grande porque se teclea mirando el teléfono. */
.b1-otp-input {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 19px !important;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
.b1-otp-input::placeholder {
  color: #b6ccd4;
  letter-spacing: 0.3em;
}

.b1-logout-others { margin-bottom: 14px !important; }
.b1-totp-actions { margin-bottom: 0 !important; }

/* --- Adaptación ----------------------------------------------------------- */

/* Por debajo de tres columnas cómodas, dos: el QR y el formulario juntos
   abajo siguen cabiendo sin desplazarse en la mayoría de portátiles. */
@media (max-width: 900px) {
  .b1-totp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b1-col + .b1-col { padding-left: 0; border-left: none; }
  .b1-col:nth-child(2) { padding-left: 26px; border-left: 1px solid #e4eef2; }
  .b1-col-form { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid #e4eef2; }
}

/* En móvil sí se apila y sí hay scroll: es lo correcto ahí — el problema
   era una ventana ancha desperdiciando el ancho, no el apilado en sí. */
@media (max-width: 620px) {
  .b1-totp-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .b1-col:nth-child(2) { padding-left: 0; border-left: none; }
  .b1-col + .b1-col { padding-top: 20px; border-top: 1px solid #e4eef2; }
  body#keycloak-bg:has(.b1-totp-cols) { overflow-y: auto; }
  body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__container {
    align-content: start;
    min-height: 0;
  }
}

/* Los campos de esta columna van SIN el icono decorativo que b1-stage.js
   inyecta en el resto del tema. Ahí tiene sentido (distingue usuario de
   contraseña de un vistazo); aquí no hay nada que distinguir —son los dos
   únicos campos— y en una columna estrecha el icono se comía el ancho del
   propio código, que es lo único que importa leer. */
.b1-col-form .b1-field-icon {
  display: none !important;
}
.b1-col-form .b1-field > input {
  padding-left: 14px !important;
}

/* --- Ajuste fino de alto: que quepa en 720p sin desplazarse -------------- */
/*
   Medido en el navegador a 1280x720: el documento salía 850px de alto, o sea
   130px de más, y el botón «Activar y continuar» caía justo por debajo del
   borde. Los tres recortes de abajo suman esos 130px y no quitan contenido.
*/

/* 1) El grueso venía de aquí: `.pf-v5-c-form` de PatternFly es una rejilla
      con gap de 24px pensada para un formulario a página completa. Cuatro
      huecos = 96px de aire en una columna que ya va justa. */
.b1-col-form.pf-v5-c-form {
  gap: 12px !important;
}

/* 2) La bienvenida se retira entera en esta pantalla. En el login es lo
      primero que se lee; aquí es texto de saludo compitiendo por el alto con
      un trámite que la persona quiere terminar. El logo de arriba a la
      izquierda sigue diciendo dónde está. */
body#keycloak-bg:has(.b1-totp-cols) .b1-brand {
  display: none;
}

/* 3) Sin la bienvenida, el hueco superior reservado para ella sobra. */
body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__container {
  padding-top: clamp(62px, 8vh, 78px) !important;
}

body#keycloak-bg:has(.b1-totp-cols) .b1-totp-intro {
  margin-bottom: 16px;
}

/* Últimos 26px medidos de desbordamiento: venían del relleno inferior del
   contenedor, que en el login separa la tarjeta del borde pero aquí solo
   generaba una barra de desplazamiento para nada. La tarjeta ya trae su
   propio relleno interno. */
body#keycloak-bg:has(.b1-totp-cols) .pf-v5-c-login__container {
  padding-bottom: clamp(10px, 1.6vh, 18px) !important;
}