/* ==========================================
   Estilos para Roles ARIA - Comportamiento correcto
   ========================================== */

/* Elementos con role="listbox" y sus opciones */
[role="listbox"] {
    position: relative;
}

[role="listbox"] [role="option"] {
    cursor: pointer;
    position: relative;
}

[role="listbox"] [role="option"]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
    z-index: 1;
}

[role="listbox"] [role="option"][aria-selected="true"] {
    background-color: rgba(0, 86, 179, 0.1);
}

/* Elementos con role="button" deben tener cursor pointer */
[role="button"] {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

[role="button"]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

[role="button"]:hover {
    opacity: 0.9;
}

/* Navegación principal - mejorar accesibilidad */
nav[aria-label] ul {
    list-style: none;
}

nav[aria-label] li {
    position: relative;
}

/* Regiones con role="region" deben ser identificables */
[role="region"] {
    position: relative;
}

[role="region"]:focus-within {
    outline: 2px solid rgba(0, 86, 179, 0.3);
    outline-offset: -2px;
}

/* Articles deben tener cursor pointer si son clicables */
[role="article"] {
    position: relative;
}

[role="article"]:focus-within {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

[role="article"] a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Main landmark con mejor identificación */
main[role="main"] {
    min-height: 200px;
}

main[role="main"]:focus {
    outline: none;
}

/* Asegurar que elementos con roles tengan comportamiento de teclado adecuado */
[role="button"][tabindex]:not([tabindex="-1"]),
[role="option"][tabindex]:not([tabindex="-1"]) {
    position: relative;
}

/* Mejorar visibilidad de elementos focuseados con roles */
[role]:focus-visible {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

/* Role="region" con aria-label debe ser fácilmente navegable */
[role="region"][aria-label] {
    scroll-margin-top: 20px;
}

/* Role="navigation" (aunque redundante en <nav>) */
[role="navigation"] ul {
    display: flex;
    flex-wrap: wrap;
}