:root {
    --thd-ease-out:   cubic-bezier(.16, 1, .3, 1);     
    --thd-ease-in:    cubic-bezier(.7, 0, .84, 0);
    --thd-ease-inout: cubic-bezier(.65, 0, .35, 1);
    --thd-dur-1: 160ms;
    --thd-dur-2: 320ms;
    --thd-dur-3: 560ms;
    --thd-dur-4: 900ms;
    --thd-stagger: 55ms;

    --thd-bg:       var(--th-bg, #08080A);
    --thd-surface:  var(--th-surface, #0F0F12);
    --thd-surface-2:var(--th-surface-2, #16161A);
    --thd-line:     var(--th-line, #23232A);
    --thd-line-2:   var(--th-line-strong, #35353E);
    --thd-ink:      var(--th-ink, #F2F2EF);
    --thd-ink-2:    var(--th-ink-2, #A5A5A2);
    --thd-ink-3:    var(--th-ink-3, #8C8C8E);
    --thd-metal:    var(--th-metal, #D2A72C);
    --thd-metal-2:  var(--th-metal-2, #E7BF4A);
    --thd-metal-dim:var(--th-metal-dim, rgba(210, 167, 44, .16));
    --thd-ok:       var(--th-success, #35C759);
    --thd-warn:     var(--th-warn, #FFB020);
    --thd-danger:   var(--th-danger, #FF3B30);
    --thd-mono:     var(--th-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    --thd-sans:     var(--th-font-sans, 'Archivo', system-ui, sans-serif);
    --thd-r-md:     var(--th-r-md, 18px);
    --thd-r-lg:     var(--th-r-lg, 26px);
}

 
.thd-js [data-thd-reveal],
.thd-js [data-thd-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity var(--thd-dur-3) var(--thd-ease-out),
        transform var(--thd-dur-3) var(--thd-ease-out);
    transition-delay: calc(var(--thd-i, 0) * var(--thd-stagger));
}
.thd-js [data-thd-reveal="scale"] { transform: scale(.97); }
.thd-js [data-thd-reveal].is-in,
.thd-js [data-thd-stagger].is-in > * {
    opacity: 1;
    transform: none;
}

 
.thd-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 40%),
        var(--thd-surface);
    border: 1px solid var(--thd-line);
    border-radius: var(--thd-r-lg);
    isolation: isolate;
}
 
.thd-panel[data-thd-glow]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(260px circle at var(--thd-mx, 50%) var(--thd-my, -40%),
        rgba(231, 191, 74, .55), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--thd-dur-2) var(--thd-ease-out);
    pointer-events: none;
    z-index: -1;
}
.thd-panel[data-thd-glow]:hover::before { opacity: 1; }

 
.thd-kpi {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
}
.thd-kpi__label {
    font: 500 .6875rem/1 var(--thd-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--thd-ink-3);
}
.thd-kpi__value {
    font: 600 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--thd-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--thd-ink);
    margin-top: 14px;
}
.thd-kpi__delta {
    font: 500 .75rem/1 var(--thd-mono);
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
    color: var(--thd-ink-2);
}
.thd-kpi__delta.is-up   { color: var(--thd-ok); }
.thd-kpi__delta.is-down { color: var(--thd-danger); }
 
.thd-kpi::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--thd-metal), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--thd-dur-4) var(--thd-ease-out) .15s;
}
.thd-kpi.is-in::after,
.is-in > .thd-kpi::after { transform: scaleX(1); }

 
.thd-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    height: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    font: 600 .75rem/1.25 var(--thd-mono);
    letter-spacing: .01em;
    color: var(--thd-ink-2);
    white-space: nowrap;
}
.thd-dot {
    display: none !important;
}
.thd-chip.is-ok     { color: var(--thd-ok);     border: 0; background: transparent; }
.thd-chip.is-warn   { color: var(--thd-warn);   border: 0; background: transparent; }
.thd-chip.is-danger { color: var(--thd-danger); border: 0; background: transparent; }
.thd-chip.is-metal  { color: var(--thd-metal);  border: 0; background: transparent; }




.thd-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--thd-surface-2);
    border-radius: 10px;
    animation: thd-breathe 1.8s var(--thd-ease-inout) infinite;
}
@keyframes thd-breathe {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}






.thd-halo {
    --thd-halo: 44px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: var(--thd-halo);
    height: var(--thd-halo);
    border: calc(var(--thd-halo) * .26) solid #FFD400;
    border-radius: 50%;
    box-shadow:
        0 0 calc(var(--thd-halo) * .2) rgba(255, 212, 0, .55),
        0 0 calc(var(--thd-halo) * .53) rgba(255, 212, 0, .28);
    flex: none;
}
.thd-halo::after {
    content: "";
    position: absolute;
    inset: calc(var(--thd-halo) * -.3);
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--thd-halo) * .4) calc(var(--thd-halo) * .1) rgba(255, 212, 0, .42);
    opacity: .45;
    animation: thd-halo-latido 2600ms cubic-bezier(.4, 0, .6, 1) infinite;
    pointer-events: none;
}
@keyframes thd-halo-latido {
    0%, 100% { opacity: .35; transform: scale(.96); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

 
.thd-spark { display: block; width: 100%; height: 40px; overflow: visible; }
.thd-spark path.thd-spark__line {
    fill: none;
    stroke: var(--thd-metal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.thd-spark path.thd-spark__area { fill: url(#thd-spark-grad); opacity: .9; }
.thd-spark circle { fill: var(--thd-metal-2); }

 
.thd-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--th-z-modal, 400);
    background: rgba(4, 4, 6, .72);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
            backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    transition: opacity var(--thd-dur-2) var(--thd-ease-out);
}
.thd-modal-backdrop.is-open { opacity: 1; }
.thd-modal {
    background: var(--thd-surface);
    border: 1px solid var(--thd-line-2);
    border-radius: var(--thd-r-lg);
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02) inset;
    transform: translate3d(0, 18px, 0) scale(.985);
    opacity: 0;
    transition:
        transform var(--thd-dur-3) var(--thd-ease-out),
        opacity var(--thd-dur-2) var(--thd-ease-out);
}
.is-open > .thd-modal,
.thd-modal.is-open { transform: none; opacity: 1; }
@media (max-width: 640px) {
     
    .thd-modal {
        border-radius: var(--thd-r-lg) var(--thd-r-lg) 0 0;
        transform: translate3d(0, 100%, 0);
    }
}

 
.thd-grid-bg {
    background-image:
        linear-gradient(var(--thd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--thd-line) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    opacity: .5;
}

 
.thd-scope :focus-visible {
    outline: 2px solid var(--thd-metal);
    outline-offset: 2px;
}

 
@media (prefers-reduced-motion: reduce) {
    .thd-js [data-thd-reveal],
    .thd-js [data-thd-stagger] > *,
    .thd-modal,
    .thd-modal-backdrop,
    .thd-kpi::after {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
        transform: none !important;
    }
    .thd-skeleton,
    .thd-halo::after,
    .thd-chip.is-live .thd-dot,
    .thd-dot.is-live { animation: none !important; }
}