/*
 * ===================================================================
 * ESTILOS PARA LA JERARQUÍA DE COMPUESTOS
 * ===================================================================
 */

/* Estilos base que se aplican siempre */
.jerarquia-compuestos,
.jerarquia-compuestos ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.jerarquia-compuestos li {
    margin-bottom: 10px;
    position: relative;
}

.jerarquia-compuestos a {
    color: #ffffff; /* Color de tu diseño */
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.jerarquia-compuestos a:hover {
    color: #dddddd; /* Color hover */
    text-decoration: underline;
}

/* Las líneas del árbol (base) */
.jerarquia-compuestos li::before,
.jerarquia-compuestos li::after {
    content: '';
    position: absolute;
    left: 0;
    background-color: #ffffff; /* Color de las líneas */
}

.jerarquia-compuestos li::before {
    top: 0;
    width: 1px;
    height: 100%;
}

.jerarquia-compuestos li::after {
    height: 1px;
}

/*
 * ===================================================================
 * ESTILOS PARA ESCRITORIO (Pantallas más grandes que 768px)
 * ===================================================================
 */
@media (min-width: 769px) {
    .jerarquia-compuestos a {
        font-size: 30px;
    }
    
    .jerarquia-compuestos li {
        padding-left: 30px;
    }

    .jerarquia-compuestos ul {
        padding-left: 25px;
    }

    .jerarquia-compuestos li::after {
        top: 1em;
        width: 25px;
    }

    .jerarquia-compuestos li:last-child::before {
        height: 1em;
    }
}

/*
 * ===================================================================
 * ESTILOS RESPONSIVOS PARA MÓVILES (Pantallas de 768px o menos)
 * ===================================================================
 */
@media (max-width: 768px) {
    .jerarquia-compuestos a {
        font-size: 16px;
        white-space: normal;
        word-break: break-word;
    }
    
    .jerarquia-compuestos li {
        padding-left: 20px; 
        line-height: 1.5; /* Espaciado vertical para evitar solapamientos */
    }
    
    .jerarquia-compuestos ul {
        padding-left: 15px;
    }

    .jerarquia-compuestos li::after {
        top: 0.8em;
        width: 15px;
    }

    .jerarquia-compuestos li:last-child::before {
        height: 0.8em;
    }
}

/*
 * ===================================================================
 * ESTILOS PARA EL OTRO SHORTCODE (sin cambios)
 * ===================================================================
 */
.articulos-relacionados {
    /* Aquí puedes añadir estilos si lo necesitas en el futuro */
}
.articulos-relacionados h6 {
    color: white;
    font-weight: normal;
}
.articulos-relacionados h6 a {
    color: white;
    text-decoration: none;
}
.articulos-relacionados h6 a:hover {
    color: #61CE70;
    text-decoration: underline;
}