/* ========================================================================= 
    ECONÓMICA DATA BUSINESS
    PLATAFORMA DE INTELIGENCIA DE NEGOCIOS - BI
    BASES Y CÁLCULOS PARA SIMULADORES DE MERCADOS
    ========================================================================= 

    ========================================================================= 
    ============================ ESTILOS ================================== */

:root {
    --body_bg: #ffffff;
    --linen: #e6e6fa;
    --white: #ffffff;
    --black: #181818;
    --red: #dc3545;
    --blue: #358ce4;
    --lista_hover_dark: #d3d3ff;
    --skyblue: #00c0ef;
    --green: #25bb70;
    --alert_border: #b6d4fe;
    --alert_bg: #cfe2ff;
    --alert_color: #084298;
    --danger_border: #f5c2c7;
    --danger_bg: #f8d7da;
    --danger_color: #842029;
    --success_border: #badbcc;
    --success_bg: #d1e7dd;
    --success_color: #0f5132;
    --warning_border: #ffecb5;
    --warning_bg: #fff3cd;
    --warning_color: #664d03;
    --font-garamond: 'Montserrat', sans-serif;
    --excelGreen: #10793F;
    --cornflowerblue: #6495ed;

    --body_bg_dark: #333;
    --card_bg_dark: var(--linen);
    --container_secundario_dark: #cfcfd1;
}

body {
    background: var(--body_bg);
    font-family: var(--font-garamond);
}

body.dark {
    background: var(--body_bg_dark);
}

body.dark .page-content .page_load .container-secundario {
    background: none;
}

body.dark .page-content .page_load .container-secundario #cabecera .toast {
    background: var(--card_bg_dark);
}

body.dark .wrapper{
    background: var(--card_bg_dark);
}

.form-check-input{
    border: 1px solid #474545;
}

h1 {
    text-align: center;
}

h3 {
    color: var(--blue);
}

p {
    text-align: justify;
}

a {
    cursor: pointer;
}

a:link {
    text-decoration: none;
}

.container-secundario {
    
    margin: 0 auto;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

/*=======   Footer    =======*/
footer {
    font-size: 16px;
    line-height: normal;
    text-align: center;
    margin-top: 60px;

    background: var(--black);
    width: 100%;
    bottom: 0;
}

.social-media {
    position: relative;
    width: 100%;
}

.social-media .social-icon {
    display: block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 16px;
    margin-right: 5px;
    border-radius: 50%;
}

.social-media .social-icon span {
    color: #999999;
}

.social-media .social-icon:hover,
.social-media .social-icon:focus {
    background: #cfe2ff;
}

.social-media .social-icon:hover span,
.social-media .social-icon:focus span {
    color: #999999;
}

/*=======   Iconos Bootstrap    =======*/
.search {
    position: relative;
}

.bi-search {
    font-size: 1.5rem;
    color: var(--black);
}

.bi-send{
    font-size: 1.5rem;
    color: var(--cornflowerblue);
}

.bi-check-lg{
    font-size: 1.5rem;
    color: var(--black);
}

.bi-x-lg{
    font-size: 1.5rem;
    color: var(--red);
}

.bi-trash {
    font-size: 1.5rem;
    color: var(--red);
}

.bi-file-earmark-text {
    font-size: 1.5rem;
    color: var(--black);
}

.bi-filetype-pdf {
    font-size: 1.5rem;
    color: var(--red);
}

.bi-file-earmark-word {
    font-size: 1.5rem;
    color: var(--cornflowerblue);
}

.bi-file-earmark-excel {
    font-size: 1.5rem;
    color: var(--excelGreen);
}

.bi-graph-up-arrow {
    font-size: 1.2rem;
    color: var(--blue);
}

.bi-funnel {
    font-size: 1rem;
    color: var(--black);
}

.icono_search {
    box-sizing: border-box;
    padding: 10px;
    width: 80px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

.icono_search:hover {
    transform: translateX(0.5em);
}

.bi-info-circle-fill {
    font-size: 1.5rem;
    color: var(--skyblue);
}

/*=======   Btn deslizar hacia arriba    =======*/

.ir-arriba {
    display: none;
    padding: 0px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}

/*=======   Droplist buscador    =======*/

#salida-analisis {
    position: relative;
}

#salida-analisis .col {
    position: absolute;
}

/*=======   Link tutoriales    =======*/

.link_video {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.fancybox-slide--iframe .fancybox-content {
    width: 800px;
    height: 600px;
    max-width: 80%;
    max-height: 80%;
    margin: 0;
}

@keyframes fly-1 {
    from {
        transform: translateY(0.2em);
    }

    to {
        transform: translateY(-0.2em);
    }
}

/*=======   Migas de pan (Breadcrumb)    =======*/

.breadcrumb {
    font-size: 14px;
}

#img_home {
    width: 30px;
    height: 20px;
}

/*=======   Select    =======*/

.form-select {
    border-radius: 50px;
}

/*=======   Toast notificaciones    =======*/

#toast_visitante .toast-header {
    background: var(--white);
}

#toast_visitante .toast-body {
    background: var(--white);
    background: var(--alert_bg);
    font-size: 17px;
}

/*=======   Tablas  =======*/

.thead_fijo {
    position: sticky;
    top: 0;
    position: sticky;
    background: silver;
    z-index: 1;
}


#texto_th {
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    padding: 20px;
}

#texto_td {
    vertical-align: middle;
    text-align: center;
    font-size: 15px;
}

#indicadores>table>tbody>tr>td {
    margin: 0;
    padding: 0;
}

#id_fuente {
    font-size: 14px;
}

#id_elaboracion {
    font-size: 14px;
}

/*=======   Card    =======*/

.card_shadow_box {
    box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
}

.cardTopLine {
    border-top: 3px solid #750411;
}

.card-title {
    text-align: center;
    align-items: center;
}

.card-btn {
    border-color: var(--blue);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.card-btn:hover {
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.card-btn .card-title {
    color: var(--blue);
    font-size: 18px;
    font-weight: bold;
}

@media only screen and (max-width: 989px) and (min-width: 769px) {
    .card-btn>.card-body>.card-title {
        font-size: 11px;
    }
}

/*=======   Botones    =======*/

.btn {
    display: block;
    padding: auto;
    margin: auto;
    border-color: var(--blue);
    color: var(--blue);
}

.btnGeneral:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnEliminar:hover {
    font-weight: bold;
    color: var(--danger_color);
    background-color: var(--danger_bg);
    border-color: var(--danger_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnAgregar:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnGuardar:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnEditar:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnActualizar:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnCambiarPassword:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnIniciarSesion:hover {
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
}

.btnRealizarEstimaciones:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnMasInfo:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnProcederPagar:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnGenerarReporte:hover {
    font-weight: bold;
    color: var(--success_color);
    background-color: var(--success_bg);
    border-color: var(--success_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnVolver:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnConfirmar:hover {
    font-weight: bold;
    color: var(--success_color);
    background-color: var(--success_bg);
    border-color: var(--success_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnRechazar:hover {
    font-weight: bold;
    color: var(--danger_color);
    background-color: var(--danger_bg);
    border-color: var(--danger_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnZoomOut:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

.btnZoomIn:hover {
    font-weight: bold;
    color: var(--alert_color);
    background-color: var(--alert_bg);
    border-color: var(--alert_border);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}

/* ================= GRAFICAS ================ */

.graficas_scroll_finan_ind {
    overflow: auto;
    height: auto;
    max-height: 1170px;
    width: 100%;
}

#tab_scroll_simuladores {
    overflow-y: scroll;
    height: auto;
    max-height: 450px;
    width: 100%;
}

#tab_scroll {
    overflow-y: scroll;
    height: auto;
    max-height: 400px;
    width: 100%;
}

#tab_scroll_mercado_fusion {
    overflow-y: scroll;
    height: auto;
    max-height: 450px;
    width: 100%;
}

#tab_scroll table {
    width: 100%;

}

/*================================*/
.graficas_scroll {
    overflow: auto;
    height: auto;
    max-height: 720px;
    width: 100%;
}

.tab_compe_scroll {
    overflow: auto;
    height: auto;
    max-height: 500px;
    width: 100%;
}

/* ===== BUSCADOR PARA TODOS LOS MODULOS ===== */

#lista ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 273px;
    height: auto;
    position: relative;
    z-index: 2;
}

#lista ul li {
    border: 1px solid #ddd;
    margin-top: -1px;
    /* Prevent double borders */
    /*background-color: var(--white);*/
    padding: 12px;
    text-decoration: none;
    font-size: 14px;
    color: black;
    display: block;
    position: relative;
}

#lista ul li:hover {
    background-color: #eee;
    font-weight: bold;
    cursor: pointer;
}


/* ===== AJUSTAR TAMAÑO DE LA PANTALLA ======= */


/* Pantallas grandes (desktops de menos de 1200px) */
@media only screen and (max-width: 1199.98px) {
    object {
        height: 894px;
    }
}

/* Pantallas medianas (tablets de menos de 992px) */
@media only screen and (max-width: 991.98px) {
    object {
        height: 800px;
    }
}

/* Pantallas pequeñas (móviles en landscape de menos de 768px) */
@media only screen and (max-width: 767.98px) {
    object {
        height: 700px;
    }

    #link_redes {
        top: -33px;
        left: 20%;
    }
}

/* Pantallas muy pequeñas (móviles en portrait de menos de 576px) */
@media only screen and (max-width: 575.98px) {
    object {
        height: 400px;
    }

    #link_redes {
        top: -33px;
        left: 20%;
    }
}

/* ===== AJUSTAR TAMAÑO DE LA PANTALLA ======= */
/* =========================================== */
/* ================ TOOLTIP  ================= */

/* (A) BUILD TOOLTIP USING BEFORE PSEUDO-CLASS */
[data-tooltip]::before {
    content: attr(data-tooltip);
}

/* (B) POSITION TOOLTIP */
[data-tooltip] {
    position: relative;
    display: inline-block;
}

[data-tooltip]::before {
    position: absolute;
    z-index: 999;
}

[data-tooltip].top::before {
    bottom: 100%;
    margin-bottom: 10px;
}

[data-tooltip].bottom::before {
    top: 100%;
    margin-top: 10px;
}

[data-tooltip].left::before {
    right: 100%;
    margin-right: 10px;
}

[data-tooltip].right::before {
    left: 100%;
    margin-left: 10px;
}

/* (C) SHOW TOOLTIP ONLY ON HOVER */
[data-tooltip]::before {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}

[data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
}

/* (D) STYLE THE TOOLTIP */
/* [data-tooltip] { background: #fea; } */
[data-tooltip]::before {
    background: #000;
    color: #fff;
    padding: 5px;
    min-width: 200px;
    text-align: center;
}

/*Gracias por tu compra*/



/*======== COOKIES =========*/

.wrapper {
    position: fixed;
    bottom: 30px;
    z-index: 3;
    right: 20px;
    max-height: 270px;
    border: 1px solid;

    max-width: 440px;
    background: #fff;
    padding: 25px 25px 30px 25px;
    border-radius: 15px;
    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.wrapper.hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.wrapper img {
    max-width: 90px;
}

.content {
    margin-top: 10px;
}

.content p {
    margin: 5px 0 20px 0;
}

.content .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons .item {
    margin: 0 10px;
}

/*=========== TALONARIO (CUPON) =========*/
.tengah {
    background: #dedede;
}

.kiri {
    background: #dedede;
}

.coupon .kanan {
    border-left: 1px dashed rgb(128, 14, 14);
    width: 40% !important;
    position: relative;
    background: #dedede;
}

.coupon .kanan .info::after,
.coupon .kanan .info::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
}

.coupon .kanan .info::before {
    top: -10px;
    left: -10px;
}

.coupon .kanan .info::after {
    bottom: -10px;
    left: -10px;
}

.coupon .time {
    font-size: 1.6rem;
}

/*=========== TALONARIO (CUPON) =========*/
/*=======================================*/


/* ===== estilos nuevos ====== */
.btn-terceario{
    background: #750411;
    font-weight: bolder;
    font-size: x-large !important;
    color: white;
    width: max-content;
    border-color: #750411 !important;

}
.btn-terceario:hover{
    background: #ED1C24;
    color: white;
    border-color: #ED1C24 !important;
}

.btn-cuarteario{
    background: #C8C8C8;
    font-weight: bolder;
    font-size: xx-large !important;
    color: #750411;
    width: max-content;
    border-color: #C8C8C8 !important;
    
}

.btn-cuarteario:hover{
    background: #ED1C24;
    color: white;
    border-color: #ED1C24 !important;
}

.btn-quintenario{
    background: #750411;
    font-weight: bolder;
    font-size: large !important;
    color: white;
    width: max-content;
    border-color: #750411 !important;

}
.btn-quintenario:hover{
    background: #ED1C24;
    color: white;
    border-color: #ED1C24 !important;
}


/* ===== footer ===== */
@media only screen and (max-width: 768px) {
    .alerta-redes{
            width: 100% !important;
            border-radius: 10px !important;
            margin-top: 1rem;
        }
    }

@media only screen and (max-width: 990px) {
    .alerta-contactos{
        width: 100% !important;
        border-radius: 10px !important;
        margin-top: 1rem;
    }



}

.btn-g-nav-ingreso{
    font-weight: bolder;
    color: #750411;
    background: white;
    border: white;
    width: max-content;
    height: 2.5rem;
    font-size: larger !important;
}

.btn-g-nav-ingreso:hover{
    background: white;
    color: black;
}

.btn-g-nav-empezar{
    font-weight: bolder;
    background: #750411;
    border: #750411;
    color: white;
    width: max-content;
    height: 2.5rem;
    font-size: larger !important;
}

.btn-g-nav-empezar:hover{
    background: #ED1C24;
    color: white;
}

/*  */
@media only screen and (max-width: 990px) {
    .video-container{
        width: 100%;
        text-align: center;
    }
}

.submodulo-titulo{
    width: 75%;
}
.submodulo-pais{
    justify-content: flex-end;
    align-items: center;
}
.submodulo-video{
    justify-items: end;
}

@media only screen and (max-width: 1225px) {
    .submodulo-titulo{
        width: 100% !important;
        .alert{
            width: 100% !important;
        }
    }
    .submodulo-pais{
        width: 100% !important;
        justify-content: center !important;
    }
    .submodulo-video{
        justify-items: flex-start !important;
    }
}

.square {
    height: 8px;
    width: 8px;
    background-color: #750411;
    border-radius: 0%;
    display: inline-block;
  }


  /* Botones de descarga */
.btn-excel{
    background-color: #307750;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-excel:focus{
    background-color: #307750;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);

    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-excel:hover{
    background-color: #307750;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);

    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-excel-descarga{
    background-color: #307750;
    color: #fff;
    border-style: none;
    padding: 1em 2em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    transition: all 250ms;
}


.btn-word{
    background-color: #103f91;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-word:focus{
    background-color: #103f91;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-word:hover{
    background-color: #103f91;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-pdf{
    background-color: #cb2e2e;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-pdf:focus{
    background-color: #cb2e2e;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}

.btn-pdf:hover{
    background-color: #cb2e2e;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    
    i{
        color: white !important;
        font-size: 1.5rem !important;
    }
}


.btn-word-descarga{
    background-color: #103f91;
    color: #fff;
    border-style: none;
    padding: 0.5em 0.5em;
    border-radius: 0.5em;
    overflow: hidden;
    z-index: 1;
    box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
    transition: all 250ms;
}


/* Estilos para tablas */
table.dataTable {
    background: #750411;
    border-radius: 10px !important;
}


table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    
    
    background-color: transparent;
    color: white;
    border:none;
}

table.dataTable > thead > tr > th, table.dataTable > tfoot  > tr > th {
    
    
    background-color: transparent;
    color: white;
}

table.dataTable > thead > tr {
    background-color: transparent;
}

table.dataTable > thead {
    background-color: transparent;
}

table.dataTable > tbody > tr {
    border-bottom: 0.5px solid grey;
    background-color: white !important;
}

table.dataTable > tbody > tr > td{
    padding: 1rem 0.5rem !important;
    text-align: start;
    box-shadow: none !important;
    font-size: small;
}