/* =====================================================================
   accesibilidad.css  --  Shoolin Logistics

   Se carga despues de todas las hojas heredadas y no modifica ninguna:
   agrega lo que falta y devuelve lo que las heredadas quitaron. Si algun
   dia se rehace el diseno, este archivo se borra entero sin efectos.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Foco del teclado

   Las hojas heredadas anulan el contorno de foco en veintitres reglas
   distintas. El efecto es que quien navega con el tabulador recorre el
   sitio sin ver nunca donde esta parado.

   Se restituye con :focus-visible, que lo muestra a quien navega con
   teclado y no a quien hace clic con el mouse. El halo exterior existe
   para que el contorno se distinga tambien sobre los fondos naranjas de
   la marca, donde un contorno naranja solo se perderia.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ff6731 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9),
                0 0 0 9px rgba(255, 103, 49, 0.45) !important;
    border-radius: 2px;
}

/* El contenedor principal recibe el foco al usar el salto de contenido.
   Es un destino, no un control: no corresponde dibujarle un contorno. */
#contenido:focus,
#contenido:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------------------
   Salto al contenido

   Sin esto, quien navega con teclado tiene que recorrer el menu entero
   -veintitantas paradas- en cada pagina antes de llegar al texto.
   Permanece oculto hasta recibir el foco.
   --------------------------------------------------------------------- */
.shl-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 14px 22px;
    background: #15416e;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.shl-saltar:focus {
    left: 0;
    color: #ffffff;
    text-decoration: none;
}


/* ---------------------------------------------------------------------
   Texto para lectores de pantalla

   Visible para quien no ve la pantalla, invisible para quien la ve. No
   se usa display:none ni visibility:hidden porque eso tambien lo
   esconderia de los lectores, que es lo contrario de lo buscado.
   --------------------------------------------------------------------- */
.shl-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------
   Menu lateral

   Dos problemas distintos, los dos del sitio heredado.

   El primero: el panel se oculta corriendolo fuera de la pantalla, con
   un desplazamiento lateral. Corrido sigue existiendo, asi que quien
   navega con el tabulador atraviesa todos sus enlaces con el menu
   cerrado, sin ver nada. Se agrega visibilidad, que si lo saca del
   recorrido, con un retardo al cerrar para no cortar la animacion.

   El segundo: el disparador era un enlace a ninguna parte. Pasa a ser
   un boton, que es lo que hace. La hoja heredada lo estilaba con un
   selector de elemento -.mobile-menu-bar a-, de modo que el cambio de
   etiqueta lo habria dejado sin estilos: se replican aca, junto con la
   anulacion de la apariencia propia de los botones.
   --------------------------------------------------------------------- */
.menu-sidebar-area {
    visibility: hidden;
    -webkit-transition: right 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), visibility 0s linear 0.3s;
    transition: right 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), visibility 0s linear 0.3s;
}

.menu-sidebar-area.active {
    visibility: visible;
    -webkit-transition: right 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), visibility 0s;
    transition: right 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), visibility 0s;
}

.mobile-menu-bar button.mobile-menu-toggle-btn {
    /* apariencia propia de los botones, anulada */
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* lo que la hoja heredada le daba al enlace */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


/* ---------------------------------------------------------------------
   Movimiento

   El sitio anima el widget de contacto de forma continua e infinita.
   Para quien tiene sensibilidad vestibular eso puede provocar mareo, y
   el sistema operativo ya ofrece una preferencia para pedir que no se
   anime. Se respeta.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}