@import url(fonts-local.css);
@import url(font-awesome.css);
@import url(font-awesome.min.css);

/* Conserva el mismo eje de centrado cuando una página necesita scroll. */
html {
    scrollbar-gutter: stable;
}

body {
    background: #25292C;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Cambiado de hidden a auto */
    font: 14px 'Roboto', sans-serif;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

/* Solo en la carga inicial del documento: el router SPA nunca recrea este nodo. */
#kx-initial-loader {
    display: none;
}

html.kx-js #kx-initial-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25292C;
}

#kx-initial-loader img {
    display: block;
    width: 99px;
    height: 62px;
}

@keyframes kxSpaProgressBar {
    0% {
        transform: translateX(-42%) scaleX(.18);
    }

    45% {
        transform: translateX(18%) scaleX(.52);
    }

    100% {
        transform: translateX(105%) scaleX(.24);
    }
}

#kx-spa-root {
    position: relative;
    flex: 1 0 auto;
}

#kx-spa-root.kx-spa-leaving {
    pointer-events: none;
}

.kx-navigation-error {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 40px);
    padding: 12px 16px;
    color: #fff;
    background: #15191b;
    border: 1px solid #ffc033;
    border-radius: 4px;
}

.kx-navigation-error button {
    flex: none;
    cursor: pointer;
    padding: 6px 10px;
}

body.kx-spa-leaving-page #kx-spa-root::after,
#kx-spa-root.is-loading::after {
    content: none;
}

html.kx-spa-loading body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, var(--kx-primary-color, #ff9b00) 24%, var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 72%, #fff)) 54%, var(--kx-primary-color, #ff9b00) 78%, transparent);
    box-shadow: 0 0 10px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 46%, transparent)), 0 1px 0 rgba(0, 0, 0, .35);
    animation: kxSpaProgressBar .82s cubic-bezier(.42, 0, .2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    html.kx-spa-loading body::before {
        animation: none;
    }
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
      background: #3e3e3e;
}

::-webkit-scrollbar-track {
      background: #303030;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.username-readable {
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.78),
        0 0 1px rgba(0, 0, 0, 0.95),
        0 0 1px rgba(255, 255, 255, 0.40),
        0 0 3px rgba(255, 255, 255, 0.18);
}

#header-content {
    background: 
        var(--kx-header-image-url, url(../img/header.png)) var(--kx-header-image-repeat, no-repeat) var(--kx-header-image-position, center -296px), 
        linear-gradient(to top, 
            rgba(32, 36, 38, 1) 0%,       /* Color oscuro en la parte inferior */
            rgba(45, 50, 55, 0.85) 35%,   /* Gris oscuro más suave */
            rgba(60, 65, 70, 0.6) 60%,    /* Un poco más claro y menos denso */
            rgba(80, 85, 90, 0.3) 85%,    /* Tono más suave y menos intrusivo */
            rgba(100, 105, 110, 0.05) 95%,/* Transparencia más ligera */
            rgba(32, 36, 38, 0) 100%     /* Totalmente transparente al final */
        );
    height: 160px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    image-rendering: pixelated;
    position: relative;
    background: var(--kx-header-image-url, url(../img/header.png)) var(--kx-header-image-repeat, no-repeat) var(--kx-header-image-position, center -296px), var(--kx-header-gradient, linear-gradient(to top, rgba(32, 36, 38, 1) 0%, rgba(45, 50, 55, 0.85) 35%, rgba(60, 65, 70, 0.6) 60%, rgba(80, 85, 90, 0.3) 85%, rgba(100, 105, 110, 0.05) 95%, rgba(32, 36, 38, 0) 100%));
}

#header-content .sub-menu {
    background: rgba(0, 0, 0, .3);
    padding: 5px 10px;
    position: absolute;
    right: 0;
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    font-size: 13px;
}

#header-content .sub-menu a {
    color: #fff;
    text-decoration: none;
}

#header-content .logo {
    background: none;
    position: absolute;
    margin-top: 30px;
    height: 73px;  
    width: 197px;  
    overflow: visible;
    isolation: isolate;
}

#header-content .logo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png)) no-repeat center center;
    background-size: contain;
    transform-origin: center center;
    pointer-events: none;
    will-change: filter;
}

#header-content .logo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-image: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png));
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    animation-duration: var(--kx-logo-effect-duration, 4s);
    animation-timing-function: var(--kx-logo-effect-easing, ease-in-out);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: opacity, background-position, box-shadow, filter;
}

#header-content .logo.kx-logo-effect-none::after {
    display: none;
}

#header-content .logo.kx-logo-effect-border-dash::after,
#header-content .logo.kx-logo-effect-marquee::after {
    inset: -12px;
    border-radius: 12px;
    -webkit-mask-image: none;
    mask-image: none;
}

#header-content .logo.kx-logo-effect-aura-soft::after,
#header-content .logo.kx-logo-effect-aura-pulse::after,
#header-content .logo.kx-logo-effect-outer-aura::after,
#header-content .logo.kx-logo-effect-energy-ring::after,
#header-content .logo.kx-logo-effect-halo-ring::after,
#header-content .logo.kx-logo-effect-perimeter-glow::after {
    display: none;
}

#header-content .logo.kx-logo-effect-aura-soft::before {
    animation: kxLogoImageAuraSoft var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-aura-pulse::before {
    animation: kxLogoImageAuraPulse var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-outer-aura::before {
    animation: kxLogoImageAuraStrong var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-energy-ring::before {
    animation: kxLogoImageEnergyRing var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-halo-ring::before {
    animation: kxLogoImageHaloRing var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, linear) infinite both;
}

#header-content .logo.kx-logo-effect-perimeter-glow::before {
    animation: kxLogoImagePerimeterGlow var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-underlight::after,
#header-content .logo.kx-logo-effect-toplight::after,
#header-content .logo.kx-logo-effect-radar-sweep::after,
#header-content .logo.kx-logo-effect-energy-ring::after,
#header-content .logo.kx-logo-effect-halo-ring::after,
#header-content .logo.kx-logo-effect-crown-light::after,
#header-content .logo.kx-logo-effect-stage-spotlight::after,
#header-content .logo.kx-logo-effect-orbit-flare::after,
#header-content .logo.kx-logo-effect-perimeter-glow::after {
    inset: -30px;
    border-radius: 28px;
    -webkit-mask-image: none;
    mask-image: none;
}

#header-content .onlineCount {
    position: absolute;
    z-index: 2;
    margin-top: 80px;
    width: 197px;
    text-align: center;
    font-size: 13px;
}

#header-content .onlineCount span {
    color: var(--kx-primary-color, #ff9b00);
}

@keyframes moveSideToSide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

#header-content .checkIn {
    background: rgba(32, 160, 91, .95);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 32px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(78, 235, 145, .48);
    border-radius: 4px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    right: 4px;
    margin-top: 58px;
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.kx-ceo-console-button {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2147483001;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 171, 50, .52);
    border-radius: 3px;
    background: rgba(16, 19, 21, .94);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: rgba(255, 206, 122, .96);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .65px;
    line-height: 1;
    text-transform: uppercase;
}

.kx-ceo-console-button:hover,
.kx-ceo-console-button:focus {
    border-color: rgba(255, 218, 143, .9);
    background: rgba(47, 37, 23, .98);
    color: #fff2cd;
}

.kx-ceo-console-button[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

.kx-ceo-console[hidden] {
    display: none;
}

.kx-ceo-console {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: flex;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .94);
}

.kx-ceo-console-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, .94);
}

.kx-ceo-console-close {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 14px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    font: 700 21px/22px Arial, sans-serif;
}

.kx-ceo-console-close:hover,
.kx-ceo-console-close:focus {
    border-color: rgba(255, 171, 50, .72);
    color: #fff;
}

.kx-ceo-console-note {
    margin: 0;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(223, 225, 225, .82);
    font-size: 12px;
}

.kx-ceo-console-output {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 54px 16px 76px;
    overflow: auto;
    background: transparent;
    color: #d7dee7;
    font: 12px/1.5 Consolas, 'Courier New', monospace;
    word-break: break-word;
}

.kx-ceo-console-line {
    display: block;
    padding: 6px 10px;
    border-left: 3px solid rgba(148, 163, 184, .6);
    border-radius: 2px;
    background: rgba(148, 163, 184, .07);
    color: #d7dee7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.kx-ceo-console-line--error {
    border-left-color: #f07178;
    background: rgba(240, 113, 120, .12);
    color: #ffd8da;
}

.kx-ceo-console-line--warning {
    border-left-color: #e3b341;
    background: rgba(227, 179, 65, .12);
    color: #ffe5a6;
}

.kx-ceo-console-line--info {
    border-left-color: #58a6ff;
    background: rgba(88, 166, 255, .1);
    color: #cfe5ff;
}

.kx-ceo-console-line--debug {
    border-left-color: #a371f7;
    background: rgba(163, 113, 247, .1);
    color: #e3d5ff;
}

.kx-ceo-console-line--empty {
    border-left-color: rgba(148, 163, 184, .35);
    color: rgba(215, 222, 231, .7);
    font-family: 'Roboto Condensed', sans-serif;
}

.kx-ceo-console-tabs {
    position: absolute;
    top: 12px;
    right: 54px;
    z-index: 2;
    display: inline-flex;
    gap: 5px;
}

.kx-ceo-console-tab {
    min-height: 26px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 171, 50, .52);
    border-radius: 3px;
    background: rgba(16, 19, 21, .94);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: rgba(255, 206, 122, .96);
    cursor: pointer;
    font: 700 10px/1 'Roboto Condensed', sans-serif;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.kx-ceo-console-tab.is-active {
    background: rgba(47, 37, 23, .98);
    border-color: rgba(255, 218, 143, .9);
    color: #fff2cd;
}

.kx-ceo-console-tab:hover:not(:disabled),
.kx-ceo-console-tab:focus-visible {
    background: rgba(47, 37, 23, .98);
    border-color: rgba(255, 218, 143, .9);
    color: #fff2cd;
    outline: none;
}

.kx-ceo-console-tab:disabled {
    border-color: rgba(255, 171, 50, .3);
    background: rgba(16, 19, 21, .72);
    color: rgba(255, 206, 122, .48);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .kx-ceo-console-output {
        font-size: 11px;
    }
}

#header-content .logo.kx-logo-effect-aura-soft::after {
    background:
        radial-gradient(ellipse at center, transparent 42%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 58%, transparent 78%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 74%);
    animation-name: kxLogoFxFadePulse;
}

#header-content .logo.kx-logo-effect-aura-pulse::after {
    background:
        radial-gradient(ellipse at center, transparent 34%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 58%, transparent 82%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 76%);
    animation-name: kxLogoFxBloom;
}

#header-content .logo.kx-logo-effect-gold-outline::after {
    background: radial-gradient(ellipse at center, transparent 30%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 58%, transparent 78%);
    animation-name: kxLogoFxOutlinePulse;
}

#header-content .logo.kx-logo-effect-edge-glow::after {
    background: radial-gradient(ellipse at center, transparent 18%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 64%, transparent 82%);
    animation-name: kxLogoFxOutlinePulse;
}

#header-content .logo.kx-logo-effect-gold-outline::before,
#header-content .logo.kx-logo-effect-edge-glow::before,
#header-content .logo.kx-logo-effect-neon-frame::before,
#header-content .logo.kx-logo-effect-royal-frame::before {
    animation: kxLogoImageDropGlow var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-neon-frame::after {
    background: linear-gradient(90deg, transparent, rgba(98,230,255,.34), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 220% 100%;
    animation-name: kxLogoFxNeonFrame;
}

#header-content .logo.kx-logo-effect-royal-frame::after {
    background: linear-gradient(100deg, transparent, rgba(180,120,255,.34), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 220% 100%;
    animation-name: kxLogoFxNeonFrame;
}

#header-content .logo.kx-logo-effect-underlight::after {
    background:
        radial-gradient(ellipse at bottom, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 34%, transparent 70%),
        linear-gradient(to top, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 58%);
    animation-name: kxLogoFxUnderlight;
}

#header-content .logo.kx-logo-effect-toplight::after {
    background:
        radial-gradient(ellipse at top, rgba(255,255,255,.58) 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 32%, transparent 70%),
        linear-gradient(to bottom, rgba(255,255,255,.18), transparent 58%);
    animation-name: kxLogoFxUnderlight;
}

#header-content .logo.kx-logo-effect-shine-sweep::after,
#header-content .logo.kx-logo-effect-glass-sheen::after {
    background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,.36) 48%, transparent 58%, transparent 100%);
    background-size: 260% 100%;
    animation-name: kxLogoFxSweep;
}

#header-content .logo.kx-logo-effect-sweep-slow::after,
#header-content .logo.kx-logo-effect-sweep-normal::after,
#header-content .logo.kx-logo-effect-sweep-fast::after {
    background:
        linear-gradient(112deg, transparent 0%, transparent 34%, rgba(255,255,255,.58) 44%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, rgba(255,255,255,.3) 57%, transparent 70%, transparent 100%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxGeneralSweep;
}

#header-content .logo.kx-logo-effect-sweep-slow::after {
    animation-duration: 7s;
}

#header-content .logo.kx-logo-effect-sweep-normal::after {
    animation-duration: 4s;
}

#header-content .logo.kx-logo-effect-sweep-fast::after {
    animation-duration: 2.4s;
}

#header-content .logo.kx-logo-effect-holo-sheen::after {
    background:
        linear-gradient(110deg, transparent 0%, rgba(74,216,255,.52) 26%, rgba(255,93,232,.48) 45%, rgba(255,225,74,.5) 62%, rgba(96,255,194,.32) 74%, transparent 100%),
        radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-soft-rainbow::after {
    background:
        linear-gradient(108deg, transparent 0%, rgba(74,216,255,.46) 27%, rgba(255,93,232,.44) 43%, rgba(255,225,74,.5) 58%, rgba(96,255,194,.34) 70%, transparent 88%),
        radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 70%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-rare-glint::after,
#header-content .logo.kx-logo-effect-royal-shine::after {
    background:
        linear-gradient(110deg, transparent 0%, transparent 29%, rgba(255,255,255,.62) 42%, var(--kx-primary-color-light, #ffd27a) 49%, rgba(255,255,255,.38) 56%, transparent 70%, transparent 100%),
        radial-gradient(ellipse at center, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-diamond-spark::after {
    background:
        linear-gradient(112deg, transparent 0%, rgba(125,238,255,.18) 31%, rgba(255,255,255,.72) 47%, rgba(125,238,255,.42) 56%, transparent 74%),
        radial-gradient(ellipse at center, rgba(125,238,255,.38), transparent 70%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-corner-spark::after {
    background:
        linear-gradient(100deg, transparent 0%, rgba(255,255,255,.7) 38%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 48%, rgba(255,255,255,.44) 58%, transparent 76%),
        linear-gradient(280deg, transparent 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 35%, rgba(255,255,255,.5) 52%, transparent 72%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 74%);
    background-size: 260% 100%, 240% 100%, 100% 100%;
    animation-name: kxLogoFxCornerFlash;
}

#header-content .logo.kx-logo-effect-starfield::after {
    background:
        linear-gradient(112deg, transparent 0%, rgba(255,255,255,.38) 36%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, rgba(255,255,255,.24) 62%, transparent 78%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 72%);
    background-size: 220% 100%, 100% 100%;
    animation-name: kxLogoFxSoftSweep;
}

#header-content .logo.kx-logo-effect-pixel-spark::after {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.36) 18% 22%, transparent 22% 46%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 46% 52%, transparent 52% 100%),
        linear-gradient(0deg, transparent 0 24%, rgba(255,255,255,.26) 24% 29%, transparent 29% 70%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 70% 76%, transparent 76% 100%);
    background-size: 34px 100%, 100% 26px;
    animation-name: kxLogoFxPixelPulse;
}

#header-content .logo.kx-logo-effect-pixel-grid::after {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(0deg, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 0 2px, transparent 2px 9px),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 70%);
    background-size: 18px 100%, 100% 18px, 100% 100%;
    animation-name: kxLogoFxPixelGrid;
}

#header-content .logo.kx-logo-effect-pixel-cells::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.0) 0 12%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 12% 18%, transparent 18% 38%, rgba(255,255,255,.32) 38% 44%, transparent 44% 100%),
        linear-gradient(0deg, transparent 0 14%, rgba(255,255,255,.22) 14% 20%, transparent 20% 50%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 50% 58%, transparent 58% 100%);
    background-size: 26px 26px, 38px 34px;
    animation-name: kxLogoFxPixelCells;
}

#header-content .logo.kx-logo-effect-inner-sparks::after {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.75) 0 2px, transparent 5px),
        radial-gradient(circle at 38% 68%, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 6px),
        radial-gradient(circle at 62% 32%, rgba(255,255,255,.58) 0 2px, transparent 5px),
        radial-gradient(circle at 78% 70%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 0 3px, transparent 7px),
        radial-gradient(circle at 50% 50%, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 70%);
    background-size: 100% 100%;
    animation-name: kxLogoFxInnerSparks;
}

#header-content .logo.kx-logo-effect-inner-glitch::after {
    background:
        linear-gradient(0deg, transparent 0 18%, rgba(74,216,255,.42) 18% 23%, transparent 23% 46%, rgba(255,93,232,.36) 46% 52%, transparent 52% 76%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 76% 82%, transparent 82%),
        radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 70%);
    background-size: 100% 32px, 100% 100%;
    animation-name: kxLogoFxInnerGlitch;
}

#header-content .logo.kx-logo-effect-inner-current::after {
    background:
        radial-gradient(ellipse at 22% 48%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 26%),
        radial-gradient(ellipse at 52% 52%, rgba(255,255,255,.34), transparent 22%),
        radial-gradient(ellipse at 78% 48%, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 26%);
    background-size: 100% 100%;
    animation-name: kxLogoFxInnerCurrent;
}

#header-content .logo.kx-logo-effect-chroma-glitch::before,
#header-content .logo.kx-logo-effect-rgb-split::before,
#header-content .logo.kx-logo-effect-phase-shift::before,
#header-content .logo.kx-logo-effect-signal-jitter::before,
#header-content .logo.kx-logo-effect-ghost-frame::before {
    animation: kxLogoImageRgbSplit var(--kx-logo-effect-duration, 4s) steps(5, end) infinite both;
}

#header-content .logo.kx-logo-effect-chroma-glitch::after {
    background:
        linear-gradient(0deg, transparent 0 16%, rgba(0,245,255,.5) 16% 21%, transparent 21% 39%, rgba(255,42,171,.48) 39% 44%, transparent 44% 66%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 66% 72%, transparent 72% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 6px);
    background-size: 100% 34px, 13px 100%;
    animation-name: kxLogoFxChromaGlitch;
}

#header-content .logo.kx-logo-effect-signal-break::after {
    background:
        linear-gradient(0deg, transparent 0 12%, rgba(255,255,255,.64) 12% 15%, transparent 15% 31%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 31% 35%, transparent 35% 58%, rgba(96,255,194,.42) 58% 61%, transparent 61% 100%),
        linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.18) 46% 50%, transparent 50% 100%);
    background-size: 100% 28px, 32px 100%;
    animation-name: kxLogoFxSignalBreak;
}

#header-content .logo.kx-logo-effect-data-corrupt::after {
    background:
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.18) 8px 10px, transparent 10px 18px, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 18px 21px, transparent 21px 32px),
        repeating-linear-gradient(0deg, transparent 0 12px, rgba(96,255,194,.24) 12px 14px, transparent 14px 28px);
    background-size: 64px 100%, 100% 42px;
    animation-name: kxLogoFxDataCorrupt;
}

#header-content .logo.kx-logo-effect-rgb-split::after {
    background:
        linear-gradient(90deg, rgba(0,245,255,.34), transparent 28%, transparent 72%, rgba(255,42,171,.32)),
        radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 72%);
    background-size: 100% 100%;
    animation-name: kxLogoFxRgbSplit;
}

#header-content .logo.kx-logo-effect-static-pulse::after {
    background:
        repeating-radial-gradient(circle at 22% 36%, rgba(255,255,255,.2) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 72%);
    background-size: 19px 19px, 23px 23px, 100% 100%;
    animation-name: kxLogoFxStaticPulse;
}

#header-content .logo.kx-logo-effect-phase-shift::after {
    background:
        linear-gradient(90deg, rgba(0,245,255,.42) 0 18%, transparent 18% 42%, rgba(255,42,171,.38) 42% 58%, transparent 58% 82%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 82%),
        linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,.18) 22% 27%, transparent 27% 68%, rgba(0,245,255,.22) 68% 74%, transparent 74%);
    background-size: 100% 100%, 100% 24px;
    animation-name: kxLogoFxPhaseShift;
}

#header-content .logo.kx-logo-effect-scan-tear::after {
    background:
        linear-gradient(0deg, transparent 0 10%, rgba(255,255,255,.6) 10% 13%, transparent 13% 27%, rgba(0,245,255,.34) 27% 30%, transparent 30% 49%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 49% 53%, transparent 53% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px);
    background-size: 100% 38px, 100% 10px;
    animation-name: kxLogoFxScanTear;
}

#header-content .logo.kx-logo-effect-signal-jitter::after {
    background:
        linear-gradient(90deg, transparent 0 24%, rgba(0,245,255,.44) 24% 30%, transparent 30% 52%, rgba(255,42,171,.38) 52% 58%, transparent 58% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px);
    background-size: 42px 100%, 18px 100%;
    animation-name: kxLogoFxSignalJitter;
}

#header-content .logo.kx-logo-effect-ghost-frame::after {
    background:
        radial-gradient(ellipse at 46% 50%, rgba(0,245,255,.28), transparent 48%),
        radial-gradient(ellipse at 54% 50%, rgba(255,42,171,.24), transparent 48%),
        linear-gradient(0deg, transparent 0 34%, rgba(255,255,255,.22) 34% 39%, transparent 39% 100%);
    background-size: 100% 100%, 100% 100%, 100% 30px;
    animation-name: kxLogoFxGhostFrame;
}

#header-content .logo.kx-logo-effect-codec-error::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.0) 0 12%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 12% 18%, transparent 18% 34%, rgba(0,245,255,.34) 34% 39%, transparent 39% 64%, rgba(255,42,171,.32) 64% 70%, transparent 70%),
        linear-gradient(0deg, transparent 0 18%, rgba(255,255,255,.28) 18% 22%, transparent 22% 58%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 58% 64%, transparent 64%);
    background-size: 48px 28px, 34px 40px;
    animation-name: kxLogoFxCodecError;
}

#header-content .logo.kx-logo-effect-ember-dust::after {
    background:
        radial-gradient(ellipse at center, rgba(255,83,33,.34), transparent 65%),
        linear-gradient(110deg, transparent, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent);
    background-size: 100% 100%, 240% 100%;
    animation-name: kxLogoFxWarmFlare;
}

#header-content .logo.kx-logo-effect-confetti-soft::after,
#header-content .logo.kx-logo-effect-holiday-lights::after {
    background:
        linear-gradient(90deg, rgba(255,207,77,.0), rgba(255,207,77,.38), rgba(96,214,255,.34), rgba(255,98,207,.32), rgba(255,207,77,0)),
        radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 68%);
    background-size: 240% 100%, 100% 100%;
    animation-name: kxLogoFxPartyGlow;
}

#header-content .logo.kx-logo-effect-snow-light::after {
    background:
        linear-gradient(105deg, transparent, rgba(210,240,255,.42), rgba(255,255,255,.28), transparent),
        radial-gradient(ellipse at center, rgba(210,240,255,.22), transparent 68%);
    background-size: 240% 100%, 100% 100%;
    animation-name: kxLogoFxColdSweep;
}

#header-content .logo.kx-logo-effect-scanline::after,
#header-content .logo.kx-logo-effect-crt-scan::after {
    background:
        linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.48) 47%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 50%, transparent 58%),
        radial-gradient(ellipse at center, rgba(255,255,255,.1), transparent 70%);
    background-size: 100% 180%, 100% 100%;
    animation-name: kxLogoFxWideScanline;
}

#header-content .logo.kx-logo-effect-terminal-scan::after {
    background:
        linear-gradient(to bottom, transparent 0%, rgba(88,255,193,.68) 48%, rgba(88,255,193,.28) 52%, transparent 60%),
        radial-gradient(ellipse at center, rgba(88,255,193,.18), transparent 72%);
    background-size: 100% 190%, 100% 100%;
    animation-name: kxLogoFxWideScanline;
}

#header-content .logo.kx-logo-effect-retro-noise::after {
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,.28), transparent 66%),
        linear-gradient(115deg, transparent 0%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 44%, rgba(255,255,255,.34) 52%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
    background-size: 100% 100%, 230% 100%, 100% 9px;
    animation-name: kxLogoFxRetroFlare;
}

#header-content .logo.kx-logo-effect-digital-rain::after,
#header-content .logo.kx-logo-effect-circuit-lines::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(86,255,191,.0) 24%, rgba(86,255,191,.54) 48%, rgba(255,255,255,.24) 54%, transparent 76%),
        radial-gradient(ellipse at center, rgba(86,255,191,.18), transparent 70%);
    background-size: 230% 100%, 100% 100%;
    animation-name: kxLogoFxTechnicalSweep;
}

#header-content .logo.kx-logo-effect-radar-sweep::after {
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(96,255,194,.32) 56%, transparent 72%),
        conic-gradient(from 0deg at 50% 50%, transparent 0 74%, rgba(96,255,194,.42) 77%, rgba(255,255,255,.26) 80%, transparent 86% 100%);
    animation-name: kxLogoFxOrbit;
}

#header-content .logo.kx-logo-effect-energy-ring::after {
    border: 1px solid rgba(96,255,194,.36);
    box-shadow: 0 0 12px rgba(96,255,194,.24), inset 0 0 16px rgba(96,255,194,.14);
    animation-name: kxLogoFxEnergy;
}

#header-content .logo.kx-logo-effect-border-dash::after {
    background:
        linear-gradient(90deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 0 / 18px 1px repeat-x,
        linear-gradient(90deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 100% / 18px 1px repeat-x,
        linear-gradient(0deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 0 / 1px 18px repeat-y,
        linear-gradient(0deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 100% 0 / 1px 18px repeat-y;
    animation-name: kxLogoFxBorderDash;
}

#header-content .logo.kx-logo-effect-marquee::after {
    background:
        radial-gradient(circle, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 3px) 0 0 / 18px 7px repeat-x,
        radial-gradient(circle, var(--kx-primary-color, #ff9b00) 0 2px, transparent 3px) 0 100% / 18px 7px repeat-x,
        radial-gradient(circle, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 3px) 0 0 / 7px 18px repeat-y,
        radial-gradient(circle, var(--kx-primary-color, #ff9b00) 0 2px, transparent 3px) 100% 0 / 7px 18px repeat-y;
    animation-name: kxLogoFxMarqueeLights;
}

#header-content .logo.kx-logo-effect-outer-aura::after {
    inset: -40px;
    background:
        radial-gradient(ellipse at center, transparent 30%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, transparent 74%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 82%);
    animation-name: kxLogoFxOuterAura;
}

#header-content .logo.kx-logo-effect-halo-ring::after {
    inset: -34px;
    border: 1px solid var(--kx-primary-color-soft, rgba(255,155,0,.24));
    box-shadow: 0 0 14px var(--kx-primary-color-glow, rgba(255,155,0,.46)), inset 0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14));
    animation-name: kxLogoFxHaloRing;
}

#header-content .logo.kx-logo-effect-crown-light::after {
    inset: -38px;
    background:
        radial-gradient(ellipse at 50% 5%, rgba(255,255,255,.62), transparent 24%),
        radial-gradient(ellipse at 50% 20%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 58%);
    animation-name: kxLogoFxCrownLight;
}

#header-content .logo.kx-logo-effect-stage-spotlight::after {
    inset: -42px;
    background:
        radial-gradient(ellipse at 10% 72%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 36%),
        radial-gradient(ellipse at 90% 72%, rgba(255,255,255,.42), transparent 36%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 78%);
    animation-name: kxLogoFxStageSpotlight;
}

#header-content .logo.kx-logo-effect-orbit-flare::after {
    inset: -36px;
    background:
        radial-gradient(circle at 50% 0%, var(--kx-primary-color-light, #ffd27a) 0 4px, transparent 13px),
        conic-gradient(from 0deg at 50% 50%, transparent 0 62%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 67%, transparent 74% 100%),
        radial-gradient(ellipse at center, transparent 38%, var(--kx-primary-color-faint, rgba(255,155,0,.14)) 58%, transparent 76%);
    animation-name: kxLogoFxOrbit;
}

#header-content .logo.kx-logo-effect-perimeter-glow::after {
    inset: -24px;
    border: 1px solid var(--kx-primary-color-glow, rgba(255,155,0,.46));
    box-shadow:
        0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24)),
        0 0 22px var(--kx-primary-color-faint, rgba(255,155,0,.14)),
        inset 0 0 14px var(--kx-primary-color-soft, rgba(255,155,0,.24));
    animation-name: kxLogoFxPerimeterGlow;
}

#header-content .logo.kx-logo-effect-sunset-glow::after {
    background:
        radial-gradient(ellipse at bottom, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 60%),
        linear-gradient(105deg, transparent, rgba(255,70,110,.38), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 100% 100%, 230% 100%;
    animation-name: kxLogoFxSunset;
}

#header-content .logo.kx-logo-effect-calm-bloom::after {
    background:
        radial-gradient(ellipse at center, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 62%),
        linear-gradient(115deg, transparent, rgba(255,255,255,.3), transparent);
    background-size: 100% 100%, 220% 100%;
    animation-name: kxLogoFxIntenseBloom;
}

#header-content .logo.kx-logo-effect-alert-flash::after {
    background:
        radial-gradient(ellipse at center, rgba(255,60,60,.55), transparent 64%),
        linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    background-size: 100% 100%, 220% 100%;
    animation-name: kxLogoFxAlert;
}

@keyframes kxLogoFxFadePulse {
    0%, 100% { opacity: .22; filter: blur(1px); }
    50% { opacity: .82; filter: blur(3px); }
}

@keyframes kxLogoFxBloom {
    0%, 100% { opacity: .2; filter: blur(1px) brightness(1); }
    50% { opacity: .9; filter: blur(4px) brightness(1.15); }
}

@keyframes kxLogoFxOutlinePulse {
    0%, 100% { opacity: .24; }
    50% { opacity: .82; }
}

@keyframes kxLogoImageDropGlow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 8px var(--kx-primary-color-glow, rgba(255,155,0,.46))); }
}

@keyframes kxLogoImageAuraSoft {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 5px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 9px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImageAuraPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 6px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    42% {
        filter:
            drop-shadow(0 0 5px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 12px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    68% {
        filter:
            drop-shadow(0 0 3px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 8px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImageAuraStrong {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 8px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 5px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 14px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 24px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
}

@keyframes kxLogoImageEnergyRing {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px rgba(96,255,194,.3))
            drop-shadow(0 0 6px rgba(96,255,194,.16));
    }
    45% {
        filter:
            drop-shadow(0 0 4px rgba(96,255,194,.58))
            drop-shadow(0 0 10px rgba(96,255,194,.34))
            drop-shadow(0 0 18px rgba(96,255,194,.18));
    }
    72% {
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.42))
            drop-shadow(0 0 8px rgba(96,255,194,.28));
    }
}

@keyframes kxLogoImageHaloRing {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 6px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    33% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 12px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
    66% {
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.36))
            drop-shadow(0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImagePerimeterGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 7px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 11px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
}

@keyframes kxLogoFxNeonFrame {
    0% { opacity: .16; background-position: 130% 0; }
    45% { opacity: .7; }
    58% { opacity: .42; }
    100% { opacity: .16; background-position: -60% 0; }
}

@keyframes kxLogoFxUnderlight {
    0%, 100% { opacity: .2; filter: blur(1px); }
    50% { opacity: .82; filter: blur(3px); }
}

@keyframes kxLogoFxSweep {
    0% { opacity: 0; background-position: 140% 0; }
    25% { opacity: .62; }
    55% { opacity: .36; }
    100% { opacity: 0; background-position: -80% 0; }
}

@keyframes kxLogoFxGeneralSweep {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: brightness(1); }
    18% { opacity: .82; filter: brightness(1.16); }
    42% { opacity: .34; }
    100% { opacity: 0; background-position: -80% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxStrongSweep {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: brightness(1); }
    16% { opacity: .92; filter: brightness(1.18); }
    38% { opacity: .5; }
    100% { opacity: 0; background-position: -85% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxSoftSweep {
    0% { opacity: 0; background-position: 140% 0, 0 0; }
    24% { opacity: .5; }
    58% { opacity: .22; }
    100% { opacity: 0; background-position: -70% 0, 0 0; }
}

@keyframes kxLogoFxWarmFlare {
    0%, 100% { opacity: .16; background-position: 0 0, 130% 0; filter: brightness(1); }
    40% { opacity: .76; background-position: 0 0, 20% 0; filter: brightness(1.12); }
    70% { opacity: .28; background-position: 0 0, -60% 0; }
}

@keyframes kxLogoFxColdSweep {
    0% { opacity: 0; background-position: 135% 0, 0 0; }
    35% { opacity: .68; }
    100% { opacity: 0; background-position: -75% 0, 0 0; }
}

@keyframes kxLogoFxPartyGlow {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: saturate(1); }
    30% { opacity: .72; filter: saturate(1.35); }
    62% { opacity: .34; }
    100% { opacity: 0; background-position: -80% 0, 0 0; filter: saturate(1); }
}

@keyframes kxLogoFxWideScanline {
    0% { opacity: 0; background-position: 0 -120%, 0 0; }
    24% { opacity: .74; }
    46% { opacity: .38; }
    100% { opacity: 0; background-position: 0 150%, 0 0; }
}

@keyframes kxLogoFxTechnicalSweep {
    0% { opacity: 0; background-position: 140% 0, 0 0; }
    28% { opacity: .72; filter: brightness(1.12); }
    58% { opacity: .32; }
    100% { opacity: 0; background-position: -75% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxRetroFlare {
    0%, 100% { opacity: .16; background-position: 0 0, 145% 0, 0 0; filter: contrast(1); }
    30% { opacity: .78; background-position: 0 0, 22% 0, 0 8px; filter: contrast(1.25) brightness(1.14); }
    55% { opacity: .3; background-position: 0 0, -55% 0, 0 16px; }
}

@keyframes kxLogoFxSunset {
    0%, 100% { opacity: .12; background-position: 0 0, 130% 0; }
    42% { opacity: .78; background-position: 0 0, 15% 0; filter: brightness(1.08); }
    70% { opacity: .32; background-position: 0 0, -65% 0; }
}

@keyframes kxLogoFxIntenseBloom {
    0%, 100% { opacity: .12; filter: blur(1px) brightness(1); background-position: 0 0, 130% 0; }
    38% { opacity: .86; filter: blur(2px) brightness(1.16); background-position: 0 0, 15% 0; }
    68% { opacity: .32; background-position: 0 0, -60% 0; }
}

@keyframes kxLogoFxCornerFlash {
    0%, 100% {
        opacity: 0;
        background-position: 145% 0, -70% 0, 0 0;
        filter: brightness(1);
    }
    16% {
        opacity: .88;
        background-position: 42% 0, 20% 0, 0 0;
        filter: brightness(1.22);
    }
    36% {
        opacity: .18;
        background-position: -70% 0, 115% 0, 0 0;
    }
    58% {
        opacity: .7;
        background-position: 118% 0, 42% 0, 0 0;
        filter: brightness(1.16);
    }
    82% {
        opacity: .12;
        background-position: -60% 0, 130% 0, 0 0;
    }
}

@keyframes kxLogoFxSparkle {
    0%, 100% { opacity: .12; filter: brightness(1); }
    20% { opacity: .72; filter: brightness(1.25); }
    48% { opacity: .22; }
    70% { opacity: .58; }
}

@keyframes kxLogoFxStars {
    0% { opacity: .16; background-position: 0 0, 12px 8px, 3px 4px; }
    50% { opacity: .58; background-position: 9px 7px, 3px 16px, 17px 9px; }
    100% { opacity: .16; background-position: 18px 14px, -6px 24px, 31px 18px; }
}

@keyframes kxLogoFxSnow {
    0% { opacity: .18; background-position: 0 -10px, 18px -18px; }
    50% { opacity: .46; }
    100% { opacity: .18; background-position: 0 34px, 18px 28px; }
}

@keyframes kxLogoFxScanline {
    0% { opacity: .12; background-position: 0 -40px; }
    50% { opacity: .44; }
    100% { opacity: .12; background-position: 0 95px; }
}

@keyframes kxLogoFxNoise {
    0%, 100% { opacity: .1; background-position: 0 0, 4px 4px; }
    25% { opacity: .28; background-position: 7px 3px, 0 9px; }
    50% { opacity: .16; background-position: 3px 8px, 8px 1px; }
    75% { opacity: .24; background-position: 9px 0, 2px 5px; }
}

@keyframes kxLogoFxDigital {
    0% { opacity: .12; background-position: 0 -40px, 0 0; }
    50% { opacity: .42; }
    100% { opacity: .12; background-position: 0 40px, 20px 0; }
}

@keyframes kxLogoFxRadar {
    0% { opacity: .08; transform: rotate(0deg); }
    50% { opacity: .42; }
    100% { opacity: .08; transform: rotate(360deg); }
}

@keyframes kxLogoFxOrbit {
    0% { opacity: .24; transform: rotate(0deg); filter: brightness(1); }
    45% { opacity: .78; filter: brightness(1.12); }
    100% { opacity: .24; transform: rotate(360deg); filter: brightness(1); }
}

@keyframes kxLogoFxEnergy {
    0%, 100% { opacity: .18; box-shadow: 0 0 8px rgba(96,255,194,.16), inset 0 0 10px rgba(96,255,194,.1); }
    50% { opacity: .72; box-shadow: 0 0 20px rgba(96,255,194,.34), inset 0 0 18px rgba(96,255,194,.18); }
}

@keyframes kxLogoFxBorderDash {
    0% { opacity: .22; background-position: 0 0, 0 100%, 0 0, 100% 0; }
    50% { opacity: .7; }
    100% { opacity: .22; background-position: 36px 0, -36px 100%, 0 -36px, 100% 36px; }
}

@keyframes kxLogoFxMarqueeLights {
    0% { opacity: .26; background-position: 0 0, 0 100%, 0 0, 100% 0; filter: brightness(1); }
    35% { opacity: .88; filter: brightness(1.18); }
    100% { opacity: .26; background-position: 36px 0, -36px 100%, 0 -36px, 100% 36px; filter: brightness(1); }
}

@keyframes kxLogoFxPixelPulse {
    0%, 100% { opacity: .12; background-position: 0 0, 0 0; filter: brightness(1); }
    24% { opacity: .66; background-position: 14px 0, 0 10px; filter: brightness(1.2); }
    52% { opacity: .22; background-position: 28px 0, 0 20px; }
    78% { opacity: .58; background-position: 42px 0, 0 30px; }
}

@keyframes kxLogoFxPixelGrid {
    0%, 100% {
        opacity: .1;
        background-position: 0 0, 0 0, 0 0;
        filter: brightness(1);
    }
    20% {
        opacity: .52;
        background-position: 5px 0, 0 4px, 0 0;
        filter: brightness(1.14);
    }
    46% {
        opacity: .24;
        background-position: 10px 0, 0 8px, 0 0;
    }
    72% {
        opacity: .62;
        background-position: 2px 0, 0 13px, 0 0;
        filter: brightness(1.18);
    }
}

@keyframes kxLogoFxPixelCells {
    0%, 100% {
        opacity: .08;
        background-position: 0 0, 0 0;
        filter: brightness(1);
    }
    18% {
        opacity: .62;
        background-position: 7px 4px, -5px 3px;
        filter: brightness(1.2);
    }
    40% {
        opacity: .18;
        background-position: 16px 11px, 6px -4px;
    }
    64% {
        opacity: .55;
        background-position: -6px 9px, 13px 8px;
    }
}

@keyframes kxLogoFxInnerSparks {
    0%, 100% {
        opacity: .08;
        filter: brightness(1);
        transform: scale(1);
    }
    12% {
        opacity: .76;
        filter: brightness(1.22);
    }
    30% {
        opacity: .18;
        transform: scale(1.01);
    }
    52% {
        opacity: .62;
        filter: brightness(1.18);
    }
    74% {
        opacity: .24;
        transform: scale(.995);
    }
}

@keyframes kxLogoFxInnerGlitch {
    0%, 100% {
        opacity: .06;
        background-position: 0 0, 0 0;
        filter: hue-rotate(0deg) brightness(1);
    }
    18% {
        opacity: .58;
        background-position: 0 -7px, 0 0;
        filter: hue-rotate(12deg) brightness(1.16);
    }
    22% {
        opacity: .2;
        background-position: 0 11px, 0 0;
    }
    44% {
        opacity: .64;
        background-position: 0 18px, 0 0;
        filter: hue-rotate(-10deg) brightness(1.18);
    }
    48% {
        opacity: .16;
    }
    70% {
        opacity: .48;
        background-position: 0 -15px, 0 0;
    }
}

@keyframes kxLogoFxInnerCurrent {
    0%, 100% {
        opacity: .12;
        filter: blur(.2px) brightness(1);
        transform: scale(.99);
    }
    36% {
        opacity: .7;
        filter: blur(1px) brightness(1.16);
        transform: scale(1.01);
    }
    64% {
        opacity: .32;
        filter: blur(.4px) brightness(1.06);
    }
}

@keyframes kxLogoImageRgbSplit {
    0%, 100% { filter: none; }
    16% { filter: drop-shadow(2px 0 0 rgba(0,245,255,.46)) drop-shadow(-2px 0 0 rgba(255,42,171,.4)); }
    18% { filter: none; }
    42% { filter: drop-shadow(-2px 0 0 rgba(0,245,255,.38)) drop-shadow(2px 0 0 rgba(255,42,171,.34)); }
    45% { filter: none; }
    72% { filter: drop-shadow(1px 0 0 rgba(0,245,255,.32)) drop-shadow(-1px 0 0 rgba(255,42,171,.28)); }
}

@keyframes kxLogoFxChromaGlitch {
    0%, 100% { opacity: .04; background-position: 0 0, 0 0; filter: brightness(1); }
    14% { opacity: .64; background-position: 0 -8px, 7px 0; filter: brightness(1.18); }
    18% { opacity: .16; background-position: 0 12px, -5px 0; }
    38% { opacity: .7; background-position: 0 18px, 10px 0; filter: brightness(1.2); }
    42% { opacity: .1; }
    66% { opacity: .48; background-position: 0 -14px, -8px 0; }
}

@keyframes kxLogoFxSignalBreak {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    12% { opacity: .72; background-position: 0 -9px, 8px 0; filter: brightness(1.24) contrast(1.08); }
    16% { opacity: .2; background-position: 0 13px, -6px 0; }
    36% { opacity: .58; background-position: 0 21px, 14px 0; }
    40% { opacity: .08; }
    74% { opacity: .5; background-position: 0 -18px, -12px 0; }
}

@keyframes kxLogoFxDataCorrupt {
    0%, 100% { opacity: .08; background-position: 0 0, 0 0; filter: brightness(1); }
    20% { opacity: .6; background-position: 11px 0, 0 -8px; filter: brightness(1.16); }
    25% { opacity: .18; }
    48% { opacity: .54; background-position: -17px 0, 0 14px; }
    53% { opacity: .12; }
    76% { opacity: .46; background-position: 23px 0, 0 -19px; }
}

@keyframes kxLogoFxRgbSplit {
    0%, 100% { opacity: .04; transform: translate(0, 0); }
    16% { opacity: .52; transform: translate(1px, 0); filter: brightness(1.18); }
    18% { opacity: .18; transform: translate(-1px, 0); }
    43% { opacity: .58; transform: translate(-1px, 0); }
    47% { opacity: .08; transform: translate(0, 0); }
    70% { opacity: .38; }
}

@keyframes kxLogoFxStaticPulse {
    0%, 100% { opacity: .08; background-position: 0 0, 0 0, 0 0; filter: brightness(1); }
    15% { opacity: .58; background-position: 7px 2px, -5px 4px, 0 0; filter: brightness(1.12); }
    21% { opacity: .18; background-position: -3px 8px, 9px -4px, 0 0; }
    44% { opacity: .52; background-position: 12px -6px, 4px 10px, 0 0; filter: brightness(1.16); }
    49% { opacity: .12; }
    73% { opacity: .42; background-position: -8px 12px, -10px 6px, 0 0; }
}

@keyframes kxLogoFxPhaseShift {
    0%, 100% { opacity: .05; background-position: 0 0, 0 0; filter: hue-rotate(0deg) brightness(1); }
    13% { opacity: .62; background-position: 8px 0, 0 -7px; filter: hue-rotate(16deg) brightness(1.18); }
    17% { opacity: .12; background-position: -6px 0, 0 10px; }
    39% { opacity: .58; background-position: -10px 0, 0 18px; filter: hue-rotate(-14deg) brightness(1.16); }
    44% { opacity: .08; }
    71% { opacity: .44; background-position: 12px 0, 0 -14px; }
}

@keyframes kxLogoFxScanTear {
    0%, 100% { opacity: .05; background-position: 0 0, 0 0; filter: brightness(1); }
    11% { opacity: .7; background-position: 0 -10px, 0 0; filter: contrast(1.12) brightness(1.2); }
    15% { opacity: .18; background-position: 0 14px, 0 -3px; }
    33% { opacity: .62; background-position: 0 25px, 0 4px; }
    38% { opacity: .1; }
    67% { opacity: .48; background-position: 0 -19px, 0 8px; }
}

@keyframes kxLogoFxSignalJitter {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    10% { opacity: .64; background-position: 14px 0, 6px 0; filter: brightness(1.18); }
    14% { opacity: .16; background-position: -8px 0, -4px 0; }
    31% { opacity: .54; background-position: 22px 0, 11px 0; }
    36% { opacity: .08; }
    63% { opacity: .46; background-position: -18px 0, -9px 0; }
}

@keyframes kxLogoFxGhostFrame {
    0%, 100% { opacity: .05; filter: brightness(1); }
    18% { opacity: .52; filter: saturate(1.25) brightness(1.12); }
    22% { opacity: .14; }
    46% { opacity: .46; background-position: 0 0, 0 0, 0 12px; }
    51% { opacity: .1; }
    75% { opacity: .36; background-position: 0 0, 0 0, 0 -10px; }
}

@keyframes kxLogoFxCodecError {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    16% { opacity: .64; background-position: 11px 7px, -6px 4px; filter: brightness(1.2) contrast(1.08); }
    21% { opacity: .14; }
    43% { opacity: .56; background-position: -17px 12px, 10px -8px; }
    49% { opacity: .08; }
    69% { opacity: .48; background-position: 24px -6px, -14px 13px; }
}

@keyframes kxLogoFxOuterAura {
    0%, 100% { opacity: .2; filter: blur(2px) brightness(1); transform: scale(.98); }
    50% { opacity: .92; filter: blur(5px) brightness(1.16); transform: scale(1.03); }
}

@keyframes kxLogoFxHaloRing {
    0% { opacity: .2; transform: rotate(0deg) scale(.98); }
    50% { opacity: .84; transform: rotate(180deg) scale(1.02); }
    100% { opacity: .2; transform: rotate(360deg) scale(.98); }
}

@keyframes kxLogoFxCrownLight {
    0%, 100% { opacity: .18; filter: blur(1px); }
    42% { opacity: .86; filter: blur(3px) brightness(1.12); }
    68% { opacity: .34; }
}

@keyframes kxLogoFxStageSpotlight {
    0%, 100% { opacity: .18; filter: blur(2px); }
    35% { opacity: .78; filter: blur(4px) brightness(1.1); }
    62% { opacity: .34; }
}

@keyframes kxLogoFxPerimeterGlow {
    0%, 100% {
        opacity: .24;
        box-shadow: 0 0 8px var(--kx-primary-color-soft, rgba(255,155,0,.24)), 0 0 16px var(--kx-primary-color-faint, rgba(255,155,0,.14)), inset 0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24));
    }
    50% {
        opacity: .88;
        box-shadow: 0 0 16px var(--kx-primary-color-glow, rgba(255,155,0,.46)), 0 0 30px var(--kx-primary-color-soft, rgba(255,155,0,.24)), inset 0 0 20px var(--kx-primary-color-glow, rgba(255,155,0,.46));
    }
}

@keyframes kxLogoFxAlert {
    0%, 100% { opacity: 0; }
    12% { opacity: .55; }
    22% { opacity: .05; }
    34% { opacity: .38; }
    50% { opacity: 0; }
}

#header-content .checkIn:hover {
    color: #fff;
    border-color: rgba(91, 248, 160, .58);
    background: rgba(37, 176, 101, .98);
    text-decoration: none;
}

#header-content .checkIn i {
    margin-left: 2px;
}




#header-menu {
    background: rgba(0, 0, 0, .3);
    height: 50px;
    width: 100%;
    margin-bottom: 0;
}

#header-menu .icon {
    margin-right: 10px;
}

#header-menu .icon-right {
    margin-left: 10px;
}

#header-menu .user-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    position: absolute;
    left: 5px;
    top: 0;
    z-index: 9;
}

#header-menu .user-menu li {
    float: left;
    line-height: 50px;
}

#header-menu .user-menu li .avatar-look {
    background: center -20px;
    height: 50px;
    width: 40px;
    position: absolute;
    top: 0;
}

#header-menu .user-menu li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .3s, color .3s;
    padding: 15.8px 20px;
    cursor: pointer;
}

#header-menu .user-menu li a:hover {
    color: var(--kx-primary-color, #ff9b00);
    background: rgba(0, 0, 0, .2);
}

#header-menu .user-menu li a span {
    margin-left: 30px;
}

#header-menu .header-menu {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 15px 4px 17px 0;
}

#header-menu .header-menu li {
    float: left;
    display: inline-block;
}

#header-menu .header-menu li a {
    padding: 16.4px 20px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .3s, color .3s;
}

#header-menu .header-menu li a:hover {
    color: var(--kx-primary-color, #ff9b00);
    background: rgba(0, 0, 0, .2);
}

#sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    float: none;
    margin-bottom: 0;
    height: 32px;
}

#sub-menu li {
    float: none;
    padding: 0 20px;
    line-height: 32px;
}

#sub-menu li a,
#sub-menu li .kx-submenu-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: color .3s;
}

#sub-menu li .kx-submenu-form {
    display: inline;
    margin: 0;
}

#sub-menu li .kx-submenu-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

#sub-menu li a:hover,
#sub-menu li .kx-submenu-link:hover {
    color: var(--kx-primary-color, #ff9b00);
}

#sub-menu li a.selected {
    font-weight: bold;
    pointer-events: none;
    color: var(--kx-primary-color, #ff9b00);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* Sombra leve */
}


h2.title {
    font: 400 25px 'Roboto Condensed', sans-serif;
    margin-bottom: 10px;
    margin-top: 0px;
    text-transform: uppercase;
    position: relative;
}

#contentBox {
    background: rgba(0, 0, 0, .35);
    margin-bottom: 10px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    color: rgba(255, 255, 255, .7);
}

#contentBox .title {
    background: rgba(0, 0, 0, .22);
    padding: 15px 20px;
    font: 400 22px 'Roboto Condensed', sans-serif;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    text-transform: uppercase;
    color: #fff;
}

#contentBox .title.small {
    background: rgba(0, 0, 0, .22);
    padding: 10px 15px;
    font: 400 20px 'Roboto Condensed', sans-serif;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    text-transform: uppercase;
    color: #fff;
}


#contentBox .png5 {
    padding: 5px;
}

#contentBox .png10 {
    padding: 10px;
}

#contentBox .png15 {
    padding: 15px;
}

#contentBox .png20 {
    padding: 20px;
}

#contentBox h3 {
    font-weight: 300;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

#contentBox .footerBottomBox {
    background: rgba(0, 0, 0, .2);
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    height: 60px;
    width: 100%;
    border-top: 2px dashed rgba(255, 255, 255, .05);
    position: relative;
}

/* Contenedor principal del slider */
#newsSlider {
    position: relative;
    height: 240px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    overflow: hidden; /* asegurar recorte */
}

/* Estilo base para cada slide (siempre en el DOM) */
.newsSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background-position: left center;
    background-size: cover;
    background-color: #15191b;
    border-radius: 2px;
    color: #fff;

    /* Siempre presentes, pero ocultos */
    opacity: 0;
    visibility: hidden;

    /* Transición combinada: primero visibilidad, luego opacidad */
    transition: 
        visibility 0s linear 0.6s, /* espera 0.6s antes de ocultarse */
        opacity    0.6s ease-in-out;
    z-index: 0;
}

/* Slide “activo” */
.newsSlide::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, .08);
    pointer-events: none;
    z-index: 0;
}

.newsSlide.active {
    visibility: visible;       /* inmediato */
    opacity: 1;                /* fade-in */
    transition-delay: 0s;      /* sin retardo al mostrarse */
    z-index: 1;                /* encima de los demás */
}

/* Título */
.newsSlide .title {
    position: relative;
    z-index: 1;
    font-size: 25px;
    font-weight: 500;
    margin: 40px 0 0 25px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Descripción */
.newsSlide .desc {
    position: relative;
    z-index: 1;
    max-width: 72%;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.35;
    margin: 10px 0 0 25px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.newsSlideCover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

html.kx-js #newsSlider[data-news-preparation="pending"] .newsSlide {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

html.kx-js #newsSlider[data-news-preparation="pending"]::after {
    content: "Preparando noticias…";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #15191b;
    color: rgba(255, 255, 255, .65);
    font: 400 14px 'Roboto', sans-serif;
    border-radius: 2px;
}

.newsSlide--empty::after {
    display: none;
}

.newsSlideMeta {
    position: absolute;
    z-index: 1;
    left: 25px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100% - 235px);
    color: rgba(255, 255, 255, .9);
    font: 800 13px 'Roboto Condensed', sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 8px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

.newsSlideMeta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.newsSlideMeta strong {
    color: #fff;
}

.newsSlideMeta .fa {
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
}

.newsSlide .readMore {
    z-index: 1;
    background: rgba(24, 132, 76, .88);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 28px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(57, 205, 124, .34);
    border-radius: 4px;
    position: absolute;
    bottom: 26px;
    right: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.newsSlide .readMore:hover {
    color: #fff;
    border-color: rgba(78, 235, 145, .48);
    background: rgba(32, 160, 91, .95);
    text-decoration: none;
}

.newsSlide.newsSlide--empty {
    background-color: #15191b;
}

.newsSlide.newsSlide--empty .desc {
    color: rgba(255, 255, 255, .72);
}

@media (prefers-reduced-motion: reduce) {
    .newsSlide {
        transition: none;
    }
}


.Alert {
    background: rgba(0, 0, 0, .6);
    padding: 10px;
    border-radius: 2px;
	height: 75px;
    -webkit-border-radius: 2px;
    margin-bottom: 10px;
}

.Alert .warning {
    color: #f1c40f;
    float: left;
    margin-top: 4px;
}

.Alert p {
    width: 835px;
    position: absolute;
    right: 15px;
    margin-top: 0px;
    font-size: 13px;
}

.slides {
    top: 20px;
    position: absolute;
    left: 25px;
}

.switch {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    float: left;
    margin-right: 5px;
    cursor: pointer;
}

.switch.active {
    background: #fff;
}

#newsSlides .newsSlide .darkBox .readMore {
    background: rgba(24, 132, 76, .88);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 28px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(57, 205, 124, .34);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    bottom: 26px;
    right: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.meContentBox .checkIn {
    background: rgba(0, 0, 0, .28);
    padding: 0 12px;
    color: #fff;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .7px;
    text-transform: uppercase;
    outline: none;
    transition: opacity .18s ease;
    text-decoration: none;
    position: absolute;
    right: 86px;
    top: 28px;
    width: 164px;
    height: 58px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 2px;
    box-shadow: none;
}

.meContentBox .checkIn:hover {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
}

#kx-spa-root > .kx-submenu-shell {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0;
    pointer-events: none;
}

#kx-spa-root > .kx-submenu-shell .grid_24 {
    height: 32px;
    pointer-events: none;
}

#kx-spa-root > .kx-submenu-shell #sub-menu {
    pointer-events: auto;
}

#kx-spa-root:has(> .kx-submenu-shell) {
    padding-top: 46px;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0 auto;
    pointer-events: none;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) .grid_24 {
    height: 32px;
    pointer-events: none;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) #sub-menu {
    pointer-events: auto;
}

#profile-spa-root:has(> .container_24:first-child #sub-menu) {
    padding-top: 46px;
}

.profile-submenu-shell {
    position: relative;
    padding-top: 46px;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0 auto;
    pointer-events: none;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) .grid_24 {
    height: 32px;
    pointer-events: none;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) #sub-menu {
    pointer-events: auto;
}

.meContentBox .icon {
    height: 60px; 
    width: 60px;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.meContentBox .checkIn .icon {
    height: 58px;
    width: 28px;
    border-radius: 2px;
    margin-bottom: 0;
    flex: 0 0 28px;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    border: 0;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.meContentBox .checkIn:hover .icon {
    color: #fff;
}

.meContentBox .icon .vip {
    height: 50px;
    width: 60px;
}

.meContentBox .count.vip {
    color: #e9eaea;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}

.meContentBox .count.vip .senior-title {
    color: var(--kx-primary-color, #ffa600);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.meContentBox .count.vip .senior-days {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.kx-senior-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #dce5ea;
    font-size: 34px;
    text-shadow:
        1px 1px 0 #050607,
        -1px 1px 0 #050607,
        0 2px 0 rgba(0, 0, 0, .65);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(220, 229, 234, .22);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 rgba(0, 0, 0, .45);
    vertical-align: middle;
}

.kx-senior-badge--offer {
    align-self: center;
    margin: 2px 0 0;
}

.kx-senior-badge--checkin {
    width: 24px;
    height: 24px;
    font-size: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
}


.hotcampaigns {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.hotcampaigns li {
    position: relative;
    color: #fff;
    padding-left: 50px;
    height: 60px;
    background: #292d2f;
    padding: 10px;
}

.hotcampaigns li .hotcampaigns-image {
    background: no-repeat center center;
	background-size: cover;
    height: 60px;
    width: 150px;
    position: absolute;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

.hotcampaigns li .hotcampaigns-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    margin-top: 10px;
    margin-left: 160px;
}

.hotcampaigns li .hotcampaigns-desc {
    margin-bottom: 5px;
    font-weight: 100;
    margin-left: 160px;
    width: 200px;
}

.hotcampaigns li .hotcampaigns-readMore {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-decoration: none;
    color: #fff;
}

.hotcampaigns li .hotcampaigns-readMore:hover {
    text-decoration: underline;
}

.hotcampaigns li:nth-last-child(odd) {
    background: #181A1C;
    padding: 10px;
}

.hotcampaigns li:last-child {
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
}

.info {
background-color: #616365;
text-align:left;
opacity:0.95;
color: #FFF;
padding: 10px;
border-radius: 2px;
margin-bottom: 10px;
}

.ajus {
float: right;
margin-top: -25px;
background-color: #29405B;
padding: 10px;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
}

.ajus:hover {
background-color: #344B65;
}

.helpCenter span {
    font-size: 13px;
    line-height: 1.2;
}

.helpCenter .txt {
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, .8);
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    height: 90px;
    font-family: Open Sans;
    font-weight: 500;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #F0F0F0;
    border: none;
    resize: none;
    outline: none;
}

.helpCenter #submit {
    width: 100%;
    font-size: 13px;
    height: 50px;
    line-height: 50px;
}

#footer-content {
    color: rgba(255, 255, 255, .3); 
    font-size: 13px; 
    text-align: center;
    flex: 0 0 auto;
    margin-bottom: 20px; 
	margin-top: 10px;
    line-height: 1.45;
}

#footer-content .footer-copy {
    display: block;
    margin-bottom: 8px;
}

#footer-content .quick-links {
    margin-top: 0; 
}

#footer-content .quick-links ul {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 30px;
}

#footer-content .quick-links li {
    margin: 0; 
}

#footer-content .quick-links a {
    color: #707070; 
    text-decoration: none; 
    transition: color 0.3s; 
}

#footer-content .quick-links a:hover {
    color: #fff; 
}

.itemContainer {
    list-style-type: none;
    padding: 0;
    margin-left: 2px;
    margin-top: 2px;
    overflow-y: auto;
    max-height: 193px; 
    min-height: 193px; 
    display: flex;
    flex-direction: column;
}

.itemContainer:has(> .itemList[data-kx-item-grid="1"]) {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.itemContainer:has(> .itemList[data-kx-item-grid="1"])::-webkit-scrollbar {
    display: none;
}

.itemList {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start; /
}

.item {
    width: 43px; 
    height: 43px;
    left: 5px;
	padding: 0px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10%;
    margin: 1.55px; 
    position: relative; 
    align-items: center; 
    justify-content: center; 
    transition: box-shadow 0.2s ease; 
}

.item:hover {
    box-shadow: 0 0 3px rgba(0, 255, 255, 1), 0 0 3px rgba(0, 255, 255, 1); /* Resplandor celeste azulado fino */
}

.item-count {
    position: absolute;
    bottom: 2px; 
    right: 2px;
    color: white; 
    font-size: 10px; 
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px; 
    padding: 2px; 
}

.itemContainer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.item-selected {
    box-shadow: 0 0 .104166667in rgba(0, 123, 255, .5);
    animation: borderPulse 2s infinite;
}

.kx-item-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
    box-sizing: border-box;
    box-shadow: none;
}

.kx-item-skeleton:hover {
    box-shadow: none;
}

html.kx-js .itemList[data-kx-fake-loading="items"]:not([data-kx-loading-applied="1"]) {
    visibility: hidden;
}

.kx-content-reveal {
    animation: kxContentReveal .18s ease-out both;
}

.kx-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, color .2s ease;
}

.kx-action-button:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    text-decoration: none;
}

.kx-action-button:disabled,
.kx-action-button.disabled,
.kx-action-button.is-disabled {
    opacity: .82;
    cursor: not-allowed;
    box-shadow: none;
}


.function {
    background: #2a2a2a;
    color: #fff;
	margin-bottom: 6px;
    padding: 10px 0;
    border: none; 
    border-radius: 5px; 
    font-size: 14px;
    cursor: pointer; 
    text-transform: uppercase; 
    width: 100%; 
    transition: background 0.3s; 
}

.function:hover {
    background: #d27600;
}

.function:active {
    background: #444; 
}

.vip-tag {
    display: inline-block;
    background-color: gold;
    color: black;
    padding: 2px 6px;
    margin-left: 5px;
    border-radius: 4px;
    font-size: 12px;
    }
	
.error-message {
    height: 195px; /* Altura del contenedor */
    display: flex; /* Usar flexbox */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    text-align: center; /* Centrar el texto */
}

#list-users {
    list-style-type: none; /* Elimina los estilos de lista */
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina relleno */
    position: relative; /* Posicionamiento relativo para el contenedor */
    overflow-y: auto; /* Permite el desplazamiento vertical */
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
    height: 250px; /* Altura del contenedor */
}

/* Real image preparation: text remains usable while each media frame settles. */
.kx-media-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background: rgba(255, 255, 255, .055);
    border-radius: 2px;
}

.kx-media-frame > .kx-media-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.kx-media-frame.is-loaded > .kx-media-image {
    opacity: 1;
}

.kx-media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
}

.kx-media-frame.is-loaded .kx-media-placeholder {
    display: none;
}

.kx-media-frame.is-fallback > .kx-media-image {
    visibility: hidden;
}

.kx-media-image-inline[data-kx-media-state="pending"],
.kx-media-image-inline[data-kx-media-state="fallback"] {
    opacity: 0;
}

.kx-media-inline-fallback {
    position: absolute;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: -18px;
    border-radius: 2px;
    color: #ffba59;
    background: #252b2e;
    font: 14px/1 sans-serif;
    vertical-align: middle;
    z-index: 1;
}

.kx-media-inline-fallback[hidden] {
    display: none;
}

/* Estados vacíos y errores compartidos por todos los listados de usuarios. */
#list-users > p,
#list-users > .error-message {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    min-height: 100%;
    padding: 15px;
    text-align: center;
    width: 100%;
}

#list-users > .error-message p {
    margin: 0;
}

#list-users > br {
    display: none;
}

#list-users li {
    clear: both; /* Asegura que no haya solapamientos */
    padding: 0 15px; /* Espaciado lateral */
    width: 100%; /* Ancho completo del contenedor */
    height: 60px; /* Altura de cada elemento */
    border-bottom: 1px solid rgba(255, 255, 255, .03); /* Borde inferior */
    position: relative; /* Permite posicionar elementos dentro */
}

#list-users li:nth-last-child(odd) {
    background: rgba(0, 0, 0, .1); /* Fondo alternativo para filas impares */
}

#list-users li:last-child {
    border-bottom: none; /* Elimina el borde en el último elemento */
}

#list-users .image {
    height: 60px; /* Altura del avatar */
    width: 65px; /* Ancho del avatar */
    margin-left: -10px; /* Margen negativo */
    background-position: center; /* Centra la imagen del avatar */
    background-repeat: no-repeat; /* Sin repetición de imagen */
}

#list-users .kx-list-user-avatar {
    position: relative;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

#list-users .kx-list-user-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    transition: none;
}

#list-users .kx-list-user-avatar-hover {
    opacity: 0;
}

#list-users li:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
#list-users li:focus-within .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
#list-users li.kx-list-user-row-hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default {
    opacity: 0;
}

#list-users li:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
#list-users li:focus-within .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
#list-users li.kx-list-user-row-hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover {
    opacity: 1;
}

.kx-hover-avatar {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.kx-hover-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
    transition: none;
}

.kx-hover-avatar-hover {
    opacity: 0;
}

.kx-hover-avatar.kx-hover-avatar-hover-ready:hover .kx-hover-avatar-default,
a:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.detailsBox:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.senado-seat:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.senado-seat:focus-visible .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default {
    opacity: 0;
}

.kx-hover-avatar.kx-hover-avatar-hover-ready:hover .kx-hover-avatar-hover,
a:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.detailsBox:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.senado-seat:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.senado-seat:focus-visible .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover {
    opacity: 1;
}

#list-users li .details {
    position: absolute; /* Posicionamiento absoluto para controlar la ubicación */
    margin-left: 60px; /* Ajustar según diseño */
    top: 10px; /* Alinea verticalmente desde la parte superior */
    width: calc(100% - 75px); /* Asegúrate de que no se desborde */
}

#list-users li .details .top-name {
    font: 500 14px 'Roboto'; /* Estilo del nombre */
    white-space: nowrap; /* Evita que el nombre se divida en múltiples líneas */
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
}

#list-users li .details .top-desc {
    font: 300 12px 'Roboto Condensed'; /* Estilo de la descripción */
    margin-top: 5px; /* Espacio entre el nombre y la descripción */
}

#list-users li .details a.profile {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAGpSURBVHjatJQ9aMJAGIafFEEQFFwEjU7qolOWODg6uLgUpGPpJh26FTcn124Zipt0LBldHBwdnIsu6mTSQhehBaHTddA7SpOrP9QPPgh3yXvvvfdcDCEE/10XnKHOIhrZ94JpJAL5+OLDOElUisWcthrbzObESkU1pxP/e/u3l2xmc/K2Rd62iJWKW+EfC520/VipyLDSAKA+GYBt8dJ/Pl7UNBJCulncdSi7PQBe+s+8Pj5RnwxY7mIIi0DrNJpOMW22KLs9sjkTgOzNFclalWGlQeb2+nikvt7e1fOw0sBb+SoGGYuuDN2NkiecdB+2LnMm3soHYN2856TT//nBejRmWGmwHo0PYnUvp+vRmGStSrJWVQvIea2wECLQGeKi4HRF2e0JINBltycKTldkiIuw7yM6nPK2pTKUSAFMmy0A8rbF0mmHOo7ocPJWPtmcSXYyUAhJRgG8lU80nWJzzEFNmy3ltD4ZBASl44OQMo2EeOUTgILTVc5/87u46wCQIR4gIdSpzDCaThFNp7Yx7FqO/c764B+KdOVpbpq2wnAKw0jXYVh9DwDulPwmZ6mTggAAAABJRU5ErkJggg==") no-repeat center; /* Fondo del ícono de perfil */
    height: 21px; /* Altura del ícono */
    width: 22px; /* Ancho del ícono */
    position: absolute; /* Posicionamiento absoluto */
    right: 55px; /* Alinea el ícono a la derecha */
    top: 8px; /* Centrado verticalmente */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: opacity .3s; /* Transición suave al pasar el mouse */
    display: block; /* Asegúrate de que sea un bloque para que sea clickeable */
    z-index: 1; /* Asegúrate de que esté en la parte superior si hay solapamientos */
}

#list-users li .details .kx-list-user-country-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    position: absolute;
    right: 86px;
    top: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .45);
    display: block;
}

#list-users li .details a.profile:hover {
    opacity: .7; /* Cambia la opacidad al pasar el mouse */
}

#list-users li.kx-list-user-skeleton {
    overflow: hidden;
}

#list-users li.kx-list-user-skeleton .image {
    opacity: .42;
    filter: grayscale(1);
}

/* Keep the final loading row softly cut off at each list's own height. The
   mask disappears as soon as real rows replace the skeletons. */
#list-users:has(> li.kx-list-user-skeleton),
#contentBox #list-users:has(> li.kx-list-user-skeleton) {
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
}

.kx-skeleton-line {
    display: block;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.kx-skeleton-line.is-name {
    width: 68%;
}

.kx-skeleton-line.is-desc {
    width: 42%;
    margin-top: 9px;
    opacity: .72;
}

#hot-rooms li.kx-room-skeleton {
    position: relative;
    overflow: hidden;
}

#hot-rooms li.kx-room-skeleton .image {
    opacity: .35;
    filter: grayscale(1);
}

#hot-rooms .kx-skeleton-line.is-room-score {
    width: 18px;
    height: 12px;
    position: absolute;
    right: -50px;
    top: 12px;
    margin-top: 0;
}

#hot-rooms li.kx-room-skeleton .details .kx-room-like-placeholder {
    position: absolute;
    right: -80px;
    top: 8px;
    margin-top: 0;
    width: 18px;
    height: 20px;
    background-repeat: no-repeat;
    opacity: .35;
    filter: grayscale(1);
}

.tops-section-empty {
    display: block;
    padding: 18px;
    color: rgba(255, 255, 255, .58);
    font-weight: 700;
    text-align: center;
}

.senior-tools-active-list .senior-tools-proposal-skeleton {
    min-height: 105px;
}

.senior-tools-proposal-skeleton {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .015);
    overflow: hidden;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-title {
    width: 66%;
    height: 13px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-tag {
    width: 38%;
    height: 9px;
    margin-top: 9px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-desc {
    width: 88%;
    margin-top: 11px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-meta {
    width: 56%;
    height: 8px;
    margin-top: 10px;
    opacity: .62;
}

.kx-skeleton-line.is-body-line {
    width: 100%;
    height: 12px;
    margin: 0 0 10px;
}

.kx-skeleton-line.is-body-line.is-short {
    width: 68%;
}

.kx-archive-skeleton {
    display: block;
    height: 29px;
}

.kx-skeleton-line.is-archive-line {
    width: 82%;
    height: 12px;
    margin-top: 8px;
}

.kx-investment-skeleton-scene {
    opacity: .42;
    filter: grayscale(1);
}

.kx-investor-skeleton .kx-investor-avatar-placeholder {
    display: block;
    margin: 0 auto;
}

.kx-investor-skeleton .kx-skeleton-line.is-investor-name {
    width: 78px;
    height: 12px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 3;
}

.kx-gotw-skeleton {
    position: relative;
    height: 214px;
    padding: 0;
    overflow: hidden;
}

.kx-gotw-skeleton .is-gotw-heading {
    width: 47%;
    height: 18px;
    margin: 0 0 23px 0;
}

.kx-gotw-skeleton .is-gotw-copy {
    width: 63%;
    height: 11px;
    margin-bottom: 9px;
}

.kx-gotw-skeleton .is-gotw-copy.is-short {
    width: 49%;
}

.kx-gotw-skeleton .is-gotw-points {
    width: 41%;
    height: 14px;
    margin-top: 23px;
}

.kx-gotw-skeleton .kx-gotw-pad {
    width: auto;
    height: auto;
    position: absolute;
    right: 20px;
    top: 0;
    opacity: .62;
    filter: grayscale(1);
    image-rendering: pixelated;
}

.kx-gotw-skeleton .kx-gotw-plate {
    height: 91px;
    width: 100px;
    position: absolute;
    right: -15px;
    bottom: -14px;
}

.kx-gotw-skeleton .kx-gotw-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: no-repeat url(../img/base.png);
    opacity: .48;
    image-rendering: pixelated;
}

.kx-gotw-skeleton .kx-gotw-avatar {
    width: 64px;
    height: 110px;
    position: absolute;
    left: 3.5px;
    bottom: 60px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: .82;
    filter: grayscale(1);
    z-index: 1;
}

.kx-gotw-skeleton .kx-gotw-avatar-img {
    display: block;
    width: 64px;
    height: 110px;
    object-fit: contain;
    image-rendering: pixelated;
}

@keyframes kxSkeletonSweep {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@keyframes kxContentReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes borderPulse {
    0% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
    25% {
        border-color: var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ffa600) 72%, #fff));
        box-shadow: 0 0 4px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ffa600) 46%, transparent));
    }
    50% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
    75% {
        border-color: var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ffa600) 72%, #fff));
        box-shadow: 0 0 4px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ffa600) 46%, transparent));
    }
    100% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
}

#cacheStatus {
    text-align: center;
}

.reload-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--kx-primary-color, #ff9b00);
    text-decoration: underline;
}

.hk-tools-box .hk-tool-item {
    text-decoration: none;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    padding: 7px 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
    color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .16);
}

.hk-tools-box .hk-tool-item:last-child {
    margin-bottom: 0;
}

.hk-tools-box .hk-tool-item i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 3px;
    color: #fff;
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-tools-box .hk-tool-item strong,
.hk-tools-box .hk-tool-item small {
    display: block;
}

.hk-tools-box .hk-tool-item span {
    min-width: 0;
}

.hk-tools-box .hk-tool-item strong {
    color: #f1f1f1;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.hk-tools-box .hk-tool-item small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    line-height: 1.25;
    overflow: hidden;
}

.hk-tools-box .hk-tool-item.is-active {
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
}

.kxvars-actions .senior-tools-button,
.kxvars-tabs-strip .hk-tab-button,
.hk-recharge-tabs .hk-tab-button {
    appearance: none;
    border-radius: 3px;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.kxvars-actions .senior-tools-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(55, 122, 180, .85), rgba(32, 86, 135, .85));
}

.kxvars-actions .hk-primary-action {
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-recharge-tabs .hk-tab-button {
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #dcdcdc;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, .26);
}

.hk-recharge-tabs .hk-tab-button:hover,
.hk-recharge-tabs .hk-tab-button.is-active {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.reload-button i {
    margin-right: 5px; /* Opcional: para agregar un pequeño espacio entre el icono y el texto */
}


:root {
    --kx-site-logo-url: url('../img/kabbixlogo_big_beta.png');
    --kx-header-image-url: url('../img/header.png');
    --kx-currency-credits-image: url('../img/personal/credits.png');
    --kx-currency-diamonds-image: url('../img/personal/diamonds.png');
    --kx-currency-duckets-image: url('../img/personal/duckets.png');
    --kx-shop-credits-image: url('../img/shop/credits.png');
    --kx-shop-diamonds-image: url('../img/shop/diamonds.png');
    --kx-personal-texture-image: none;
    --kx-black-image: none;
}

.kx-inline-asset {
    display: inline-block;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.kx-inline-asset--currency-credits {
    background-image: var(--kx-currency-credits-image);
}

.kx-inline-asset--currency-diamonds {
    background-image: var(--kx-currency-diamonds-image);
}

.kx-inline-asset--currency-duckets {
    background-image: var(--kx-currency-duckets-image);
}

.kx-inline-asset--shop-credits {
    background-image: var(--kx-shop-credits-image);
}

.kx-inline-asset--shop-diamonds {
    background-image: var(--kx-shop-diamonds-image);
}