body {
  min-height: 100vh;
  background-color: #0619b8 !important;
  /* Azul institucional */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: "Segoe UI", sans-serif;
  /* El fondo de cada marca (16:9) trae el logo en el ~42% superior de la imagen.
     Capa 1: el fondo anclado arriba, con el tamaño de "cover" calculado sobre la ventana
     (max(100vw, 177.78vh)) para no depender del alto de la página.
     Capa 2: la esquina inferior del mismo fondo ampliada, que rellena si la página es más alta que la imagen.
     El fondo se desplaza con el contenido (scroll): con la ventana baja la página hace scroll
     y el logo y la tarjeta conservan su posición relativa, sin que la tarjeta lo tape. */
  background-image: var(--brand-background), var(--brand-background) !important;
  background-size: max(100vw, 177.78vh) auto, 5000% auto !important;
  background-position: center top, left bottom !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  /* La tarjeta inicia debajo del logo: 450/1920 del ancho o 450/1080 del alto del fondo escalado. */
  padding: calc(max(23.5vw, 41.7vh) + 24px) 16px 24px;
}

/* Pantallas verticales: el fondo se escala por ancho para no recortar el logo. */
@media (max-aspect-ratio: 1/1) {
  body {
    background-size: 200% auto, 5000% auto !important;
    padding-top: calc(47vw + 24px);
  }
}

.brand {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.brand img {
  height: 160px !important;
  background-size: contain !important;
}

.login-card {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 320px;
  /* evita que crezca de más */
  padding: 48px 44px;
  /* controla la “sensación” de cuadrado */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}

/* Responsive móvil */
@media (max-width: 576px) {
  .login-card {
    max-width: 92%;
    padding: 32px 24px;
    border-radius: 12px;
  }
}

.login-card p {
  line-height: 1.5;
}

.login-card p:first-child {
  font-size: 1.05rem;
}

.btn-office {
  border: 1px solid #8c8c8c;
  border-radius: 0;
  padding: 7px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #fff;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.btn-office-label {
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 12px;
  font-weight: 600;
  color: #5e5e5e;
  font-family:
    "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  flex-shrink: 1;
  height: 21px;
  line-height: 21px;
  overflow: hidden;
}

/* Hover: se acerca */
.btn-office:hover {
  background-color: #f5f5f5;
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* Click: se presiona levemente */
.btn-office:active {
  transform: scale(0.98);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}