/* ========================================
   ESTILOS DE ALTO CONTRASTE - SINALEVI
   ========================================
   
   ¿Qué hace este archivo?
   -----------------------
   Aplica colores de alto contraste cuando el usuario activa esta opción.
   El modo se activa agregando la clase 'high-contrast-mode' al elemento <body>.
   
   Paleta de colores institucional en alto contraste:
   ---------------------------------------------------
   COLORES INSTITUCIONALES ORIGINALES:
   - Oxford Blue: #0D1f44 (Azul oscuro institucional)
   - Celtic Blue: #2C72C7 (Azul medio institucional)
   - Pink Red: #BA141A (Rojo institucional)
   
   PALETA DE ALTO CONTRASTE (VERSIONES BRILLANTES):
   - Fondo principal: Negro puro #000000
   - Texto principal: Blanco puro #FFFFFF
   - Azul institucional brillante: #4A9EFF (Celtic Blue mejorado)
   - Azul acento: #0080FF (Para botones y elementos importantes)
   - Amarillo oro: #FFD700 (Para títulos y destacados)
   - Rojo alerta brillante: #FF4444 (Pink Red mejorado, para alertas)
   - Verde éxito: #00FF00 (Para mensajes de éxito)
   - Naranja advertencia: #FFA500 (Para advertencias)
   
   Todos los colores cumplen WCAG 2.1 Nivel AA (contraste mínimo 4.5:1)
*/

/* ========================================
   ACTIVACIÓN DEL MODO
   ======================================== */

body.high-contrast-mode {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/* ========================================
   TEXTO GENERAL
   ======================================== */

/**
 * Todo el texto en blanco puro sobre negro
 */
body.high-contrast-mode,
body.high-contrast-mode * {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/**
 * EXCEPCIONES CRÍTICAS: Elementos con fondo blanco deben tener texto negro.
 * Esta regla se aplica ANTES de las reglas específicas de componentes.
 */
body.high-contrast-mode input:not([type="radio"]):not([type="checkbox"]),
body.high-contrast-mode textarea,
body.high-contrast-mode select,
body.high-contrast-mode .k-input,
body.high-contrast-mode .k-input-inner,
body.high-contrast-mode .k-input-value-text {
    color: #000000 !important;
}

/**
 * REGLA REFORZADA para párrafos y spans de Word (clases Mso*).
 * Anula estilos en línea de color y fondo para garantizar legibilidad.
 */
body.high-contrast-mode p[class*="Mso"],
body.high-contrast-mode p[class*="Mso"] span {
    color: #FFFFFF !important;
    background: transparent !important;
}

/**
 * REGLA ADICIONAL para cualquier span con fondo definido por estilos en línea.
 * Si un span tiene un fondo (ej. blanco), fuerza el texto a negro para contraste.
 * Se ha aumentado la especificidad para asegurar que anule otras reglas.
 */
body.high-contrast-mode span[style*="background"],
body.high-contrast-mode p[class*="Mso"] span[style*="background"] {
    color: #000000 !important;
}

/* ========================================
   TÍTULOS Y ENCABEZADOS
   ======================================== */

/**
 * Títulos en amarillo oro para máxima visibilidad
 * El amarillo destaca sin perder legibilidad
 */
body.high-contrast-mode h1,
body.high-contrast-mode h2,
body.high-contrast-mode h3,
body.high-contrast-mode h4,
body.high-contrast-mode h5,
body.high-contrast-mode h6,
body.high-contrast-mode .h1Titulo {
    color: #FFD700 !important; /* Amarillo oro */
    font-weight: bold !important;
    text-shadow: 0 0 2px rgba(255, 215, 0, 0.3) !important; /* Ligero brillo */
}

/* ========================================
   SECCIONES PRINCIPALES DEL LAYOUT
   ======================================== */

/**
 * Header con fondo negro y borde en azul institucional brillante
 */
body.high-contrast-mode #header,
body.high-contrast-mode #movilHeader,
body.high-contrast-mode #headersm {
    background-color: #000000 !important;
    border-bottom-color: #4A9EFF !important; /* Azul institucional brillante */
}

/**
 * Sección de accesibilidad con fondo azul institucional oscuro
 */
body.high-contrast-mode .accesibility-section {
    background-color: #001133 !important; /* Azul muy oscuro */
}

/**
 * Main y footer en negro
 */
body.high-contrast-mode #main,
body.high-contrast-mode #footer {
    background-color: #000000 !important;
}

/**
 * Footer con borde superior en azul institucional
 */
body.high-contrast-mode #footer {
    border-top: 3px solid #4A9EFF !important;
}

/* ========================================
   MENÚ DE NAVEGACIÓN PRINCIPAL
   ======================================== */

/**
 * Items del menú con texto blanco y subrayado en azul al seleccionar
 */
body.high-contrast-mode .center-menu-item,
body.high-contrast-mode .center-menu-item a {
    color: #FFFFFF !important;
}

/**
 * Item seleccionado en amarillo oro (destaca la página actual)
 */
body.high-contrast-mode .center-menu-item.selected,
body.high-contrast-mode .center-menu-item.selected a {
    color: #FFD700 !important;
}

/**
 * Barra de selección en azul institucional brillante
 */
body.high-contrast-mode .center-menu li::after {
    background-color: #4A9EFF !important;
}

/**
 * Hover del menú con fondo azul oscuro
 */
body.high-contrast-mode .center-menu-item:hover,
body.high-contrast-mode .center-menu-item:hover a {
    color: #4A9EFF !important;
    background-color: #001133 !important;
}

/* ========================================
   CONTENEDORES Y CARDS
   ======================================== */

/**
 * Contenedores con fondo gris muy oscuro y borde azul institucional
 */
body.high-contrast-mode .card,
body.high-contrast-mode .busq-card,
body.high-contrast-mode .container,
body.high-contrast-mode .container-fluid,
body.high-contrast-mode .formularioBorde {
    background-color: #0A0A0A !important; /* Gris muy oscuro */
    border: 2px solid #4A9EFF !important; /* Azul institucional brillante */
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3) !important; /* Sutil brillo azul */
}

/**
 * Eliminar efectos decorativos de los cards
 */
body.high-contrast-mode .busq-card::before,
body.high-contrast-mode .busq-card::after {
    display: none !important;
}

/* ========================================
   ENLACES
   ======================================== */

/**
 * Enlaces en azul institucional brillante, siempre subrayados
 */
body.high-contrast-mode a {
    color: #4A9EFF !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

/**
 * Hover con amarillo oro y fondo azul oscuro
 */
body.high-contrast-mode a:hover,
body.high-contrast-mode a:focus {
    color: #FFD700 !important;
    background-color: #001133 !important;
    outline: 3px solid #4A9EFF !important;
    text-decoration: underline !important;
}

/**
 * Enlaces visitados en un azul más claro
 */
body.high-contrast-mode a:visited {
    color: #66B3FF !important;
}

/**
 * Enlaces activos (al hacer clic)
 */
body.high-contrast-mode a:active {
    color: #FFD700 !important;
    background-color: #0080FF !important;
}

/* ========================================
   BOTONES
   ======================================== */

/**
 * Botones primarios en azul institucional oscuro con borde brillante
 */
body.high-contrast-mode .btn,
body.high-contrast-mode .boton-primario,
body.high-contrast-mode .boton-outline-primario,
body.high-contrast-mode button:not([aria-hidden="true"]) {
    background-color: #0066CC !important; /* Azul institucional oscuro */
    color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important; /* Borde azul brillante */
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5) !important;
    font-weight: bold !important;
}

/**
 * Hover de botones en amarillo oro con texto negro
 */
body.high-contrast-mode .btn:hover,
body.high-contrast-mode .btn:focus,
body.high-contrast-mode .boton-primario:hover,
body.high-contrast-mode .boton-primario:focus,
body.high-contrast-mode button:hover,
body.high-contrast-mode button:focus {
    background-color: #FFD700 !important;
    color: #000000 !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7) !important;
}

/**
 * Botones deshabilitados en gris
 */
body.high-contrast-mode .btn:disabled,
body.high-contrast-mode button:disabled,
body.high-contrast-mode [aria-disabled="true"] {
    background-color: #333333 !important;
    color: #808080 !important;
    border: 2px solid #666666 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ========================================
   BOTÓN FLOTANTE (IR ARRIBA)
   ======================================== */

body.high-contrast-mode .divfloat a,
body.high-contrast-mode .divfloat2 a,
body.high-contrast-mode .btncircle {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.6) !important;
}

body.high-contrast-mode .divfloat a:hover,
body.high-contrast-mode .divfloat2 a:hover {
    background-color: #FFD700 !important;
    color: #000000 !important;
    border: 3px solid #FFFFFF !important;
}

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

/**
 * Campos de entrada con fondo blanco y texto negro
 */
body.high-contrast-mode input:not([type="radio"]):not([type="checkbox"]),
body.high-contrast-mode textarea,
body.high-contrast-mode select {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #4A9EFF !important;
}

/**
 * Campos enfocados en amarillo suave
 */
body.high-contrast-mode input:focus,
body.high-contrast-mode textarea:focus,
body.high-contrast-mode select:focus {
    background-color: #FFFACD !important; /* Amarillo suave */
    color: #000000 !important;
    border: 3px solid #FFD700 !important;
    outline: 3px solid #4A9EFF !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/**
 * Placeholder visible
 */
body.high-contrast-mode input::placeholder,
body.high-contrast-mode textarea::placeholder {
    color: #666666 !important;
}

/**
 * Checkboxes y radio buttons
 */
body.high-contrast-mode .customCheckbox,
body.high-contrast-mode .form-check-pgr,
body.high-contrast-mode .radio-round,
body.high-contrast-mode .radio-round2 {
    background-color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important;
}

body.high-contrast-mode .customCheckbox:checked,
body.high-contrast-mode .radio-round:checked,
body.high-contrast-mode .radio-round2:checked {
    background-color: #FFD700 !important;
    border: 3px solid #4A9EFF !important;
}

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

body.high-contrast-mode table {
    border: 3px solid #4A9EFF !important;
}

body.high-contrast-mode th,
body.high-contrast-mode td {
    border: 2px solid #4A9EFF !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
    padding: 0.75rem !important;
}

/**
 * Encabezados de tabla en azul institucional
 */
body.high-contrast-mode th,
body.high-contrast-mode thead {
    background-color: #0066CC !important;
    color: #FFD700 !important;
    font-weight: bold !important;
}

/**
 * Filas alternadas
 */
body.high-contrast-mode tbody tr:nth-child(even) {
    background-color: #0A0A0A !important;
}

body.high-contrast-mode tbody tr:hover {
    background-color: #001133 !important;
    outline: 2px solid #4A9EFF !important;
}

/* ========================================
   MENÚS DESPLEGABLES
   ======================================== */

/**
 * Menús con fondo negro y borde azul institucional
 */
body.high-contrast-mode .dropdown-menu,
body.high-contrast-mode .accesibility-menu-list,
body.high-contrast-mode .dditem-menu-list,
body.high-contrast-mode .right-menu-list,
body.high-contrast-mode .busquedasLista {
    background-color: #000000 !important;
    border: 3px solid #4A9EFF !important;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.5) !important;
}

/**
 * Items del menú con separador azul
 */
body.high-contrast-mode .dropdown-item,
body.high-contrast-mode .accesibility-menu-list li,
body.high-contrast-mode .dditem-menu-list li,
body.high-contrast-mode .busquedasLista li {
    color: #FFFFFF !important;
    background-color: #000000 !important;
    border-bottom: 2px solid #4A9EFF !important;
}

/**
 * Hover de items con fondo azul y texto amarillo
 */
body.high-contrast-mode .dropdown-item:hover,
body.high-contrast-mode .dropdown-item:focus,
body.high-contrast-mode .accesibility-menu-list li:hover,
body.high-contrast-mode .dditem-menu-list li:hover,
body.high-contrast-mode .busquedasLista li:hover {
    background-color: #0066CC !important;
    color: #FFD700 !important;
    outline: 2px solid #4A9EFF !important;
}

/* ========================================
   SUBMENÚ DE BÚSQUEDAS (MENÚ PRINCIPAL)
   ======================================== */

/**
 * Contenedor del submenú de búsquedas en desktop
 * Asegura fondo negro y bordes visibles
 */
body.high-contrast-mode #tiposBusqueda,
body.high-contrast-mode .dditem-menu-list {
    background-color: #000000 !important;
    border: 3px solid #4A9EFF !important;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.5) !important;
}

/**
 * Items del submenú de búsquedas
 * Texto blanco sobre fondo negro
 */
body.high-contrast-mode #tiposBusqueda li,
body.high-contrast-mode #tiposBusqueda li a,
body.high-contrast-mode .dditem-menu-list li,
body.high-contrast-mode .dditem-menu-list li a {
    color: #FFFFFF !important;
    background-color: #000000 !important;
    border-bottom: 2px solid #4A9EFF !important;
    text-decoration: none !important;
    padding: 0.5rem 1.5rem !important;
}

/**
 * Hover y focus de items del submenú de búsquedas
 * CORRECCIÓN: Fondo azul con texto blanco (legible)
 */
body.high-contrast-mode #tiposBusqueda li:hover,
body.high-contrast-mode #tiposBusqueda li:hover a,
body.high-contrast-mode #tiposBusqueda li:focus,
body.high-contrast-mode #tiposBusqueda li a:focus,
body.high-contrast-mode .dditem-menu-list li:hover,
body.high-contrast-mode .dditem-menu-list li:hover a {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    outline: 2px solid #FFD700 !important;
    text-decoration: underline !important;
}

/**
 * Submenú de búsquedas en móvil
 */
body.high-contrast-mode .busquedasLista,
body.high-contrast-mode #busquedasDropdown .dropdown-menu {
    background-color: #000000 !important;
    border: 3px solid #4A9EFF !important;
}

body.high-contrast-mode .busquedasLista li,
body.high-contrast-mode .busquedasLista li a,
body.high-contrast-mode #busquedaSencillaMovil,
body.high-contrast-mode #busquedaSencillaMovil a,
body.high-contrast-mode #busquedaAvanzadaMovil,
body.high-contrast-mode #busquedaAvanzadaMovil a {
    color: #FFFFFF !important;
    background-color: #000000 !important;
    border-bottom: 2px solid #4A9EFF !important;
}

body.high-contrast-mode .busquedasLista li:hover,
body.high-contrast-mode .busquedasLista li:hover a,
body.high-contrast-mode #busquedaSencillaMovil:hover,
body.high-contrast-mode #busquedaSencillaMovil:hover a,
body.high-contrast-mode #busquedaAvanzadaMovil:hover,
body.high-contrast-mode #busquedaAvanzadaMovil:hover a {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    outline: 2px solid #FFD700 !important;
}

/**
 * Enlaces dentro de los submenús de búsqueda
 * Sobrescribe estilos generales de enlaces
 */
body.high-contrast-mode #tiposBusqueda a,
body.high-contrast-mode .dditem-menu-list a,
body.high-contrast-mode .busquedasLista a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

body.high-contrast-mode #tiposBusqueda a:hover,
body.high-contrast-mode .dditem-menu-list a:hover,
body.high-contrast-mode .busquedasLista a:hover {
    color: #FFFFFF !important;
    background-color: #0066CC !important;
    text-decoration: underline !important;
}

/**
 * Estado visitado de enlaces en submenús
 */
body.high-contrast-mode #tiposBusqueda a:visited,
body.high-contrast-mode .dditem-menu-list a:visited,
body.high-contrast-mode .busquedasLista a:visited {
    color: #FFFFFF !important;
}

/**
 * Clase nav-link dentro de submenús de búsqueda
 */
body.high-contrast-mode #tiposBusqueda .nav-link,
body.high-contrast-mode .busquedasLista .nav-link {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

body.high-contrast-mode #tiposBusqueda .nav-link:hover,
body.high-contrast-mode .busquedasLista .nav-link:hover {
    color: #FFFFFF !important;
    background-color: #0066CC !important;
}

/* ========================================
   ACORDEONES / PANELES COLAPSABLES
   ======================================== */

/**
 * Contenedor del acordeón
 */
body.high-contrast-mode .accordion,
body.high-contrast-mode .accordion-flush {
    background-color: #000000 !important;
}

/**
 * Items del acordeón
 */
body.high-contrast-mode .accordion-item {
    background-color: #0A0A0A !important;
    border: 2px solid #4A9EFF !important;
    margin-bottom: 0.5rem !important;
}

/**
 * Botones de encabezado del acordeón (estado normal)
 */
body.high-contrast-mode .accordion-button,
body.high-contrast-mode button.accordion-button {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border: 2px solid #4A9EFF !important;
    font-weight: bold !important;
}

/**
 * Botones de encabezado cuando están colapsados
 */
body.high-contrast-mode .accordion-button.collapsed {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/**
 * Botones de encabezado cuando están expandidos (no colapsados)
 * Fondo azul con texto blanco para máxima visibilidad
 */
body.high-contrast-mode .accordion-button:not(.collapsed) {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.5) !important;
}

/**
 * Hover de botones de acordeón
 * CORRECCIÓN: Fondo azul oscuro con texto blanco (legible)
 * Antes era amarillo sobre blanco (ilegible)
 */
body.high-contrast-mode .accordion-button:hover,
body.high-contrast-mode .accordion-button:focus {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: 3px solid #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7) !important;
    outline: 3px solid #FFD700 !important;
}

/**
 * Focus visible en acordeones
 */
body.high-contrast-mode .accordion-button:focus-visible {
    box-shadow: 0 0 0 4px #FFD700 !important;
    outline: 3px solid #FFD700 !important;
}

/**
 * Contenido del acordeón (cuerpo)
 */
body.high-contrast-mode .accordion-body {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
    border-top: 2px solid #4A9EFF !important;
    padding: 1rem !important;
}

/**
 * Contenedor colapsable
 */
body.high-contrast-mode .accordion-collapse {
    background-color: #0A0A0A !important;
    border: 2px solid #4A9EFF !important;
}

/**
 * Iconos de flecha/chevron en acordeones
 */
body.high-contrast-mode .accordion-button .fa-chevron-down,
body.high-contrast-mode .accordion-button .acordeon-flecha {
    color: #FFFFFF !important;
}

/**
 * Flecha cuando el acordeón está expandido
 */
body.high-contrast-mode .accordion-button:not(.collapsed) .fa-chevron-down,
body.high-contrast-mode .accordion-button:not(.collapsed) .acordeon-flecha {
    color: #FFD700 !important;
}

/**
 * Flecha en hover
 */
body.high-contrast-mode .accordion-button:hover .fa-chevron-down,
body.high-contrast-mode .accordion-button:hover .acordeon-flecha {
    color: #FFD700 !important;
}

/**
 * Detalles y summary (HTML5 collapsibles)
 */
body.high-contrast-mode details.sitemap-group {
    background-color: #0A0A0A !important;
    border: 2px solid #4A9EFF !important;
}

body.high-contrast-mode summary.sitemap-summary {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

body.high-contrast-mode summary.sitemap-summary:hover,
body.high-contrast-mode summary.sitemap-summary:focus {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    outline: 3px solid #FFD700 !important;
}

body.high-contrast-mode details[open] summary.sitemap-summary {
    background-color: #0066CC !important;
    color: #FFD700 !important;
    border-bottom: 2px solid #4A9EFF !important;
}

/* ========================================
   ICONOS E IMÁGENES
   ======================================== */

/**
 * Iconos en blanco o según contexto
 */
body.high-contrast-mode i,
body.high-contrast-mode .fa,
body.high-contrast-mode .fas,
body.high-contrast-mode .far,
body.high-contrast-mode .boton-flecha {
    color: #FFFFFF !important;
}

/**
 * Iconos en enlaces heredan el color
 */
body.high-contrast-mode a i {
    color: inherit !important;
}

/**
 * Imágenes con mayor contraste y borde
 */
body.high-contrast-mode img:not([aria-hidden="true"]) {
    filter: contrast(1.4) brightness(1.3);
    border: 2px solid #4A9EFF !important;
}

/**
 * Logo institucional con tratamiento especial
 */
body.high-contrast-mode .logo-icn {
    filter: brightness(2.5) contrast(1.8) saturate(1.5);
    border: 3px solid #4A9EFF !important;
}

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

body.high-contrast-mode .breadcrumb,
body.high-contrast-mode ul.breadcrumb {
    background-color: #0A0A0A !important;
    border: 2px solid #4A9EFF !important;
}

body.high-contrast-mode .breadcrumb-item,
body.high-contrast-mode ul.breadcrumb li a {
    color: #4A9EFF !important;
}

body.high-contrast-mode .breadcrumb-item.active,
body.high-contrast-mode ul.breadcrumb li {
    color: #FFD700 !important;
}

body.high-contrast-mode ul.breadcrumb li + li:before {
    color: #4A9EFF !important;
}

/* ========================================
   ALERTAS Y NOTIFICACIONES
   ======================================== */

/**
 * Alerta de éxito en verde brillante
 */
body.high-contrast-mode .alert-success {
    background-color: #004400 !important;
    color: #00FF00 !important;
    border: 3px solid #00FF00 !important;
}

/**
 * Alerta de error en rojo institucional brillante
 */
body.high-contrast-mode .alert-danger {
    background-color: #440000 !important;
    color: #FF4444 !important;
    border: 3px solid #FF4444 !important;
}

/**
 * Alerta de advertencia en naranja
 */
body.high-contrast-mode .alert-warning {
    background-color: #442200 !important;
    color: #FFA500 !important;
    border: 3px solid #FFA500 !important;
}

/**
 * Alerta de información en azul institucional
 */
body.high-contrast-mode .alert-info {
    background-color: #001133 !important;
    color: #4A9EFF !important;
    border: 3px solid #4A9EFF !important;
}

/* ========================================
   LOADING Y SPINNERS
   ======================================== */

body.high-contrast-mode .pgr-loading-container {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

body.high-contrast-mode .pgr-loader {
    border: 4px solid #4A9EFF !important;
    border-top-color: #FFD700 !important;
}

/* ========================================
   FOCO VISIBLE (WCAG 2.4.7)
   ======================================== */

/**
 * Foco amarillo oro muy visible
 */
body.high-contrast-mode *:focus {
    outline: 4px solid #FFD700 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
}

/* ========================================
   COLORES INSTITUCIONALES ADAPTADOS
   ======================================== */

/**
 * Clases de color institucional adaptadas a alto contraste
 */
body.high-contrast-mode .bg-celtic-blue,
body.high-contrast-mode .font-color-celtic {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

body.high-contrast-mode .bg-oxford-blue,
body.high-contrast-mode .font-color-oxford {
    background-color: #001133 !important;
    color: #FFFFFF !important;
}

body.high-contrast-mode .bg-alice-blue {
    background-color: #0A0A0A !important;
    color: #FFFFFF !important;
}

body.high-contrast-mode .font-color-pink {
    color: #FF4444 !important;
}

body.high-contrast-mode .text-primary {
    color: #4A9EFF !important;
}

body.high-contrast-mode .text-muted {
    color: #AAAAAA !important;
}

/* ========================================
   BORDES Y SEPARADORES
   ======================================== */

body.high-contrast-mode .header-border {
    border-bottom: 3px solid #4A9EFF !important;
}

body.high-contrast-mode .dropdown-header-border {
    border-top: 3px solid #4A9EFF !important;
}

/**
 * Separadores horizontales
 */
body.high-contrast-mode hr {
    border-color: #4A9EFF !important;
    border-width: 2px !important;
}

/* ========================================
   KENDO UI (COMPONENTES)
   ======================================== */

body.high-contrast-mode .k-widget,
body.high-contrast-mode .k-grid,
body.high-contrast-mode .k-grid-content {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important;
}

body.high-contrast-mode .k-grid-header,
body.high-contrast-mode .k-grid-header th {
    background-color: #0066CC !important;
    color: #FFD700 !important;
    border: 2px solid #4A9EFF !important;
}

body.high-contrast-mode .k-alt,
body.high-contrast-mode .k-grid tr.k-alt {
    background-color: #0A0A0A !important;
}

body.high-contrast-mode .k-grid tr:hover,
body.high-contrast-mode .k-grid tr.k-state-hover {
    background-color: #001133 !important;
    outline: 2px solid #4A9EFF !important;
}

body.high-contrast-mode .k-state-selected {
    background-color: #0066CC !important;
    color: #FFD700 !important;
}

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

body.high-contrast-mode .tooltip-inner {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: 3px solid #4A9EFF !important;
}

/* ========================================
   SECCIÓN DE ACCESIBILIDAD (MENÚ)
   ======================================== */

/**
 * Botón de accesibilidad destacado
 */
body.high-contrast-mode .accesibility-menu .main-element {
    color: #FFFFFF !important;
    background-color: #001133 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
}

body.high-contrast-mode .accesibility-menu .main-element:hover {
    background-color: #0066CC !important;
    color: #FFD700 !important;
}

/* ========================================
   RESPONSIVE - MÓVIL
   ======================================== */

@media (max-width: 768px) {
    body.high-contrast-mode .navbar-toggler {
        border: 3px solid #4A9EFF !important;
        background-color: #0066CC !important;
    }
    
    body.high-contrast-mode .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    /**
     * Menú móvil con mejor contraste
     */
    body.high-contrast-mode .movil-menu-section {
        background-color: #000000 !important;
        border: 3px solid #4A9EFF !important;
    }
}

/* ========================================
   ELIMINAR EFECTOS Y ANIMACIONES
   ======================================== */

/**
 * Se eliminan transiciones para mejor rendimiento
 * y evitar distracciones visuales
 */
body.high-contrast-mode * {
    transition: none !important;
    animation: none !important;
}

/**
 * Excepto para hover de botones (mejora UX)
 */
body.high-contrast-mode .btn,
body.high-contrast-mode button,
body.high-contrast-mode a {
    transition: background-color 0.1s ease, color 0.1s ease !important;
}

/* ========================================
   ACCESIBILIDAD MEJORADA
   ======================================== */

/**
 * Texto seleccionado con colores institucionales
 */
body.high-contrast-mode ::selection {
    background-color: #0066CC !important;
    color: #FFD700 !important;
}

body.high-contrast-mode ::-moz-selection {
    background-color: #0066CC !important;
    color: #FFD700 !important;
}

/**
 * Scrollbar personalizada (navegadores webkit)
 */
body.high-contrast-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #000000;
}

body.high-contrast-mode ::-webkit-scrollbar-track {
    background: #0A0A0A;
    border: 2px solid #4A9EFF;
}

body.high-contrast-mode ::-webkit-scrollbar-thumb {
    background: #0066CC;
    border: 2px solid #4A9EFF;
}

body.high-contrast-mode ::-webkit-scrollbar-thumb:hover {
    background: #4A9EFF;
}

/* ========================================
   FIN DEL ARCHIVO
   ======================================== */

/* High-contrast styling for .highlight elements */
body.high-contrast-mode .highlight {
    background-color: #FFD700 !important; /* amarillo oro */
    color: #000000 !important; /* texto negro para legibilidad */
    border: 3px solid #4A9EFF !important; /* borde azul institucional */
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.6) !important;
    padding: 0.15rem 0.25rem !important;
    border-radius: 0.25rem !important;
}

body.high-contrast-mode .highlight:hover,
body.high-contrast-mode .highlight:focus {
    background-color: #FFEA70 !important; /* variante más clara al interactuar */
    color: #000000 !important;
    outline: 3px solid #4A9EFF !important;
}

/* Ensure links inside highlights remain readable */
body.high-contrast-mode .highlight a {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Preserve selection behavior inside highlighted text */
body.high-contrast-mode .highlight ::selection,
body.high-contrast-mode .highlight ::-moz-selection {
    background-color: #0066CC !important;
    color: #FFD700 !important;
}

/* High-contrast styling for <mark> element */
body.high-contrast-mode mark {
    background-color: #FFD700 !important; /* amarillo oro brillante */
    color: #000000 !important; /* texto negro para máximo contraste */
    border: 2px solid #4A9EFF !important; /* borde azul institucional */
    padding: 0.15rem 0.3rem !important;
    border-radius: 0.2rem !important;
    font-weight: bold !important; /* resalta el texto marcado */
}

body.high-contrast-mode mark:hover,
body.high-contrast-mode mark:focus {
    background-color: #FFEA70 !important; /* amarillo más claro en hover */
    outline: 3px solid #4A9EFF !important;
    outline-offset: 2px !important;
}

/* Ensure links inside mark remain readable */
body.high-contrast-mode mark a {
    color: #000000 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}