body.modal-open { overflow: hidden; }

.btn-tablero { 
    padding: 15px 25px; cursor: pointer; border: none; border-radius: 8px; 
    background: #1f77b4; color: white; font-weight: 600; margin: 10px;
}

.modal { 
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 1000; left: 0; top: 0; 
    width: 100%; height: 100%; background: rgba(0,0,0,0.85);
    opacity: 0; visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal-content { 
    background: white; width: 90%; max-width: 1200px; height: 85vh; 
    border-radius: 12px; position: relative; overflow: hidden;
    transform: translateY(20px); transition: transform 0.4s ease;
}

.modal.is-open .modal-content { 
  transform: translateY(0); 
}

.close-btn { 
  position: absolute; 
  right: 0; 
  top: 0; 
  font-size: 35px; 
  cursor: pointer; 
  color: #666; 
  z-index: 10;
  background: #e6ecf0;
  padding: 10px;
  border-radius: 5px;
}

#vizContainer { 
  width: 100%; 
  height: 100%; 
}