/* ==================================================
   1) RESET BÁSICO
   ================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* Evita scroll innecesario */
  font-family: Arial, sans-serif;
}

/* ==================================================
   2) SVG PRINCIPAL
   ================================================== */
svg#svgDatafest {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  cursor: move;    /* Para indicar que se puede arrastrar (pan) */
}

/* ==================================================
   3) ESTILOS DE ENLACES Y NODOS DEL GRAFO
   ================================================== */
.link {
  stroke: #999;
  stroke-width: 3px;
  stroke-opacity: 0.4;
}

.node circle {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}

/* Etiqueta multilínea (nodos de equipo) */
.team-label {
  font-size: 11px;
  fill: #fff;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none; /* Para que el texto no interfiera con el mouse */
}

/* Icono de trofeo para equipos con premio */
.prize-icon {
  pointer-events: none; /* No queremos que el trofeo capture clics */
}

/* ==================================================
   4) TOOLTIP (bluque "#tooltip" invisible al inicio)
   ================================================== */
#tooltip {
  position: absolute;       /* Lo posicionaremos con top/left desde JS */
  pointer-events: none;     /* Cambiado: none por defecto para no bloquear */
  background-color: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 16px 20px;      /* Más padding */
  border-radius: 10px;     /* Bordes más redondeados */
  font-size: 14px;         /* Texto un poco más grande */
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Sombra más fuerte */
  opacity: 0;              /* Invisible al cargar */
  transition: opacity 0.15s ease-in-out;
  z-index: 1000;           /* Por encima del SVG */
  max-width: 650px;        /* Tooltip aún más grande */
  word-wrap: break-word;
  visibility: hidden;      /* Añadido: esconder completamente cuando no está activo */
}

/* Tooltip visible */
#tooltip.visible {
  pointer-events: auto;    /* Solo permitir interacción cuando está visible */
  visibility: visible;     /* Mostrar cuando está activo */
}

/* Nombre en negrita dentro del tooltip */
#tooltip div.nombre {
  font-weight: bold;
  font-size: 18px;         /* Texto más grande */
  margin-bottom: 15px;
  text-align: center;      /* Centrado */
}

/* Estilo del enlace de LinkedIn dentro del tooltip (si existe) */
#tooltip a {
  display: inline-flex;
  align-items: center;
  color: #1DA1F2;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  margin-top: 4px;
}
#tooltip a:hover {
  text-decoration: underline;
}

/* Icono de LinkedIn dentro del tooltip */
#tooltip img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  pointer-events: none;
}

/* ==================================================
   5) BOTONES DE ZOOM (+, −, □)
   ================================================== */
#zoomControls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10; /* Encima del SVG */
}

.zoom-btn {
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.zoom-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Contenedor de imagen de premio */
.prize-image-container {
  margin-top: 15px;
  text-align: center;
}

.prize-image {
  width: 600px !important;    /* Mucho más grande y con !important */
  height: auto !important;    /* Altura automática */
  max-width: none !important; /* Eliminar cualquier restricción */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: block;
  margin: 0 auto;
}