/* H Package — custom styles layered on top of Bootstrap */

body {
    min-height: 100vh;
}

.navbar-brand i {
    color: #ffc107;
}

.navbar-brand img {
    display: block;
}

/* ===== Login / portada ===== */
.login-page {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: center;
}

.login-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(13, 42, 92, 0.45);
}

/* Panel de marca: degradado + cuadrícula de puntos + halos */
.login-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.2px) 0 0 / 20px 20px,
        linear-gradient(150deg, #1b3fae 0%, #0d6efd 55%, #0a58ca 100%);
}

.login-hero::before,
.login-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-hero::before {
    width: 240px;
    height: 240px;
    top: -70px;
    right: -60px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
}

.login-hero::after {
    width: 280px;
    height: 280px;
    bottom: -100px;
    left: -80px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.28), transparent 70%);
}

.login-hero > * {
    position: relative;
    z-index: 1;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.97rem;
}

.login-feature .ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1.05rem;
}

/* Lado del formulario */
.login-form {
    padding: 2.5rem;
}

.login-form .input-group-text {
    background: #fff;
    border-right: 0;
    color: #9aa4b2;
}

.login-form .form-control {
    border-left: 0;
}

.login-form .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.login-form .input-group:focus-within {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.btn-brand {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem;
    box-shadow: 0 10px 22px -10px rgba(13, 110, 253, 0.8);
    transition: transform 0.08s ease, box-shadow 0.2s ease;
}

.btn-brand:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(13, 110, 253, 0.9);
}

@media (max-width: 991.98px) {
    .login-form {
        padding: 1.75rem;
    }
}

.card {
    border-radius: 0.5rem;
}

.display-6 {
    font-weight: 600;
}

main.container-fluid {
    max-width: 1400px;
}

/* Tighten stat cards a little on small screens */
@media (max-width: 575.98px) {
    .display-6 {
        font-size: 1.6rem;
    }
}