:root {
    --cgb-selected-navy: var(--cgb-header-navy, #073451);
    --cgb-selected-mid: var(--cgb-header-mid, #075c70);
    --cgb-selected-cyan: var(--cgb-header-cyan, #0aa7b9);
    --cgb-selected-text: #ffffff;
    --cgb-selected-background: linear-gradient(
        124deg,
        var(--cgb-selected-navy) 0%,
        var(--cgb-selected-mid) 62%,
        var(--cgb-selected-cyan) 100%
    );
}

/*
 * Estado seleccionado autoritativo de CGB CONTROL.
 *
 * Se limita a controles de navegacion y seleccion de pantalla. Los colores
 * semanticos de riesgo, exito, alertas, graficas y estados de negocio siguen
 * perteneciendo a cada modulo.
 */
:where(.page-content) :is(
    [role="tablist"],
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="__tabs"],
    [class*="__tabs "],
    [class$="-switch"],
    [class*="-switch "],
    [class$="__switch"],
    [class*="__switch "],
    [class$="-workflow"],
    [class*="-workflow "],
    [class$="__workflow"],
    [class*="__workflow "],
    [class$="-stepper"],
    [class*="-stepper "],
    [class$="__stepper"],
    [class*="__stepper "],
    [class$="-pagination"],
    [class*="-pagination "],
    [class$="__pagination"],
    [class*="__pagination "],
    [class$="-filters"],
    [class*="-filters "],
    [class$="__filters"],
    [class*="__filters "],
    .ia-work-nav,
    .ct-quick-start,
    .op2-chart-metrics,
    .sector-categories,
    .sector-showcase-tags__links
) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) {
    border-color: var(--cgb-selected-mid) !important;
    background: var(--cgb-selected-background) !important;
    color: var(--cgb-selected-text) !important;
    box-shadow: 0 8px 18px rgba(7, 52, 81, .20) !important;
}

:where(.page-content) :is(
    [role="tablist"],
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="__tabs"],
    [class*="__tabs "],
    [class$="-switch"],
    [class*="-switch "],
    [class$="__switch"],
    [class*="__switch "],
    [class$="-workflow"],
    [class*="-workflow "],
    [class$="__workflow"],
    [class*="__workflow "],
    [class$="-stepper"],
    [class*="-stepper "],
    [class$="__stepper"],
    [class*="__stepper "],
    [class$="-pagination"],
    [class*="-pagination "],
    [class$="__pagination"],
    [class*="__pagination "],
    [class$="-filters"],
    [class*="-filters "],
    [class$="__filters"],
    [class*="__filters "],
    .ia-work-nav,
    .ct-quick-start,
    .op2-chart-metrics,
    .sector-categories,
    .sector-showcase-tags__links
) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"])
    :is(span, small, strong, b) {
    color: inherit;
}

/* El número activo del Observatorio tiene fondo blanco y necesita tinta oscura. */
:where(.page-content) [role="tablist"].observatory-section-nav a:is(.is-active, [aria-selected="true"]) > span {
    color: #154e43;
}

/* Numeradores y contadores conservan la lectura visual de las cabeceras. */
:where(.page-content) :is(
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="__tabs"],
    [class*="__tabs "],
    [class$="-workflow"],
    [class*="-workflow "],
    [class$="__workflow"],
    [class*="__workflow "],
    [class$="-stepper"],
    [class*="-stepper "],
    [class$="__stepper"],
    [class*="__stepper "],
    [class$="-filters"],
    [class*="-filters "],
    [class$="__filters"],
    [class*="__filters "]
) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) > :is(i, b):first-child {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--cgb-selected-navy) !important;
}

:where(.page-content) :is(
    [role="tablist"],
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="__tabs"],
    [class*="__tabs "],
    [class$="-switch"],
    [class*="-switch "],
    [class$="__switch"],
    [class*="__switch "],
    [class$="-workflow"],
    [class*="-workflow "],
    [class$="__workflow"],
    [class*="__workflow "],
    [class$="-stepper"],
    [class*="-stepper "],
    [class$="__stepper"],
    [class*="__stepper "],
    [class$="-pagination"],
    [class*="-pagination "],
    [class$="__pagination"],
    [class*="__pagination "],
    [class$="-filters"],
    [class*="-filters "],
    [class$="__filters"],
    [class*="__filters "],
    .ia-work-nav,
    .ct-quick-start,
    .op2-chart-metrics,
    .sector-categories,
    .sector-showcase-tags__links
) :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]):focus-visible {
    outline: 3px solid rgba(10, 167, 185, .28) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :where(.page-content) :is(a, button):is(.active, .is-active) {
        transition: none !important;
    }
}