.directory-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.directory-nav .btn {
    min-width: 40px; /* Ancho mínimo para que los botones de una letra no sean tan pequeños */
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

.directory-nav .btn.active {
    background-color: var(--info-color);
    color: var(--text-color-light);
    box-shadow: 0 0 0 3px var(--focus-ring-info-color);
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    animation: fadeIn 0.3s ease-in-out;
}

.rules-list li a {
    display: block;
    padding: 0.8rem 1rem;
    background-color: var(--section-deep);
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.5rem;
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.rules-list li a:hover {
    background-color: var(--bg-lightest);
    border-left-color: var(--info-color);
}

/* Unicode para decorar el enlace */
.rules-list li a::before {
    content: '📄 ';
    margin-right: 0.5em;
}