/* =========================================================
   FUENTE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   GENERAL
   ========================================================= */

html,
body {
    margin: 0;
    min-height: 100%;
    background: #03359a;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, Helvetica, sans-serif;
}


/* =========================================================
   VIDEO DE FONDO
   ========================================================= */

.video-container {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    z-index: 0;
    pointer-events: none;

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

    transform: translateZ(0);
    backface-visibility: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: translateZ(0);
    backface-visibility: hidden;
}


/* =========================================================
   CONTENIDO GENERAL
   ========================================================= */

.content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    position: relative;
    z-index: 3;

    background: rgba(128, 127, 127, 0.534) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


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

.footer {
    position: fixed;
    z-index: 3;

    bottom: 0;

    width: 100%;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    text-align: center;

    padding: 10px 0;
}

.footer p {
    margin: 0;
}


/* =========================================================
   BOTONES NAVBAR
   ========================================================= */

.btn-rainbow,
.btn-rainbow2 {
    position: relative;

    color: white !important;

    border: none;
    border-radius: 10px;

    padding: 10px 18px;

    font-family: 'Poppins', sans-serif;
    font-weight: 600;

    background-size: 300% 300%;

    animation: rainbowMove 5s ease infinite;

    box-shadow:
        0 4px 12px rgba(0, 102, 255, 0.3),
        0 0 10px rgba(0, 212, 255, 0.2);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Botón azul/celeste */

.btn-rainbow {
    background: linear-gradient(90deg,
            #0066ff,
            #00d4ff,
            #0066ff);
}


/* Botón azul/morado */

.btn-rainbow2 {
    background: linear-gradient(90deg,
            #0252ca,
            #9938f3,
            #4c00ff);
}


.btn-rainbow:hover,
.btn-rainbow2:hover {
    color: white;

    transform: translateY(-2px) scale(1.04);

    box-shadow:
        0 6px 18px rgba(0, 102, 255, 0.45),
        0 0 18px rgba(124, 60, 255, 0.4);
}


.btn-rainbow:active,
.btn-rainbow2:active {
    transform: scale(0.97);
}


/* =========================================================
   ANIMACIÓN DEGRADADO
   ========================================================= */

@keyframes rainbowMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   PÁGINA DE INICIO
   ========================================================= */

.home-section {
    position: relative;
    z-index: 2;

    min-height: calc(100vh - 150px);

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

    padding: 35px 20px 90px;
}


.home-card {
    width: 100%;
    max-width: 650px;

    text-align: center;

    padding: 28px 35px 35px;

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.18),
        0 0 30px rgba(65, 105, 255, 0.15);
}


/* Imagen de inicio */

.home-image {
    margin: 15px 0 18px;
}

.home-image img {
    width: 100%;
    max-width: 320px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18)) drop-shadow(0 0 18px rgba(80, 120, 255, 0.15));

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.home-image img:hover {
    transform: translateY(-5px) scale(1.02);

    filter:
        drop-shadow(0 16px 22px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 22px rgba(125, 70, 255, 0.25));
}


/* Título inicio */

.home-title {
    margin: 0;

    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;

    letter-spacing: -1px;

    background: linear-gradient(90deg,
            #1769ff,
            #743cff,
            #e533ad);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Texto inicio */

.home-subtitle {
    margin-top: 10px;
    margin-bottom: 0;

    font-size: 1.05rem;
    font-weight: 400;

    color: #626b7a;

    line-height: 1.6;
}


/* Línea decorativa */

.home-line {
    width: 75px;
    height: 4px;

    margin: 15px auto;

    border-radius: 20px;

    background: linear-gradient(90deg,
            #4776ff,
            #8e44ff,
            #ec38bc);

    box-shadow:
        0 3px 12px rgba(126, 68, 255, 0.35);
}


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

.login-wrapper {
    width: 100%;
    max-width: 950px;

    margin: auto;

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

    gap: 30px;
}


/* Imagen login */

.login-image {
    flex: 1;

    text-align: center;
}

.login-image img {
    width: 100%;
    max-width: 430px;
    height: auto;

    object-fit: contain;
}


/* Caja login */

.login-container {
    width: 100%;
    max-width: 420px;

    padding: 30px;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(70, 100, 255, 0.08);

    text-align: center;
}


/* Título login */

.login-header {
    font-weight: 700;

    color: #333;

    letter-spacing: -0.5px;
}


/* Subtítulo login */

.login-subtitle {
    margin-bottom: 20px;

    font-size: 14px;
    font-weight: 400;

    color: #6b7280;
}


/* Inputs */

.form-label {
    font-weight: 500;
    color: #343a40;
}

.form-control {
    font-family: 'Poppins', sans-serif;
}

.input-group-text {
    background: #f3f4f6;

    border-right: 0;
}


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

.btn-acceder {
    width: 100%;

    color: white;

    border: none;
    border-radius: 8px;

    padding: 12px;

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

    font-size: 16px;
    font-weight: 600;

    background: linear-gradient(90deg,
            #0066ff,
            #00d4ff,
            #7c3cff,
            #ff3cac,
            #0066ff);

    background-size: 300% 300%;

    animation: rainbowMove 5s ease infinite;

    box-shadow:
        0 4px 15px rgba(0, 102, 255, 0.3);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn-acceder:hover {
    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0, 102, 255, 0.45),
        0 0 18px rgba(124, 60, 255, 0.35);
}

.btn-acceder:active {
    transform: scale(0.98);
}

/* =========================================================
   BOTONES NAVBAR ANIMADOS
   ========================================================= */

.btn-rainbow,
.btn-rainbow2 {
    position: relative;

    color: white !important;

    border: none;
    border-radius: 10px;

    padding: 10px 18px;

    font-family: 'Poppins', sans-serif ;
    font-weight: 600;

    /* IMPORTANTE PARA QUE EL MOVIMIENTO SE NOTE */
    background-size: 250% 100%;

    animation: rainbowMove 5s linear infinite;

    box-shadow:
        0 4px 12px rgba(0, 102, 255, 0.30),
        0 0 10px rgba(0, 212, 255, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* ACCEDER */

.btn-rainbow {
    background-image: linear-gradient(90deg,
            #0066ff,
            #00d4ff,
            #0077ff,
            #00d4ff,
            #0066ff);
}


/* REGISTRAR */

.btn-rainbow2 {
    background-image: linear-gradient(90deg,
            #0252ca,
            #7c3cff,
            #d52eff,
            #7c3cff,
            #0252ca);
}


/* HOVER */

.btn-rainbow:hover,
.btn-rainbow2:hover {
    color: white;

    transform: translateY(-3px) scale(1.05);

    box-shadow:
        0 7px 20px rgba(0, 102, 255, 0.45),
        0 0 20px rgba(124, 60, 255, 0.45);
}


/* CLICK */

.btn-rainbow:active,
.btn-rainbow2:active {
    transform: scale(0.96);
}


/* MOVIMIENTO DEL DEGRADADO */

@keyframes rainbowMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =========================================================
   RESPONSIVE - CELULAR
   ========================================================= */

@media (max-width: 767px) {

    /* -------------------------
       INICIO
       ------------------------- */

    .home-section {
        align-items: flex-start;

        padding: 20px 12px 90px;
    }

    .home-card {
        max-width: 95%;

        padding: 22px 18px 28px;

        border-radius: 18px;
    }

    .home-image {
        margin: 10px 0 15px;
    }

    .home-image img {
        max-width: 210px;
    }

    .home-title {
        font-size: 1.8rem;
    }

    .home-subtitle {
        font-size: 0.95rem;
    }


    /* -------------------------
       LOGIN
       ------------------------- */

    .login-wrapper {
        flex-direction: column;

        gap: 15px;
    }

    /* Imagen arriba */

    .login-image {
        order: 1;
    }

    .login-image img {
        max-width: 280px;
    }


    /* Login abajo */

    .login-container {
        order: 2;

        max-width: 95%;

        padding: 25px;
    }


    /* Navbar */

    .btn-rainbow,
    .btn-rainbow2 {
        padding: 8px 13px;

        font-size: 0.9rem;
    }
}
/* =========================================================
   RECUPERAR USUARIO / CONTRASEÑA
   ========================================================= */

.recover-section {
    min-height: calc(100vh - 150px);

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

    padding: 40px 15px 90px;
}

.recover-card {
    width: 100%;
    max-width: 520px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18),
        0 0 25px rgba(70, 100, 255, 0.10);
}


/* CABECERA */

.recover-header {
    padding: 25px 25px 20px;

    text-align: center;

    color: white;

    background: linear-gradient(
        90deg,
        #0066ff,
        #00b8d4,
        #743cff
    );

    background-size: 250% 100%;
    animation: rainbowMove 8s ease-in-out infinite;
}

.recover-header h4 {
    margin: 0;

    font-size: 1.6rem;
    font-weight: 700;
}

.recover-header p {
    margin: 7px 0 0;

    font-size: 0.9rem;

    opacity: 0.9;
}


/* CUERPO */

.recover-body {
    padding: 30px;
}

.recover-body .form-label {
    font-weight: 500;
    color: #343a40;
}


/* BOTÓN */

.btn-recover {
    width: 100%;

    padding: 12px;

    color: white;

    border: none;
    border-radius: 9px;

    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;

    background: linear-gradient(
        90deg,
        #0066ff,
        #00d4ff,
        #7c3cff,
        #0066ff
    );

    background-size: 250% 100%;

    animation: rainbowMove 8s ease-in-out infinite;

    box-shadow:
        0 4px 15px rgba(0, 102, 255, 0.3);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn-recover:hover {
    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0, 102, 255, 0.45),
        0 0 18px rgba(124, 60, 255, 0.25);
}


/* FOOTER */

.recover-footer {
    padding: 15px 20px;

    text-align: center;

    background: rgba(245, 247, 250, 0.9);

    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.recover-footer a {
    color: #4776ff;

    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;
}

.recover-footer a:hover {
    color: #743cff;
}


/* CELULAR */

@media (max-width: 767px) {

    .recover-section {
        align-items: flex-start;

        padding-top: 30px;
    }

    .recover-card {
        max-width: 95%;
    }

    .recover-body {
        padding: 25px 20px;
    }

    .recover-header h4 {
        font-size: 1.4rem;
    }
}