.navbar {
        display:none!important;
    }

    body{
        overflow-y:hidden;
        background:#20252B!important;
        color:white!important;
    }

    .card{
        display:none!important;
    }

    .img-login-center {
    height: 80px;
    display: block;
}

.input-container {
      margin: 10px 0;
    }

    input[type="email"],
    input[type="password"] {
      width: 300px;
      padding: 15px;
      border: none;
      border-radius: 15px;
      background-color: #414B57!important;
      color: #fff;
      font-size: 16px;
      outline: none;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }

    input::placeholder {
      color: #ccc;
    }

    form{
        margin-top:80px;
    }

    .image-big {
  width: 100%;
  max-height: 96vh;
  object-fit: contain;
  margin-top:-8%;
  margin-left:-15%;
}

 @media (max-width: 992px) {
        .image-big-container{
            display: none;
        }

        .login-btn-container{
                text-align: center !important;
        }
    }

    /* Reset global */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Tipografía y color base */
body {
    font-family: 'Red Hat Display', sans-serif;
    color: #414851; 
}

/* Imagen general */
img, svg {
    vertical-align: middle;
}

/* Imagen grande del lado derecho */
.image-big {
    width: 100%;
    max-height: 96vh;
    object-fit: contain;
    margin-top: -40px;
    margin-bottom: -60px;
}

/* Bootstrap row (ya viene de Bootstrap, pero si lo quieres forzar) */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.btn-login {
    background-color: #f9c00b; 
    color: #20252B; 
    font-weight: bold;
    width: 100%;        
    max-width: 300px;   
    padding: 12px 15px; 
    border: none;
    border-radius: 15px; 
}

.btn-login:hover {
    background-color: #6a3cff; 
    color: #fff; 
}


/* Contenedor principal del login */
.d-flex.align-items-center.justify-content-center {
    position: relative; 
}

/* Imagen grande detrás del formulario para móviles */
@media (max-width: 992px) {
    .image-big-container {
        display: block; 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .image-big-container .image-big {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.15; 
        margin: 0;
    }

    /* Traer el formulario al frente */
    #login-form {
        position: relative;
        z-index: 1;
        background-color: rgba(32, 37, 43, 0.85); 
        padding: 2rem;
        border-radius: 1rem;
        max-width: 400px;
        width: 90%;
        margin: auto;
        margin-top: 50px;
    }

    /* Inputs al ancho completo */
    input[type="email"],
    input[type="password"] {
        width: 100%;
        max-width: none;
    }

    .login-btn-container {
        text-align: center;
    }
}
.forgot-password-info {
    color: #ccc;       
    font-size: 0.9rem; 
    text-align: center; 
}