﻿/* Indicador de foco de teclado.

   Bootstrap anula el outline nativo del navegador (outline: 0) contando con
   sustituirlo por un box-shadow propio, pero en el tema del portal ese shadow
   queda en rgba(0,0,0,0): transparente y de grosor cero. Resultado: al navegar
   con el tabulador no se ve donde esta el foco, lo que incumple el criterio
   2.4.7 de WCAG. Este fichero lo restituye.

   Va en un fichero aparte a proposito: voluntariado-styles.css es un build
   compilado de Bootstrap y cualquier edicion directa se perderia al recompilar.

   Se usa un doble anillo, claro por dentro y oscuro por fuera, para que
   contraste tanto sobre fondo blanco como sobre los bloques naranjas de marca
   y sobre el pie oscuro. Un solo anillo del color corporativo seria invisible
   justo encima de las secciones naranjas.

   El outline transparente es intencionado y no sobra: en el modo de alto
   contraste de Windows el navegador descarta los box-shadow pero fuerza los
   outline a un color del sistema, de modo que ahi sigue viendose el foco.

   Lleva !important porque su unica funcion es ganar a las reglas de Bootstrap
   que anulan el foco; sin el, selectores como .btn:focus lo pisarian. */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="link"]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1a1a1a !important;
}
