@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

a{
    text-decoration: none;
    color: #000;
}

img{
    object-fit: cover;
}

body{
    background-color: #f1f1f1;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

nav .brand img {
  height: 50px;
}

nav .brand .logo {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
}

nav .links {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  font-family: 'Ubuntu', sans-serif;
}

nav .links a:not(:last-child) {
  margin-right: 20px;
}

nav .links a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

nav .links a:hover {
  color: #fff;
  background-color: #4496ee;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
  transform: translateY(-2px);
}

nav .login button{
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    font-weight: 500;
}

nav .login button.signup{
    background-color: #ffffff;
    color: #000000;
    border-radius: 4px;
    margin-right: 14px;
    font-size: 14px;
}

nav .login button.signup:hover{
    color: #fff;
    background-color: #4496ee;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.secciones {
    max-width: 1500px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 15px;
  }

  .caja {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 25px 30px;
    background: #e2e2e2;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .caja:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
  }

  .caja h2 {
    text-align: center;
    font-size: 20px;
    color: #004080;
    margin-bottom: 18px;
  }

  .caja p {
    text-align: justify;
    line-height: 1.5;
    font-size: 15px;
  }

header{
    padding: 0 80px;
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .left{
    width: 700px;
}

header .left h1{
    font-size: 50px;
}

header .left h1 span{
    color: #0f2182;
}

header .left p{
    margin: 40px 0;
    color: #777;
}

header .left a{
    display: flex;
    align-items: center;
    background: #000;
    width: 200px;
    padding: 8px;
    border-radius: 60px;
}

header .left a i{
    background-color: #fff;
    font-size: 24px;
    border-radius: 50%;
    padding: 8px;
}

header .left a span{
    color: #fff;
    margin-left: 10px;
}

header img{
    width: 600px;
}

h2.separator{
    padding: 0 80px;
    font-size: 40px;
    margin-top: 40px;
}

.sell-nft{
    padding: 0 80px;
    margin: 50px 0 80px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.sell-nft .item,
.nft-shop .nft-list .item{
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.sell-nft .item:hover,
.nft-shop .nft-list .item:hover,
.sellers .item:hover{
    box-shadow: none;
}

.sell-nft .item .header{
    display: flex;
    align-items: center;
    gap: 10px;
}

.sell-nft .item .header i{
    font-size: 40px;
}

.sell-nft .item .header h5{
    font-size: 17px;
}

.sell-nft .item p{
    margin-top: 10px;
    padding: 0 4px;
}

.nft-shop{
    padding: 0 80px;
    margin-top: 30px;
}

.nft-shop .category{
    display: flex;
    gap: 14px;
}

.nft-shop .category a{
    background-color: #dfdcdc;
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.nft-shop .category a:hover{
    color: #fff;
    background-color: #0f2182;
}

.nft-shop .nft-list{
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.nft-shop .nft-list .item img{
    width: 280px;
    height: 280px;
    border-radius: 18px;
}

.nft-shop .nft-list .item .info{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #edecec;
}

.nft-shop .nft-list .item .info h5{
    font-size: 18px;
}

.nft-shop .nft-list .item .info .btc{
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nft-shop .nft-list .item .btc i{
    font-size: 22px;
    color: #304ffe;
}

.nft-shop .nft-list .item .btc p{
    font-size: 12px;
    color: #304ffe;
}

.nft-shop .nft-list .item .info > p{
    font-size: 12px;
    color: #989898;
}

.nft-shop .nft-list .item .bid{
    padding: 14px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nft-shop .nft-list .item .bid p,
.nft-shop .nft-list .item .bid a{
    background-color: #edecec;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
}

.nft-shop .nft-list .item .bid a{
    color: #304ffe;
    background: transparent;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nft-shop .nft-list .item .bid a:hover{
    color: #fff;
    background-color: #000;
}

.view-more{
    margin: 10px 0 40px;
    display: flex;
    justify-content: center;
}

.view-more button{
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background: #dfdcdc;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-more button:hover{
    color: #fff;
    background: #0f2182;
}

.sellers{
    padding: 0 80px;
    margin: 40px 0 80px;
    display: flex;
    gap: 30px;
}

.sellers .item{
    background: #fff;
    display: flex;
    align-items: center;
    width: 25%;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.sellers .item img{
    width: 64px;
}

.sellers .item .info p{
    font-size: 14px;
    margin-top: 8px;
}

footer{
    background-color: #000;
    color: #fff;
    padding: 100px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer h3{
    font-size: 48px;
}

footer .right{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 26px;
}

footer .right .links{
    display: flex;
    gap: 30px;
}

footer .right .links a{
    color: #989898;
    transition: color 0.3s ease;
}

footer .right .links a:hover{
    color: #fff;
}

footer .right .social{
    display: flex;
    align-items: center;
    gap: 10px;
}

footer .right .social i{
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s ease;
}

footer .right .social i:hover{
    color: #304ffe;
}

footer .right p{
    font-size: 13px;
    color: #777;
}

@media screen and (max-width: 1400px) {
    
    nav,
    header,
    h2.separator,
    .sell-nft,
    .nft-shop,
    .sellers{
        padding: 0 40px;
    }

    header .left h1{
        font-size: 60px;
    }

    header img{
        width: 540px;
    }

    .nft-shop .nft-list .item img{
        width: 220px;
        height: 220px;
    }

    footer{
        padding: 100px 40px;
    }

    footer h3{
        font-size: 38px;
    }

}

@media screen and (max-width: 1200px) {
    
    header .left h1{
        font-size: 48px;
    }

    header img{
        width: 480px;
    }

    h2.separator{
        font-size: 34px;
    }

    .sell-nft .item .header i{
        font-size: 36px;
    }

    .sell-nft .item .header h5{
        font-size: 15px;
    }

    .sell-nft .item p{
        font-size: 13px;
    }

    .nft-shop .nft-list{
        flex-wrap: wrap;
        row-gap: 30px;
    }

    .nft-shop .nft-list .item{
        width: 48%;
    }

    .nft-shop .nft-list .item img{
        width: 100%;
        height: auto;
    }

    .sellers{
        flex-wrap: wrap;
    }

    .sellers .item{
        width: 48%;
    }

    footer .links a{
        font-size: 15px;
    }

}

@media screen and (max-width: 992px) {
    
    nav a.logo{
        font-size: 28px;
    }

    nav .links a{
        font-size: 14px;
    }

    header{
        flex-direction: column-reverse;
        height: auto;
        margin-bottom: 60px;
    }

    header .left{
        width: 100%;
    }

    header img{
        width: 100%;
    }

    .sell-nft{
        flex-wrap: wrap;
        gap: 20px;
    }

    .sell-nft .item{
        width: 48%;
    }

    .sellers{
        gap: 20px;
    }

    footer{
        flex-direction: column;
        padding: 60px 40px;
    }

    footer h3{
        margin-bottom: 40px;
        font-size: 32px;
    }

    footer .right{
        width: 100%;
        align-items: center;
    }

}

@media screen and (max-width: 768px) {
    
    nav,
    header,
    h2.separator,
    .sell-nft,
    .nft-shop,
    .sellers{
        padding: 0 20px;
    }

    nav a.logo{
        display: none;
    }

    nav .links a{
        font-size: 12px;
    }

    nav .login button{
        font-size: 12px;
        padding: 6px 10px;
    }

    header .left h1{
        font-size: 36px;
    }

    header .left p{
        font-size: 14px;
    }

    header .left a{
        padding: 6px;
        width: 160px;
        font-size: 14px;
    }

    header .left a i{
        padding: 6px;
    }

    h2.separator{
        font-size: 30px;
    }

    footer{
        padding: 40px 20px;
    }

}

@media screen and (max-width: 576px) {
    
    header .left h1{
        font-size: 30px;
    }

    .sell-nft .item{
        width: 100%;
    }

    .nft-shop .nft-list .item,
    .sellers .item{
        width: 47%;
    }

    .nft-shop .category a{
        font-size: 13px;
    }

}

/* --- Estilos para la Sección de Miembros --- */
#members {
    padding: 80px 0;
    background-color: #f1f1f1; /* Color de fondo de la sección (coincide con body) */
}

#members .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#members h2 {
    text-align: center;
    font-weight: 700;
    color: #333; /* Texto más oscuro */
    font-size: 2.5em;
    margin-bottom: 40px;
    position: relative;
    display: block;
}

#members h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #4496ee; /* Azul de tu menú */
    margin: 10px auto 0 auto;
    border-radius: 2px;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.member-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    cursor: pointer; /* Indica que la tarjeta es clickeable */
    overflow: hidden; /* Importante para la animación de expansión */
}

.member-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.member-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Foto circular */
    object-fit: cover;
    display: block;
    margin: 0 auto 15px auto;
    border: 4px solid #4496ee; /* Borde azul alrededor de la foto */
}

.member-card h3 {
    color: #0f2182; /* Azul oscuro */
    font-size: 1.2em;
    font-weight: 600;
    margin: 10px 0;
    text-align: center;
    line-height: 1.4;
}

/* Estilos para el enlace del nombre */
.member-card .member-name-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Asegura que el h3 sea parte del área clickeable */
}

/* --- Estilos para el Contenido Expandible (Detalles) --- */
.member-details {
    max-height: 0; /* OCULTAR: Esta es la clave para la animación de colapso */
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Animación suave */
    padding-top: 0;
}

.member-details.expanded {
    max-height: 500px; /* MOSTRAR: Altura suficiente para el contenido */
    padding-top: 15px;
}

.member-details hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

.member-details h4 {
    color: #4496ee;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 10px;
}

.member-details p {
    text-align: left;
    font-size: 0.9em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    color: #555;
}

.member-details p i {
    font-size: 1.2em;
    margin-right: 8px;
    color: #0f2182;
}

.member-details a {
    color: #007bff;
    text-decoration: underline;
    font-weight: 500;
}


/* --- Estilos para el Dropdown de Perfil --- */
.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-button {
    background-color: #004d80;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 105px;
    min-height: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
    border-radius: 5px;
    margin-top: 5px;
}

.dropdown-content a, .dropdown-content .logout-button-menu {
    color: #333;
    padding: 7px 5px;
    text-decoration: none;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-content a:hover, .dropdown-content .logout-button-menu:hover {
    background-color: #f1f1f1;
}

.show-dropdown {
    display: block;
}

/* ------------------------------------- */
/* 1. OCULTAR EL CONTENIDO DEL DROPDOWN POR DEFECTO */
/* ------------------------------------- */
.dropdown-content {
    display: none; /* Oculta el menú por defecto */
    position: absolute; /* Permite que el menú flote sobre otros elementos */
    background-color: #f9f9f9; /* Fondo claro del menú */
    min-width: 160px; /* Ancho mínimo para que quepan las opciones */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra para que se vea flotante */
    z-index: 10; /* Asegura que esté sobre otros elementos */
    /* Posicionamiento: Ajusta estos valores según la posición de tu botón en el nav */
    top: 100%; /* Aparece justo debajo del botón */
    right: 0; /* Alinea el menú a la derecha del botón */
    border-radius: 4px;
}

/* ------------------------------------- */
/* 2. REGLA CLAVE: MOSTRAR CUANDO JS AÑADE LA CLASE */
/* ------------------------------------- */
.dropdown-content.show-dropdown {
    display: block; /* Vuelve el menú visible cuando JavaScript añade esta clase */
}



/* Estilo para el contenedor del dropdown */
.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-button {
    background-color: #1a2a4d; /* Color azul oscuro como tu logo */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
}

.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1000;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Clase que se activa con el JS */
.show-dropdown {
    display: block !important;
}

/* Asegura que el dropdown se muestre cuando tenga la clase */
.show-dropdown {
    display: block !important;
}

/* Estilo para que el botón se vea como tus otros botones de la nav */
.profile-button {
    background: #1a2a4d; /* Color azul de tu logo */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}

.profile-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: white;
    min-width: 150px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-top: 5px;
    z-index: 1000;
}

.dropdown-content a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    background: #f4f4f4;
}

/* Sección de Colaboradores */
.collaborators-list {
    max-width: 800px;
    margin: 0 auto;
}

.collab-item {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eee;
}

.collab-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.collab-header:hover {
    background: #f0f7ff;
}

.collab-header i {
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.collab-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fafafa;
}

.collab-details p {
    padding: 15px 20px;
    margin: 0;
    color: #555;
}

/* Clases para el JS */
.collab-item.active .collab-details {
    max-height: 100px; /* Ajusta según el contenido */
}

.collab-item.active .collab-header i {
    transform: rotate(180deg);
}

/* Botón principal */
#btn-ver-colaboradores {
    padding: 15px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 50px;
    transition: 0.3s;
}

/* El espacio que se arroja hacia abajo */
.mega-acordeon {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    margin-top: 20px;
    border-radius: 15px;
}

.mega-acordeon.active {
    max-height: 2000px; /* Suficiente para muchas filas */
    padding: 30px;
    border: 1px solid #eee;
}

/* Grid de 4 o 5 columnas */
.collab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Cada cuadrito de colaborador */
.collab-card {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: 0.3s;
}

.collab-card:hover { background: #e9ecef; }

.collab-uni-info {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.collab-card.open .collab-uni-info {
    max-height: 50px;
    border-top: 1px solid #ccc;
    padding-top: 5px;
}

/* --- Estilo del Modal "Chido" --- */
.modal-content {
    background: #ffffff;
    margin: 5% auto; /* Más centrado verticalmente */
    padding: 40px;
    border-radius: 20px;
    width: 40%; /* Más grandecito */
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    border: none;
    text-align: center;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-content h3 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 25px;
    font-weight: 700;
}

/* Campos de entrada estilizados */
.modal-content input[type="text"] {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s;
    outline: none;
}

.modal-content input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0,123,255,0.1);
    transform: scale(1.02);
}

/* Botón del Modal */
.modal-content .admin-button {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    box-shadow: 0 5px 15px rgba(0,86,179,0.3);
}

/* --- Miembros Efecto Triple --- */
.member-card { cursor: pointer; } /* Indica que se puede picar en todo el cuadro */

/* Estilo del botón Agregar Colaborador */
.add-button {
    background: linear-gradient(135deg, #28a745, #218838); /* Verde profesional */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px; /* Estilo píldora */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
    margin-bottom: 20px;
}

.add-button:hover {
    transform: translateY(-2px); /* Efecto de flotar */
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.add-button:active {
    transform: translateY(0);
}

/* Contenedor de controles admin centrado */
#admin-collab-controls {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

/* La Tachita de cerrar */
.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px; /* Aquí la haces más grande */
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1; /* Para que no empuje el contenido hacia abajo */
}

.close:hover {
    color: #ff4757; /* Cambia a rojo al pasar el mouse */
    transform: scale(1.2); /* Se agranda un poquito más al pasar el mouse */
}

/* Campos de texto más grandes (Rellenar los campos) */
.modal-content input[type="text"] {
    width: 100%;
    padding: 18px; /* Aumentamos el relleno interno para que sea más alto */
    margin-bottom: 25px;
    border: 2px solid #f1f1f1;
    border-radius: 15px;
    font-size: 1.1rem; /* Letra un poco más grande al escribir */
    background-color: #fdfdfd;
}

.member-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    border: 1px solid #007bff; /* Un borde sutil azul al pasar el mouse */
}

:root {
    --color-oscuro: #4a5568; 
    --color-claro: #b2c2df;  
    --color-catico: #1e40af; /* Azul más intenso para CA-TICO */
    --linea-color: #cbd5e0;
    --azul-hover: #007bff; /* El color de brillo que pediste */
}

.organigrama-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    background-color: #fcfcfc;
}

.nodo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease; /* Para que el efecto sea suave */
}

/* EFECTO HOVER SOLICITADO */
.nodo:hover .box-principal {
    background-color: var(--azul-hover) !important; /* Cambia a azul al pasar el cursor */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6); /* Brillo azul intenso */
}

.nodo:hover .box-detalle {
    border-color: var(--azul-hover);
    background-color: white; /* Resalta el detalle al hacer hover */
}

.nodo:hover .tag-representante {
    color: white; /* Hace que el texto del cargo sea legible sobre el azul */
}

/* Estilo original de los cuadros */
.nodo.especial .box-principal {
    background-color: var(--color-catico);
}

.box-principal {
    background-color: var(--color-oscuro);
    color: white;
    padding: 18px 10px;
    text-align: center;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2;
    transition: all 0.3s ease;
}

.box-detalle {
    background-color: var(--color-claro);
    height: 14px;
    width: 70%;
    margin-top: -7px;
    border: 1.5px solid rgba(0,0,0,0.1);
    z-index: 1;
    transition: all 0.3s ease;
}

/* Etiqueta de Representante */
.tag-representante {
    display: block;
    font-size: 10px;
    color: #b2c2df;
    margin-top: 5px;
    font-weight: normal;
    font-style: italic;
    transition: color 0.3s ease;
}

/* Líneas y conectores */
.linea-v {
    width: 2px;
    height: 30px;
    background-color: var(--linea-color);
}

.conector-triple {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linea-h {
    width: 100%;
    height: 2px;
    background-color: var(--linea-color);
}

.lineas-bajada {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.lineas-bajada span {
    width: 2px;
    height: 25px;
    background-color: var(--linea-color);
}

.nivel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 900px;
    justify-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .nivel-grid { grid-template-columns: 1fr; }
    .conector-triple { display: none; }
    .linea-v { height: 20px; }
}