﻿/* ===== REGISTER PAGE ===== */

/* CONTENEDOR GENERAL*/
.container {
    position: relative;
    z-index: 2;
}

.card {
    border: none;
    border-radius: 22px;
    background: rgba(25, 40, 84, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 22px;
    box-shadow: 0 25px 45px rgba(0,0,0,.35);
    color: #ffffff;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HEADER INSTITUCIONAL*/
.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding: 2rem;
}

    .card-header h4 {
        font-weight: 600;
        letter-spacing: 0.4px;
        margin-bottom: 0.5rem;
    }

    .card-header small {
        color: rgba(255,255,255,0.85) !important;
        font-size: 0.9rem;
    }
/*CUERPO DEL FORMULARIO*/
.card-body {
    padding: 2.5rem;
}

/*TITULOS DE SECCIÓN PERSONALIZADO*/
    .card-body h6 {
        color: #fdd757;
        font-weight: 600;
        letter-spacing: .5px;
        border-left: 4px solid #bbd000;
        padding-left: .6rem;
    }

        .card-body h6::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: linear-gradient(180deg, #00c6ff, #2a5298);
            border-radius: 4px;
        }

/*LABELS*/
.form-label {
    color: #c4bfb6;
    font-size: .85rem;
    margin-bottom: .3rem;
}

/*INPUTS Y SELECTS*/

.form-control,
.form-select {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #ffffff;
    border-radius: 12px;
}

    .form-control::placeholder {
        color: #c4bfb6;
    }

select option {
    background-color: #1e3c72;
    color: #ffffff;
}

    .form-control::placeholder {
        color: rgba(255,255,255,0.75);
    }

.form-control:focus,
.form-select:focus {
    border-color: #4993cc;
    box-shadow: 0 0 0 2px rgba(73,147,204,.35);
    background: rgba(255,255,255,.18);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    color: #ffffff !important;
}

/*VALIDACIONES*/
.text-danger {
    color: #fdd757 !important;
    font-size: .8rem;
}
.is-valid {
    border-color: #bbd000 !important;
    box-shadow: 0 0 0 2px rgba(187,208,0,.35);
}
/*BOTON PRINCIPAL - REGISTRAR USUARIO*/
.btn-success {
    background: linear-gradient(135deg, #bbd000, #fdd757);
    border: none;
    color: #192854;
    font-weight: 700;
    border-radius: 14px;
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,.3);
    }

/*BOTON DEL FORMULARIO*/
.card-footer {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.25);
    padding: 1.5rem;
}

    .card-footer a {
        color: #ffffff;
        opacity: 0.9;
        text-decoration: none;
    }

        .card-footer a:hover {
            text-decoration: underline;
        }


/*CALENDARIO*/

input[type="date"] {
    color-scheme: dark;
}

    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }

    /*LINKS SECUNDARIOS*/
.card-footer a {
    color: #4993cc;
}

    .card-footer a:hover {
        color: #fdd757;
    }