/* Base styles for the bottom navigation menu */
.bottom-nav {
  position: fixed; /* Fixes the menu to the viewport */
  bottom: 0; /* Positions the menu at the bottom */
  width: 100%; /* Makes the menu span the full width */
  background-color: #EEEEEE;
  display: flex; /* Uses Flexbox for even spacing of items */
  justify-content: space-around; /* Distributes items evenly */
  padding: 10px 0;
  z-index: 1000; /* Ensures the menu stays on top of other content */
}

/* Styles for the individual menu items */
.nav-item {
  display: flex;
  flex-direction: column; /* Stacks the icon and text vertically */
  align-items: center; /* Centers the content horizontally */
  color: #8d8d8d;
  text-decoration: none;
  font-size: 14px;
  padding: 8px;
  flex-grow: 1; /* Allows items to fill available space evenly */
}

/* Hover and active states */
.nav-item:hover {
  /*background-color: #EEEEEE;*/
  text-decoration: none;
}

.nav-item.active {
  color: #000000;
}

/* Icon and label styles */
.nav-item i {
  font-size: 24px;
}

.nav-item .label {
  font-size: 12px;
  margin-top: 4px;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
  .nav-item {
    font-size: 14px;
    padding: 10px 5px;
  }
}


/*arbol de Afiliados*/
 ul.tree { list-style:none; padding-left:2rem; position: relative; }
  ul.tree::before {
    content:""; position:absolute; top:0; left:0.5rem; bottom:0;
    width:2px; background:#dee2e6;
  }
  ul.tree li { margin: .75rem 0; position: relative; }
  ul.tree li::before {
    content:""; position:absolute; top:1.2rem; left:-1.5rem; width:1.5rem; height:2px; background:#dee2e6;
  }
  .node-card {
    display:inline-block;
    padding:.5rem .75rem;
    border-radius: .75rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    cursor:pointer;
    transition: transform .15s;
    font-size: .9rem;
  }
  .node-card:hover { transform:scale(1.03); }
  .children { margin-left: 2rem; display:none; }
  .expanded > .children { display:block; }

  /* Colores por nivel */
  .level-0 { background:#adffad; color:#000; }
  .level-1 { background:#ffc107; color:#000; }
  .level-2 { background:#74b8c4; color:#000; }
  .level-3 { background:#c3d3f5; }
  .level-4 { background:#c9c9c9; color:#000; }
  .level-5 { background:#e2e2e0; color:#000; }
  .badge-id { font-size:.7rem; margin-left:.3rem; background:rgba(0,0,0,0.25); }
  .badge-level { font-size:.7rem; margin-left:.3rem; background:rgba(0,0,0,0.7); color:#fff; }


    svg {
      width: 100%;
      height: 100vh;
    }
    .node circle {
      fill: #2c3e50;
      stroke: #1abc9c;
      stroke-width: 2px;
      cursor: pointer;
      transition: fill 0.3s;
    }
    .node circle:hover {
      fill: #16a085;
    }
    .node text {
      font-size: 14px;
      font-weight: 500;
      fill: #2c3e50;
      cursor: pointer;
    }
    .link {
      fill: none;
      stroke: #95a5a6;
      stroke-width: 2px;
    }
    h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 10px;
    }