/* 
 * 
 * Estilos Plantilla
 * 
 * 
*/

/*--------------------* Variables *--------------------*/

:root {

    /* Colores Versión 1 */
    --color-1: #50ccbf;
    --color-1-rgba: rgba(80, 204, 191, 1);
    --color-2: #80eae4;
    --color-2-rgba: rgba(128, 234, 228, 1);
    
    /* Colores Versión 2 */
    --color-3: #7188f3;
    --color-3-rgba: rgba(113, 136, 243, 1);
    --color-4: #63e8e8;
    --color-4-rgba: rgba(99, 232, 232, 1);
    
    /* Colores Versión 3 */
    --color-5: #ae8830;
    --color-5-rgba: rgba(174, 136, 48, 1);
    --color-6: #f0ce72;
    --color-6-rgba: rgba(240, 206, 114, 1);

    /* Colores Plantilla */
    --color-negro-2: #141414;
    --color-bg-negro-2-rgba: rgb(20, 20, 20, 0.4);
    --color-gris-4: #f1f1f1;
    --color-border-1-rgba: rgba(112, 112, 112, 0.4);

    /* Ángulos */
    --angulo-45: 45deg;
    --angulo-90: 90deg;

    /* Fonts Family */
    --font-family: "Red Hat Display", sans-serif;

    /* Iconos */
    --caret-down-color-1: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');

}

/*--------------------* Estilos Generales *--------------------*/

body {
    font-family: var(--font-family);
}

/*--------------------* Recuadros *--------------------*/

.caja-simple {
    background-color: var(--color-gris-4);
    color: var(--color-negro-2);
}

.note {
    background-color: var(--color-gris-4);
}

.recuadro1 {
    color: var(--color-negro-2);
}

/*--------------------* Citas *--------------------*/

.recuadro-cita {
    color: var(--color-negro-2);
}

/*--------------------* Modales *--------------------*/

.modal-title {
    color: var(--color-negro-2);
}

.modal-header .btn-close {
    background-color: var(--color-negro-2);
}

.modal-header .btn-close:hover,
.modal-header .btn-close:active,
.modal-header .btn-close:focus {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

.modal-body {
    color: var(--color-negro-2);
}

.modal-footer .btn-secondary {
    background-color: var(--color-negro-2);
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-secondary:active,
.modal-footer .btn-secondary:focus {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

/*--------------------* Botones *--------------------*/

.btn-op-menu {
    background-color: var(--color-blanco);
    color: var(--color-negro-2);
    border: none;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 15px;
    transition: all 0.5s ease-in-out;
}

.btn-op-menu:hover,
.btn-op-menu:active,
.btn-op-menu:focus,
.btn-op-menu.active {
    background-color: var(--color-negro-2) !important;
    color: var(--color-blanco) !important;
}

/*--------------------* Tablas *--------------------*/

table.table-style-1,
table.table-style-1 .titulo-tabla,
table.table-style-1 .subtitulo-tabla {
    color: var(--color-negro-2);
}

table.table-style-1,
table.table-style-1 tr,
table.table-style-1 td {
    border-color: var(--color-negro-2);
}

table.table-style-1 a {
    color: var(--color-negro-2) !important;
}

table.table-style-1 a:hover {
    color: var(--color-bg-negro-2-rgba) !important;
}

/*--------------------* Acordeones *--------------------*/

/* Accordion - Estilo Tipo "Contenido" */

.accordion-contenido .accordion-item {
    color: var(--color-negro-2);
    border-radius: 0px;
    border: 0px;
    background-color: transparent;
    padding: 20px 0;
}

.accordion-contenido .accordion-item:first-of-type {
    padding-top: 0 !important;
}

.accordion-contenido .accordion-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.accordion-contenido .accordion-header::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
}

.accordion-contenido .accordion-button {
    width: 350px;
    position: relative;
    z-index: 1;
}

.accordion-contenido .accordion-button::after,
.accordion-contenido .accordion-button:not(.collapsed)::after {
    background-image: var(--caret-down-color-1);
}

.accordion-contenido .accordion-button::after {
    z-index: 1;
}

.accordion-contenido .accordion-button .accordion-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-negro-2);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
}

.accordion-contenido .accordion-button,
.accordion-contenido .accordion-button .accordion-title {
    height: 60px;
    border-radius: 25px !important;
}

.accordion-contenido .accordion-button.collapsed .accordion-title {
    background-color: var(--color-gris-4);
}

.accordion-contenido .accordion-button:not(.collapsed) .accordion-title {
    background-color: transparent !important;
}

.accordion-contenido .accordion-button.collapsed:hover .accordion-title {
    background-color: transparent !important;
}

.accordion-contenido .accordion-body {
    padding: 10px 0;
}

/* Accordion - Estilo Tipo "Contenido" en "Temas", "Actividades", "Proyectos" y "Retos" */

#accordionContenido {
    padding-bottom: 100px;
}

#accordionContenido .accordion-button {
    width: 700px;
}

#accordionContenido .accordion-body {
    background-color: var(--color-blanco);
    border-radius: 10px;
    margin: 20px 0 10px;
    padding: 30px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#accordionContenido .accordion-item {
    padding: 30px 0;
}

#accordionContenido .accordion-body .contenedor-contenido {
    padding-bottom: 25px;
}

#accordionContenido .accordion-body .contenedor-contenido:last-child {
    padding-bottom: 0;
}

#accordionContenido .accordion-body .encabezado {
    display: flex;
    justify-content: left;
    border-bottom: 2px solid;
    margin-bottom: 15px;
}

#accordionContenido .accordion-body .encabezado h1 {
    color: var(--color-negro-2);
    margin: 0;
    padding: 5px 20px;
    font-size: 20px;
    border-radius: 10px 10px 0 0;
}

#accordionContenido #referencias #leyenda-marca,
#accordionContenido #copyright {
    display: none;
}

/* Accordion - Estilo Tipo "Contenido" en "Temas" que incluye sección "Video explicativo" */

#accordionContenido .accordion-body #video-explicativo {
    display: none;
}

.activa-video #accordionContenido .accordion-button {
    width: 900px;
}

.activa-video #accordionContenido .accordion-body #video-explicativo {
    display: block;
}

/* Accordion - Estilo Tipo "Contenido" en modales "Metodologia", "Requerimientos" y "Distinciones" */

#accordionMetodologia .accordion-button,
#accordionRequerimientos .accordion-button,
#accordionDistinciones .accordion-button {
    width: 500px;
}

#accordionMetodologia .accordion-body,
#accordionRequerimientos .accordion-body,
#accordionDistinciones .accordion-body {
    background-color: var(--color-blanco);
    border-radius: 10px;
    margin: 20px 0 10px;
    padding: 30px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#accordionMetodologia .accordion-item,
#accordionRequerimientos .accordion-item,
#accordionDistinciones .accordion-item {
    padding: 30px 0;
}

#accordionMetodologia .accordion-item:first-of-type,
#accordionRequerimientos .accordion-item:first-of-type,
#accordionDistinciones .accordion-item:first-of-type {
    padding-top: 30px !important;
}

#accordionMetodologia .accordion-button.collapsed .accordion-title,
#accordionRequerimientos .accordion-button.collapsed .accordion-title,
#accordionDistinciones .accordion-button.collapsed .accordion-title {
    background-color: var(--color-blanco);
}

/* Accordion - Estilo Tipo "Contenido" en modal "Requerimientos" */

#accordionRequerimientos {
    padding-bottom: 0px;
    margin: 1rem 0;
}

#accordionRequerimientos .accordion-button,
#accordionRequerimientos .accordion-button .accordion-title {
    height: 60px;
}

#accordionRequerimientos .accordion-button .accordion-title {
    padding: 0 100px;
    text-align: center;
}

/* Accordion - Estilo Tipo "Contenido" como interactivo dentro de los temas */

.accordion-interactivo {
    margin-bottom: 10px !important;
}

.accordion-interactivo .accordion-item {
    padding: 10px 0 !important;
}

.accordion-interactivo .accordion-item:first-of-type {
    padding-top: 10px !important;
}

.accordion-interactivo .accordion-body {
    margin-bottom: 5px !important;
}

.accordion-interactivo .accordion-button {
    width: 100% !important;
}

.accordion-interactivo .accordion-button .accordion-title {
    font-size: 18px !important;
}

.accordion-interactivo .accordion-button.collapsed .accordion-title {
    background-color: var(--color-blanco) !important;
}

/* Accordion - Estilo Tipo "Normal" */

.accordion-normal {
    margin-bottom: 20px;
}

.accordion-normal .accordion-item {
    padding: 0 !important;
    border: 1px solid var(--color-gris-1);
}

.accordion-normal .accordion-header {
    display: block;
    position: relative;
}

.accordion-normal .accordion-header::after {
    display: none;
}

.accordion-normal .accordion-button {
    width: 100% !important;
    font-weight: 700;
    color: var(--color-negro);
    border-radius: 0 !important;
    background: transparent !important;
}

.accordion-normal .accordion-button:not(.collapsed),
.accordion-normal .accordion-button.collapsed {
    background-color: var(--color-gris-4) !important;
}

.accordion-normal .accordion-body {
    background-color: var(--color-blanco) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/*--------------------* Cards *--------------------*/

.card-tipo1,
.card-tipo2 {
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

/* Cards "Temas" */

.card-tipo1 .card-header {
    background-color: var(--color-gris-4);
    border-radius: 15px 15px 0 0;
    padding: 16px 0 0;
    border: 2px solid transparent;
    border-bottom-width: 0px;
    background-clip: padding-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    transition: all 0.5s ease-in-out;
}

.card-tipo1 .card-header::after {
    content: "";
    width: 80%;
    height: 2px;
    position: absolute;
    bottom: -2px;
    transition: all 0.5s ease-in-out;
}

.card-tipo1 .card-body {
    min-height: 170px;
    background-color: var(--color-gris-4);
    border-radius: 0 0 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    border-top-width: 0px;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
    word-break: break-word;
}

.card-tipo1 .card-title,
.card-tipo1 .card-text {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.card-tipo1 .card-title {
    padding-bottom: 15px;
}

.card-tipo1:hover {
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

.card-tipo1:hover .card-header {
    background-color: var(--color-blanco);
    border: 2px transparent;
}

.card-tipo1:hover .card-header::after {
    background: transparent !important;
}

.card-tipo1:hover .card-body {
    border: 2px transparent;
}

/* Cards "Actividades, Proyectos y Retos" */

.card-tipo2 .card-body {
    min-height: 225px;
    background-color: var(--color-gris-4);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.5s ease-in-out;
}

.card-tipo2 .card-title,
.card-tipo2 .card-text {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.card-tipo2 .card-title {
    padding-bottom: 15px;
}

.card-tipo2:hover {
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

.card-tipo2:hover .card-header {
    background-color: var(--color-blanco);
    border-color: var(--color-blanco);
}

.card-tipo2:hover .card-body {
    border: 0px solid transparent;
}

/*--------------------* Header *--------------------*/

#header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
}

#header .contenedor-logo .logo {
    width: 250px;
    height: 72px;
    margin: 40px 0px;
}

/*---------------* Ventana Resultados y Buscador * ----------------*/

.buscador {
    display: flex;
    justify-content: end;
    padding: 0 5%;
}

.buscador .contenedor-buscador {
    width: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
}

/* Campo de búsqueda */

.contenedor-buscador .form-control {
    width: 300px;
    color: var(--color-negro-2);
    font-size: 16px;
    border-radius: 20px;
    box-shadow: none;
    border-color: transparent;
    outline: none;
    padding: 7px 45px 7px 20px;
    transition: all 0.5s ease-in-out;
}

.contenedor-buscador .form-control::placeholder {
    opacity: 0.5;
}

.contenedor-buscador .form-control + .bi {
    color: var(--color-negro-2);
    cursor: default;
    font-size: 16px;
    position: absolute;
    right: 20px;
    transition: all 0.5s ease-in-out;
}

.contenedor-buscador .form-control:hover + .bi,
.contenedor-buscador .form-control + .bi:hover {
    color: var(--color-bg-negro-2-rgba);
}

/* Contenedor - Lista de resultados */

#resultado-busqueda {
	width: 100vw;
	height: 100vh;
	background: var(--color-gris-4);
	position: fixed;
	top: 0;
	left: 0;
	padding: 25px;
    opacity: 0;
	overflow-y: auto;
	overflow-x: hidden;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* evita clics cuando está oculto */
	z-index: 4;
}

#resultado-busqueda .buscador {
    display: flex;
    justify-content: center;
    margin: 20px 0px 0px;
}

#resultado-busqueda .contenedor-buscador {
    width: 300px;
}

#resultado-busqueda.mostrar {
    opacity: 1;
    pointer-events: auto;
}

/* Botón Cerrar - Búsqueda */

.botones-container#btn-busqueda {
    display: flex;
    justify-content: end;
}

.botones-container#btn-busqueda .opciones a, 
.botones-container#btn-busqueda .opciones a:hover {
    background-color: transparent !important;
}

.botones-container#btn-busqueda .opciones a {
    width: 50px;
    height: 50px;
    color: var(--color-negro-2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.botones-container#btn-busqueda .opciones a:hover {
    color: var(--color-bg-negro-2-rgba);
}

.botones-container#btn-busqueda .opciones .bi {
    font-size: 35px;
}

/* Aviso de resultados */

#no-resultados {
	display: none;
	padding: 30px 0px;
	text-align: center;
}

#no-resultados h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-negro-2);
}

/* Lista de resultados */

#cards-resultados {
    margin-top: 0px;
}

/*--------------------* Banner *--------------------*/

#banner .contenedor-banner {
    width: 100%;
    position: relative;
}

#banner .detalle-banner,
#banner .fondo-banner {
    width: 100%;
    height: 100%;
}

#banner .detalle-banner {
    position: absolute;
    top: 0;
    z-index: 1;
}

#banner .detalle-banner .row {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

#banner .detalle-banner .titulo {
    font-size: 56px;
    font-weight: 900;
    color: var(--color-blanco);
}

#banner .detalle-banner .separador {
    height: 2px;
    width: 70px;
    background-color: var(--color-blanco);
    margin: 25px 0;
}

#banner .detalle-banner #contenido-competencia p {
    font-size: 22px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-blanco);
}

#banner .fondo-banner {
    background-size: cover !important;
    overflow: hidden;
    position: relative;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

#banner .fondo-banner:before {
    content: "";
    background: rgba(6, 12, 34, 0.5);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

/* Banner - Ajustando Altura */

#banner-index {
    height: 650px;
}

#contenido-opciones #banner-index,
#contenido-tema #banner-contenido,
#contenido-actividad #banner-contenido {
    height: 450px;
}

/* Banner - Index */

#banner-index .fondo-banner {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/* Banner - Sección de opciones */

#contenido-opciones #banner-index .detalle-banner .row {
    justify-content: center;
}

#contenido-opciones #banner-index .contenedor-titulo {
    text-align: center;
}

#contenido-opciones #banner-index .separador, 
#contenido-opciones #banner-index #contenido-competencia {
    display: none;
}

/* Banner - Contenido */

#banner-contenido .contenedor-titulo {
    text-align: center;
}

/* Banner - Temas */

#banner-contenido .fondo-banner {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/* Banner - Actividades, Proyectos y Retos */

#banner-contenido #banner-actividad  {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/*--------------------* Información General *--------------------*/

#info-general {
    background-color: var(--color-gris-4);
    padding: 70px 0 60px;
}

#info-general .card {
    border: 0px;
    border-radius: 25px;
    box-shadow: 3px 2px 15px 2px var(--color-border-1-rgba);
}

#info-general .card-title {
    font-weight: 700;
    margin: 0;
}

/* Introducción */

#info-general #card-introduccion .card-body {
    padding: 40px 80px;
}

#info-general #card-introduccion .card-title {
    margin-bottom: 20px;
}

#info-general #card-introduccion .card-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

/* Botón "Iniciar Curso" */

#info-general #card-iniciar {
    cursor: pointer;
    height: 100%;
    background-color: transparent;
    color: var(--color-negro-2);
    transition: all 0.5s ease-in-out;
}

#info-general #card-iniciar .card-image {
    display: flex;
    justify-content: center;
    position: relative;
}

#info-general #card-iniciar .card-image img {
    width: 100%;
}

#info-general #card-iniciar .card-body {
    height: 100%;
    padding: 0px;
    text-align: center;
    align-content: center;
}

#info-general #card-iniciar .card-body .card-icon {
    width: 80px;
    height: 80px;
    margin: 25px auto;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info-general #card-iniciar .card-body .bi {
    display: block;
    width: 50px;
    font-size: 60px;
    color: var(--color-blanco);
}

#info-general #card-iniciar .card-body .card-title {
    font-size: 38px;
    line-height: 36px;
    margin-bottom: 25px !important;
}

#info-general #card-iniciar.active,
#info-general #card-iniciar:hover {
    background-color: var(--color-negro-2);
    color: var(--color-blanco);
}

/* Acreditaciones / Requerimientos / Temario / Metodología / Calendario */

#info-general .card-modal {
    padding: 30px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal .card-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
}

#info-general .card-modal .card-icon {
    width: 80px;
    height: 80px;
    background-color: var(--color-blanco);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    position: relative;
}

#info-general .card-modal:hover .card-icon {
    background-color: var(--color-negro-2);
}

#info-general .card-modal .card-icon .icono-ig {
    width: 65px;
    height: 65px;
    background-color: var(--color-negro-2);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-size: cover;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-icon .icono-ig {
    background-color: var(--color-blanco);
}

#info-general .card-modal #icono-acreditaciones {
    width: 45px;
    height: 55px;
    mask-image: url("../img/iconos-generales/icono-acreditaciones.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-acreditaciones.svg");
}

#info-general .card-modal #icono-requerimientos {
    width: 50px;
    height: 45px;
    mask-image: url("../img/iconos-generales/icono-requerimientos.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-requerimientos.svg");
}

#info-general .card-modal #icono-metodologia {
    mask-image: url("../img/iconos-generales/icono-metodologia.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-metodologia.svg");
}

#info-general .card-modal #icono-temario {
    mask-image: url("../img/iconos-generales/icono-temario.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-temario.svg");
}

#info-general .card-modal #icono-calendario {
    mask-image: url("../img/iconos-generales/icono-calendario.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-calendario.svg");
}

#info-general .card-modal #icono-biblioteca {
    mask-image: url("../img/iconos-generales/icono-biblioteca.svg");
    -webkit-mask-image: url("../img/iconos-generales/icono-biblioteca.svg");
}

#info-general .card-modal .card-body {
    height: 60px;
    color: var(--color-negro-2);
    padding: 0;
    display: flex;
    align-items: end;
    position: relative;
    text-align: center;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-body {
    color: var(--color-blanco);
}

#info-general .card-modal .card-title::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--color-negro-2);
    position: relative;
    bottom: 20px;
    transition: all 0.5s ease-in-out;
}

#info-general .card-modal:hover .card-title::before {
    background-color: var(--color-blanco);
}

/* Card Modal Versión 1 - Icono lateral (Se posiciona el icono al lado izquierdo) */

.card-icono-lateral .card-image {
    justify-content: left;
}

.card-icono-lateral .card-title::before {
    margin-left: auto;
}

.card-icono-lateral .card-body {
    justify-content: right;
}

/* Card Modal Versión 2 - Icono centrado (Se posiciona el icono al centro) */

.card-icono-centrado .card-image {
    justify-content: center;
}

.card-icono-centrado .card-title::before {
    margin: 0 auto;
}

.card-icono-centrado .card-body {
    justify-content: center;
}

/* Contenedor IG Versión 2 - Incluye botón de "Biblioteca Jurídica" */

#info-general #ig-version-2 .card-image {
    margin: 15px 0 45px;
}

#info-general #ig-version-2 .card-body {
    align-items: baseline;
}

/*--------------------* Menú Opciones *--------------------*/

#menu {
    height: 0;
    transition: all 0.5s ease-in-out;
    pointer-events: none;
}

#menu .container {
    display: none;
    transition: all 0.5s ease-in-out;
}

#menu.open {
    height: 170px;
}

#menu.open .container {
    display: block;
}

#menu .op-menu {
    margin: 50px 0;
}

#contenido-opciones #menu {
    height: 170px;
}

#contenido-opciones #menu .container {
    display: block;
}

/*--------------------* Contenido Menú "Temas", "Actividades", "Proyectos" y "Retos" *--------------------*/

#contenido-menu {
    background-color: var(--color-gris-4);
    pointer-events: none;
}

#contenido-menu .contenedor-tabs {
    padding-bottom: 100px;
}

/* Tabs */

#contenido-menu .contenedor-tabs #tab-temas,
#contenido-menu .contenedor-tabs #tab-actividades,
#contenido-menu .contenedor-tabs #tab-proyectos {
    display: none;
}

#contenido-menu .contenedor-tabs #tab-temas.active,
#contenido-menu .contenedor-tabs #tab-actividades.active,
#contenido-menu .contenedor-tabs #tab-proyectos.active {
    display: block;
}

/*--------------------* Contenido Menú "Actividades" *--------------------*/

/* División de Actividades por Temas */

#cards-division .card-tipo2 .card-body {
    display: inline-block;
    align-content: center;
}

#cards-division .card-tipo2 .separador {
    width: 120px;
    height: 2px;
    margin: 15px auto;
    transition: all 0.5s ease-in-out;
}

#cards-division .card-tipo2:hover .separador {
    background: var(--color-negro) !important;
}

/*--------------------* Contenido Tema / Actividad / Proyecto / Reto *--------------------*/

#contenido {
    background-color: var(--color-gris-4);
    pointer-events: none;
}

/*--------------------* Contenido Tema -  *--------------------*/



/*--------------------* Botones Navegación *--------------------*/

.botones-container .opciones a:hover {
    background-color: var(--color-bg-negro-2-rgba) !important;
}

/* Migaja */

.botones-container .migaja {
    display: none;
}

/* Migaja - Versión Maestría */

.curso-v4 .botones-container#btn-temas, 
.curso-v4 .botones-container#btn-actividad {
    display: flex;
}

.curso-v4 .botones-container .migaja {
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
}

.curso-v4 .botones-container .migaja p {
    font-size: 18px;
}
.curso-v4 .botones-container .opciones {
    width: 100%;
    align-items: center;
    justify-content: right !important;
}

/* Boton Atras */

#contenido-menu .botones-nav {
    padding: 30px 0 10px;
}

.botones-container#btn-atras {
    height: 100%;
}

.botones-container#btn-atras .opciones {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.botones-container#btn-atras .opciones a {
    width: 55px;
    height: 60px;
}

/* Botones Temas, Actividades, Proyectos y Retos */

#contenido-tema .botones-nav,
#contenido-actividad .botones-nav {
    padding: 30px 0;
}

.botones-container#btn-temas,
.botones-container#btn-actividad {
    height: 100%;
}

.botones-container#btn-temas .opciones,
.botones-container#btn-actividad .opciones {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.botones-container#btn-temas .opciones a,
.botones-container#btn-actividad .opciones a {
    width: 60px;
    height: 60px;
}

/*--------------------* Footer *--------------------*/

#footer {
    background-color: var(--color-blanco);
}

#footer .copyright {
    color: var(--color-negro-2);
}

#footer .social a,
#footer .icon-autor a {
    background-color: var(--color-negro-2);
}

#footer .social a.facebook:hover,
#footer .social a.twitter:hover,
#footer .social a.instagram:hover,
#footer .social a.linkedin:hover,
#footer .icon-autor a.autor:hover {
    background-color: var(--color-negro-2);
    opacity: 0.4;
}

/*--------------------* Autor *--------------------*/

#OpenA {
    color: var(--color-negro-2);
    border-color: var(--color-negro-2);
}

/*--------------------* Animación "Loading" *--------------------*/

#contenido-opciones .loading-overlay,
#contenido-tema .loading-overlay,
#contenido-actividad .loading-overlay {
    display: block;
}

/*--------------------* Interactivos *--------------------*/

.imagenesGennially {
    width: 100%;
    margin-bottom: 15px;
}

.imagenesGennially .embed-responsive {
    min-height: 700px;
}

.imagenesPDF {
	display: none !important;
}

/*--------------------* Estilos Versión Local *--------------------*/

.abrirAcordeones #contenido {
    pointer-events: all;
}

.abrirAcordeones #accordionContenido .accordion-button.collapsed .accordion-title {
    background-color: transparent !important;
}

.abrirAcordeones #accordionContenido .accordion-button.collapsed::after {
    transform: rotate(-180deg);
}

.abrirAcordeones #accordionContenido .collapse,
.abrirAcordeones #accordionContenido #referencias #leyenda-marca,
.abrirAcordeones #accordionContenido #copyright {
    display: block !important;
}

/*--------------------* Genera Tema PDF *--------------------*/

.screen .botones-nav {
    padding: 80px 0 0 !important;
}

.screen #accordionContenido {
    padding-bottom: 80px;
}

.screen #accordionContenido .accordion-button.collapsed .accordion-title {
    background-color: transparent !important;
}

.screen #accordionContenido .accordion-button.collapsed::after {
    transform: rotate(-180deg);
}

.screen #accordionContenido .collapse,
.screen #accordionContenido #referencias #leyenda-marca,
.screen #accordionContenido #copyright {
    display: block !important;
}

.screen #accordionContenido #leyenda-marca {
    margin-top: 20px;
}

.screen #accordionContenido #copyright {
    padding: 0;
}

.screen .botones-nav .botones-container .opciones,
.screen .back-to-top,
.screen #accordionContenido #recursos,
.screen #footer {
	display: none !important;
}

.screen .imagenesPDF {
	display: block !important;
}
 
.screen .imagenesGennially {
	display: none !important;
}

/*--------------------* Versiones - Colores *--------------------*/

/* Versión normal */

a {
    color: var(--color-negro-2);
}

a:hover,
a:active,
a:focus {
    color: var(--color-bg-negro-2-rgba);
}

.note,
.recuadro1 {
    border-color: var(--color-negro-2);
}

table.table-style-1 .titulo-tabla {
    background-color: var(--color-gris-4);
}

table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-gris-3);
}

.accordion-contenido .accordion-button:not(.collapsed),
.accordion-contenido .accordion-button.collapsed,
#menu,
.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-gris-3) 10%, var(--color-gris-1) 90%);
}

.card-tipo1,
.accordion-contenido .accordion-header::after,
#info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-gris-1) 10%, var(--color-gris-3) 90%);
}

.card-tipo2,
.card-tipo1 .card-header::after,
.card-tipo1:hover .card-body,
.card-tipo2:hover .card-body,
#info-general .card-modal,
#cards-division .card-tipo2 .separador {
    background: linear-gradient(45deg, var(--color-gris-3) 10%, var(--color-gris-1) 90%);
}

#accordionContenido .accordion-body .encabezado {
    border-color: var(--color-gris-4);
}

#accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-gris-4);
}

#leyenda-marca {
    border-color: var(--color-negro-2);
}

/* Versión 1 */

.curso-v1 a {
    color: var(--color-1);
}

.curso-v1 a:hover,
.curso-v1 a:active,
.curso-v1 a:focus {
    color: var(--color-2);
}

.curso-v1 .note,
.curso-v1 .recuadro1 {
    border-color: var(--color-1);
}

.curso-v1 table.table-style-1 .titulo-tabla {
    background-color: var(--color-1);
}

.curso-v1 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-2);
}

.curso-v1 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v1 .accordion-contenido .accordion-button.collapsed,
.curso-v1 #menu,
.curso-v1.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-1-rgba) 10%, var(--color-2-rgba) 90%);
}

.curso-v1 .card-tipo1,
.curso-v1 .accordion-contenido .accordion-header::after,
.curso-v1 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-2-rgba) 10%, var(--color-1-rgba) 90%);
}

.curso-v1 .card-tipo2,
.curso-v1 .card-tipo1 .card-header::after,
.curso-v1 .card-tipo1:hover .card-body,
.curso-v1 .card-tipo2:hover .card-body,
.curso-v1 #info-general .card-modal,
.curso-v1 #cards-division .card-tipo2 .separador {
    background: linear-gradient(45deg, var(--color-1-rgba) 10%, var(--color-2-rgba) 90%);
}

.curso-v1 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-1);
}

.curso-v1 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-1);
}

.curso-v1 #leyenda-marca {
    border-color: var(--color-2);
}

/* Versión 2 */

.curso-v2 a {
    color: var(--color-3);
}

.curso-v2 a:hover,
.curso-v2 a:active,
.curso-v2 a:focus {
    color: var(--color-4);
}

.curso-v2 .note,
.curso-v2 .recuadro1 {
    border-color: var(--color-3);
}

.curso-v2 table.table-style-1 .titulo-tabla {
    background-color: var(--color-3);
}

.curso-v2 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-4);
}

.curso-v2 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v2 .accordion-contenido .accordion-button.collapsed,
.curso-v2 #menu,
.curso-v2.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-3-rgba) 10%, var(--color-4-rgba) 90%);
}

.curso-v2 .card-tipo1,
.curso-v2 .accordion-contenido .accordion-header::after,
.curso-v2 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-4-rgba) 10%, var(--color-3-rgba) 90%);
}

.curso-v2 .card-tipo2,
.curso-v2 .card-tipo1 .card-header::after,
.curso-v2 .card-tipo1:hover .card-body,
.curso-v2 .card-tipo2:hover .card-body,
.curso-v2 #info-general .card-modal,
.curso-v2 #cards-division .card-tipo2 .separador {
    background: linear-gradient(45deg, var(--color-3-rgba) 10%, var(--color-4-rgba) 90%);
}

.curso-v2 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-3);
}

.curso-v2 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-3);
}

.curso-v2 #leyenda-marca {
    border-color: var(--color-4);
}

/* Versión 3 */

.curso-v3 a {
    color: var(--color-5);
}

.curso-v3 a:hover,
.curso-v3 a:active,
.curso-v3 a:focus {
    color: var(--color-6);
}

.curso-v3 .note,
.curso-v3 .recuadro1 {
    border-color: var(--color-5);
}

.curso-v3 table.table-style-1 .titulo-tabla {
    background-color: var(--color-5);
}

.curso-v3 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-6);
}

.curso-v3 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v3 .accordion-contenido .accordion-button.collapsed,
.curso-v3 #menu,
.curso-v3.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v3 .card-tipo1,
.curso-v3 .accordion-contenido .accordion-header::after,
.curso-v3 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-6-rgba) 10%, var(--color-5-rgba) 90%);
}

.curso-v3 .card-tipo2,
.curso-v3 .card-tipo1 .card-header::after,
.curso-v3 .card-tipo1:hover .card-body,
.curso-v3 .card-tipo2:hover .card-body,
.curso-v3 #info-general .card-modal,
.curso-v3 #cards-division .card-tipo2 .separador {
    background: linear-gradient(45deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v3 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-5);
}

.curso-v3 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-5);
}

.curso-v3 #leyenda-marca {
    border-color: var(--color-6);
}

/* Versión 4 - Incluye Módulos */

.curso-v4 a {
    color: var(--color-5);
}

.curso-v4 a:hover,
.curso-v4 a:active,
.curso-v4 a:focus {
    color: var(--color-6);
}

.curso-v4 .note,
.curso-v4 .recuadro1 {
    border-color: var(--color-5);
}

.curso-v4 table.table-style-1 .titulo-tabla {
    background-color: var(--color-5);
}

.curso-v4 table.table-style-1 .subtitulo-tabla {
    background-color: var(--color-6);
}

.curso-v4 .accordion-contenido .accordion-button:not(.collapsed),
.curso-v4 .accordion-contenido .accordion-button.collapsed,
.curso-v4 #menu,
.curso-v4.screen #accordionContenido .accordion-button.collapsed {
    background: linear-gradient(90deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v4 .card-tipo1,
.curso-v4 .accordion-contenido .accordion-header::after,
.curso-v4 #info-general #card-iniciar .card-icon {
    background: linear-gradient(90deg, var(--color-6-rgba) 10%, var(--color-5-rgba) 90%);
}

.curso-v4 .card-tipo2,
.curso-v4 .card-tipo1 .card-header::after,
.curso-v4 .card-tipo1:hover .card-body,
.curso-v4 .card-tipo2:hover .card-body,
.curso-v4 #info-general .card-modal,
.curso-v4 #cards-division .card-tipo2 .separador {
    background: linear-gradient(45deg, var(--color-5-rgba) 10%, var(--color-6-rgba) 90%);
}

.curso-v4 #accordionContenido .accordion-body .encabezado {
    border-color: var(--color-5);
}

.curso-v4 #accordionContenido .accordion-body .encabezado h1 {
    background-color: var(--color-5);
}

.curso-v4 #leyenda-marca {
    border-color: var(--color-6);
}

/* Botones de navegación */

.botones-container .opciones a {
    background-color: var(--color-bg-negro-2-rgba);
}

.curso-v1 .botones-container .opciones a,
.curso-v2 .botones-container .opciones a,
.curso-v3 .botones-container .opciones a,
.curso-v4 .botones-container .opciones a {
    background-color: var(--color-negro-2);
}

/* Habilita el evento "clic" */

.curso-v1 #menu,
.curso-v1 #contenido-menu,
.curso-v1 #contenido,
.curso-v2 #menu,
.curso-v2 #contenido-menu,
.curso-v2 #contenido,
.curso-v3 #menu,
.curso-v3 #contenido-menu,
.curso-v3 #contenido,
.curso-v4 #menu,
.curso-v4 #contenido-menu,
.curso-v4 #contenido {
    pointer-events: all;
}

/*--------------------* Responsive Media Queries *--------------------*/

/* 'xxl' applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* 'xl' applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

    #info-general #card-introduccion .card-body {
        padding: 30px 30px 15px;
    }

    #info-general #ig-version-2 #card-biblioteca .card-body {
        height: 80px;
    }

    .card-tipo1 .card-title,
    .card-tipo1 .card-text {
        font-size: 18px;
        word-break: keep-all;
    }

}

/* 'lg' applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    #banner .detalle-banner .contenedor-titulo {
        text-align: center;
    }

    #banner .detalle-banner .separador {
        margin: 25px auto;
    }

    #info-general {
        padding: 50px 0 50px;
    }

    #info-general #card-introduccion .card-body {
        min-height: auto;
        padding: 20px 30px 10px;
    }

    #info-general #card-iniciar {
        display: flex;
        flex-direction: row-reverse;
    }

    #info-general #card-iniciar .card-body,
    #info-general #card-iniciar .card-image {
        width: 50%;
    }

    #info-general #card-iniciar .card-image {
        margin-top: 15px;
    }

    #info-general #card-iniciar .card-image img {
        width: 200px;
        object-fit: cover;
    }

    #menu.open {
        height: 100%;
        padding: 35px 0;
    }

    #contenido-opciones #menu {
        height: 100% !important;
        padding: 20px 0;
    }
    
    #menu .op-menu {
        margin: 15px 0;
    }

    #accordionContenido .accordion-item {
        padding: 10px 0;
    }

    #accordionContenido .accordion-body {
        margin-bottom: 10px;
    }

    #accordionContenido .accordion-button {
        width: 100%;
        height: 70px;
    }

    #accordionContenido .accordion-title {
        height: 70px;
        padding: 0 50px;
        text-align: center;
    }

}

/* 'md' applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    #buscador-index #campo-busqueda {
        display: none;
    }

    #campo-busqueda + .bi {
        color: var(--color-blanco) !important;
        font-size: 18px;
    }

    #banner-index .contenedor-titulo,
    #banner-tema .contenedor-titulo,
    #banner-actividad .contenedor-titulo {
        width: 100%;
    }

    #info-general #card-acreditaciones .card-image,
    #info-general #card-requerimientos .card-image {
        justify-content: center;
    }

    #info-general #card-acreditaciones .card-body,
    #info-general #card-requerimientos .card-body {
        justify-content: center;
    }

    #info-general #card-acreditaciones .card-title::before,
    #info-general #card-requerimientos .card-title::before {
        margin: 0 auto;
    }

    #info-general .card-modal .card-body {
        height: auto !important;
    }

    .curso-v4 .botones-container#btn-temas, 
    .curso-v4 .botones-container#btn-actividad {
        display: inline;
    }

    .curso-v4 .botones-container .migaja {
        justify-content: center;
        margin-bottom: 20px;
    }

    .curso-v4 .botones-container .migaja p {
        font-size: 18px;
    }
    .curso-v4 .botones-container .opciones {
        justify-content: center !important;
    }

}

/* 'sm' applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #banner .detalle-banner .titulo {
        font-size: 32px;
    }

    #banner .detalle-banner #contenido-competencia p {
        font-size: 16px;
    }

    #info-general {
        padding: 25px 0 25px;
    }

    #info-general .g-5 {
        --bs-gutter-y: 25px;
    }

    #info-general #card-iniciar {
        flex-direction: row;
    }

    #info-general #card-iniciar .card-body,
    #info-general #card-iniciar .card-image {
        width: 100%;
    }

    #info-general #card-iniciar .card-body .card-title {
        font-size: 28px;
    }

    #info-general #card-iniciar .card-image {
        display: none;
    }

    .accordion-contenido .accordion-button {
        width: 100% !important;
    }

    .accordion-contenido .accordion-button .accordion-title {
        font-size: 18px;
        text-align: center;
        padding: 0 50px;
    }

    #accordionContenido .accordion-title {
        padding: 0 40px;
    }

    #accordionContenido .accordion-body,
    #accordionMetodologia .accordion-body,
    #accordionRequerimientos .accordion-body {
        padding: 15px;
    }

    #menu.open {
        padding: 10px 0;
    }

}

/* 'xs' returns only a ruleset and no media query */
@media (max-width: 320.98px) {

    #accordionContenido .accordion-title {
        padding: 0 25px;
    }

}