/**
 * CINIA - Accessible Animations
 * Respeta la preferencia de movimiento reducido del usuario
 * WCAG 2.1 Success Criterion 2.3.3 Animation from Interactions (Level AAA)
 */

/* ========================================
   PREFERS-REDUCED-MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    /* Deshabilitar TODAS las animaciones y transiciones */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Deshabilitar animaciones WOW.js */
    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
    
    /* Deshabilitar parallax y efectos de scroll */
    [data-stellar-background-ratio] {
        transform: none !important;
        background-attachment: scroll !important;
    }
    
    /* Deshabilitar transformaciones en hover */
    *:hover {
        transform: none !important;
    }
    
    /* Mantener transiciones de opacidad muy cortas (para fades) */
    *:focus,
    *:hover {
        transition: opacity 0.1s ease !important;
    }
}

/* ========================================
   FOCUS VISIBLE (WCAG 2.1 AA)
   ======================================== */

/* Outline visible para navegación por teclado */
*:focus-visible {
    outline: 3px solid #ad060e;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(173, 6, 14, 0.2);
}

/* Elementos interactivos con outline más prominente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #ad060e;
    outline-offset: 3px;
}

/* Remover outline en clicks de mouse (solo keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   SKIP LINKS ACCESIBLES
   ======================================== */

.skip-to-main {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #ad060e;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.3s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid #ffeb3b;
    outline-offset: 3px;
}

/* ========================================
   ELEMENTOS VISUALMENTE OCULTOS (Screen Readers)
   ======================================== */

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

/* Mostrar en focus (para skip links) */
.visually-hidden:focus,
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========================================
   CONTRASTE DE COLORES (WCAG AA)
   ======================================== */

/* Asegurar contraste mínimo 4.5:1 para texto normal */
/* Asegurar contraste mínimo 3:1 para texto grande (18pt+/14pt+ bold) */

/* Links con suficiente contraste */
a {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

/* Texto deshabilitado con contraste adecuado */
:disabled,
[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   INDICADORES DE ESTADO
   ======================================== */

/* Loading/busy indicators */
[aria-busy="true"] {
    opacity: 0.7;
    cursor: wait;
}

/* Estados de error */
[aria-invalid="true"] {
    border-color: #d32f2f !important;
}

[aria-invalid="true"]:focus {
    outline-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

/* ========================================
   LIVE REGIONS (Screen Readers)
   ======================================== */

[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* Alerts visibles */
[role="alert"] {
    padding: 12px 16px;
    border-radius: 4px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    margin: 16px 0;
}

[role="alert"].error {
    background: #f8d7da;
    border-left-color: #d32f2f;
}

[role="alert"].success {
    background: #d4edda;
    border-left-color: #28a745;
}

/* ========================================
   TOOLTIPS Y POPUPS ACCESIBLES
   ======================================== */

[role="tooltip"] {
    position: absolute;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    max-width: 250px;
    pointer-events: none;
}

[role="tooltip"]::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

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

/* Caption visible para tablas */
table caption {
    padding: 12px;
    font-weight: 600;
    text-align: left;
    background: #f5f5f5;
}

/* Headers resaltados */
th {
    background: #f5f5f5;
    font-weight: 600;
    text-align: left;
}

/* Zebra striping para mejor legibilidad */
tbody tr:nth-child(even) {
    background: #fafafa;
}

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

[role="dialog"],
[role="alertdialog"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Overlay para modales */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

/* ========================================
   FORMS ACCESIBLES
   ======================================== */

/* Labels siempre visibles */
label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

/* Required fields indicator */
label.required::after,
label[required]::after {
    content: '*';
    color: #d32f2f;
    margin-left: 4px;
}

/* Input focus states */
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #ad060e;
    outline-offset: 2px;
    border-color: #ad060e;
}

/* Error messages */
.error-message {
    color: #d32f2f;
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

/* Help text */
.help-text {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
    display: block;
}

/* ========================================
   NAVEGACIÓN ACCESIBLE
   ======================================== */

/* Breadcrumbs */
[aria-label="breadcrumb"] {
    padding: 12px 0;
}

[aria-label="breadcrumb"] ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

[aria-label="breadcrumb"] li:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: #999;
}

[aria-label="breadcrumb"] [aria-current="page"] {
    color: #666;
    font-weight: 600;
}

/* ========================================
   IMÁGENES ACCESIBLES
   ======================================== */

/* Asegurar que imágenes sin alt sean reportadas */
img:not([alt]) {
    outline: 3px solid red;
}

/* Imágenes decorativas */
img[alt=""],
img[role="presentation"],
img[aria-hidden="true"] {
    outline: none;
}

/* ========================================
   RESPONSIVE Y ZOOM
   ======================================== */

/* Soportar zoom hasta 200% sin pérdida de funcionalidad */
@media (min-width: 1px) {
    html {
        font-size: 16px;
    }
}

/* Evitar scroll horizontal en zoom */
body {
    overflow-x: hidden;
}

/* ========================================
   PRINT STYLES (Accesibilidad en impresión)
   ======================================== */

@media print {
    /* Mostrar URLs de links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* No imprimir navegación */
    nav,
    .a11y-toolbar,
    .skip-to-main {
        display: none !important;
    }
    
    /* Forzar colores legibles */
    * {
        background: white !important;
        color: black !important;
    }
}