/* BASE */

:root {
    --trapezoid-size: 80px;
    --logo-height-size: 110px;
    --logo-width-size: 216px;
    --logo-footer-height-size: 140px;
    --logo-horizontal-height-size: 82px;

    --color-darkergrey: #333;
    --color-darkgrey: #4d4d4d;
    --color-grey: #666666;
    --color-demigrey: #808080;
    --color-lemigrey: #D6D6D6;
    --color-lightgrey: #E8E8E8;
    --color-whiteish: #F0F0F0 ;
    --color-red: #b5091d;
}

* {font-family: "Nunito Sans", "Helvetica Neue", Arial, Helvetica,sans-serif !important;}

body {
    background-color: white;
    background-image: url("/static/images/base/background.svg");
    background-repeat: repeat-y;
    background-size: contain;
}

.borde_redondo {
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.btn-danger {background-color: var(--color-red); border-color: var(--color-red);}

.card_noticia {padding-bottom: 1.5rem; height: 100%;}
.card_noticia figure {height: 100%; background-color: var(--color-darkgrey); position: relative; }
.card_noticia img {opacity: 0.9; object-fit: cover; width: 100%; height: 100%;}
.card_noticia img:hover {opacity: 1;}
.card_noticia figcaption {padding-right: 10px; background: rgba(51,51,51,0.7); position: absolute; bottom: 10px; left: 10px; border-left: solid 1px white; padding-left: 5px; color: white; font-weight: bold; text-shadow: 1px 1px var(--color-darkgrey);}
.card_noticia figcaption div {font-weight: bolder; margin:0; padding: 0;}
.card_noticia figcaption span {background-color: var(--color-red); padding: 3px; margin-top: 5px; font-size: 0.7rem;}

.card_programa {position: relative; background-color: black;}
.card_programa img {opacity: 0.7; object-fit: cover; width: 100%; height: 100%;} 
.card_programa div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.5rem; font-weight: bold; text-align: center; width: 100%; padding: 20px; text-shadow: 1px 1px var(--color-darkgrey);}

.card_programa_sm a, .card_programa a:hover {
    text-decoration: none;
    color: white;
}
.card_programa_sm img {object-fit: contain; width: 100%; clip-path: polygon(0 0, 100% 0, 100% 60%,0 80%); }
.card_programa_sm .textos {margin-top: -40px; text-align: center; padding: 10px;}
.card_programa_sm .textos .titulo {text-transform: uppercase; font-weight: bold; height: 3.5rem; border-bottom: solid 2px white;}
.card_programa_sm .textos .duracion {font-size: 0.9rem; font-weight: bold; padding-top: 10px; padding-bottom: 20px;}
.card_programa_sm .textos .horas {font-size: 0.8rem; font-weight: light; margin-top: -20px;}

.cbg_red {background-color: var(--color-red); color: white;}
.cbg_darkgrey {background-color: var(--color-darkgrey); color: white;}
.cbg_darkergrey {background-color: var(--color-darkergrey); color: white;}

.cbg_grey {background-color: var(--color-grey);}
.cbg_demigrey {background-color: var(--color-demigrey);}
.cbg_lightgrey {background-color: var(--color-lightgrey);}
.cbg_lemigrey {background-color: var(--color-lemigrey);}
.cbg_whiteish {background-color: var(--color-whiteish);}
.cbg_whiteish_last {background-color: var(--color-whiteish); margin-bottom: -100px;}

.card_evento {padding: 30px; text-align: center; color: white;}
.card_evento .titulo, .card_evento .titulo a {font-weight: bold; min-height: 120px; text-decoration: none; color: white; font-size: 1.2rem;}
.card_evento .dia {font-size: 4.2rem; font-weight: bolder;}
.card_evento .mes {width: 180px; margin: 0 auto; border-bottom: solid 1px white; font-weight: lighter; margin-top: -25px; font-size: 1.2rem;}
.card_evento .hora {font-weight: 300; margin-top: 15px; font-size: 1.2rem;}
.card_evento img {width: 40px; margin-top: 40px; margin-bottom: 10px;}
.card_evento .lugar, .card_evento .lugar a {min-height: 70px; text-decoration: none; color: white;}
.card_evento .titulo a:hover, .card_evento .lugar a:hover {color: var(--color-lightgrey);}

.bloque h1 {
    color: var(--color-red);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #333;
    text-underline-position: under;
    margin-bottom: 30px;
    margin-top: 40px;
    font-size: 2rem;
    line-height: normal;
}
.bloque .row h1 {
    margin-top: 0;
}
.bloque h2 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 30px;
}
.bloque div > h2:first-child {
    margin-top: 0px;
}
.bloque h3 {
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-red);
    border-bottom: solid 1px var(--color-lemigrey);
    margin-top: 20px;
}
.bloque div > h3:first-child {
    margin-top: 0px;
}
.cbg_darkgrey h1 {color: var(--color-lightgrey); text-decoration-color: var(--color-red);}

.trapezoid_lr {clip-path: polygon(0 0, 100% var(--trapezoid-size), 100% calc(100% - var(--trapezoid-size)), 0 100%); padding-top: var(--trapezoid-size); padding-bottom: var(--trapezoid-size);}
.trapezoid_rl {clip-path: polygon(0 var(--trapezoid-size), 100% 0, 100% 100% , 0 calc(100% - var(--trapezoid-size))); padding-top: var(--trapezoid-size); padding-bottom: var(--trapezoid-size);}
.trapezoid_lr h1, .trapezoid_rl h1 {margin-top: 0;}
.trapezoid_merge {margin-top: -81px;}
.trapezoid_lr_last {clip-path: polygon(0 0, 100% var(--trapezoid-size), 100% 100%, 0 100%); padding-top: var(--trapezoid-size); padding-bottom: var(--trapezoid-size); margin-bottom: -100px;}
.trapezoid_rl_last {clip-path: polygon(0 var(--trapezoid-size), 100% 0, 100% 100% , 0 100%); padding-top: var(--trapezoid-size); padding-bottom: var(--trapezoid-size); margin-bottom: -100px;}
.trapezoid_rl h1, .trapezoid_rl_last h1 {margin-top: 40px;}
.trapezoid_lr h1, .trapezoid_lr_last h1 {margin-top: 0;}
.trapezoid_lr_first {clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--trapezoid-size)), 0 100%);}

.trapezoid_rl_first {clip-path: polygon(0 var(--trapezoid-size), 100% 0, 100% 100% , 0 calc(100% - var(--trapezoid-size))); padding-top: var(--trapezoid-size); padding-bottom: var(--trapezoid-size);}


.carousel {background-color: var(--color-darkergrey);}
.carousel-item img {max-height: 450px; max-width: 1920px; align-self: center; object-fit: cover;} 
.carousel .carousel-caption  {background: rgba(51,51,51,0.7); text-shadow: 1px 1px var(--color-darkergrey);}

.filtro {text-align: center; background-color: var(--color-whiteish); font-weight: 500; font-size: 1.3rem;}
.filtro a {text-decoration: none; color: var(--color-darkgrey); padding: 1px 15px 1px 15px;}
.filtro .menu_active {background-color: var(--color-red);}
.filtro .menu_active a {color: white;}

.bullet .icono {padding: 15px; margin-right: 15px;}
.bullet .icono img {width: 50px; height: 50px;}

.bullet_md .icono {padding: 15px; margin-right: 20px;}
.bullet_md .icono img {width: 50px; height: 50px;}

.bullet .icono_redondo {padding: 20px; margin-right: 15px; border-radius: 50%;}
.bullet .icono_redondo img {width: 70px; height: 70px; }

.bullet .texto {color: var(--color-darkgrey); margin-top: auto; margin-bottom: auto;}
.bullet .texto h1 {font-size: 0.9rem; font-weight: bolder; margin: 0; padding: 0; text-decoration: none; color: inherit; text-transform: none;}
.bullet .texto p {font-size: 0.9rem; margin: 0; padding: 0;}
.bullet .texto a {text-decoration: none; color: var(--color-darkgrey); font-weight: 700;}
.bullet .texto strong {font-weight: 900; font-size: 0.8rem;}

.bullet .texto_estadistica h1 {font-size: 2rem; font-weight: 900; margin: 0; padding: 0; text-decoration: none; color: var(--color-darkgrey); text-transform: none;}
.bullet .texto_estadistica p {font-size: 1.2rem; font-weight: 300; margin: 0; padding: 0; color: var(--color-darkgrey);}

.img_icono {
    width: 100px;
}
.img_icono_sm {
    width: 70px;
}

.streaming img {height: 100%; max-height: 100px;}
.streaming .texto {margin: 0 auto; vertical-align: middle;}
.streaming .texto h1 {color: inherit; text-decoration: none; text-transform: uppercase; margin: 0; padding: 0; font-size: 1.3rem; font-weight: bolder;}
.streaming .texto h2 {font-size: 1.3rem; font-style: italic; margin: 0; padding:0;}

.bloque ul {list-style: none;}
.bloque ul li::before {content: "\2022"; color: var(--color-red); font-weight: bold; display: inline-block; width: 1rem; margin-left: -1em;}

a {text-decoration: none;}

  /* HEADER */

.hdr_logo img {height: var(--logo-height-size) !important; margin-right: 15px;}
.hdr_logo_horizontal img {height: var(--logo-horizontal-height-size) !important; margin-top:10px;}
.menu_lg_line {position: absolute; left: 0; top: 134px; height: 100px; width: 50%; border-bottom: solid 1px white; height: 0;}
.hdr_menu_lg .menu_options {border-bottom: solid 1px white; padding-bottom: 15px; margin-bottom: -15px; font-size: 1.1rem;}
.hdr_menu_lg .menu_options a {color: var(--color-lightgrey); text-decoration: none; position: relative; margin-left: 15px;}
.hdr_menu_lg .menu_options a:hover {color: white;}
.hdr_menu_lg .menu_options a.menu_active {padding-bottom: 11px; position: relative; border-bottom: solid 10px var(--color-red); z-index: 7; margin-bottom: -21px;}
.hdr_menu_lg .menu_options a.menu_active:hover {color: var(--color-lightgrey);}

.hdr_menu_lg .contacto {background-color: var(--color-red); width: 100%; text-align: center; margin-bottom: 10px;}
.hdr_menu_lg .contacto a {color: white; text-transform: uppercase; text-decoration: none; font-weight: bold;}

.offcanvasMenu .accordion-button {font-size: 1.1rem;}
.offcanvasMenu .accordion-button:not(.collapsed) {color: var(--color-lightgrey); background-color: var(--color-darkergrey); box-shadow: none;}
.offcanvasMenu .accordion-button:is(.collapsed) {color: var(--color-lightgrey); background-color: var(--color-darkergrey); box-shadow: none;}
.offcanvasMenu .offcanvas-end {width: 100px !important;}
.offcanvasMenu .offcanvas-body {padding: 0 !important;}
.offcanvasMenu .accordion-flush .accordion-item {border-radius: unset; border-color: var(--color-darkergrey); border: none; border-bottom: solid 1px var(--color-grey); background-color: var(--color-darkergrey) !important;}
.offcanvasMenu .menu_options a {margin-left: 20px; margin-right: 20px; color: var(--color-lightgrey); border-bottom: solid 1px var(--color-grey); padding: 10px; text-decoration: none; padding-left: 20px; border-left: solid 5px var(--color-darkergrey);}
.offcanvasMenu .menu_options a:last-child {border-bottom: 0;}
.offcanvasMenu .menu_options a:hover {color: hsl(0, 0%, 100%); }
.offcanvasMenu .menu_options a.menu_active {border-left: solid 5px var(--color-red);}
.offcanvasMenu .accordion-button:not(.collapsed)::after {
    background-image: url("/static/images/iconos/expand.svg")
}
.offcanvasMenu .accordion-button:is(.collapsed)::after {
    background-image: url("/static/images/iconos/expand.svg")
}

.hdr_logo {margin-top: 10px;}

.rrss {width: 140px;}
.icono_sm {height: 18px; width: 18px; border: 0; padding: 0;}
.offcanvasMenu .rrss {width: 200px;}
.offcanvasMenu .rrss .icono_sm {height: 25px; width: 25px; border: 0; padding: 0;}

.invert {-webkit-filter: invert(1); filter: invert(1);}

.submenu {background-color: var(--color-lemigrey);}
.submenu menu {border: 0; padding: 0; padding-left: 30px;}
.submenu h1 {color: var(--color-darkgrey); font-size: 1.2rem; font-weight: 800; width: var(--logo-width-size); margin: 0 -20px 0 0; padding-top: 15px; }
.submenu a {color: var(--color-darkgrey); padding: 3px; text-decoration: none; font-weight: 600; margin-right: 10px; font-size: 0.94rem; white-space: nowrap;}
.submenu a.menu_active {color: white; background-color: var(--color-red);}

header {background-color: var(--color-darkergrey);}
header div:first-child {object-fit: cover; width: 100%; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--trapezoid-size)),0 100%); text-align: center;}
header img {width: 100%; height: auto; max-height: 450px; max-width: 1920px; object-fit: cover; } 
header h1 {margin: 0; padding: 0; text-align: center; color: white; font-size: 2rem; font-weight: 900; text-transform: uppercase;}
header h2 {margin: 0; padding: 0; text-align: center; color: white; margin-top: -5px; font-size: 1.5rem; padding-bottom: 40px;}

.video h1 {text-decoration: none; font-size: 1.1rem; color: var(--color-darkgrey); text-transform: unset; border-bottom: solid 3px var(--color-red); margin-bottom: 0px; padding-bottom: 10px;}

.bloque p a, .bloque ul a, .bloque ol a {color: var(--color-red); font-weight: 600; text-decoration: none;}
a.download::after {
    background-image: url("/static/images/iconos/descarga_rojo.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px; 
    height: 13px;
    margin-left: 3px;
    content:"";
}
.bloque p a:hover, .bloque ul a, .bloque ol a {color: var(--color-red);}
.bloque p h1 {font-size: 1rem; font-weight: 900;}

/* FOOTER */

.footer {margin-top: 100px; padding-top: 30px; padding-bottom: 30px; border-top: solid 15px var(--color-grey);}
.footer p {color: var(--color-lightgrey);}
.footer p a {text-decoration: none; color: var(--color-lightgrey);}
.footer .logo-dcc {height: var(--logo-footer-height-size);}
.footer .logo-facultad {height: var(--logo-footer-height-size);}
.footer .logo-uchile {height: var(--logo-footer-height-size);}
.footer p span {font-size: 1.3rem;}
.cus_copy {font-size: 0.7rem; padding: 5px;}
.footer .footer_menu_lg a, .footer .footer_menu_sm a, .footer p a {color: var(--color-lightgrey); text-decoration: none;}
.footer a:hover {color: white;}
.footer .footer_menu_sm a {padding-left: 8px; padding-right: 8px;}

/* HOME: INDEX */
.header_home .titulo {text-align: center;}
.header_home .titulo h1 {text-transform: uppercase; color: white; font-weight: 900; font-size: 1.85rem; margin-top: -5px; line-height: 2rem;}
.header_home .titulo h2 {font-size: 1.5rem; font-weight: 300; margin-top: -15px;}
.header_home .titulo h3 {font-size: 1.4rem; font-weight: 300;}

.indicadores_lg .indicador {width: 130px;}
.indicadores_lg .indicador h1 {
    background-color: var(--color-red); 
    color: white; 
    text-align: center; 
    font-size: 2.2rem;
    font-weight: 900;
    height: 130px; 
    width: 130px; 
    border-radius: 50%; 
    display: inline-block;
    padding-top: 45px;
    text-shadow: 1px 1px var(--color-darkgrey);
}
.indicadores_lg .indicador p {color: black; font-weight: 900; text-align: center;}
.indicadores_lg .indicador:nth-child(1) {margin-top: 40px;}
.indicadores_lg .indicador:nth-child(2) {margin-top: 30px;}
.indicadores_lg .indicador:nth-child(3) {margin-top: 20px;}
.indicadores_lg .indicador:nth-child(4) {margin-top: 0px;}
.indicadores_lg {margin-top: -170px;}

/* NOSOTROS:PERSONAS */

.buscar input, .buscar input:focus {background-color: var(--color-darkergrey); color: white; border-color: var(--color-darkergrey);}
.buscar input::placeholder {color: white; font-weight: bold;}
.buscar button {background-color: var(--color-red); color: white; border: 0;}
.buscar button:hover {background-color: var(--color-red); color: white;}

.persona img {max-width: 230px;}
.persona .nombre {color: var(--color-red); font-weight: bolder; margin: 0;}
.persona .cargo span, .persona .rol span {max-width: 230px; word-wrap: break-word; display: block; font-size: 0.84rem;}
.persona .cargo {color: var(--color-darkergrey); font-weight: 300; margin: 0; padding:0;}
.persona .rol {color: var(--color-grey); font-weight: 300; margin: 0; padding:0;}
.persona .social {margin-top: -20px; margin-bottom: -5px; text-align: center;  width: 100%;}
.persona .social span {padding: 3px 10px 5px 5px; border-radius: 5px;}
.persona .social img {height: 20px; padding-left: 5px;}
.persona .email a {color: var(--color-red); font-weight: 600;}
.persona .anexo a, .persona .oficina a {color: var(--color-darkgrey);}
.persona .anexo, .persona .email, .persona .oficina {text-align: center; font-size: 0.82rem;}
.persona .anexo img, .persona .oficina img {height: 10px; width: 10px;}

.academico .nombre {color: var(--color-red); font-weight: bolder; margin: 0;}
.academico .cargo span, .academico .rol span {word-wrap: break-word; display: block; font-size: 0.9rem;}
.academico .cargo {color: var(--color-darkergrey); font-weight: 300; margin:0; padding:0;}
.academico .rol {color: var(--color-grey); font-weight: 300; margin:0; padding:0;}
.academico {text-align: center;}
.academico .social {margin-top: -20px; margin-bottom: -5px; text-align: center; width: 100%; }
.academico .social span {padding: 5px 10px 8px 5px; border-radius: 5px;}
.academico .social img {height: 28px; padding-left: 5px;}
.academico .email a {color: var(--color-red); font-weight: 600; font-size: 1rem;}
.academico .anexo a, .academico .oficina a {color: var(--color-darkgrey);}
.academico .anexo, .persona .email, .academico .oficina {text-align: center; font-size: 0.9rem;}
.academico .anexo img, .academico .oficina img {height: 10px; width: 10px;}

.quien h3, .quien p, .quien h4, .quien li, .quien a {color: var(--color-darkergrey);}
.quien h3 {font-size: 1.5rem; font-weight: 700;}
.quien h4 {font-size: 1.1rem; font-weight: 600;}
.quien h3 small {font-size: 0.8rem; font-weight: 300; color: var(--color-demigrey); font-style: italic;}
.quien li em {color: var(--color-grey); font-size: 0.7rem; padding-left: 5px; font-style: italic;}
.quien a {text-decoration: none;}
.quien a:hover {color: var(--color-red);}


/* NOSOTROS:RECONOCIMIENTOS */

.card_reconocimiento div {color: white; padding: 15px; padding-top: 0px; margin-top: -15px; text-align: right;}
.card_reconocimiento img {opacity: 0.9; object-fit: cover; width: 100%; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--trapezoid-size)/2),0 100%);}
.card_reconocimiento span {font-weight: bold; display: block; text-align: right; font-size: 1.1rem;}
.card_reconocimiento p {line-height: 1; font-weight: 300; padding-top: 20px; text-align: left;}
.card_reconocimiento a {background-color: white; color: var(--color-red); text-decoration: none; padding: 15px; padding-top: 3px; padding-bottom: 3px; font-size: 0.8rem; font-weight: bold;}

/* NOSOTROS: CONTACTO */
section.contacto {background-image: url("/static/images/nosotros/header_contacto.jpg"); background-repeat: no-repeat; background-size: cover;}
div.contacto {background: rgba(51,51,51,0.5);  }
div.contacto .formulario {position: relative;} 
div.contacto p {color: white; font-weight: 900; font-size: 1.5rem;  text-shadow: 1px 1px var(--color-darkergrey);}
div.contacto h1 { color: white; font-weight: 300; font-size: 1.6rem;}
div.contacto .rrss {width: 400px;}
div.contacto .rrss .icono_sm {height: 50px; width: 50px; border: 0; padding: 0;}
div.contacto .enviar {background-color: var(--color-red); color: white; }

/* PEC: POSTULACION */
section.postulacion {background-image: url("/media/headers/educacion_continua-index.png"); background-repeat: no-repeat; background-size: cover;}
div.postulacion {background: rgba(51,51,51,0.5);  }
div.postulacion .formulario {position: relative;} 
div.postulacion p {color: white; font-weight: 900; font-size: 1.5rem;  text-shadow: 1px 1px var(--color-darkergrey);}
div.postulacion h1 { color: white; font-weight: 300; font-size: 1.6rem;}
div.postulacion .rrss {width: 400px;}
div.postulacion .rrss .icono_sm {height: 50px; width: 50px; border: 0; padding: 0;}
div.postulacion .enviar {background-color: var(--color-red); color: white; }

.mapa img {width: 100%;}
.mapa iframe {width: 100%; height: 100%;}
.mapa_vertical iframe {height: 420px; width: 100%;}

/* ECONTINUA */
.ramo_diploma {
    background-color: var(--color-lightgrey);
    height: 100px;
    padding: 7px;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 20px;
}
.ramo_diploma a {
    color: var(--color-darkgrey);
    font-weight: 600;
    font-size: 1rem;
}
.ramo_diploma:hover {
    background-color: var(--color-lemigrey);
}


.curso .datos {
    border-left: solid 50px var(--color-red);
    background-color: white;
}
.curso .datos h1 {
    color: var(--color-darkgrey);
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    height: 2.2rem;
}
.curso .datos .dato {
    height: 65px;
}

.card_curso {width: 100%; height: 200px; background-color: var(--color-lightgrey); position: relative;}
.card_curso .nombre {text-align: center; font-weight: bold; font-size: 0.9rem; padding: 20px 10px 10px 10px;}
.card_curso .semestre {
    color: white; padding: 45px 10px 10px 10px; font-size: 0.7rem; font-weight: lighter; text-align: center; font-style: italic;
    clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
}
.card_curso a {color: var(--color-darkergrey); height: 100%;}
.card_curso a div:first-child {height: 100%;}
.card_curso .nombre::after {
    content: "+";
    background-color: var(--color-red); 
    color: white; 
    text-align: center; 
    font-size: 1rem;
    height: 24px; 
    width: 24px; 
    border-radius: 50%; 
    position: absolute;
    bottom: 35px;
    left: 45%;
    z-index: 9000;
}

.cursos_por_area_pec a {
    text-decoration: none;
    color: white !important;
    font-weight: 600;
    text-align: center;
    padding: 10px 5px 10px 5px;
    margin-bottom: 15px;
}

.reconocimiento p {
    display: inline;
}
.reconocimiento p .alias {
    font-weight: bold;
}

/* MALLA */
.malla .ramo {
    display: inline-block;
    padding: 10px 5px 10px 5px;
    vertical-align: middle;
    width: 100%;
    height: 85px;
    color: var(--color-darkgrey);
    text-decoration: none;
    font-size: 0.9rem;
    text-align: center;
}

.malla .ramo.seleccionado {
    color: white;
}

.areas_especializacion a {
    display: block;
    color: var(--color-darkgrey) !important;
    border-left: solid 13px var(--color-lemigrey);
    font-size: 0.9rem;
    font-weight: bold !important;
    padding: 5px 0 5px 10px;
}

.areas_especializacion a.seleccionado {
    border-left: solid 13px var(--color-red);
}


/* MALLA PREGRADO */
.malla_pregrado div.separador-lg, .malla_pregrado div.separador-sm {
    background-color: var(--color-darkergrey);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
}

.malla_pregrado div.separador-lg {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 0 3px 0 3px;
    margin: 5px 5px 5px 0;
}

.malla_pregrado div.separador-sm {
    padding: 3px;
    margin: 10px 0 10px 5px;
}

.malla_pregrado div.semestre {
    color: var(--color-red);
    border-top: solid 1px var(--color-grey);
    font-weight: 700;
    font-size: 0.7rem;
    text-align: center;
    padding: 2px;
    margin: 5px 0 0 5px;
    letter-spacing: 0.1rem;
}

.malla_pregrado div.ramo {
    width: 160px;
    padding: 5px;
    vertical-align: middle;
    height: 120px;
    font-size: 0.8rem;
    text-align: center;
    font-weight: 600;
    margin: 10px 10px 5px 5px;
    color: var(--color-darkergrey);
    background-color: var(--color-lightgrey);
}
.malla_pregrado div.ramo .creditos {
    font-style: italic;
    font-size: 0.65rem;
    font-weight: 400;
}
.malla_pregrado div.ramo .codigo {
    font-weight: 800;
    font-size: 0.9rem;
}
.malla_pregrado div.ramo:hover {
    background-color: var(--color-lemigrey);
}

.malla_pregrado div.ramo a {
    color: var(--color-darkgrey);
    background-color: inherit;
}
.malla_pregrado div.ramo a::after {
    background-image: url("/static/images/iconos/descarga_gris.svg");
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 100%; 
    height: 13px;
    content:"";

}
.malla_pregrado div.ramos, .malla_pregrado div.bloque_semestre {
    break-inside: avoid;
}

.whatsapp:hover {
    color: #25D366 !important;
}

.whatsapp img {
    height: 16px;
    vertical-align: middle;
}

.estadistica .numero {
    vertical-align: middle;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    margin: 0 20px 0 20px;
    text-align: center;
    font-weight: 800;
    font-size: 1.3rem;
}
.estadistica .texto {
    text-align: center;
    width: 110px;
    height: 60px;
    font-size: 0.8rem;
    margin-top: 10px;
    font-weight: 400;
}

.tesis {border-left: solid 3px var(--color-red); padding: 0 0 0 20px; margin: 0 0 30px 0;}
.tesis .estudiante, .tesis .grado, .tesis .tema, .tesis .guia {margin-bottom: 0px;}

.areas_investigacion a {
    display: block;
    color: var(--color-darkgrey) !important;
    border: 0;
    border-left: solid 13px var(--color-lemigrey);
    font-size: 0.9rem;
    font-weight: bold !important;
    padding: 5px 0 5px 10px;
}
.areas_investigacion a.active {
    margin-top: inherit !important;
    background-color: inherit !important;
    border-color: var(--color-red) !important;
    border-left: solid 13px var(--color-red);
}
.volver {
    color: var(--color-darkergrey);
    font-weight: 700;
    border-left: solid 13px var(--color-lemigrey);
    padding: 5px 0 5px 10px;
}
.volver:hover {
    color: var(--color-darkergrey);
    border-left: solid 13px var(--color-red);
}

.submenu a[target="_blank"]:hover:after {
    background-image: url("/static/images/iconos/external-link_gris.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px; 
    height: 13px;
    margin-left: 3px;
    content:"";
}

.offcanvas-body a[target="_blank"]:hover::after, .footer_menu_lg a[target="_blank"]:hover::after {
    background-image: url("/static/images/iconos/external-link.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px; 
    height: 13px;
    margin-left: 3px;
    content:"";
}

.bloque a[target="_blank"]:not(.not-external)::after {
    background-image: url("/static/images/iconos/external-link_rojo.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px; 
    height: 13px;
    margin-left: 3px;
    content:"";
}

.card_evento a[target="_blank"]:not(.not-external)::after {
    background-image: url("/static/images/iconos/external-link.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px; 
    height: 13px;
    margin-left: 3px;
    content:"";
}
.btn.btn-danger img {height: 18px;}

.reporte_tecnico {padding: 0; margin: 0 0 40px 0; color: var(--color-darkergrey);}
.reporte_tecnico .tr {height: 50px;}
.reporte_tecnico p {margin-bottom: 0;}
.reporte_tecnico .url::after {
    background-image: url("/static/images/iconos/descarga_rojo.svg");
    background-size: 13px 13px;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 3px;
    content:"";
}
.reporte_tecnico .titulo {font-style: italic; font-weight: 400; font-size: 1.15rem;}
.reporte_tecnico .fecha {font-size: 0.95rem; font-weight: 300; font-style: italic;}
.reporte_tecnico .personas {font-size: 0.9rem;}

.pagination .page-item .page-link {
    color: var(--color-darkergrey);
    border: solid 1px var(--color-whiteish);
    background-color: var(--color-lightgrey);
    padding: 3px 13px 3px 13px;
    font-weight: 600;
}

.pagination .page-item.active .page-link {color: white; background-color: var(--color-red); border: solid 1px var(--color-whiteish);}
.pagination .page-item:not(.active) .page-link:hover {color: var(--color-red);}
.filtro-select {max-width: 250px; background-color: #4d4d4d; color: #F0F0F0; font-weight: 400; background-image: url("/static/images/iconos/expand.svg")}
.filtro-ano {max-width: 100px;}

.fondecyt {padding: 0; margin: 0 0 40px 0; color: var(--color-darkergrey);}
.fondecyt p {margin-bottom: 0;}
.fondecyt .titulo {font-style: italic; font-weight: 400; font-size: 1.15rem;}
.fondecyt .fecha {font-size: 0.95rem; font-weight: 300; }
.fondecyt .personas {font-size: 0.9rem;}
.fondecyt .tipo {font-size: 0.8rem; font-weight: 300; font-style: italic;}

/* MALLA MTI */
.malla_mti div.programa {
    color: var(--color-red);
    border-top: solid 1px var(--color-grey);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 2px;
    margin: 15px 0 0 5px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}
.malla_mti a.ramo {
    width: 170px;
    padding: 5px;
    height: 75px;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 600;
    margin: 10px 10px 5px 5px;
    color: var(--color-darkergrey);
    background-color: var(--color-lightgrey);
}
.malla_mti a.ramo .creditos {
    font-style: italic;
    font-size: 0.65rem;
    font-weight: 400;
}
.malla_mti a.ramo .codigo {
    font-weight: 800;
    font-size: 0.9rem;
}
.malla_mti a.ramo a {
    color: var(--color-darkgrey);
    background-color: inherit;
}
.malla_mti a.ramo:hover {
    background-color: var(--color-lemigrey);
}
.malla_mti a.ramo .fecha_inicio {
    color: white;
    font-size: 0.6rem;
    bottom: 0 !important;
}


/* MALLA MAGISTER */
.malla_magister div.programa {
    color: var(--color-red);
    border-top: solid 1px var(--color-grey);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 2px;
    margin: 15px 0 0 5px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.malla_magister div.ramo {
    width: 160px;
    padding: 5px;
    vertical-align: middle;
    height: 110px;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 600;
    margin: 10px 10px 5px 5px;
    color: var(--color-darkergrey);
    background-color: var(--color-lightgrey);
}
.malla_magister div.ramo a {
    color: var(--color-darkgrey);
    background-color: inherit;
}
.malla_magister div.ramo a::after {
    background-image: url("/static/images/iconos/descarga_gris.svg");
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 100%; 
    height: 13px;
    content:"";

}
.malla_magister div.ramo .creditos {
    font-style: italic;
    font-size: 0.65rem;
    font-weight: 400;
}
.malla_magister div.ramo .codigo {
    font-weight: 800;
    font-size: 0.9rem;
}
.malla_magister div.ramo div {
    color: var(--color-darkgrey);
    background-color: inherit;
}


.cus_admin a {font-size: 0.8rem;}

@page {size: letter; margin: 15mm; }

.listado_cursos .curso div {display: inline-block;}
/* .listado_cursos .curso .codigo {min-width: 100px;}
.listado_cursos .curso .nombre {min-width: 600px;} */
.listado_cursos .curso:hover {color: var(--color-red);}
.listado_cursos h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-red);
    border-top: solid 1px var(--color-lemigrey);
    border-bottom: 0;
    margin: 20px 0 15px 0;
    padding-top: 10px;
}
.listado_cursos .codigo a {
    color: var(--color-red);
}
.listado_cursos .codigo a img {
    height: 15px;
    padding-bottom: 3px;
}
.listado_cursos .creditos {
    font-size: 0.9rem;
    vertical-align: baseline;
}

.bits {
    border-bottom: solid 5px var(--color-red);
}
.bits h1 {
    font-size: 2rem;
    border-bottom: solid 5px var(--color-red);
    text-decoration: none;
    color: var(--color-darkergrey);
    font-weight: 600;
}
.bits .articulo .pagina {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-darkergrey);
}
.bits .articulo .titulo {
    font-size: 1.2rem;
    color: var(--color-darkergrey);

}
.bits .articulo .autores {
    font-size: 0.9rem;
    color: var(--color-demigrey);
}
.bits .articulo .descarga img {
    width: 20px;
}

/* DIFUSION */

.revista_card img {height: 320px;}
.revista_card div {max-width: 250px; color: var(--color-darkgrey);}

.eventos img { width: 15px; height: 15px;}
.eventos .mes {width: 145px; height: 145px; border-radius: 50%; background-color: var(--color-red);}
.eventos .mes span {margin-top: 55px;}
.eventos .titulo a {color: var(--color-red); font-weight: 600; text-decoration: none;}
.eventos .lugar a {color: var(--color-red); font-weight: 400; text-decoration: none;}
.eventos .lugar img.oficina {height: 16px; vertical-align: baseline; margin-right: 6px;}
.eventos .lugar img.youtube {height: 16px; vertical-align: middle; margin-right: 2px;}

.header_bits {height: 380px; max-width: 1920px; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 40px;}
.header_bits .caption {color: #fff; background: rgba(51,51,51,0.7); }
.header_bits .revista img {max-height: 200px;}