/* Estilos para elementos enfocables */
[data-focusable="true"] {
    position: relative;
}

/* Estilo del focus para navegación con D-pad */
[data-focusable="true"].focused {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    box-shadow: 0 0 10px rgba(255, 70, 85, 0.5);
    z-index: 10;
}

/* Estilos específicos para diferentes tipos de elementos */
.profile-card.focused {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--focus-color);
}

.profile-edit-btn.focused {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 70, 85, 0.3);
}

.pin-btn.focused {
    background-color: var(--focus-color);
    transform: scale(1.1);
}

.avatar-option.focused {
    border-color: var(--focus-color);
    transform: scale(1.1);
}

.nav-item.focused {
    background-color: var(--focus-color);
}

.content-card.focused {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.player-slot.focused {
    background-color: var(--focus-color);
}

.tournament-card.focused {
    border-left-color: var(--focus-color);
    transform: translateX(5px);
}

.news-item.focused {
    transform: translateX(5px);
}

.btn-primary.focused, .btn-secondary.focused, .btn-danger.focused {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 70, 85, 0.3);
}

input.focused {
    border-color: var(--focus-color);
    box-shadow: 0 0 5px rgba(255, 70, 85, 0.3);
}

/* Animaciones para transiciones suaves */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 70, 85, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 70, 85, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 70, 85, 0);
    }
}

[data-focusable="true"].focused.pulse {
    animation: pulse 2s infinite;
}

/* Estilos para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    [data-focusable="true"].focused {
        outline: 3px solid var(--focus-color);
        outline-offset: 2px;
        box-shadow: none;
        transform: none;
    }
    
    @keyframes pulse {
        display: none;
    }
}

/* Estilos específicos para navegación entre grids */
.profile-container:focus-within {
    outline: none;
}

.pin-keyboard:focus-within {
    outline: none;
}

.form-actions:focus-within {
    outline: none;
}