/* app/static/css/accesibilidad.css
   ============================================================================
   Utilidades de accesibilidad.
   Fichero aparte de output.css porque ese lo regenera Tailwind y se perdería.
   ============================================================================ */

/* Contenido solo para lectores de pantalla: invisible pero sí anunciado.
   No se usa display:none porque eso lo ocultaría también a los lectores. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enlace para saltar la navegación. Está fuera de pantalla hasta que recibe
   el foco con el tabulador, momento en que baja a la vista. */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background-color: #0ea5e9;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #0369a1;
    outline-offset: 2px;
}

/* Foco visible en todo lo interactivo. Sin esto, quien navega con teclado
   no sabe dónde está. :focus-visible no molesta a quien usa el ratón. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
    border-radius: 2px;
}

/* El destino del salto no debe mostrar recuadro al recibir el foco por
   programa: no es un elemento con el que se interactúe. */
#contenido-principal:focus {
    outline: none;
}

/* Botón deshabilitado por ARIA (no por el atributo disabled) */
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Respeta a quien pide menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   CORRECCIONES DE DISENO ADAPTABLE
   Van aqui, en CSS plano, porque output.css es un build de Tailwind ya
   generado y no contiene las utilidades que harian falta (min-w-0,
   sm:grid-cols-2). Regenerarlo entero seria arriesgado para un ajuste puntual.
   ============================================================================ */

/* Un elemento de rejilla o flexible no baja, por defecto, del ancho de su
   contenido. Con un <input> dentro eso desbordaba la pagina en tablet. */
.pie-columnas>* {
    min-width: 0;
}

.pie-columnas input[type="email"] {
    min-width: 0;
}

/* Entre 768 y 1023px las cuatro columnas del pie dejaban ~148px cada una,
   donde no cabe el campo del boletin. Dos columnas respiran. */
@media (min-width: 768px) and (max-width: 1023px) {
    .pie-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* ============================================================================
   OBJETIVOS TACTILES
   Un dedo necesita mas superficie que un puntero. La norma WCAG 2.5.5 pide
   44x44 px para los controles; la 2.5.8 (nivel AA) rebaja el minimo a 24x24
   para enlaces dentro de listas de navegacion.

   Se aplica el criterio estricto a los controles de icono, donde no hay texto
   que ayude a acertar, y el de 24px a los enlaces de texto: estirarlos todos
   a 44px hincharia el pie de pagina sin mejorar nada.
   ============================================================================ */

/* Boton del menu movil: es el control principal de navegacion en telefono */
#mobileMenuBtn,
#mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Iconos de redes sociales y demas botones cuadrados de solo icono */
.social-icon,
footer a[class*="rounded-full"],
footer a[class*="w-10"] {
    min-width: 44px;
    min-height: 44px;
}

/* Boton de enviar del boletin */
.pie-columnas button {
    min-height: 44px;
}

/* Enlaces de texto de la navegacion y el pie: se les da altura pulsable sin
   alterar la apariencia, repartiendo el espacio arriba y abajo.
   Se excluyen los que ya son botones cuadrados de icono, que van a 44px. */
footer a:not([class*="rounded-full"]):not([class*="w-10"]) {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 24px;
}

/* Enlaces sueltos de las pantallas de acceso ("¿Olvidó su contraseña?",
   "Volver al inicio de sesion"). No van dentro de un parrafo, asi que son
   objetivos por si mismos y les aplica el minimo de 24px. */
.auth-card a,
.auth-links a,
form + div a,
a[href*="forgot-password"],
a[href*="/login"] {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 24px;
}

/* El enlace para saltar contenido se quedaba en 43px por un pixel */
.skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}