:root{
  --azul:#2b7dcc;
  --amarillo:#f8d347;
  --borde:rgba(255,255,255,.35);
}

html, body { height: 100%; }
body.login-page { background: transparent !important; }

/* ======== FONDO LOGIN: imagen completa + relleno blur ======== */
/* Color base por si la imagen tarda o falla */
#back{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #0f1115;
}

/* La imagen principal SIEMPRE completa (contain) */
#back::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("fondo_login6.jpg"); /* <-- si tu archivo se llama distinto, cámbialo aquí */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;   /* clave: no recorta, muestra todo */
  z-index: 0;
}

/* Relleno desenfocado para cubrir las “bandas” sobrantes */
#back::after{
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.24)), /* overlay suave */
    url("fondo_login6.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% 100%, cover; /* la capa 2 (blur) sí cubre todo */
  filter: blur(18px) brightness(.95);
  transform: scale(1.04);   /* evita bordes del blur */
  z-index: 1;
}




/* Caja del login por encima del fondo y más compacta */
.login-box{
  position: relative; z-index: 1;
  width: min(340px, 92%);
  margin: 7vh auto 0;
}

/* Caja tipo “glass” */
.login-box .login-box-body{
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border: 1px solid var(--borde);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .35s ease both;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Logo y título */
.login-logo img{ max-width: 220px; width: 78%; height:auto; margin: 2px auto 6px; }
.login-box-msg{ font-weight: 800; font-size: 16px; color:#111; margin-bottom: 10px; }

/* Inputs + feedback */
.form-control{
  height: 38px;
  border-radius: 10px;
  border: 1px solid #dfe3ea;
  box-shadow: none;
}
.form-control:focus{
  border-color: var(--azul);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(43,125,204,.12);
}
.has-feedback .form-control-feedback{ top: 8px; color:#9aa4b2; }
.toggle-password{ cursor: pointer; right: 28px !important; }

/* Botón principal amarillo */
.btn-primary-yellow{
  background: linear-gradient(135deg, var(--amarillo), #ffd95a);
  color:#1b1b1b; border:0; border-radius:10px; font-weight:700;
  box-shadow:0 10px 20px rgba(248,211,71,.25);
  padding: 9px 0; font-size: 14px;
}
.btn-primary-yellow:hover{ filter: brightness(.98); }
.btn-primary-yellow:active{ transform: translateY(1px); }

/* Botón recuperar */
#btnRecuperar{
  border-radius:10px;
  background: var(--azul);
  color: #fff;
}

/* Modal header */
#modalRecuperarClavePPFF .modal-header{
  background: var(--azul); color: #fff;
}