/* Accessibility CSS File */

/* Focus Styles */
:focus {
    outline: 3px solid #667eea !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25) !important;
}

:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

:focus-visible {
    outline: 3px solid #4a90e2 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5) !important;
}

/* Skip Navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000000;
    color: #ffffff;
    padding: 8px;
    z-index: 999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Better Text Readability */
body {
    line-height: 1.6;
    color: #333;
}

/* Improved Contrast */
.text-muted {
    color: #6c757d !important;
}

/* Form Accessibility */
input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

/* Ensuring links are distinguishable */
a {
    text-decoration: underline;
}

a.btn, .nav-link, .navbar a {
    text-decoration: none;
}

/* ARIA support for non-semantic elements */
[role="button"],
[role="tab"],
[role="menuitem"] {
    cursor: pointer;
}

/* Screen reader utilities */
.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:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast mode compatibility */
@media (forced-colors: active) {
    .btn {
        border: 1px solid transparent;
    }
    
    .card {
        border: 1px solid CanvasText;
    }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* Improved table accessibility */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table caption {
    font-weight: bold;
    text-align: left;
    padding: 0.5rem;
    color: #333;
}

/* Accessible buttons */
button:not([disabled]),
[role="button"]:not([disabled]) {
    cursor: pointer;
}

/* Improved form field feedback */
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Better contrast for placeholder text */
input::placeholder,
textarea::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

/* Larger click targets for interactive elements */
.btn, .nav-link, .form-check-input {
    min-height: 44px;
    min-width: 44px;
}

.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
}

/* Estilos de alto contraste */
.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

.high-contrast :is(h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, label) {
    color: #fff !important;
    background-color: #000 !important;
}

.high-contrast button,
.high-contrast .btn {
    background-color: #0066CC !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.high-contrast .btn:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.high-contrast a {
    color: #00ccff !important;
    text-decoration: underline !important;
}

.high-contrast input,
.high-contrast select,
.high-contrast textarea {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.high-contrast .card,
.high-contrast .modal-content {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
}

.high-contrast .card-header,
.high-contrast .modal-header {
    background-color: #333333 !important;
    color: #ffffff !important;
}

.high-contrast footer {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Reducción de movimiento */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Tamaños de texto */
.font-size-sm {
    font-size: 0.8rem !important;
}

.font-size-md {
    font-size: 1rem !important;
}

.font-size-lg {
    font-size: 1.2rem !important;
}

.font-size-xl {
    font-size: 1.4rem !important;
}

/* Utilidades para lectores de pantalla */
.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:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Mejoras de contraste */
.text-contrast-improved {
    color: #333333 !important;
    font-weight: 500 !important;
}

.link-contrast-improved {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

/* Navegación por teclado mejorada */
[tabindex]:focus {
    outline: 3px solid #667eea !important;
    outline-offset: 2px !important;
}

/* Estado de foco para botones y enlaces */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #667eea !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25) !important;
}

/* Mejoras espaciado para legibilidad */
.line-height-improved {
    line-height: 1.6 !important;
}

.letter-spacing-improved {
    letter-spacing: 0.5px !important;
}

/* Estado de error mejorado */
.error-feedback {
    color: #dc3545;
    font-weight: 500;
    border-left: 3px solid #dc3545;
    padding-left: 8px;
    margin-top: 5px;
    display: block;
}

/* Mejora de visibilidad de formularios */
.form-control.error-input {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.success-input {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Estilos para alertas accesibles */
.alert-accessible {
    border-left-width: 4px;
    font-weight: 500;
}

.alert-accessible-info {
    border-left-color: #0066CC;
}

.alert-accessible-warning {
    border-left-color: #ffc107;
}

.alert-accessible-danger {
    border-left-color: #dc3545;
}

.alert-accessible-success {
    border-left-color: #28a745;
}