* {
    margin: 0;
    padding: 0;
}

.bg-whitesmoke {
    background-color: whitesmoke;
}

.border-brown {
    border: 3px solid brown;
}

.border-brown-raya {
    border: 1px solid brown;
}

.bg-verde-claro {
    background-color: lightgreen;
}

.bg-bisque {
    background-color: bisque;
}

.bg-gray {
    background-color: gray;
}
.bg-gray-claro{
    background-color: gainsboro;
}

.popover-body {
    text-align: justify;
    /* Justifica el texto en la descripción */
}

.popover-header {
    text-align: center;
    /* Centra el título del popover */
}

.helocOcultar {
    display: '';
}

#traducir {
    padding: 5px;
    border-radius: 3px;
}

.explicacion-comparaciones {
    background-color: brown;
    color: white;
    font-weight: 500;
    text-align: justify;
    padding: 1%;
    border-radius: 10px;
    margin: 10px auto;
}

.letraMediana p, .letraMediana b {
    font-size: 70%;
}

.letraIntermedia p, .letraIntermedia b {
    font-size: 85%;
    margin: 0;
    padding: 0;
}

.letraMediana label, .letraMediana strong {
    font-size: 80%;
}


.letraMediana-lg {
    font-size: 90%;
}
.bg-dark-red{
    background-color: brown;
}

.letraMediana-lg p, .letraMediana-lg b {
    font-size: 80%;
}

#contenedorInputs {
    height: 100vh;
    /* Alto fijo */
    overflow-y: auto;
    /* Scroll vertical cuando sea necesario */
}

.tooltip-inner {
    background-color: darkblue;
    /* Color de fondo */
    color: white;
    /* Color del texto */
    font-weight: bold;
}

.tooltip-arrow::before {
    border-top-color: black;
    /* Color de la flecha */
}


.bi-question-circle {
    color: brown;
    font-size: medium;
    /* Cambia el color del icono */
}

.bi-question-circle:hover {
    color: black;
}

.bi-question-circle-fill {
    color: black;
    font-size: medium;
    /* Cambia el color del icono */
}

.bi-question-circle-fill:hover {
    color: darkblue;
}

.tooltip-inner {
    text-align: justify;
    /* Justifica el texto del tooltip */
}

.articulo {
    margin-top: 10px;
    border: 3px solid brown;
    padding: 10px;
    border-radius: 10px;
    text-align: justify;
}

.articulo h1 {
    text-align: center;
}

.ahorroContenedorResumen {
    padding: 1%;
    background-color: lightgreen;
    border-radius: 10px;
    text-align: justify;
    font-size: 80%;
}

#traducir:hover {
    cursor: pointer;
    background-color: gainsboro;
}

input[type="text"]:focus {
    box-shadow: none;
}

input[type="number"]:focus {
    box-shadow: none;
}

input[type="radio"] {
    cursor: pointer;
}

input[type="checkbox"] {
    cursor: pointer;
}

input[type="date"] {
    cursor: pointer;
}

.explicacion {
    border: 3px solid brown;
    padding: 1%;
    margin: auto;
    border-radius: 10px;
    background-color: whitesmoke;
    text-align: justify;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.90);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.boton-active{
    background-color: blue!important;
    color: white!important;
    font-weight: 700;
    animation: pulse 1.5s infinite ease-in-out;
}
.contenedor-btn-tabla{
    border: 2px solid blue;
    border-radius: .25rem;
    padding: .25rem;
    cursor: pointer;
}
.contenedor-btn-tabla:hover{
    background-color:  rgb(49, 49, 230);
    border: 2px solid rgb(49, 49, 230);
    color: white;
}

thead tr th {
    text-align: center;
    background-color: brown !important;
    color: white !important;
}
.tablas-desgloses-sugerencias tr th{
    background-color: blue !important;
}

.conclusiones {
    border: 2px solid brown;
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    text-align: justify;
}

.conclusiones p {
    text-align: justify;
}

thead tr {
    vertical-align: middle;
}

tbody tr td {
    text-align: center;
}

.table-container {
    max-height: 50vh;
    /* Altura máxima del contenedor */
    overflow-y: auto;
    /* Permitir desplazamiento vertical */
    position: relative;

    /* Establecer posición relativa para posicionar el thead */
}
.collapse {
    margin: 0;
    padding: 0;
}

.sticky-thead {
    position: sticky;
    top: 0;
    /* La posición superior fija el thead en la parte superior del contenedor */
    z-index: 1;
    /* Asegurar que el thead esté por encima del contenido de la tabla */
    background-color: #fff;
    /* Cambiar el fondo del thead para que sea visible */
}

/* Estilo para el select cuando está enfocado */
select:focus {
    box-shadow: none;
}

select {
    background-color: whitesmoke !important;
    font-weight: bold;
}

/** Cabecera */

header {
    padding-top: 5px;
    color: black;
    font-weight: bold;
    border-bottom: 3px solid brown;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1%;

}
#loader {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 5px;
}
.text-justify {
    text-align: justify;
  }
  
.contenedorCalculadoras {
    display: flex;
    gap: 1%;
}

.logo {
    width: 70px;
    display: flex;
    align-items: center;
}

.izquierda {
    display: flex;
    align-items: center;
    width: 50%;
}

.contacto {
    text-align: center;
}

.filaMarcada td {
    background-color: salmon;
    color: white;
    font-weight: bold;
}
.filaOculta{
    display: none;
}
.filaVisible{
    display: '';
}
@keyframes fadeInRadial {
    0% {
        opacity: 0;
        transform: scale(0); /* Comienza en un tamaño pequeño (en el centro) */
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1); /* El elemento crece ligeramente */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* El elemento alcanza su tamaño normal */
    }
}



/* Clase visible: El elemento es visible con animación de opacidad */
.visible {
    opacity: 1;
    visibility: visible; /* El elemento es interactivo */
    animation: fadeInRadial 0.7s ease-in-out; /* Aplicamos la animación fadeIn */
}
/*ocutar los campos del roi vacios*/
.roi-oculto{
    display: none;
}
.oculto{
    display: none;
    opacity: 0;
    visibility: hidden; /* Hace que el elemento no sea interactivo */
    transition: none; /* No hay transición para la opacidad aquí */
}


#traducir {
    display: flex;
    flex-direction: column;
}
.encabezadosComparativos {
    overflow: auto;
    /* Clearfix */
}
.detalles {
    float: right;
    /* Mueve la etiqueta al lado derecho */
    cursor: pointer;
    background-color: blue;
    border-radius: 5px;
    padding: 3px;
    color: white;
}
.detalles:hover {
    background-color: darkblue;
}
.informacion {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    padding: 10px;
    border-radius: 10px;
    border: 3px solid brown;
    margin-top: 5px;
}
/** Principal */
.principal {
    margin-top: 10px;
    background-color: gainsboro;
    padding: 10px;
    border: 2px solid brown;
    border-radius: 10px;
    width: 60%;
}
h4 {
    text-align: center;
}
.mejorSolucion {
    background-color: green !important;
}
.arriba {
    display: flex;
    width: 100%;
}
.selecciones {
    margin-bottom: 10px;
}
.selecciones select {
    width: 30% !important;
    margin: auto;
}
.interestCard {
    border: 4px solid brown;
    border-radius: 10px;
    margin-top: 5px;
    margin: 0 5px 5px 5px;
    max-width: 50%;
}
.boton {
    position: fixed;
    bottom: 20px;
    right: 25px;
}
.resultsContainer {
    display: flex;
    justify-content: space-around;
}
.results {
    margin: 5px 0;
    border: 1px solid brown;
    border-radius: 5px;
    text-align: center;
}
.oneTime {
    font-weight: 700;
}
.oneTime td {
    background-color: salmon;
}
.posicionActual {
    font-weight: 700;
}
.posicionActual td {
    background-color: lightblue;
}
.posicionActualRoi {
    font-weight: 700;
    font-size: .7rem;
}
.posicionActualRoi td{
    background-color: lightblue;
}
.posicionActualDark {
    font-weight: 700;
    font-size: .7rem;
}
.posicionActualDark td{
    background-color: rgb(173, 200, 280);
}

.posicionAnterior {
    font-weight: 700;
}

.posicionAnterior td {
    background-color: lightgreen;
}

.posicionExtra {
    font-weight: 700;
}

.posicionExtra td {
    background-color: rgb(219, 163, 157);
}

/** radios menu*/

.inversionesTitles {
    width: 40%;
    margin: auto;
    padding: 10px;
    border: 2px solid brown;
    border-radius: 5px;
    text-align: center;
    margin-top: 5px;
}

.targetas {
    border: 3px solid brown;
    border-radius: 15px;
    margin: 1% 0;
}

.textovirado {
    writing-mode: vertical-rl;
    /* Establece la escritura vertical de derecha a izquierda */
    text-orientation: upright;
    font-size: medium;
    /* Invierte el texto */

    align-items: center;
    border: 2px solid brown;
    border-radius: 5px;
    text-align: center;
}

.hidden {
    visibility: hidden;
}

.textosArriba {
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-around;
}

.ocultos {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.color-green {
    color: green;
}


.color-red {
    color: red;
}

.diferencia {
    display: flex;
    justify-content: center;
}

.titulosComparativos {
    font-size: 90%;
    border-radius: 10px;
    padding: 5;
    background-color: white;
    margin-top: 1%;
    border: 2px solid brown;
}

.encabezadosComparativos {

    font-weight: bold;
    padding: 5px;
    border: 2px solid brown;
    background-color: white;
    border-radius: 10px;
}

.detalles1 {
    cursor: pointer;
    background-color: darkblue;
    border-radius: 5px;
    padding: 3px;
    color: white;
}

#contenedorBestOption {
    border: 1px solid brown;
    border-radius: 5px;
    padding: 5px;
    background-color: whitesmoke;
    margin-top: 1%;
}

.list-group-item {
    padding: 1% 1% 1% 2%;
}

.columnasTotales {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    background-color: gainsboro;
    border: 2x solid brown;
    border-radius: 5px;
    text-align: center;
    font-size: 80%;
}

.resumenAhorro {
    background-color: lightgreen;
    padding: 1%;
    border-radius: 5px;
    width: 95%;
    margin: auto;
    font-size: 70%;
}

.resumenAhorro p {
    text-align: center;
}

.comnparative {
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid brown;
    border-radius: 5px;
    margin-top: 5px;
}


.toast {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 300px;
    /* Ancho del toast */
    max-width: 100%;
    /* Ajusta el ancho según el contenedor */
    z-index: 9999;
}

#mensaje_flotante {
    position: absolute;
    display: none;
    /* Inicialmente oculto */
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

#error {
    border: 2px solid brown;
    padding: 5px;
    background-color: whitesmoke;
    border-radius: 5px;
    width: 100%;

}

.textosInput {
    text-align: center;
    color: brown;
}

.resultadosContenedor {
    align-items: end;
    text-align: center;
}

.resultadosTargetas {
    background-color: whitesmoke;
    border: 1px solid brown;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    margin: 5px 0;
    padding: 5px;
}

.contenedorFormula {
    background-color: gainsboro;
    border: 2px solid brown;
    border-radius: 5px;
    text-align: center;

}

.contenedorFormula p, b {
    font-size: small;
}

.contenedorLabelMonth {
    display: flex;
    justify-content: space-around;
}

.texto_radios {
    margin: auto;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
}

.contenedorOcultoLabels {
    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid;
    margin-bottom: 5px;
}

.textoExpandir {
    color: blue;
    cursor: pointer;
}

.contenedor_grafica {
    border: 3px solid brown;
    border-radius: 10px;
    padding: 1%;
}

.contenedorOcultoLabels b {
    color: brown;
    font-size: large;
}

.explicacionImg {
    width: 90%;
}

.explicacionImg img {
    width: 100%;
}

.comparativas {
    background-color: gainsboro;
    border: 3px solid brown;
    padding: 10px;
    border-radius: 5px;
}

.pagoExtra {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.textoPredeterminado {
    border: 3px solid brown;
    border-radius: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.inputsStyles input {
    font-size: 60% !important;
}

.diferencias {
    width: 100%;
    display: flex;
}

.titulosComparadores {
    flex: 1;
    align-items: center;
    text-align: center;
    border: 2px solid brown;
    border-radius: 10px;
}

.originales {
    display: flex;
    gap: 2%;
}

.originales_contenedores {
    flex: 1;
    text-align: center;
    border: 2px solid brown;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1% 0;
}

.originales_contenedoresq {
    flex: 1;
    text-align: center;
    border: 2px solid brown;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 1% 0;

}

#caso1 {
    background-color: cyan !important;
}

#caso2 {
    background-color: cyan !important;
}

#caso3 {
    background-color: bisque !important;
}

#caso4 {
    background-color: bisque !important;
}

.resaltar {
    border: 2px solid brown;
    border-radius: 5px;
    text-align: center;
    background-color: whitesmoke;
}

.contenedor_schedule {
    border: 3px solid brown;
    border-radius: 10px;
    padding: 1%;

}

.schedules {
    display: flex;
    gap: 1%;
}

.schedule_internos {
    flex: 1;
    border: 1px solid brown;
    border-radius: 5px;
    padding: 1%;
}

.resultadosComparativos {
    display: flex;
    flex-direction: column;
}

.encabezadosComparativos1 {
    display: flex;
}

.resultadoComparativos {
    flex: 1;
    text-align: center;
}

.bestOptions {
    display: flex;
    justify-content: center;
    gap: 2%;
}

.bestOptions div {
    flex: 1;
}

.opcionGanadora {
    text-align: center;
}

.contenedorMejorOpcion {
    background-color: greenyellow;
    border: 2px solid brown;
    border-radius: 5px;
    padding: 1%;
    margin-bottom: 1%;
}

.dataset {
    border: 1px solid brown;
    padding: 5px;
    border-radius: 5px;
    height: 80%;
    margin: auto;
}

.encabezadosArriba {
    display: flex;
    justify-content: space-around;
}

li {
    gap: 1%;
}

li b:last-child {
    text-decoration: underline;
    color: brown;
}

.resultadosPrincipales {
    display: flex;
    flex-direction: column;
    margin: 3px 1%;
    flex: 1;
    background-color: white;
    border: 1px solid darkred;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    justify-content: space-between;
}

/*estilos nuevos*/

.entradaDatosCalculadora {
    margin-top: 1%;
    display: flex;
    gap: 2%;
}

.entradaDatos {
    flex: 1;
    border: 3px solid brown;
    border-radius: 10px;
    padding: 1%;
}

.contenedorResults {
    display: flex;
    gap: 1%;
}

.salidaResults {
    flex: 1;
    border: 3px solid brown;
    border-radius: 10px;
}

/*estilos nuevos*/
.tieneGraficas {
    display: flex;
}

.alinearBotones {
    display: flex;
    align-items: center;
    padding: 5px;
}

.winner_comparados>div:nth-child(odd) {
    flex: 1;
    /* Esto asegura que el ancho de los divs 1, 3 y 5 sea igual */
}

/* Estilos para dispositivos móviles (puedes ajustar el ancho según tus necesidades) */
/**  Botones Flotantes */

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: darkred;
    color: white;
    padding: 16px;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boton_foltantes {
    position: fixed;
    bottom: 15%;
    right: 20px;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.botones {
    background-color: darkred;
    color: white;
    padding: 6px;
    border: 2px solid white;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#descargo:hover::before {
    font-size: 14px;
    content: "Descargo de Responsabilidad";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 5px);
    right: 55px;
}

#tabla_desglose:hover::before {
    font-size: 14px;
    content: "Desgloses";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 110px);
    right: 55px;
}

#section_extra_payment_btn:hover::before {
    font-size: 14px;
    content: "Sección Gráfica";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 55px);
    right: 55px;
}

#grafica_btn:hover::before {
    font-size: 14px;
    content: "Calculadoras";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 160px);
    right: 55px;
}

#descargoEn:hover::before {
    font-size: 14px;
    content: "Disclaimer";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 5px);
    right: 55px;
}

#tabla_desgloseEn:hover::before {
    font-size: 14px;
    content: "Compersion Breakdown";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 110px);
    right: 55px;
}

#section_extra_payment_btnEn:hover::before {
    font-size: 14px;
    content: "Graphic Section";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 55px);
    right: 55px;
}

#grafica_btnEn:hover::before {
    font-size: 14px;
    content: "Calculators";
    color: #dddddd;
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: calc(15% + 160px);
    right: 55px;
}

/**  Botones Flotantes */

.pagos_mensuales {
    border: 2px solid brown;
    border-radius: 5px;
    padding: 1%;
    background-color: bisque;

}

.pagos_mensuales_internos {
    flex: 1;
    border-radius: 5px;
    background-color: whitesmoke;
    padding: 1%;
    text-align: center;
}

.contenedor_analisis_mensuales {
    display: flex;
    gap: 1%;
}

.contenedor_ahorro_pagosMensuales {
    border: 2px solid brown;
    border-radius: 5px;
    padding: 1%;
}

.probando {
    padding: 0;
    margin: 0;
    transform: rotate(-30deg);
}

.probando b {
    font-size: 60%;
    padding: 0;
    margin: 0;
    display: flex;
    text-align: left;
    justify-content: left;
    align-items: center;
}

.probando2 {
    padding: 0;
    margin: 0;
    transform: rotate(-10deg);
}

.probando2 b {
    font-size: 70%;
    padding: 0;
    margin: 0;
    display: flex;
    text-align: left;
    justify-content: left;
    align-items: center;
}

#ejeXcanva {
    width: 92%;
    float: right;
    padding: 0;
    margin: 0;
    max-width: 100%;
    /* Ajusta este valor al ancho de tu gráfica */
    /*white-space: nowrap; /* Evita que los elementos se desborden en líneas nuevas */
    /* overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
}

#ejeXcanva1 {
    width: 92%;
    float: right;
    padding: 0;
    margin: 0;
    max-width: 100%;
    /* Ajusta este valor al ancho de tu gráfica */
    /*white-space: nowrap; /* Evita que los elementos se desborden en líneas nuevas */
    /* overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
}

.pago_mensual_visible {
    display: '';
}

.pago_mensual_oculto {
    display: none;
}

/**/
.contenedor-footer {
    width: 100%;
    background-color: gray;
    margin-top: 10px;
    padding: 1%;
    border-top: 3px solid brown;
}

.contenedor-footer h1 {
    text-align: center;
    color: black;
}

.contenedor-links {
    display: flex;
}

.contenedor-links a {
    color: darkblue;
    font-weight: bold;
}

.contenedor-links a:hover {
    color: black;
    font-size: 110%;
}

.footer-izquierdo {
    flex: 1;
    text-align: center;
}

.footer-derecho {
    flex: 1;
    text-align: center;
}

.footer-izquierdo div, .footer-derecho div {
    margin-bottom: 10px;
}

.informacion_pagoHelocHipoteca {
    display: flex;
    border-radius: 5px;
    background-color: gray;
    width: 98%;
    margin: auto;
}

.informacion_interna_pagoHelocHipoteca {
    flex: 1;
    text-align: center;
    background-color: bisque;
    display: flex;
    flex-direction: column;
}

.informacion_interna_pagoHelocHipoteca b:last-child {
    width: 90%;
    margin: auto;
    margin-bottom: 1%;
    background-color: white;
    border-radius: 3px;
    font-size: 110%;
}

.informacion_interna_pagoHelocHipoteca i {
    width: 90%;
    margin: auto;
    margin-bottom: 1%;
    background-color: white;
    border-radius: 3px;
}

.encabezadosTitulos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: gray;
    color: white;
    width: 98%;
    padding: 1%;
    margin: 1% auto;
    border-radius: 5px;


}

.versus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    background-color: black;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
}

.versus h3 {
    margin: 0;
}
.contenedor-oculto{
    display: none;
}
.extra_mensual_numero{
    padding: .25rem;
    background-color: rgb(108, 117,125);
    border-radius: .35rem;
}
/**/

@media (max-width:800px) {

    .header {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .contenedorCalculadoras {
        display: flex;
        flex-direction: column;
    }

    .izquierda {
        width: 100%;
        margin: auto;
    }

    .contacto {
        width: 100%;
        margin: auto;
    }

    .explicacion {
        width: 100%;
    }

    .explicacionImg {
        width: 90%;
    }

    .explicacionImg img {
        width: 100%;
    }

    .principal {
        width: 90%;
    }

    #contenedor_grafica_linea {
        width: 100%;
        margin: auto;
    }

    .arriba {
        width: 90%;
    }

    .originales {
        display: flex;
    }

    .originales_contenedores {
        width: 25%;
        text-align: center;
        border: 2px solid brown;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1% 0;
    }

    .resultadosComparativos {
        display: flex;
        flex-direction: column;
    }

    .resultados_comparados {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .resultados_comparados div {
        width: 80%;
        margin: auto;
        text-align: center;
        justify-content: center;
    }

    .opciones_comparativos {
        display: flex;
        text-align: center;
        justify-content: center;
        background-color: whitesmoke;
        border: 1px solid brown;
        border-radius: 5px;
    }

    .resultadosTargetas {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-between;
    }

    #contenedorBestOption>div:first-child>div:nth-child(1) {
        background-color: white;
        border: 1px solid darkred;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }

    #contenedorBestOption>div:first-child>div:nth-child(1) h6 {
        font-size: small;
    }

    #contenedorBestOption>div:first-child>div:nth-child(2) {
        background-color: white;
        border: 1px solid darkred;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }

    #contenedorBestOption>div:first-child>div:nth-child(2) h6 {
        font-size: small;
    }

    #contenedorBestOption>div:first-child>div:nth-child(3) {
        background-color: white;
        border: 1px solid darkred;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }

    .extrasPagosClass {
        width: 100%;
        margin: auto;
    }

    #contenedorBestOption>div:first-child>div:nth-child(3) h6 {
        font-size: small;
    }

    #contenedorBestOption>div:first-child>div:nth-child(4) {
        background-color: white;
        border: 1px solid darkred;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px;
    }

    #contenedorBestOption>div:first-child>div:nth-child(4) h6 {
        font-size: small;
    }

    .titulosComparadores h6 {
        font-size: small;
    }

    .winner_comparativos h4 {
        font-size: smaller;
    }

    .winner_comparados>div:nth-child(odd) {
        flex: 1;
        /* Esto asegura que el ancho de los divs 1, 3 y 5 sea igual */
    }

    .botones_comparacion {
        margin-top: 10% !important;
        gap: 25% !important;
    }

    .encabezadosComparativos h4 {
        flex: 1;
    }

    .contenedorResults {
        display: flex;
        flex-direction: column;
    }

    .schedules {
        display: flex;
        flex-direction: column;
    }

    .tieneGraficas {
        display: flex;
        flex-direction: column;
    }

    .boton_foltantes {
        display: none;
        /* Se oculta en pantallas más pequeñas, como las de tablets y móviles */
    }

    .boton {
        display: none;
    }

    .probando {
        padding: 0;
        margin: 0;
        transform: rotate(-30deg);
        margin-bottom: 10px;
    }

    .probando b {
        font-size: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        text-align: right;
        justify-content: center;
        align-items: center;
    }

    .probando2 {
        padding: 0;
        margin: 0;
        transform: rotate(-30deg);
        margin-bottom: 10px;
    }

    .probando2 b {
        font-size: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        text-align: right;
        justify-content: center;
        align-items: center;
    }

    #ejeXcanva {
        width: 85%;
        float: right;
        padding: 0;
        margin: 0;
        max-width: 100%;
        /* Ajusta este valor al ancho de tu gráfica */
        /*white-space: nowrap; /* Evita que los elementos se desborden en líneas nuevas */
        /*overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
    }

    #ejeXcanva1 {
        width: 85%;
        float: right;
        padding: 0;
        margin: 0;
        max-width: 100%;
        /* Ajusta este valor al ancho de tu gráfica */
        /* white-space: nowrap; /* Evita que los elementos se desborden en líneas nuevas */
        /*overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
    }

    .contenedor_analisis_mensuales {
        display: flex;
        flex-wrap: wrap;
        margin-left: 1%;
    }

    .originales_contenedoresq {
        flex: none;
        width: 49%;
        text-align: center;
        border: 2px solid brown;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1% 0;

    }

    .pagos_mensuales {
        margin-bottom: 2%;
    }

    #caso1 b {
        font-size: x-small;
    }

    #caso2 b {
        font-size: x-small;
    }

    #caso3 b {
        font-size: x-small;
    }

    #caso4 b {
        font-size: x-small;
    }

}