/* =====================================================
   HIGH CONTRAST MODE
   Asset Injector — Compatible con CKEditor Drupal
   CSS puro — sin preprocesador SCSS

   ÍNDICE
   1.  Variables CSS (custom properties)
   2.  Fondos negros con !important
   3.  Fondos negros sin !important
   4.  Color de texto
   5.  Bordes de contraste
   6.  Correcciones de modal (backdrop, filter reset)
   7.  Espaciado y posicionamiento
   8.  Inversión de color — filter: invert(1) [bloque único]
   9.  Filtros de imagen especiales
   10. Imágenes globales y con inversión total
   11. New UI Theme
   12. Responsive
   ===================================================== */

/* --- 1. Variables CSS ----------------------------------------- */
/* Definidas en .high-contrast para limitar el scope al contexto  */
.high-contrast {
  --hc-bg: #000;
  --hc-bg-supplier: #00192a;
  --hc-border-white: solid 1px #fff;
  --hc-shadow-white: 2px 5px 16px 0px #ffffff26;
}

/* --- 2. Fondos negros con !important -------------------------- */
/* Necesarios para sobreescribir estilos de tema con alta especificidad */
.high-contrast .page,
.high-contrast .bg-rgba-purple-slight,
.high-contrast .bg-rgba--grey--gradient--compensar,
.high-contrast .bg--ui--kit--violeta_100,
.high-contrast .bg--ui--kit--naranja_100,
.high-contrast .location-card,
.high-contrast .specialist-card,
.high-contrast .cke-content span,
.high-contrast .card,
.high-contrast .page__subfooter,
.high-contrast .toggle-section,
.high-contrast .bg-gray-5,
.high-contrast .side-widget {
  background: var(--hc-bg) !important;
}

/* --- 3. Fondos negros sin !important -------------------------- */
.high-contrast .container-navbar-main,
.high-contrast .compensar_gradiente_white_violet_50,
.high-contrast .bg--ui--kit--neutral_50,
.high-contrast .paragraph.paragraph--type--bp-tabs .tab-content .paragraph > .paragraph__column,
.node-33.high-contrast .bg--ui--kit--neutral_50 {
  background-color: var(--hc-bg);
}

.high-contrast .bg--ui--kit--neutral_50{
	background-color: #fff;
}

.high-contrast .medicamentos-tabs nav,
.high-contrast .tyc-tabs nav {
  background-color: var(--hc-bg);
  border: var(--hc-border-white);
}

.high-contrast .paragraph__column:has(.contact-supplier.active-section) {
  background-color: var(--hc-bg-supplier);
  margin-bottom: 2rem;
}

/* --- 4. Color de texto ---------------------------------------- */
.high-contrast .cke-content span {
  color: #fff !important;
}

.high-contrast .number-compensar {
  color: #fff;
}

/* --- 5. Bordes de contraste ----------------------------------- */
.high-contrast .mini-card-gray,
.high-contrast .mini-card-purple {
  border: solid 2px;
}

.high-contrast .tyc-section {
  border: solid 1px;
}

.high-contrast .mini-card-white,
.high-contrast .bw-card {
  border: solid 1px var(--hc-bg);
}

.high-contrast .paragraph--type--card-texto,
.high-contrast .subcard-transactional,
.high-contrast .subcard-documents,
.high-contrast .subcard-addendum {
  border: solid 1px var(--compensar-gris-200);
}

/* --- 6. Correcciones de modal (backdrop + filter reset) ------- */

/*
 * PROBLEMA A — backdrop encima del modal:
 *   filter:invert(1) en un ancestro crea un nuevo stacking context.
 *   .modal-backdrop (position:fixed, z-index:1040) se pinta en el
 *   stacking context de body y supera al ancestro filtrado (z-index:auto).
 *
 * SOLUCIÓN A: mantener z-index nativo de Bootstrap y solo suprimir
 *   la interacción visual con opacity:0 + pointer-events:none.
 */
.high-contrast .modal-backdrop {
  opacity: 0 !important;
  pointer-events: none;
}

/*
 * SOLUCIÓN AL SCROLL ROTO EN MODALES:
 *
 * filter:invert(1) en cualquier ancestro de .modal crea un nuevo stacking
 * context (CSS Compositing & Blending L1 §3.2). Esto convierte a ese ancestro
 * en el "containing block" de los descendientes con position:fixed, rompiendo:
 *   - la cobertura de pantalla completa del overlay
 *   - el scroll interno del modal
 *   - el cálculo de padding-right compensatorio de Bootstrap JS
 *
 * La solución es resetear explícitamente filter:none en el modal y todos
 * sus descendientes, con un selector de alta especificidad colocado DESPUÉS
 * del bloque invert(1). Ver sección 8 — al final del bloque.
 */
.high-contrast .block--compensar-chatbot,
.high-contrast .compensar-tabs-dropdown {
  z-index: 2;
}

/* --- 7. Espaciado y posicionamiento --------------------------- */
.high-contrast .acordeon-proponentes,
.high-contrast .acordeon-proveedores {
  margin-bottom: 2rem;
}

.high-contrast .popup-authorization .material-icons.close {
  top: -20px;
  right: -160px;
}

/* --- 8. Inversión de color — filter: invert(1) ---------------- */
/* Bloque unificado: un único parse de regla para el navegador   */

/* Globales */
.high-contrast .navbar,
.high-contrast .nav-tabs,
.high-contrast .page__footer,
.high-contrast .block--compensar-accesibility,
.high-contrast .cke-content,
.high-contrast .without-results,
/* Cards y párrafos */
.high-contrast .paragraph--type--compensar-card,
.high-contrast .paragraph--type--card-texto,
.high-contrast .accordion-wrapper,
.high-contrast .card-header,
/* Chatbot y dropdown */
.high-contrast .block--compensar-chatbot,
.high-contrast .compensar-tabs-dropdown,
/* Alertas y pretítulos */
.high-contrast .alert,
.high-contrast .pretitle,
.high-contrast .field--type-text-long:has(.pretitle) h2,
/* Directorio Médico — paneles y mensajes */
.high-contrast .filters-section-wrapper,
.high-contrast .open-side-widget,
.high-contrast .open-side-widget-mobile,
.high-contrast .section-info,
.high-contrast .section-contact,
.high-contrast .section-schedule-mobile,
.high-contrast .section-schedule,
.high-contrast .widget-header .btn-close,
.high-contrast .widget-body,
.high-contrast .widget-footer,
.high-contrast .message-searching,
.high-contrast .message-whiout-results,
.high-contrast .message-error,
.high-contrast .message-offline,
.high-contrast .block--compensar-mensajemodalsolicitudes,
.high-contrast .widget-header .widget-slides .slick-arrow,
.high-contrast .widget-header .slides .slick-arrow,
.high-contrast .block--compensar-mensajenovedades,
/* Directorio Médico — controles y botones */
.high-contrast .counter-directory,
.high-contrast .parking-directory,
.high-contrast .address-directory,
.high-contrast .phone-directory,
.high-contrast .name-location-directory,
.high-contrast .container-medical-directory .btn-compensar-primary,
.high-contrast .container-medical-directory .btn-compensar-secondary,
.high-contrast .show--more--specialists,
.high-contrast .show--more--locations,
.high-contrast .filters-directory,
.high-contrast .btn_process_filters,
/* Slick slider */
.high-contrast .slick__slide .card-text,
.high-contrast .slick-arrow:not(.modal-slider .slick-arrow, .widget-header .slick-arrow),
.high-contrast .slick-dots:not(.slider-video .slick-dots),
/* Breadcrumbs y búsqueda */
.high-contrast .block--compensar-breadcrumbs nav,
.high-contrast .title-search-results,
.high-contrast .search-results-items,
/* Referidos y popup de autorización */
.high-contrast .btn-compensar-especial[data-bs-toggle=modal],
.high-contrast .block--compensar-referidosflotante,
.high-contrast .block--compensar-referidosflotantemobile,
.high-contrast .popup-authorization,
.high-contrast .popup-authorization h5,
.high-contrast .popup-authorization p,
/* Filter select */
.high-contrast .filter-select .selected span,
/* Imágenes de subfooter */
.high-contrast .page__subfooter img,
/* Listas de habilidades */
.high-contrast .accordion ul:not(.unordered-list-simple-paragraph),
.high-contrast .list-skills-natural-applicant,
.high-contrast .list-skills-legal-applicant,
.high-contrast .list-skills-natural-applicant div,
.high-contrast .data-list-skills-natural-applicant,
.high-contrast .data-list-skills-legal-applicant,
/* Acordeones — contenido interno */
.high-contrast .acordeon-proponentes .accordion .list-skills-natural-applicant p:not(.paragraph-before-unordered-list),
.high-contrast .acordeon-proponentes .accordion .list-skills-legal-applicant p,
.high-contrast .accordion p:not(.acordeon-proveedores .accordion p, .acordeon-proponentes .accordion p),
.high-contrast .accordion .row:not(.content-insureance-accordion .row),
.high-contrast .accordion .bg--feedback--warning--40,
.high-contrast .accordion .bg--new-uikit--compensar-violeta-light,
.high-contrast .content-insureance-accordion ol,
.high-contrast .content-insureance-accordion .row .col-md-6,
.high-contrast .accordion-item .paragraph--type--bp-simple.subcard-transactional,
.high-contrast .accordion-item .paragraph--type--bp-simple.subcard-documents,
.high-contrast .accordion-item .paragraph--type--bp-simple.subcard-addendum,
/* Campos de texto largo — hero y panel-collapse */
.high-contrast .hero-description .field--type-text-long,
.high-contrast .panel-collapse .field--type-text-long:not(
  .node-27 .panel-collapse .field--type-text-long
):not(
  .node-28 .panel-collapse .field--type-text-long
),
/* Campos de texto largo — regla general con exclusiones */
.high-contrast .field--type-text-long:not(
  .paragraph--type--card-texto .field--type-text-long
):not(
  .field--type-text-long:has(.icon-card-image)
):not(
  .field--type-text-long:has(.border-circle-icon)
):not(
  .field--type-text-long:has(.card-action-icon)
):not(
  .field--type-text-long:has(.filter-icono)
):not(
  .panel-collapse .field--type-text-long
):not(
  .field--type-text-long:has(.filter-select)
):not(
  .field--type-text-long:has(.pretitle)
),
/* Botones primarios con exclusiones */
.high-contrast .btn-compensar-primary:not(
  .navbar .btn-compensar-primary,
  .accordion-wrapper .btn,
  .node-29 .btn-submit,
  .node-38 .btn,
  .popup-authorization .btn,
  .mini-bar-purple .btn,
  .section-tips-oral-health .btn,
  .modal-referidos .btn,
  .node-34 .paragraph--type--bp-tabs .btn,
  .block--compensar-mensajesdirectoriocompensar .btn,
  .card-type-one .btn,
  .section-medicines .btn,
  .tyc-tabs .btn,
  .block--compensar-mensajenovedades .btn,
  .well-being-section .btn,
  .compensar-tabs .btn,
  .ParrafosXl .btn,
  .btn-update-data
),
/* Botones secundarios con exclusiones */
.high-contrast .btn-compensar-secondary:not(
  .modal-content .btn,
  .card-text .btn,
  .accordion-wrapper .btn,
  .card-lab-actions .btn,
  .node-29 #remove-file,
  .newUItheme .compensar-card-text .btn,
  .block--compensar-oficinavirtual .btn,
  .node-34 .paragraph--type--bp-tabs .btn,
  .node-37 .btn
) {
  filter: invert(1);
}

/*
 * RESET DE FILTER EN MODALES — debe estar DESPUÉS del bloque invert(1)
 * para ganar por orden de fuente además de por !important.
 *
 * Se usan dos variantes de selector para cubrir ambos escenarios del DOM:
 *   a) body.high-contrast .modal  → Bootstrap mueve el modal como hijo
 *      directo de <body>; si .high-contrast está en body, esta regla aplica.
 *   b) .high-contrast .modal      → el modal permanece dentro del wrapper
 *      .high-contrast (Bootstrap no lo movió, o .high-contrast está en body).
 *
 * El selector universal * cubre todos los descendientes porque filter
 * NO es una propiedad heredada; cada elemento recibe su propio valor.
 */
body.high-contrast .modal,
body.high-contrast .modal *,
.high-contrast .modal,
.high-contrast .modal * {
  filter: none !important;
}

/* --- 9. Filtros de imagen especiales -------------------------- */
.high-contrast .image-dummy {
  filter: invert(1) contrast(0.5);
}

.high-contrast .badge-compensar-small,
.high-contrast .badge-compensar-big {
  filter: contrast(0.5);
}

.high-contrast .widget-header .slides div {
  filter: contrast(200%);
}

/* --- 10. Imágenes -------------------------------------------- */
/* Base: contraste fuerte con diferencia de mezcla                */
.high-contrast img {
  isolation: isolate;
  filter: contrast(200%);
  mix-blend-mode: difference;
}

/* Inversión total para imágenes que requieren legibilidad máxima */
.high-contrast .card-lab-actions img,
.high-contrast .card-testimonial img,
.high-contrast .compensar-image-background,
.high-contrast .block--compensar-referidosflotante img,
.high-contrast .block--compensar-referidosflotantemobile img,
.high-contrast .modal-slider .slick-slide,
.high-contrast .call-center-banner img,
.node-34.high-contrast .compensar-tabs .bg--new-uikit--compensar-violeta-light img,
.high-contrast .card-type-one img,
.high-contrast .mini-card-gray img,
.high-contrast .mini-card-purple img,
.high-contrast .banner-image img,
.high-contrast .medicamentos-tabs img,
.high-contrast .block--compensar-mensajemodalsolicitudes img {
  filter: invert(1) contrast(200%);
}

/* --- 11. New UI Theme ---------------------------------------- */
body.newUItheme.high-contrast .mini-card-cta {
  box-shadow: var(--hc-shadow-white);
}

/* --- 12. Responsive ------------------------------------------ */
@media (max-width: 992px) {
  .high-contrast .container-navbar-main {
    box-shadow: 2px 5px 16px 0px transparent;
    border-bottom: solid 2px white;
  }
}