:root {

        --rojo: #b30000;
        --rojo2: #e00000;
        --rojo3: #8b0000;
        --blanco: #ffffff;
        --gris: #f4f6f9;
        --gris-texto: #6b7280;
        --oscuro: #111827;
        --borde: #e5e7eb;

        --sombra:
            0 20px 45px rgba(0, 0, 0, .18);
    }


    * {

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        font-family: 'Poppins', sans-serif;
    }


    html,
    body {

        width: 100%;
        height: 100%;

        overflow: hidden;
    }


    body {

        background: #f4f4f4;
    }


    /* =====================================================
           CONTENEDOR
        ===================================================== */

    .login-wrapper {

        width: 100%;
        height: 100vh;

        display: flex;

        overflow: hidden;
    }


    /* =====================================================
           PANEL IZQUIERDO
        ===================================================== */

    .left-panel {

        width: 50%;
        height: 100vh;

        position: relative;

        background:
            linear-gradient(rgba(10, 15, 25, .62),
                rgba(10, 15, 25, .72)),
            url('../../public/img/fondo.jpg') center center / cover no-repeat;

        color: white;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 28px 34px;

        overflow: hidden;
    }


    .left-panel::before {

        content: "";

        position: absolute;

        top: -60px;
        right: -80px;

        width: 220px;
        height: 220px;

        background:
            radial-gradient(circle,
                rgba(255, 0, 0, .30),
                transparent 70%);

        border-radius: 50%;
    }


    .left-panel::after {

        content: "";

        position: absolute;

        bottom: -60px;
        left: -60px;

        width: 200px;
        height: 200px;

        background:
            radial-gradient(circle,
                rgba(255, 255, 255, .12),
                transparent 70%);

        border-radius: 50%;
    }


    .left-content {

        position: relative;

        z-index: 2;

        width: 100%;

        max-width: 560px;
    }


    /* =====================================================
           MARCA
        ===================================================== */

    .brand-top {

        display: flex;

        align-items: center;

        gap: 12px;

        margin-bottom: 18px;
    }


    .brand-top img {

        width: 58px;
        height: 58px;

        border-radius: 50%;

        background: #fff;

        padding: 4px;

        object-fit: cover;
    }


    .brand-text h2 {

        margin: 0;

        font-size: 30px;

        font-weight: 800;
    }


    .brand-text p {

        margin: 2px 0 0;

        font-size: 13px;

        opacity: .9;
    }


    /* =====================================================
           HERO
        ===================================================== */

    .hero-title {

        font-size: 48px;

        line-height: 1.05;

        font-weight: 800;

        margin-bottom: 14px;
    }


    .hero-title span {

        color: #ff5a5a;
    }


    .hero-desc {

        font-size: 15px;

        line-height: 1.7;

        color:
            rgba(255, 255, 255, .92);

        margin-bottom: 20px;

        max-width: 95%;
    }


    /* =====================================================
           FEATURES
        ===================================================== */

    .feature-list {

        display: flex;

        flex-direction: column;

        gap: 14px;
    }


    .feature-item {

        display: flex;

        align-items: center;

        gap: 14px;

        background:
            rgba(255, 255, 255, .10);

        border:
            1px solid rgba(255, 255, 255, .10);

        padding: 14px 16px;

        border-radius: 18px;

        backdrop-filter: blur(8px);
    }


    .feature-icon {

        min-width: 48px;

        width: 48px;
        height: 48px;

        border-radius: 14px;

        display: flex;

        align-items: center;
        justify-content: center;

        background:
            rgba(255, 255, 255, .14);

        font-size: 18px;

        color: #fff;
    }


    .feature-item h6 {

        margin: 0;

        font-size: 16px;

        font-weight: 700;
    }


    .feature-item p {

        margin: 3px 0 0;

        font-size: 13px;

        color:
            rgba(255, 255, 255, .85);

        line-height: 1.4;
    }


    /* =====================================================
           PANEL DERECHO
        ===================================================== */

    .right-panel {

        width: 50%;
        height: 100vh;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 20px;

        background:

            radial-gradient(circle at top right,
                rgba(179, 0, 0, .08),
                transparent 35%),

            radial-gradient(circle at bottom left,
                rgba(179, 0, 0, .08),
                transparent 30%),

            #f8fafc;

        overflow: hidden;
    }


    /* =====================================================
           LOGIN CARD
        ===================================================== */

    .login-card {

        width: 100%;

        max-width: 500px;

        background:
            rgba(255, 255, 255, .96);

        border-radius: 26px;

        box-shadow:
            var(--sombra);

        padding:
            26px 34px 24px;

        position: relative;
    }


    .login-card::before {

        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        height: 6px;

        border-radius:
            26px 26px 0 0;

        background:
            linear-gradient(90deg,
                var(--rojo3),
                var(--rojo2));
    }


    /* =====================================================
           LOGO
        ===================================================== */

    .logo-login {

        text-align: center;

        margin-bottom: 10px;
    }


    .logo-login img {

        width: 78px;
        height: 78px;

        object-fit: cover;

        border-radius: 50%;

        background: #fff;

        padding: 5px;

        box-shadow:
            0 8px 20px rgba(179, 0, 0, .12);
    }


    .titulo {

        text-align: center;

        font-size: 34px;

        font-weight: 800;

        color: var(--rojo3);

        margin:
            8px 0 2px;
    }


    .subtitulo {

        text-align: center;

        color: var(--gris-texto);

        font-size: 15px;

        margin-bottom: 14px;
    }


    .linea {

        width: 70px;

        height: 4px;

        background:
            linear-gradient(90deg,
                var(--rojo3),
                var(--rojo2));

        margin:
            0 auto 20px;

        border-radius: 10px;
    }


    /* =====================================================
           ERROR
        ===================================================== */

    .alert {

        border: none;

        border-radius: 14px;

        font-size: 14px;

        margin-bottom: 16px;

        padding: 12px 14px;
    }


    /* =====================================================
           FORMULARIO
        ===================================================== */

    .form-label {

        font-weight: 600;

        margin-bottom: 8px;

        color: #222;

        font-size: 15px;
    }


    .input-group {

        margin-bottom: 16px;

        border-radius: 16px;

        overflow: hidden;
    }


    .input-group-text {

        width: 56px;

        border: none;

        background:
            linear-gradient(135deg,
                var(--rojo3),
                var(--rojo2));

        color: #fff;

        justify-content: center;

        font-size: 18px;
    }


    .form-control {

        border:
            1px solid var(--borde);

        border-left: none;

        height: 56px;

        font-size: 15px;

        box-shadow: none !important;
    }


    .form-control:focus {

        border-color: #f0c8c8;
    }


    /* =====================================================
           PASSWORD
        ===================================================== */

    .password-group {

        position: relative;
    }


    .toggle-password {

        position: absolute;

        right: 16px;

        top: 50%;

        transform:
            translateY(-50%);

        border: none;

        background: none;

        color: #888;

        z-index: 10;

        font-size: 18px;

        cursor: pointer;
    }


    /* =====================================================
           OPCIONES
        ===================================================== */

    .extra-options {

        display: flex;

        justify-content:
            space-between;

        align-items: center;

        margin:
            4px 0 18px;

        gap: 10px;

        flex-wrap: wrap;
    }


    .form-check-label {

        font-size: 14px;

        color: #4b5563;
    }


    .forgot-link {

        color: var(--rojo2);

        font-size: 14px;

        text-decoration: none;

        font-weight: 600;
    }


    .forgot-link:hover {

        color: var(--rojo3);
    }


    /* =====================================================
           BOTÓN
        ===================================================== */

    .btn-login {

        width: 100%;

        height: 56px;

        border: none;

        border-radius: 18px;

        background:
            linear-gradient(135deg,
                var(--rojo3),
                var(--rojo2));

        color: #fff;

        font-size: 19px;

        font-weight: 700;

        transition: .3s;

        box-shadow:
            0 14px 28px rgba(179, 0, 0, .18);
    }


    .btn-login:hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 18px 30px rgba(179, 0, 0, .25);
    }


    .btn-login i {

        margin-left: 8px;
    }


    /* =====================================================
           FOOTER
        ===================================================== */

    .footer-login {

        margin-top: 18px;

        text-align: center;

        color: #888;

        font-size: 13px;
    }


    .footer-login i {

        color: var(--rojo);

        margin-right: 6px;
    }


    /* =====================================================
           RESPONSIVE
        ===================================================== */

    @media (max-width: 991px) {

        html,
        body {

            overflow: auto;
        }


        .login-wrapper {

            flex-direction: column;

            height: auto;

            min-height: 100vh;
        }


        .left-panel,
        .right-panel {

            width: 100%;

            height: auto;
        }


        .left-panel {

            padding: 30px 20px;
        }


        .right-panel {

            padding:
                25px 15px 35px;
        }


        .hero-title {

            font-size: 34px;
        }


        .hero-desc {

            max-width: 100%;
        }


        .login-card {

            max-width: 560px;

            padding:
                24px 22px;
        }
    }


    @media (max-width: 576px) {

        .brand-top img {

            width: 50px;
            height: 50px;
        }


        .brand-text h2 {

            font-size: 24px;
        }


        .hero-title {

            font-size: 28px;
        }


        .hero-desc {

            font-size: 14px;
        }


        .feature-item {

            padding:
                12px 14px;
        }


        .feature-item h6 {

            font-size: 15px;
        }


        .feature-item p {

            font-size: 12px;
        }


        .titulo {

            font-size: 30px;
        }


        .subtitulo {

            font-size: 14px;
        }


        .form-control,
        .btn-login {

            height: 52px;
        }


        .extra-options {

            flex-direction: column;

            align-items: flex-start;
        }
    }