#cotizaciones-analisis-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 2px;
    

}

#grafico-tendencias-container {
    width: 100%;
    height: 500px !important;
  }

#grafico-tendencias {
     width: 100% !important;
    height: 100% !important;
  display: flex;
  padding: 20px;

}



/* Configurar el contenedor de las tarjetas en dos columnas de 50% cada una */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
    gap: 20px;
}

/* Estilo para la columna izquierda (50% del ancho) */
.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo para la columna derecha (50% del ancho) */
.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Clase general para las tarjetas */
.resumen-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
}

/* Estilo para el texto dentro de las tarjetas */
.resumen-card h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
}

.resumen-card p {
    margin: 5px 0;
    font-size: 1em;
    color: #555;
}

.resumen-card canvas {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

.gauge-card h4 {
    text-align: center; /* Centrar el título de Señal de Mercado */
}

/* Estilos específicos para el gauge dentro de gauge-card */
.gauge-card #senal-gauge {
    width: 100%;
    max-width: 500px;  /* Tamaño máximo del gauge */
    height: 400px;     /* Fija la altura del gauge */
    min-height: 300px; /* Asegura una altura mínima para que no desaparezca */
    margin: 0 auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Agregar sombra al gauge */
}

/* Responsividad */
@media (max-width: 768px) {
  
  #grafico-tendencias-container {
    width: 100vw;
    height: auto;
    margin: 0 auto;
  }

  
  
  #grafico-tendencias {
     width: 100vw;
    height: auto;
  display: flex;
  padding: 5px;
    margin: 0 auto;

}

  
  
    .cards-container {
        flex-direction: column; /* Apilar tarjetas en pantallas pequeñas */
        align-items: center;    /* Alinear tarjetas al centro */
    }

    .left-column, .right-column {
        flex: 1 1 100%; /* Asegurarse de que ocupen todo el ancho */
        max-width: 100%; /* Evitar que se superen entre ellas */
    }

   
    /* Hacer que el gauge ocupe todo el ancho del móvil */
    .gauge-card #senal-gauge {
    width: 100vw;
    max-width: 90%;  /* Tamaño máximo del gauge */
    height: auto;     /* Fija la altura del gauge */
    margin: 0 auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Agregar sombra al gauge */
}
}



.economic-calendar iframe {
    width: 100%;
    height: 90vh; /* 100% de la altura de la ventana */
    border: none;
    overflow: hidden;
}







/* Clase general para las tarjetas */
.resumen-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más suave y difusa */
    border-radius: 12px; /* Bordes más redondeados */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añadir transiciones */
    background: linear-gradient(145deg, #f3f3f3, #ffffff); /* Aplicar un gradiente sutil */
}

/* Efecto al pasar el ratón sobre la tarjeta */
.resumen-card:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Aumenta la sombra */
}

/* Estilo para el texto dentro de las tarjetas */
.resumen-card h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em; /* Tamaño de fuente ligeramente mayor */
    color: #222; /* Color de texto más oscuro */
    font-family: 'Poppins', sans-serif; /* Fuente más moderna */
}

.resumen-card p {
    margin: 5px 0;
    font-size: 1em;
    color: #666;
    font-family: 'Poppins', sans-serif;
}

/* Aplicar un efecto sutil a los botones o elementos interactivos dentro de las tarjetas */
.resumen-card a, .resumen-card button {
    background-color: #3498db; /* Azul moderno */
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.resumen-card a:hover, .resumen-card button:hover {
    background-color: #2980b9; /* Oscurecer ligeramente al pasar el ratón */
}