/* Estilos generales */
body {
    font-family: 'Arial', sans-serif; /* Fuente general */
    background-color: #f0f2f5; /* Color de fondo suave */
    margin: 0; /* Sin márgenes */
    padding: 20px; /* Espaciado interno */
}

/* Contenedor principal */
.container {
    max-width: 800px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Estilo de las filas */
.row {
    display: flex; /* Usar flexbox para el diseño */
    justify-content: center; /* Centrar el contenido horizontalmente */
}

/* Estilo de las columnas */
.col-md-6 {
    flex: 0 0 50%; /* Ancho del 50% para pantallas medianas */
    max-width: 2000%; /* Ancho máximo del 50% */
}

/* Estilo de las tarjetas */
.card {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    margin-bottom: 30px; /* Espaciado inferior */
    transition: transform 0.3s, box-shadow 0.3s; /* Transición suave */
}

/* Efecto al pasar el mouse sobre la tarjeta */
.card:hover {
    transform: translateY(-5px); /* Elevar la tarjeta */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Estilo del cuerpo de la tarjeta */
.card-body {
    padding: 20px; /* Espaciado interno */
}

/* Estilo del encabezado principal */
h1 {
    color: #ffffff; /* Color del texto */
    background-color: #343a40; /* Color de fondo oscuro */
    padding: 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Estilo de los gráficos */
canvas {
    border: 1px solid #ccc; /* Borde alrededor de los gráficos */
    margin: 20px 0; /* Espaciado vertical entre gráficos */
    display: block; /* Asegurarse de que los gráficos se comporten como bloques */
    border-radius: 8px; /* Bordes redondeados para los gráficos */
    transition: border-color 0.3s; /* Transición suave para el borde */
}

/* Efecto al pasar el mouse sobre los gráficos */
canvas:hover {
    border-color: #007bff; /* Cambiar el color del borde al pasar el mouse */
}

/* Estilo de los párrafos dentro de resultados */
.results p {
    margin: 5px 0; /* Espaciado vertical entre párrafos */
    color: #333; /* Color del texto */
    font-size: 16px; /* Tamaño de fuente */
    transition: color 0.3s; /* Transición suave para el color */
}

/* Efecto al pasar el mouse sobre los párrafos */
.results p:hover {
    color: #007bff; /* Cambiar el color del texto al pasar el mouse */
}

/* Estilos generales para el contenedor de resultados */
.results {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    padding: 20px; /* Espaciado interno */
    margin: 20px 0; /* Espaciado vertical */
    transition: transform 0.3s, box-shadow 0.3s; /* Transición suave */
}

/* Efecto al pasar el mouse sobre el contenedor de resultados */
.results:hover {
    transform: translateY(-5px); /* Elevar el contenedor */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Estilo del encabezado de resultados */
h2 {
    color: #ffffff; /* Color del texto */
    background-color: #343a40; /* Color de fondo oscuro */
    padding: 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto */
    margin-bottom: 20px; /* Espaciado inferior */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Estilo de los párrafos dentro de resultados */
.results p {
    margin: 10px 0; /* Espaciado vertical entre párrafos */
    color: #333; /* Color del texto */
    font-size: 18px; /* Tamaño de fuente */
    line-height: 1.5; /* Altura de línea */
    transition: color 0.3s, transform 0.3s; /* Transición suave para el color y transformación */
}

/* Efecto al pasar el mouse sobre los párrafos */
.results p:hover {
    color: #007bff; /* Cambiar el color del texto al pasar el mouse */
    transform: scale(1.05); /* Aumentar ligeramente el tamaño del texto */
}

/* Estilo para el texto vacío */
.results p:empty {
    color: #999; /* Color gris para texto vacío */
    font-style: italic; /* Estilo en cursiva */
}