/**
 * GRUPO VÍA MOTOS - Accesibilidad WCAG 2.1 AA
 * 
 * Estilos para cumplir con WCAG 2.1 nivel AA
 * Incluye navegación por teclado, lectores de pantalla y touch targets
 * 
 * @version 1.0
 * @date Diciembre 2024
 */

/* ============================================
   SKIP LINKS - Navegación rápida
   ============================================ */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--z-index-tooltip);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: 0 0 var(--border-radius-md) 0;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

/* ============================================
   SCREEN READER ONLY
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   FOCUS VISIBLE - Navegación por teclado
   ============================================ */

:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Focus para elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(226, 6, 19, 0.1);
}

/* ============================================
   TOUCH TARGETS - WCAG 2.1 AA (mínimo 44x44px)
   ============================================ */

button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[role="link"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
}

/* Touch targets para móvil */
@media (max-width: 767px) {
    button,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Espaciado entre elementos táctiles */
.touch-target-spacing > * + * {
    margin-top: var(--space-2);
}

@media (max-width: 767px) {
    .touch-target-spacing > * + * {
        margin-top: var(--space-3);
    }
}

/* ============================================
   CONTRASTE DE COLOR - WCAG AA (4.5:1)
   ============================================ */

/* Asegurar contraste mínimo en textos */
.text-contrast-low {
    color: var(--color-gray-600);
}

.text-contrast-medium {
    color: var(--color-gray-700);
}

.text-contrast-high {
    color: var(--color-gray-900);
}

/* Fondos con texto claro */
.bg-dark {
    background-color: var(--color-gray-900);
    color: var(--color-white);
}

.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

/* ============================================
   ESTADOS DE ELEMENTOS INTERACTIVOS
   ============================================ */

/* Disabled state */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hover state */
@media (hover: hover) {
    button:hover:not(:disabled),
    a:hover,
    [role="button"]:hover {
        opacity: 0.9;
    }
}

/* Active state */
button:active:not(:disabled),
a:active,
[role="button"]:active {
    transform: scale(0.98);
}

/* ============================================
   ARIA LIVE REGIONS
   ============================================ */

[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================
   FORMULARIOS ACCESIBLES
   ============================================ */

/* Labels siempre visibles */
label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

/* Campos requeridos */
[required] + label::after,
label.required::after {
    content: " *";
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

/* Estados de error */
input:invalid,
textarea:invalid,
select:invalid,
[aria-invalid="true"] {
    border-color: var(--color-error);
}

input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus,
[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--color-error-light);
}

/* Mensajes de error */
.error-message,
[role="alert"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-error-light);
    border-left: 3px solid var(--color-error);
    border-radius: var(--border-radius-sm);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* Mensajes de éxito */
.success-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-success-light);
    border-left: 3px solid var(--color-success);
    border-radius: var(--border-radius-sm);
    color: var(--color-success);
    font-size: var(--font-size-sm);
}

/* Texto de ayuda */
.help-text,
[aria-describedby] {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* ============================================
   NAVEGACIÓN POR TECLADO
   ============================================ */

/* Indicador de navegación por teclado */
body.keyboard-navigation *:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ocultar outline cuando se usa mouse */
body:not(.keyboard-navigation) *:focus {
    outline: none;
}

/* ============================================
   TABLAS ACCESIBLES
   ============================================ */

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-gray-100);
    padding: var(--space-3);
    border-bottom: 2px solid var(--color-gray-300);
}

td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

caption {
    padding: var(--space-3);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    caption-side: top;
}

/* ============================================
   MODALES Y DIÁLOGOS ACCESIBLES
   ============================================ */

[role="dialog"],
[role="alertdialog"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-index-modal);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

/* Backdrop del modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal-backdrop);
}

/* ============================================
   ANIMACIONES Y MOVIMIENTO REDUCIDO
   ============================================ */

@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;
    }
}

/* ============================================
   ALTO CONTRASTE (Windows High Contrast Mode)
   ============================================ */

@media (prefers-contrast: high) {
    button,
    a,
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }
    
    :focus-visible {
        outline-width: 3px;
    }
}

/* ============================================
   MODO OSCURO ACCESIBLE
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: var(--color-gray-100);
        --color-text-secondary: var(--color-gray-300);
        --color-bg-primary: var(--color-gray-900);
        --color-bg-secondary: var(--color-gray-800);
    }
}

/* ============================================
   TOOLTIPS ACCESIBLES
   ============================================ */

[role="tooltip"] {
    position: absolute;
    z-index: var(--z-index-tooltip);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-gray-900);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-md);
    white-space: nowrap;
    pointer-events: none;
}

/* ============================================
   BREADCRUMBS ACCESIBLES
   ============================================ */

nav[aria-label="breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}

nav[aria-label="breadcrumb"] li:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-2);
    color: var(--color-gray-400);
}

nav[aria-label="breadcrumb"] [aria-current="page"] {
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   ACORDEONES ACCESIBLES
   ============================================ */

[role="button"][aria-expanded] {
    cursor: pointer;
    user-select: none;
}

[role="button"][aria-expanded]::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

[role="button"][aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

/* ============================================
   NOTIFICACIONES ACCESIBLES
   ============================================ */

[role="status"],
[role="alert"] {
    padding: var(--space-4);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-4);
}

[role="status"] {
    background-color: var(--color-info-light);
    border-left: 4px solid var(--color-info);
    color: var(--color-info);
}

[role="alert"] {
    background-color: var(--color-error-light);
    border-left: 4px solid var(--color-error);
    color: var(--color-error);
}

/* ============================================
   UTILIDADES DE ACCESIBILIDAD
   ============================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.focusable:focus,
.focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}