/* =================== MODAL =================== */
.tree-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px);
  display: none; justify-content: center; align-items: center; z-index: 99999;
}
.tree-modal-overlay.active { display: flex; }
.tree-modal-card {
  background: #18181b; border: 2px solid #228b22; /* Borde verde bosque */
  border-radius: 20px; width: 95%; max-width: 700px; padding: 20px;
  color: #fff; box-shadow: 0 10px 40px rgba(34, 139, 34, 0.3);
}

/* =================== ÁRBOL VISUAL =================== */
.tree-structure {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-bottom: 30px; position: relative;
}
/* Línea central (Tronco) */
.tree-structure::before {
  content: ""; position: absolute; top: 80px; bottom: 0;
  width: 6px; background: #5c4033; /* Color madera */
  z-index: 0; border-radius: 5px;
}

.tree-level { display: flex; gap: 15px; z-index: 1; justify-content: center; width: 100%; }
.tree-node {
  background: #27272a; border: 2px solid #5c4033; border-radius: 12px;
  padding: 8px; width: 85px; text-align: center;
  transition: all 0.3s; position: relative;
}
.drop-zone.drag-over {
  border-color: #ff6b00; transform: scale(1.1); box-shadow: 0 0 15px #ff6b00;
}
.tree-node img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.node-name { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-rank { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #111; padding: 2px 8px; border-radius: 10px; font-size: 10px; border: 1px solid #555; }

/* Corona #1 */
.crown-node { width: 110px; border-color: #ffd700; background: linear-gradient(180deg, #3a2e00, #27272a); }
.crown-node img { width: 70px; height: 70px; border: 2px solid #ffd700; }
.crown-node .badge-rank { background: #ffd700; color: #000; }

/* =================== HOTBAR =================== */
.hotbar-container { background: #0f0f11; padding: 15px; border-radius: 15px; border: 1px solid #333; }
.hotbar-container h3 { margin: 0 0 10px 0; font-size: 14px; color: #ff6b00; }
.hotbar-items {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;
}
.hotbar-items::-webkit-scrollbar { height: 6px; }
.hotbar-items::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
.hotbar-channel {
  background: #27272a; padding: 8px 15px; border-radius: 30px;
  display: flex; align-items: center; gap: 8px; cursor: grab;
  border: 1px solid #444; transition: all 0.2s;
}
.hotbar-channel:hover { border-color: #ff6b00; background: #3f1a00; }
.hotbar-channel img { width: 30px; height: 30px; border-radius: 50%; }
.hotbar-channel span { font-size: 12px; font-weight: bold; white-space: nowrap; }

/* ARREGLO DE LA 'X' DE CERRAR */
.tree-header {
  position: relative;
  margin-bottom: 10px;
}

.tree-close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 35px;
  height: 35px;
  background: #27272a;
  border: 1px solid #444;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.tree-close-btn:hover {
  background: #ff6b00;
  border-color: #ff6b00;
  transform: rotate(90deg); /* ¡Efecto de giro genial al pasar el mouse! */
}