/* Contenedor del modal */
.grafico-flotante {
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Estilo Material Design */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados sutiles */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 12px 40px 0 rgba(0,0,0,0.19); /* Sombra más pronunciada */
    
    width: 600px;
    max-width: 90%;
    cursor: grab; /* Nuevo cursor para arrastrar, más moderno */
}

/* Cabecera del modal */
.grafico-header {
    padding: 16px; /* Aumenta el padding para más espacio */
    background-color: #1976d2; 
    color: #ffffff; /* Texto blanco */
    font-weight: 500; /* Peso de la fuente estándar de Material Design */
    font-family: 'Roboto', sans-serif; /* Si tienes Roboto, úsalo */
    font-size: 1.1rem;
    border-top-left-radius: 8px; /* Redondea las esquinas superiores */
    border-top-right-radius: 8px;
    user-select: none;
    cursor: grab; /* El cursor de agarre es más representativo */
}

/* Contenido del cuerpo */
.grafico-body {
    padding: 24px; /* Aumenta el padding para una apariencia más limpia */
}

/* Botón de cerrar */
.cerrar-modal {
    color: #ffffff; /* Color blanco para que se vea bien en la cabecera */
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1; /* Alinea verticalmente con el texto del header */
    transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

.cerrar-modal:hover,
.cerrar-modal:focus {
    color: rgba(255, 255, 255, 0.7); /* Ligeramente más opaco al pasar el mouse */
}