/* ==========================================================================
   WCAG 2.1 - Accesibilidad
   ========================================================================== */

/* --- Skip Navigation Link --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--coloroscuro);
    color: #fff;
    padding: 0.75rem 1.5rem;
    z-index: 10000;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* --- Focus Visible (navegacion por teclado) --- */
*:focus-visible {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.4) !important;
}

/* No mostrar outline en click de mouse */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Focus especifico para inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: #ffdd00 !important;
    outline: 3px solid #ffdd00 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px rgba(255, 221, 0, 0.4) !important;
}

/* Focus para botones */
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.4) !important;
}

/* Focus para checkboxes y radios */
.form-check-input:focus-visible {
    border-color: #ffdd00 !important;
    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.4) !important;
}

/* --- Boton Toggle Alto Contraste --- */
#btn-alto-contraste {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 2px solid #333;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, color 0.2s;
    font-size: 1.2rem;
    padding: 0;
}

#btn-alto-contraste:hover,
#btn-alto-contraste:focus-visible {
    background: #333;
    color: #fff;
}

/* --- Modo Alto Contraste --- */
.alto-contraste {
    --coloroscuro: #000000 !important;
    --colorclaro: #000000 !important;
    --colorletra: #000000 !important;
    --fondodisabled: #e0e0e0 !important;
}

.alto-contraste,
.alto-contraste .contenedorprincipal,
.alto-contraste .card,
.alto-contraste .card-body,
.alto-contraste .modal-content {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.alto-contraste .card-header {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste .card-header h5,
.alto-contraste .card-header h6,
.alto-contraste .card-header .card-title,
.alto-contraste .card-header .card-subtitle {
    color: #ffffff !important;
}

/* Botones en alto contraste */
.alto-contraste .btn-etiqueta {
    color: #000000 !important;
    border-color: #000000 !important;
}

.alto-contraste .btn-success,
.alto-contraste .btn-info,
.alto-contraste .btn-primary,
.alto-contraste .btn-warning {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste .btn-danger {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    color: #ffffff !important;
}

.alto-contraste .btn-secondary {
    background-color: #555555 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

.alto-contraste .btn-outline-success,
.alto-contraste .btn-outline-info,
.alto-contraste .btn-outline-primary {
    color: #000000 !important;
    border-color: #000000 !important;
    background-color: transparent !important;
}

.alto-contraste .btn-outline-success:hover,
.alto-contraste .btn-outline-info:hover,
.alto-contraste .btn-outline-primary:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Texto y enlaces */
.alto-contraste a {
    color: #000000 !important;
    text-decoration: underline !important;
}

.alto-contraste a:hover,
.alto-contraste a:focus {
    color: #333333 !important;
}

/* Inputs en alto contraste */
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea,
.alto-contraste .form-control,
.alto-contraste .form-select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

.alto-contraste input::placeholder,
.alto-contraste textarea::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}

.alto-contraste input:focus,
.alto-contraste select:focus,
.alto-contraste textarea:focus {
    border-color: #0000ff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.3) !important;
}

/* Tablas en alto contraste */
.alto-contraste .table,
.alto-contraste .table th,
.alto-contraste .table td {
    border-color: #000000 !important;
    color: #000000 !important;
}

.alto-contraste .table thead th {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Badges y etiquetas */
.alto-contraste .badge,
.alto-contraste .btn-etiqueta {
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

/* Header y nav */
.alto-contraste .header,
.alto-contraste .main_nav,
.alto-contraste .header_main {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste .header a,
.alto-contraste .main_nav a,
.alto-contraste .header_main a {
    color: #ffffff !important;
}

/* Sidebar en alto contraste */
.alto-contraste .sidebar-wrapper {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste .sidebar-wrapper a,
.alto-contraste .sidebar-wrapper .sidebar-brand a,
.alto-contraste .sidebar-menu a {
    color: #ffffff !important;
}

.alto-contraste .sidebar-search .form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

/* Footer en alto contraste */
.alto-contraste #footer {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.alto-contraste #footer a {
    color: #ffffff !important;
}

/* Dropdown en alto contraste */
.alto-contraste .dropdown-menu {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}

.alto-contraste .dropdown-item {
    color: #000000 !important;
}

.alto-contraste .dropdown-item:hover,
.alto-contraste .dropdown-item:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Modales en alto contraste */
.alto-contraste .modal-header {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
}

.alto-contraste .modal-header .modal-title {
    color: #ffffff !important;
}

.alto-contraste .modal-footer {
    border-top: 2px solid #000000 !important;
}

/* SweetAlert2 en alto contraste */
.alto-contraste .swal2-popup {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

.alto-contraste .swal2-title {
    color: #000000 !important;
}

.alto-contraste .swal2-html-container {
    color: #000000 !important;
}

/* Spinner/Loading en alto contraste */
.alto-contraste .spinner-grow {
    background-color: #000000 !important;
}

/* Texto muted visible en alto contraste */
.alto-contraste .text-muted {
    color: #333333 !important;
}

/* Indicador del boton cuando alto contraste esta activo */
.alto-contraste #btn-alto-contraste {
    background: #ffdd00;
    color: #000000;
    border-color: #000000;
}

/* --- Tamano minimo de areas clickeables (44x44px WCAG) --- */
.miboton,
.with-boton {
    min-width: 44px;
    min-height: 44px;
}

/* --- Animaciones reducidas para usuarios que lo prefieren --- */
@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 automatico del sistema operativo --- */
@media (prefers-contrast: high) {
    :root {
        --coloroscuro: #000000;
        --colorclaro: #000000;
        --colorletra: #000000;
    }

    input, select, textarea {
        border: 2px solid #000000 !important;
    }
}

/* --- Visually Hidden (accesible pero no visible) --- */
.sr-only,
.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;
}