@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

:root {
    /*Fondo*/
    --theme-color: #f8f8f8;
    --white-color: #ffffff;
    /* Colores principales solidos */
    --primary-color: #002955;
    --secondary-color: rgb(213, 159, 15);
    --other-color: rgb(125, 54, 54);
    /* Colores principales transparencia */
    --primary-color-4per: rgb(0, 43, 122, 0.04);
    --primary-color-20per: rgb(0, 43, 122, 0.2);
    --primary-color-80per: rgb(0, 43, 122, 0.8);
    --secondary-color-50per: rgba(213, 159, 15, 0.5);
    --secondary-color-20per: rgba(213, 159, 15, 0.2);
    --secondary-color-10per: rgba(213, 159, 15, 0.1);
    --other-color-10per: rgb(124, 53, 53, 0.1);
    --other-color-20per: rgb(124, 53, 53, 0.2);

    /* Colores para el sistema solidos */
    --c-default: #606060;
    /* Color de texto */
    --c-link: #1f6ce0;
    /* Redirección */
    --c-red: #a92929;
    /* Borrar, peligro */
    --c-yellow: #a19927;
    /* Editar, advertencia */
    --c-blue: #4b6aa7;
    /* Acciones */
    --c-green: #4ba75f;
    /* Aceptar, guardar */
    --c-jade: #4b96a7;
    /* Documentos */
    --c-disable: #cccccc;
    /* Inhabilitado */
    /* Colores para el sistema transparencia */
    --c-red-50per: rgba(168, 41, 41, 0.5);
    --c-red-8per: rgba(168, 41, 41, 0.08);
    --c-yellow-50per: rgb(161, 153, 39, 0.5);
    --c-yellow-8per: rgb(161, 153, 39, 0.08);
    --c-blue-50per: rgba(74, 104, 165, 0.5);
    --c-blue-8per: rgba(74, 104, 165, 0.08);
    --c-green-50per: rgb(74, 165, 94, 0.5);
    --c-green-8per: rgb(74, 165, 94, 0.08);
    --c-jade-50per: rgb(74, 149, 165, 0.5);
    --c-jade-8per: rgb(74, 149, 165, 0.08);
    --c-disable-50per: rgb(204, 204, 204, 0.5);
    --c-disable-8per: rgb(204, 204, 204, 0.08);

    /* Carreras */
    --color-126: #00b5e2;
    --color-127: #ec9200;
    --color-128: #75ca69;
    --color-139: #1d3632;
    --color-140: #6197b5;
    --color-215: #ac1911;
    --color-226: #8154b2;
    --color-228: #cccbc8;
    --color-321: #edc000;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /*background-color: var(--theme-color);
  color: var(--c-default);*/
    font-family: 'Raleway', sans-serif;
    transition: filter 0.3s ease-in-out;
}

/* Scroll */
/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(213, 159, 15);
}

.container_custom {
    margin: 0 5% 30vh 5%;
}

@media (min-width: 1268px) {
    .container_custom {
        margin-left: 10%;
        margin-right: 10%;
    }
}

.fixed_bottom {
    margin-bottom: 30vh;
}



/* ========================================================== */
/* ================== Estilo de los títulos ================= */
/* ========================================================== */
.titulo_seccion::before,
.titulo_seccion::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8.63606rem;
    height: 0.25rem;
    background-color: var(--secondary-color);
}

.titulo_seccion::before {
    transform: translate(-150%, 50%);
    -webkit-transform: translate(-150%, 50%);
    -moz-transform: translate(-150%, 50%);
    -ms-transform: translate(-150%, 50%);
    -o-transform: translate(-150%, 50%);
}

.titulo_seccion::after {
    transform: translate(50%, 50%);
    -webkit-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -o-transform: translate(50%, 50%);
}

.titulo_h1 {
    /* Pixeles 30px */
    font-size:  1.875rem;
}

.titulo_h2 {
    /* Pixeles 24px */
    font-size: 1.5rem;
}

.titulo_h3 {
    /* Pixeles 20px */
    font-size: 1.25rem;
}

.titulo_h4 {
    /* Pixeles 18px */
    font-size: 1.125rem;
}

.titulo_h6 {
    font-size: 1rem;
}

.titulo_h1,
.titulo_h2,
.titulo_h3,
.titulo_h4,
.titulo_h6 {
    margin: 0;
}

.font_30px {
    font-size: 1.875rem;
}

.font_50px {
    font-size: 3.125rem;
}

.fs_8px {
    font-size: 0.5rem;
}

.fs_12px {
    font-size: 0.8rem;
}

/* ========================================================== */
/* =================== Backgrounds colors =================== */
/* ========================================================== */
.fill_primary {
    fill: var(--primary-color);
}

.bg_bubble_colors {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg_bubble_colors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/bubble_colors.svg');
    background-repeat: no-repeat;
    width: 100%;
    height: 150%;
    transform: translate(65%, -10%);
    opacity: 0.3;
    z-index: -1;
}


.bg_bubble_colors_100per {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg_bubble_colors_100per::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/bubble_colors.svg');
    background-repeat: no-repeat;
    width: 100%;
    height: 150%;
    transform: translate(5%, 0%);
    z-index: -1;
}

.bg_theme {
    background-color: var(--theme-color);
}

.bg_white {
    background-color: var(--white-color);
}

.bg_primary {
    background-color: var(--primary-color);
}

.bg_primary_4per {
    background-color: var(--primary-color-4per);
}

.bg_primary_20per {
    background-color: var(--primary-color-20per);
}

.bg_primary_80per {
    background-color: var(--primary-color-80per);
}

.bg_secondary {
    background-color: var(--secondary-color);
}

.bg_other {
    background-color: var(--other-color);
}

.bg_other_10per {
    background-color: var(--other-color-10per);
}

.bg_other_20per {
    background-color: var(--other-color-20per);
}

.bg_gray {
    background-color: var(--c-default);
}

.bg_link {
    background-color: var(--c-link);
}

.bg_red {
    background-color: var(--c-red);
}

.bg_red_50per {
    background-color: var(--c-red-50per);
}

.bg_red_8per {
    background-color: var(--c-red-8per);
}

.bg_yellow {
    background-color: var(--c-yellow);
}

.bg_yellow_8per {
    background-color: var(--c-yellow-8per);
}

.bg_yellow_50per {
    background-color: var(--c-yellow-50per);
}

.bg_blue {
    background-color: var(--c-blue);
}

.bg_blue_8per {
    background-color: var(--c-blue-8per);
}

.bg_blue_50per {
    background-color: var(--c-blue-50per);
}

.bg_green {
    background-color: var(--c-green);
}

.bg_green_8per {
    background-color: var(--c-green-8per);
}

.bg_jade {
    background-color: var(--c-jade);
}

.bg_jade_8per {
    background-color: var(--c-jade-8per);
}

.bg_disable {
    background-color: var(--c-disable);
}

.bg_disable_8per {
    background-color: var(--c-disable-8per);
}

.bg_disable_50per {
    background-color: var(--c-disable-50per);
}

/* Background carreras */
.bg_126 {
    background-color: var(--color-126);
}

.bg_127 {
    background-color: var(--color-127);
}

.bg_128 {
    background-color: var(--color-128);
}

.bg_139 {
    background-color: var(--color-139);
}

.bg_140 {
    background-color: var(--color-140);
}

.bg_215 {
    background-color: var(--color-215);
}

.bg_226 {
    background-color: var(--color-226);
}

.bg_228 {
    background-color: var(--color-228);
}

.bg_321 {
    background-color: var(--color-321);
}

/* --------------- */
.hover_bg_green_50per,
.hover_bg_other_20per,
.hover_bg_blue_50per,
.hover_bg_secondary_50per,
.hover_bg_secondary_10per {
    transition: background-color 0.6s;
    -webkit-transition: background-color 0.6s;
    -moz-transition: background-color 0.6s;
    -ms-transition: background-color 0.6s;
    -o-transition: background-color 0.6s;
}

.bg_jade_50per,
.hover_bg_jade_50per:hover {
    background-color: var(--c-jade-50per);
}

.bg_secondary_50per,
.hover_bg_secondary_50per:hover {
    background-color: var(--secondary-color-50per);
}

.bg_secondary_10per,
.hover_bg_secondary_10per:hover {
    background-color: var(--secondary-color-10per);
}


.bg_other_20per,
.hover_bg_other_20per:hover {
    background-color: var(--other-color-20per);
}

.bg_green_50per,
.hover_bg_green_50per:hover {
    background-color: var(--c-green-50per);
}

.hover_bg_blue_50per:hover {
    background-color: var(--c-blue-50per);
}

/**************************************************/
.hover_opacity_100 {
    transition: 0.6s opacity ease
}

.hover_opacity_100:hover {
    opacity: 1 !important;
}



/* ========================================================== */
/* =================== Estilos para textos ================== */
/* ========================================================== */
.color_primary {
    color: var(--primary-color);
}

.color_secondary {
    color: var(--secondary-color);
}

.color_other {
    color: var(--other-color);
}

.color_default {
    color: var(--c-default);
}

.color_link {
    color: var(--c-link);
}

.color_red {
    color: var(--c-red);
}

.color_yellow {
    color: var(--c-yellow);
}

.color_blue {
    color: var(--c-blue);
}

.color_green {
    color: var(--c-green);
}

.color_jade {
    color: var(--c-jade);
}

.color_disable {
    color: var(--c-disable);
}

.color_theme {
    color: var(--theme-color);
}

.color_white {
    color: var(--white-color);
}

/* Colores - licenciaturas */
.color_126 {
    color: var(--color-126);
}

.color_127 {
    color: var(--color-127);
}

.color_128 {
    color: var(--color-128);
}

.color_139 {
    color: var(--color-139);
}

.color_140 {
    color: var(--color-140);
}

.color_215 {
    color: var(--color-215);
}

.color_226 {
    color: var(--color-226);
}

.color_228 {
    color: var(--color-228);
}

.color_321 {
    color: var(--color-321);
}


/* Texto de tablas */
.table_color_default td,
.table_color_default th {
    color: var(--c-default);
}



/* ========================================================== */
/* ================= Estilos para links =================== */
/* ========================================================== */
.link_other {
    text-decoration: none;
    transition: color 0.4s;
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
}

.link_other:hover {
    color: var(--other-color);
}

.link_secondary:hover {
    color: var(--secondary-color);
}

/* ========================================================== */
/* ==================== Estilos flexbox ===================== */
/* ========================================================== */
.flex_jcc_aic {
    justify-content: center;
}

.flex_jce_aic {
    justify-content: space-evenly;
}

.flex_jcb_aic {
    justify-content: space-between;
}

.flex_jca_aic {
    justify-content: space-around;
}

.flex_jcc_aic,
.flex_jce_aic,
.flex_jcb_aic,
.flex_jca_aic {
    display: flex;
    align-items: center;
}

.flex {
    display: flex;
}

/* ========================================================== */
/* ========================= Botón ========================= */
/* ========================================================== */
.boton {
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
    transition: all 0.6s;
}

/* borders */
.border_other_50per_2px {
    border: 1px solid var(--other-color);
}

.border_red_50per_2px {
    border: 2px solid var(--c-red-50per);
}

.border_yellow_50per_2px {
    border: 2px solid var(--c-yellow-50per);
}

.border_blue_50per_2px {
    border: 2px solid var(--c-blue-50per);
}

.border_green_50per_2px {
    border: 2px solid var(--c-green-50per);
}

.border_jade_50per_2px {
    border: 2px solid var(--c-jade-50per);
}

.border_disable_50per_2px {
    border: 2px solid var(--c-disable-50per);
}

.border_disable_50per_5px {
    border: 5px solid var(--c-disable-50per);
}

/* borders */
.hover_red:hover {
    color: var(--theme-color);
    background-color: var(--c-red);
}

.hover_yellow:hover {
    color: var(--theme-color);
    background-color: var(--c-yellow);
}

.hover_green:hover {
    color: var(--theme-color);
    background-color: var(--c-green);
}

.hover_blue:hover {
    color: var(--theme-color);
    background-color: var(--c-blue);
}

.hover_jade:hover {
    color: var(--theme-color);
    background-color: var(--c-jade);
}

.hover_disable:hover {
    color: var(--theme-color);
    background-color: var(--c-disable);
}

/* ========================================================== */
/* ================ Tamaños de width/height ================= */
/* ========================================================== */
.minw_300px {
    min-width: 300px;
}

.w_65 {
    width: 65%;
}

.w_85 {
    width: 85%;
}

.maxh_450px {
    max-height: 450px;
}

.maxw_250px {
    max-width: 250px;
}

.w_300px {
    width: 300px;
}

.max_wh_245_70px {
    max-width: 245px;
    max-height: 70px;
}

.hw_15px {
    height: 15px;
    width: 15px;
}

.hw_30px {
    height: 30px;
    width: 30px;
}

.hw_50px {
    height: 50px;
    width: 50px;
}

.hw_60px {
    height: 60px;
    width: 60px;
}

.hw_122px {
    width: 122px;
    height: 122px;
}

.h_100px {
    height: 100px;
}

.h_80px {
    height: 80px;
}

.h_70px {
    height: 70px;
}

.h_55px {
    height: 55px;
}

.h_45px {
    height: 45px;
}

.h_7px {
    height: 7px;
}

.h_5px {
    height: 5px;
}

.h_3px {
    height: 3px;
}

.h_2px {
    height: 2px;
}

/* ========================================================== */
/* ====================== Z-index's ========================= */
/* ========================================================== */
.z_index_1000 {
    z-index: 1000;
}

.z_index_500 {
    z-index: 500;
}

/* ========================================================== */
/* ========================== Borders ======================= */
/* ========================================================== */
.border_transparent_3px {
    border: 3px solid #ffffff00;
    transition: border-color 0.6s;
    -webkit-transition: border-color 0.6s;
    -moz-transition: border-color 0.6s;
    -ms-transition: border-color 0.6s;
    -o-transition: border-color 0.6s;
}

.border_other_3px {
    border: 3px solid var(--other-color);
}

.hover_border_secondary_3px_05:hover,
.border_secondary_3px_05 {
    border: 3px solid var(--secondary-color-50per);
}

/*  */
.rounded_15px {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

/* ========================================================== */
/* ==================== Margins / paddings ================== */
/* ========================================================== */
.mb_6rem {
    margin-bottom: 6rem;
}

.mb_7rem {
    margin-bottom: 7rem;
}

.mb_12rem {
    margin-bottom: 12rem;
}

.mt_110px {
    margin-top: 110px;
}

.mt_55px {
    margin-top: 55px;
}

.pt_110px {
    padding-top: 110px;
}

.pl_350px {
    padding-left: 350px;
}

.mr_350px {
    margin-right: 350px;
}

.pl_75px {
    padding-left: 75px;
}

/* ========================================================== */
/* ==== Modificación de elementos de bootstrap-select2 ====== */
/* ========================================================== */
/*  */
.custom_tooltip_asidebar {
    --bs-tooltip-bg: var(--secondary-color);
}

.select2-selection.select2-selection--single {
    padding: 10px !important;
    height: 45px !important;
    border: 1px solid #d9d9d9 !important;
    /*background-color: #f7f7f7 !important;*/
}

.accordion-button[aria-expanded="true"] {
    background-color: var(--secondary-color-10per);
}























/* ========================================================== */
/* ======================= Animations ======================= */
/* ========================================================== */
.animation_swing {
    transform-origin: top center;
    animation: swing 5s infinite ease;
}

@keyframes swing {
    20% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}





.form .form-label {
    margin-bottom: 0;
}

.form-control-green:focus {
    color: green !important;
    background-color: rgb(74, 165, 94, 0.08) !important;
    border-color: rgba(0, 128, 0, 0.329) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25) !important;
}

.form-control-red:focus {
    color: red !important;
    background-color: rgba(168, 41, 41, 0.08) !important;
    border-color: rgba(128, 9, 0, 0.329) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25) !important;
}




.btn_goyo {
    background: var(--secondary-color-50per);
    width: 1;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    border-radius: 15px;
}

.btn_goyo img {
    width: 3rem;
    margin-bottom: -20px;
}