/* ============================= */
/* COLORES INSTITUCIONALES */
/* ============================= */

:root {

  --bs-primary: #e1251b;
  --bs-secondary: #898a8d;

  --bs-primary-rgb: 225, 37, 27;
  --bs-secondary-rgb: 137, 138, 141;

  --bg-light: #f5f5f5;
}


/* ============================= */
/* BODY */
/* ============================= */

body {
    background-color: var(--bg-light);
    font-family: Arial, Helvetica, sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


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

.navbar-dark {
    background-color: var(--bs-primary) !important;
}

.navbar-brand {
    font-weight: bold;
}

.nav-link {
    transition: 0.3s;
}

.nav-link:hover {
    color: #ffdede !important;
}


/* ============================= */
/* BADGE */
/* ============================= */

.badge {
    font-size: 10px;
}


/* ============================= */
/* CONTENT */
/* ============================= */

.content-wrapper {
    padding: 20px;
}


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

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top:auto;
}


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

.card {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


/* ============================= */
/* CURSOS */
/* ============================= */

.course-header {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.course-header h1 {
    color: var(--bs-primary);
}


/* ============================= */
/* MODULOS */
/* ============================= */

.module-completed .accordion-button {
    color: #198754;
    font-weight: bold;
}


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

@media (max-width: 768px) {

    .navbar-brand img {
        height: 30px;
    }

    .content-wrapper {
        padding: 10px;
    }

}


/* ============================= */
/* LOGIN Y REGISTRO */
/* ============================= */

.login-container{
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    width:100%;
    padding:20px;
}

.login-box{
    background:white;
    padding:20px;
    border-radius:10px;
    width:380px;
    max-width:95%;
    margin:auto;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.logo{
    display:block;
    margin:0 auto;
    width:300px;
}

.login-box h2{
    text-align:center;
    margin:10px 0;
    color:var(--bs-primary);
}

.form-group{
    width:100%;
    margin-bottom:12px;
}


/* ============================= */
/* APELLIDOS */
/* ============================= */

.row-apellidos{
    display:flex;
    gap:8px;
    width:100%;
}

.row-apellidos .form-group{
    flex:1;
}

.row-apellidos input{
    width:100%;
}


/* ============================= */
/* INPUTS */
/* ============================= */

input{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:14px;
}


/* ============================= */
/* BOTON */
/* ============================= */

.btn-login{
    width:100%;
    padding:12px;
    background:var(--bs-primary);
    color:white;
    border:none;
    border-radius:5px;
    font-weight:bold;
    cursor:pointer;
    margin-top:5px;
}

.btn-login:hover{
    background:#c51f16;
}


/* ============================= */
/* LINK */
/* ============================= */

a{
    color:var(--bs-primary);
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}


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

.password-group{
    position:relative;
    width:100%;
}

.password-group input{
    padding-right:40px;
}

.toggle-password{
    position:absolute;
    right:10px;
    top:11px;
    cursor:pointer;
    font-size:18px;
}


/* ============================= */
/* MENSAJES */
/* ============================= */

#mensaje_email,
#mensaje_password,
#strength{
    font-size:13px;
    display:block;
    margin-top:4px;
}


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

@media (max-width:500px){

    .logo{
        width:220px;
    }

    .row-apellidos{
        flex-direction:column;
    }

}