/* Estilos para el panel flotante */
#noticiasPanel {
    padding: 20px; /* Aumentar el padding para dar más espacio */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    width: 80%;
    max-width: 900px; /* Ajusta según el diseño */
    height: 80%;
    max-height: 600px; /* Ajusta según el diseño */
    background-color: #1a1a1a;
    color: #fff;
    overflow: auto; /* Asegura que el contenido grande sea desplazable */
    display: none; /* Ocultar inicialmente */
}

/* Estilos para el contenedor de noticias */
.noticias-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Centrar el título y ajustar el botón */
.noticias-header-container {
    display: flex;
    align-items: center; /* Alinea el título y el botón verticalmente */
    justify-content: space-between; /* Espacia el título y el botón */
    padding: 0 20px; /* Agrega un poco de padding a los lados del contenedor */
    margin-bottom: 20px; /* Espacio debajo del contenedor del título */
}

/* Ajustes del título */
.noticias-header {
    text-align: center;
    color: #fff;
    margin: 0;
    font-size: 40px; /* Tamaño aumentado del título */
    font-weight: bold; /* Negrita para el título */
    flex: 1; /* Permite que el título ocupe el espacio disponible */
    position: relative; /* Hacer que el título sea relativo */
    padding-bottom: 20px; /* Espacio debajo del título */
}

/* Estilos para la tabla de noticias */
.noticias-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    display: table; /* Asegura que la tabla esté visible desde el principio */
}

.noticias-table th, .noticias-table td {
    border-bottom: 1px solid #444;
    padding: 12px;
    text-align: left;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box; /* Asegura que el padding y border se incluyan en el ancho total */
}

.noticias-table th {
    background-color: #444;
    border-top: 1px solid #666;
    color: #fff;
}

.noticias-table tr:hover {
    background-color: #555;
}


/* Botón mostrar gráfica */
.toggle-btn {
    padding: 12px 50px; /* Botón alargado */
    background-color: #6c757d; /* Color gris */
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    border-radius: 8px; /* Bordes más redondeados */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s ease; /* Efecto de transición */
}

.toggle-btn:hover {
    background-color: #5a6268; /* Gris oscuro */
}