/* ==========================================================================
   TSC Design System v2 · área p4
   Propietario: EVO006-P4 · Components/Parts, Components/Dialogs, Components/Shared
   Reglas: solo var(--tsc-*), sin hex ni !important; selectores con prefijo
   de página (p. ej. .pg-admin-portfolios ...) para no colisionar.
   Lint: python -E -P tools/visual-qa/lint_styles.py --area p4 --baseline tools/visual-qa/lint-baseline.json
   ========================================================================== */

/* ==========================================================================
   Mapa de familias y rarezas (sin hex: solo tokens)
   --tsc-fam-c: color de la familia; consumido por chips, barras y bordes.
   ========================================================================== */
.tsc-fam-trend { --tsc-fam-c: var(--tsc-chart-1); }
.tsc-fam-meanrev { --tsc-fam-c: var(--tsc-chart-4); }
.tsc-fam-breakout { --tsc-fam-c: var(--tsc-chart-5); }
.tsc-fam-hedge { --tsc-fam-c: var(--tsc-chart-6); }
.tsc-fam-core { --tsc-fam-c: var(--tsc-chart-3); }

.tsc-rarity-common { --tsc-rar-c: var(--tsc-text-3); }
.tsc-rarity-uncommon { --tsc-rar-c: var(--tsc-success); }
.tsc-rarity-rare { --tsc-rar-c: var(--tsc-primary); }
.tsc-rarity-epic { --tsc-rar-c: var(--tsc-violet); }
.tsc-rarity-legendary { --tsc-rar-c: var(--tsc-warning); }

/* ==========================================================================
   TradingSystemCard (.tsc-sc)
   ========================================================================== */
.tsc-sc {
    position: relative;
    width: 400px;
    max-width: 100%;
    height: 450px;
    margin: var(--tsc-sp-1);
    perspective: 1000px;
    cursor: pointer;
}

.tsc-sc__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform var(--tsc-dur-slow) var(--tsc-ease);
}

.tsc-sc__front { transform: rotateY(0deg); }
.tsc-sc__back { transform: rotateY(180deg); }
.tsc-sc--flipped .tsc-sc__front { transform: rotateY(-180deg); }
.tsc-sc--flipped .tsc-sc__back { transform: rotateY(0deg); }

.tsc-sc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-rar-c, var(--tsc-border-strong));
    border-radius: var(--tsc-r-md);
}

.tsc-sc__card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--tsc-grad-glow);
    opacity: .6;
}

.tsc-sc__head { padding: var(--tsc-sp-3) var(--tsc-sp-3) var(--tsc-sp-2); }

.tsc-sc__avatar {
    background: var(--tsc-bg-2);
    color: var(--tsc-rar-c, var(--tsc-text-1));
    border: 2px solid var(--tsc-rar-c, var(--tsc-border-strong));
    font-family: var(--tsc-font-mono);
    font-weight: 600;
}

.tsc-sc__eyebrow {
    display: block;
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tsc-text-3);
}

.tsc-sc__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tsc-sp-2);
}

.tsc-sc__title-block { min-width: 0; }

.tsc-sc__name {
    color: var(--tsc-text-1);
    font-size: var(--tsc-fs-16);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsc-sc__actions { display: flex; align-items: center; flex-shrink: 0; }
.tsc-sc__eye { color: var(--tsc-primary); }

.tsc-sc__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tsc-sp-1);
    margin-top: var(--tsc-sp-1);
}

.tsc-sc__fam {
    --tsc-chip-c: var(--tsc-fam-c, var(--tsc-text-2));
    --tsc-chip-line: color-mix(in srgb, var(--tsc-fam-c, var(--tsc-text-2)) 40%, transparent);
    --tsc-chip-bg: color-mix(in srgb, var(--tsc-fam-c, var(--tsc-text-2)) 14%, transparent);
}

.tsc-sc__rarity-chip {
    --tsc-chip-c: var(--tsc-rar-c, var(--tsc-text-2));
    --tsc-chip-line: color-mix(in srgb, var(--tsc-rar-c, var(--tsc-text-2)) 40%, transparent);
    --tsc-chip-bg: color-mix(in srgb, var(--tsc-rar-c, var(--tsc-text-2)) 14%, transparent);
}

.tsc-sc__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--tsc-sp-2) var(--tsc-sp-3);
    overflow: auto;
}

.tsc-sc__skills,
.tsc-sc__perf { display: grid; gap: var(--tsc-sp-1); }

.tsc-sc__skill {
    display: grid;
    grid-template-columns: 132px 30px 1fr;
    align-items: center;
    gap: var(--tsc-sp-2);
}

.tsc-sc__skill-label {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-1);
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--tsc-fs-12);
    color: var(--tsc-text-2);
}

.tsc-sc__skill-label .mud-icon-root { color: var(--tsc-primary); flex-shrink: 0; }

.tsc-sc__skill-num {
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-12);
    font-weight: 600;
    color: var(--tsc-text-1);
    text-align: right;
}

.tsc-sc__achievements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tsc-sp-1);
    margin: var(--tsc-sp-2) 0;
}

.tsc-sc__achievement { font-size: var(--tsc-fs-11); }

.tsc-sc__desc {
    display: block;
    color: var(--tsc-text-2);
    margin-bottom: var(--tsc-sp-2);
}

.tsc-sc__awards {
    padding: var(--tsc-sp-2);
    background: var(--tsc-warning-soft);
    border: 1px solid color-mix(in srgb, var(--tsc-warning) 28%, transparent);
    border-radius: var(--tsc-r-sm);
}

.tsc-sc__awards-head {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-1);
    color: var(--tsc-warning);
}

.tsc-sc__awards-head .tsc-sc__eyebrow { color: var(--tsc-warning); }

.tsc-sc__awards-list { max-height: 120px; overflow-y: auto; margin-top: var(--tsc-sp-1); }

.tsc-sc__award {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-1);
    padding: 2px var(--tsc-sp-1);
    border-radius: var(--tsc-r-sm);
    transition: background var(--tsc-dur-fast) var(--tsc-ease);
}

.tsc-sc__award:hover { background: var(--tsc-bg-3); }
.tsc-sc__award-icon { min-width: 20px; text-align: center; }

.tsc-sc__award-name {
    flex: 1 1 auto;
    font-size: var(--tsc-fs-12);
    font-weight: 600;
    color: var(--tsc-text-1);
}

.tsc-sc__award-value { height: 18px; font-size: var(--tsc-fs-11); }

.tsc-sc__foot {
    justify-content: center;
    padding: var(--tsc-sp-2);
    border-top: 1px solid var(--tsc-border);
}

/* Reverso */
.tsc-sc__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tsc-sp-2);
    margin-bottom: var(--tsc-sp-3);
}

.tsc-sc__kpi {
    --tsc-kpi-c: var(--tsc-text-1);
    display: flex;
    flex-direction: column;
    gap: var(--tsc-sp-1);
    padding: var(--tsc-sp-2);
    background: var(--tsc-bg-2);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
}

.tsc-sc__kpi--up { --tsc-kpi-c: var(--tsc-success); }
.tsc-sc__kpi--down { --tsc-kpi-c: var(--tsc-error); }
.tsc-sc__kpi--neutral { --tsc-kpi-c: var(--tsc-text-1); }

.tsc-sc__kpi-label {
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tsc-text-3);
    line-height: 1.2;
}

.tsc-sc__kpi-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-16);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tsc-kpi-c);
}

.tsc-sc__perf { margin-bottom: var(--tsc-sp-3); }

.tsc-sc__tech {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tsc-fs-12);
}

.tsc-sc__tech th {
    text-align: left;
    font-weight: 500;
    color: var(--tsc-text-2);
    padding: 3px 0;
}

.tsc-sc__tech td {
    text-align: right;
    font-family: var(--tsc-font-mono);
    color: var(--tsc-text-1);
    padding: 3px 0;
}

.tsc-sc__tech tr + tr { border-top: 1px solid var(--tsc-border); }

@media (max-width: 768px) {
    .tsc-sc__skill { grid-template-columns: 112px 28px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .tsc-sc__face { transition-duration: 0ms; }
}

/* Trading-System-Thumbnail */
.tsc-thumb { position: relative; z-index: 1; }
.tsc-thumb__wrap { position: relative; }
.tsc-thumb__img {
    border: 1px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-sm);
    transition: transform var(--tsc-dur-base) var(--tsc-ease);
}
.tsc-thumb__img:hover { transform: scale(1.05); }
.tsc-thumb__ph { color: var(--tsc-text-3); }
.tsc-thumb__popup {
    position: fixed;
    z-index: 1400;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tsc-dur-base) var(--tsc-ease);
    border: 1px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-md);
    box-shadow: var(--tsc-shadow-2);
}
.tsc-thumb__popup.tsc-thumb__popup--show { opacity: 1; }
.tsc-thumb__paper {
    padding: var(--tsc-sp-2);
    background: var(--tsc-bg-1);
    border-radius: var(--tsc-r-md);
}

/* Trading-System-Graphics-Button / Graphics */
.tsc-gbtn {
    position: relative;
    z-index: 1;
    display: inline-block;
    cursor: pointer;
    transition: opacity var(--tsc-dur-fast) var(--tsc-ease);
}
.tsc-gbtn:hover { opacity: .8; }
.tsc-gbtn:focus-visible { outline: 2px solid var(--tsc-primary); outline-offset: 2px; }
.tsc-gbtn__img {
    cursor: pointer;
    border: 1px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-sm);
    transition: transform var(--tsc-dur-base) var(--tsc-ease);
}
.tsc-gbtn__img:hover { transform: scale(1.05); }
.tsc-gbtn__ph { color: var(--tsc-text-3); }
.tsc-gfx .mud-image { border-radius: var(--tsc-r-md); }

/* ==========================================================================
   Diálogos (prefijo .tsc-dlg)
   ========================================================================== */
.tsc-dlg__eyebrow {
    display: block;
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tsc-text-3);
}
.tsc-dlg { width: 100%; }
.tsc-dlg--narrow { max-width: 400px; }
.tsc-dlg--medium { max-width: 500px; }
.tsc-dlg--scroll { max-height: 400px; overflow-y: auto; }
.tsc-dlg__ellipsis {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tsc-text-2);
}
.tsc-dlg__muted { color: var(--tsc-text-3); }
.tsc-dlg__summary { padding: var(--tsc-sp-4); }
.tsc-dlg__price { color: var(--tsc-success); font-family: var(--tsc-font-mono); }
.tsc-dlg__warn { color: var(--tsc-warning); }
.tsc-dlg__mono input { font-family: var(--tsc-font-mono); }

/* Epub: diálogo y CTA (tono warn/info mediante --tsc-epub-c) */
.tsc-epub, .tsc-epub-cta { --tsc-epub-c: var(--tsc-warning); }
.tsc-epub--info, .tsc-epub-cta--info { --tsc-epub-c: var(--tsc-info); }
.tsc-epub__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: linear-gradient(135deg, var(--tsc-bg-0) 0%, color-mix(in srgb, var(--tsc-epub-c) 18%, var(--tsc-bg-1)) 50%, var(--tsc-bg-0) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--tsc-epub-c) 40%, transparent);
}
.tsc-epub__body { padding: var(--tsc-sp-4); text-align: center; }
.tsc-epub__icon, .tsc-epub-cta__icon { color: var(--tsc-epub-c); font-size: 2.5rem; width: 1em; height: 1em; }
.tsc-epub__title { margin: 0; font-size: var(--tsc-fs-20); font-weight: 700; color: var(--tsc-epub-c); }
.tsc-epub__subtitle { color: var(--tsc-text-1); }
.tsc-epub__desc { margin-top: var(--tsc-sp-2); color: var(--tsc-text-2); }
.tsc-epub__close { position: absolute; top: var(--tsc-sp-2); right: var(--tsc-sp-2); color: var(--tsc-text-2); }
.tsc-epub-cta {
    background: linear-gradient(135deg, var(--tsc-bg-0) 0%, color-mix(in srgb, var(--tsc-epub-c) 14%, var(--tsc-bg-1)) 50%, var(--tsc-bg-0) 100%);
    border: 1px solid color-mix(in srgb, var(--tsc-epub-c) 45%, transparent);
}
.tsc-epub-cta__title { color: var(--tsc-epub-c); font-weight: 700; }
.tsc-epub-cta__text { color: var(--tsc-text-1); }
.tsc-epub-cta__hint { color: var(--tsc-text-3); }

/* DownloadManualButton */
@media print { .tsc-manual-btn { display: none; } }
.tsc-epub--sub { --tsc-epub-c: var(--tsc-primary); }
.tsc-dlg--scroll-lg { max-height: 600px; overflow-y: auto; }
.tsc-dlg__panel { background: var(--tsc-bg-2); }
.tsc-dlg__panel--ok { background: var(--tsc-success-soft); border-color: color-mix(in srgb, var(--tsc-success) 28%, transparent); }

/* ==========================================================================
   EficientPortfolioDialog (.tsc-effp)
   ========================================================================== */
.tsc-effp { max-height: 85vh; }

.tsc-effp__panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    background: var(--tsc-grad-hero);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    color: var(--tsc-text-1);
}

.tsc-effp__confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.tsc-effp__piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    opacity: .7;
    animation: tsc-effp-fall 3s linear infinite;
}

.tsc-effp__piece--0 { background: var(--tsc-chart-1); transform: rotate(45deg); }
.tsc-effp__piece--1 { background: var(--tsc-chart-2); transform: rotate(90deg); }
.tsc-effp__piece--2 { background: var(--tsc-chart-3); transform: rotate(135deg); }
.tsc-effp__piece--3 { background: var(--tsc-chart-5); transform: rotate(180deg); }
.tsc-effp__piece--4 { background: var(--tsc-chart-6); transform: rotate(225deg); }
.tsc-effp__piece--5 { background: var(--tsc-chart-4); transform: rotate(270deg); }

@keyframes tsc-effp-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.tsc-effp__main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tsc-sp-6);
    align-items: start;
    padding: var(--tsc-sp-5) var(--tsc-sp-6);
}

.tsc-effp__left { display: flex; flex-direction: column; gap: var(--tsc-sp-5); }
.tsc-effp__right { display: flex; flex-direction: column; justify-content: center; }

.tsc-effp__header { text-align: center; padding: var(--tsc-sp-3) 0; }
.tsc-effp__trophy-wrap { margin-bottom: var(--tsc-sp-2); animation: tsc-effp-bounce 2s ease-in-out infinite; }
.tsc-effp__trophy { color: var(--tsc-warning); width: 3.5rem; height: 3.5rem; font-size: 3.5rem; }

@keyframes tsc-effp-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.03); }
}

.tsc-effp__title { margin: 0; line-height: 1.1; }

.tsc-effp__title-line {
    display: block;
    margin-bottom: var(--tsc-sp-1);
    font-size: var(--tsc-fs-12);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tsc-primary);
}

.tsc-effp__title-hl {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    background: var(--tsc-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tsc-primary);
}

.tsc-effp__motivation { display: flex; flex-direction: column; gap: var(--tsc-sp-2); }

.tsc-effp__mcard {
    --tsc-mc: var(--tsc-primary);
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-3);
    padding: var(--tsc-sp-3) var(--tsc-sp-4);
    font-size: var(--tsc-fs-14);
    font-weight: 600;
    color: var(--tsc-text-1);
    background: var(--tsc-bg-1);
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-mc);
    border-radius: var(--tsc-r-sm);
    opacity: 0;
    transform: translateX(-24px);
    animation: tsc-effp-slide-in var(--tsc-dur-slow) var(--tsc-ease) forwards;
}

.tsc-effp__mcard--ok { --tsc-mc: var(--tsc-success); animation-delay: .2s; }
.tsc-effp__mcard--info { --tsc-mc: var(--tsc-info); animation-delay: .4s; }
.tsc-effp__mcard--violet { --tsc-mc: var(--tsc-violet); animation-delay: .6s; }
.tsc-effp__mcard-icon { color: var(--tsc-mc); flex-shrink: 0; }

@keyframes tsc-effp-slide-in {
    to { opacity: 1; transform: translateX(0); }
}

.tsc-effp__chart-section { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.tsc-effp__chart-title {
    margin: 0 0 var(--tsc-sp-3);
    text-align: center;
    font-size: var(--tsc-fs-18);
    font-weight: 600;
    color: var(--tsc-text-1);
}

.tsc-effp__chart {
    position: relative;
    padding: var(--tsc-sp-4);
    background: var(--tsc-bg-1);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
}

.tsc-effp__axis {
    position: absolute;
    font-size: var(--tsc-fs-12);
    font-weight: 500;
    color: var(--tsc-text-2);
}

.tsc-effp__axis--y { left: 10px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.tsc-effp__axis--x { bottom: 10px; left: 50%; transform: translateX(-50%); }

.tsc-effp__chart-area { position: relative; height: 220px; margin: 25px 15px 25px 35px; }
.tsc-effp__svg { width: 100%; height: 100%; }

.tsc-effp__stop--a { stop-color: var(--tsc-chart-1); stop-opacity: .8; }
.tsc-effp__stop--b { stop-color: var(--tsc-chart-3); stop-opacity: .9; }
.tsc-effp__stop--c { stop-color: var(--tsc-chart-2); stop-opacity: 1; }

.tsc-effp__curve {
    fill: none;
    stroke: url(#frontierGradient);
    stroke-width: 4;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: tsc-effp-draw 2s ease-in-out forwards;
}

@keyframes tsc-effp-draw { to { stroke-dashoffset: 0; } }

.tsc-effp__subopt {
    fill: var(--tsc-chart-5);
    opacity: 0;
    animation: tsc-effp-fade-points .5s ease-in-out 2.5s forwards;
}

@keyframes tsc-effp-fade-points { to { opacity: .6; } }

.tsc-effp__you {
    fill: var(--tsc-error);
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: tsc-effp-pulse 1s ease-in-out 3s infinite, tsc-effp-appear .8s ease-in-out 3s forwards;
}

.tsc-effp__ring {
    fill: none;
    stroke: var(--tsc-error);
    stroke-width: 2;
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: tsc-effp-ring 2s ease-in-out .5s infinite, tsc-effp-appear .8s ease-in-out 3s forwards;
}

@keyframes tsc-effp-appear { to { opacity: 1; } }
@keyframes tsc-effp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes tsc-effp-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.tsc-effp__metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tsc-sp-3);
    padding: 0 var(--tsc-sp-6) var(--tsc-sp-5);
}

.tsc-effp__metric {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-2);
    padding: var(--tsc-sp-3);
    background: var(--tsc-bg-1);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
    opacity: 0;
    transform: translateY(16px);
    animation: tsc-effp-up var(--tsc-dur-slow) var(--tsc-ease) forwards;
}

.tsc-effp__metric:nth-child(1) { animation-delay: 4s; }
.tsc-effp__metric:nth-child(2) { animation-delay: 4.2s; }
.tsc-effp__metric:nth-child(3) { animation-delay: 4.4s; }

@keyframes tsc-effp-up { to { opacity: 1; transform: translateY(0); } }

.tsc-effp__metric-icon { color: var(--tsc-primary); flex-shrink: 0; }
.tsc-effp__metric-content { display: flex; flex-direction: column; gap: 2px; }
.tsc-effp__metric-label { font-size: var(--tsc-fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tsc-text-3); }
.tsc-effp__metric-value { font-family: var(--tsc-font-mono); font-size: var(--tsc-fs-16); font-weight: 600; color: var(--tsc-text-1); }

.tsc-effp__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tsc-sp-3);
    padding: var(--tsc-sp-3) var(--tsc-sp-5);
}

.tsc-effp__btn { transition: transform var(--tsc-dur-fast) var(--tsc-ease); }
.tsc-effp__btn:hover { transform: translateY(-1px); }

@media (max-width: 1024px) {
    .tsc-effp__main { grid-template-columns: 1fr; gap: var(--tsc-sp-4); }
    .tsc-effp__right { order: -1; }
    .tsc-effp__chart-area { height: 200px; }
}

@media (max-width: 768px) {
    .tsc-effp__main { padding: var(--tsc-sp-4); gap: var(--tsc-sp-3); }
    .tsc-effp__metrics { grid-template-columns: 1fr; padding: 0 var(--tsc-sp-4) var(--tsc-sp-4); gap: var(--tsc-sp-2); }
    .tsc-effp__title-hl { font-size: 1.6rem; }
    .tsc-effp__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .tsc-effp__piece { display: none; }
    .tsc-effp__mcard,
    .tsc-effp__metric,
    .tsc-effp__subopt,
    .tsc-effp__you,
    .tsc-effp__ring { opacity: 1; transform: none; animation: none; }
    .tsc-effp__curve { stroke-dashoffset: 0; animation: none; }
}

/* SocialShare */
.tsc-share { gap: var(--tsc-sp-2); flex-wrap: wrap; }
.tsc-share__icon { color: var(--tsc-info); }
.tsc-share--compact .mud-button { min-width: 40px; padding: 6px 10px; }
.tsc-share .mud-button { text-transform: none; }
.tsc-share__svg { display: inline-block; width: 18px; height: 18px; }
.tsc-share__btn { --tsc-share-c: var(--tsc-text-1); transition: background-color var(--tsc-dur-fast) var(--tsc-ease), transform var(--tsc-dur-fast) var(--tsc-ease); }
.tsc-share__btn--twitter { --tsc-share-c: var(--tsc-text-1); }
.tsc-share__btn--linkedin { --tsc-share-c: var(--tsc-info); }
.tsc-share__btn--facebook { --tsc-share-c: var(--tsc-chart-3); }
.tsc-share__btn--whatsapp { --tsc-share-c: var(--tsc-success); }
.tsc-share__btn.mud-button-filled {
    background-color: color-mix(in srgb, var(--tsc-share-c) 16%, var(--tsc-bg-2));
    color: var(--tsc-share-c);
    border: 1px solid color-mix(in srgb, var(--tsc-share-c) 40%, transparent);
    box-shadow: none;
}
.tsc-share__btn.mud-button-filled:hover { background-color: color-mix(in srgb, var(--tsc-share-c) 28%, var(--tsc-bg-2)); transform: translateY(-1px); }
.tsc-share__btn.mud-button-outlined:hover { transform: translateY(-1px); }

/* ToolsMenu */
.tsc-tools { margin-bottom: var(--tsc-sp-5); padding: var(--tsc-sp-3) var(--tsc-sp-4); background: var(--tsc-bg-1); }
.tsc-tools__content { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--tsc-sp-5); }
.tsc-tools__title {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-3);
    font-size: var(--tsc-fs-12);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tsc-text-3);
}
.tsc-tools__title .mud-icon-root { color: var(--tsc-primary); }
.tsc-tools__buttons { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--tsc-sp-3); }
.tsc-tools__btn { transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-fast) var(--tsc-ease); }
.tsc-tools__btn:hover { transform: translateY(-2px); box-shadow: var(--tsc-shadow-glow); }
.tsc-tools__label { font-weight: 500; }
@media (max-width: 960px) {
    .tsc-tools { padding: var(--tsc-sp-2) var(--tsc-sp-3); }
    .tsc-tools__content { flex-direction: column; gap: var(--tsc-sp-3); }
    .tsc-tools__title { justify-content: center; }
    .tsc-tools__buttons { gap: var(--tsc-sp-2); flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .tsc-tools__buttons { justify-content: center; gap: var(--tsc-sp-1); }
    .tsc-tools__btn { flex: 1 1 auto; min-width: 120px; }
}

/* DateRangeFilter */
.tsc-range { border-radius: var(--tsc-r-sm); overflow: hidden; }
.tsc-range__btn { opacity: .85; }
.tsc-range__btn--active { opacity: 1; background: var(--tsc-primary-soft); color: var(--tsc-primary); text-decoration: underline; }
.tsc-range__note { color: var(--tsc-text-2); }

/* ProfitAndLossAttributionsPart */
.tsc-pnl__panel { background: var(--tsc-bg-1); }
.tsc-pnl .mud-chart { color: var(--tsc-text-2); }

/* ==========================================================================
   MonthlyBreakdownPart (.tsc-mb): mapa de calor success -> bg -> error
   ========================================================================== */
.tsc-mb { background: var(--tsc-bg-1); }
.tsc-mb__title { font-size: var(--tsc-fs-14); font-weight: 600; }
.tsc-mb__range { color: var(--tsc-text-3); }

.tsc-mb__box {
    --cell-w: 62px;
    --year-w: 60px;
    --ytd-w: 70px;
    --cell-min-h: 24px;
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-12);
    line-height: 1.1;
    background: var(--tsc-bg-1);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    overflow: hidden;
}

.tsc-mb__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; }

.tsc-mb__grid {
    display: grid;
    grid-template-columns: var(--year-w) repeat(12, var(--cell-w)) var(--ytd-w);
    width: max-content;
}

.tsc-mb__head { position: sticky; top: 0; z-index: 5; }

.tsc-mb__year,
.tsc-mb__month,
.tsc-mb__ytd {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cell-min-h);
    padding: 3px 6px;
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
    border-right: 1px solid var(--tsc-border);
    border-bottom: 1px solid var(--tsc-border);
    white-space: nowrap;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tsc-mb__grid > :last-child { border-right: none; }

.tsc-mb__hcell {
    background: var(--tsc-bg-2);
    color: var(--tsc-text-2);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tsc-mb__row:nth-child(odd) .tsc-mb__year { background: var(--tsc-bg-2); }
.tsc-mb__row:nth-child(even) .tsc-mb__year { background: var(--tsc-bg-3); }

.tsc-mb__year {
    position: sticky;
    left: 0;
    z-index: 3;
    color: var(--tsc-text-1);
    font-weight: 700;
}

.tsc-mb__head .tsc-mb__year { background: var(--tsc-bg-2); }

.tsc-mb__ytd { font-weight: 700; }
.tsc-mb__ytd.tsc-mb__ytd--up { background: var(--tsc-success-soft); color: var(--tsc-success); }
.tsc-mb__ytd.tsc-mb__ytd--down { background: var(--tsc-error-soft); color: var(--tsc-error); }

.tsc-mb__month.tsc-mb__w1 { color: var(--tsc-success); }
.tsc-mb__month.tsc-mb__w2 { background: color-mix(in srgb, var(--tsc-success) 22%, var(--tsc-bg-1)); color: var(--tsc-text-1); font-weight: 600; }
.tsc-mb__month.tsc-mb__w3 { background: color-mix(in srgb, var(--tsc-success) 55%, var(--tsc-bg-1)); color: var(--tsc-text-1); font-weight: 700; }
.tsc-mb__month.tsc-mb__l1 { color: var(--tsc-error); }
.tsc-mb__month.tsc-mb__l2 { background: color-mix(in srgb, var(--tsc-error) 22%, var(--tsc-bg-1)); color: var(--tsc-text-1); font-weight: 600; }
.tsc-mb__month.tsc-mb__l3 { background: color-mix(in srgb, var(--tsc-error) 55%, var(--tsc-bg-1)); color: var(--tsc-text-1); font-weight: 700; }

.tsc-mb__month.tsc-mb__empty { background: var(--tsc-bg-0); color: var(--tsc-text-3); }
.tsc-mb__empty::after { content: "—"; opacity: .5; }

@media (max-width: 992px) {
    .tsc-mb__box { --cell-w: 56px; --year-w: 56px; --ytd-w: 64px; --cell-min-h: 22px; }
}
@media (max-width: 768px) {
    .tsc-mb__box { --cell-w: 50px; --year-w: 52px; --ytd-w: 58px; --cell-min-h: 22px; }
    .tsc-mb__year, .tsc-mb__month, .tsc-mb__ytd { padding: 2px 4px; }
}
@media (max-width: 420px) {
    .tsc-mb__box { --cell-w: 46px; --year-w: 48px; --ytd-w: 54px; }
}

/* ==========================================================================
   CorrelationsMatrixPanel (.tsc-corr): escala divergente por tokens
   ========================================================================== */
.tsc-corr { background: transparent; }
.tsc-corr__info { color: var(--tsc-text-3); }
.tsc-corr__matrix { border-collapse: collapse; width: auto; margin: 0; font-size: var(--tsc-fs-12); font-family: var(--tsc-font-mono); }
.tsc-corr__matrix th,
.tsc-corr__matrix td {
    min-width: 32px;
    height: 28px;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid var(--tsc-border);
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tsc-corr__matrix thead th { vertical-align: bottom; width: 32px; background: var(--tsc-bg-2); color: var(--tsc-text-1); font-weight: 600; }
.tsc-corr__matrix thead th:nth-child(even) { background: var(--tsc-bg-3); }
.tsc-corr__matrix thead th:first-child { background: var(--tsc-bg-1); }
.tsc-corr__matrix td.tsc-corr__rowhead { background: var(--tsc-bg-2); color: var(--tsc-text-1); font-weight: 600; padding: 0 var(--tsc-sp-1); }
.tsc-corr__matrix tbody tr:nth-child(even) td.tsc-corr__rowhead { background: var(--tsc-bg-3); }
.tsc-corr__vhead { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); white-space: nowrap; padding: 2px 0; }

.tsc-corr__cell { color: var(--tsc-text-1); }
.tsc-corr__cell.tsc-corr--p3 { background: color-mix(in srgb, var(--tsc-error) 60%, var(--tsc-bg-1)); }
.tsc-corr__cell.tsc-corr--p2 { background: color-mix(in srgb, var(--tsc-warning) 45%, var(--tsc-bg-1)); }
.tsc-corr__cell.tsc-corr--p1 { background: color-mix(in srgb, var(--tsc-warning) 22%, var(--tsc-bg-1)); }
.tsc-corr__cell.tsc-corr--zero { background: var(--tsc-bg-2); }
.tsc-corr__cell.tsc-corr--n1 { background: color-mix(in srgb, var(--tsc-info) 22%, var(--tsc-bg-1)); }
.tsc-corr__cell.tsc-corr--n2 { background: color-mix(in srgb, var(--tsc-info) 45%, var(--tsc-bg-1)); }
.tsc-corr__cell.tsc-corr--n3 { background: color-mix(in srgb, var(--tsc-info) 65%, var(--tsc-bg-1)); }

/* ==========================================================================
   DiversificationByAlphasPart (.tsc-div)
   ========================================================================== */
.tsc-div { background: var(--tsc-bg-1); }
.tsc-div__title { font-weight: 700; color: var(--tsc-primary); }
.tsc-div__subtitle { font-weight: 700; color: var(--tsc-primary); }
.tsc-div__muted { color: var(--tsc-text-2); }
.tsc-div__chart {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    background: var(--tsc-bg-0);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
}
.tsc-div__svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tsc-div__grid { fill: none; stroke: var(--tsc-border); stroke-width: 1; opacity: .5; }
.tsc-div__plot { fill: var(--tsc-bg-1); stroke: var(--tsc-border); stroke-width: 1; }
.tsc-div__axis { stroke: var(--tsc-text-2); stroke-width: 2; }
.tsc-div__tick { stroke: var(--tsc-text-3); stroke-width: 1; }
.tsc-div__tick-text { fill: var(--tsc-text-2); font-family: var(--tsc-font-mono); }
.tsc-div__axis-title { fill: var(--tsc-text-1); }
.tsc-div__curve { fill: none; stroke: var(--tsc-curve-c); stroke-width: 3; opacity: .9; }
.tsc-div__curve-label { fill: var(--tsc-curve-c); }
.tsc-div__c0 { --tsc-curve-c: var(--tsc-chart-7); }
.tsc-div__c1 { --tsc-curve-c: var(--tsc-chart-2); }
.tsc-div__c2 { --tsc-curve-c: var(--tsc-chart-5); }
.tsc-div__c3 { --tsc-curve-c: var(--tsc-warning); }
.tsc-div__c4 { --tsc-curve-c: var(--tsc-error); }
.tsc-div__guide { stroke: var(--tsc-error); stroke-width: 2; stroke-dasharray: 5 5; opacity: .7; }
.tsc-div__you { fill: var(--tsc-error); stroke: var(--tsc-bg-1); stroke-width: 3; }
.tsc-div__you-tag { fill: var(--tsc-error); opacity: .92; }
.tsc-div__you-text { fill: var(--tsc-bg-0); }
.tsc-div__pop { max-width: 360px; }
.tsc-div__stat-title { font-weight: 600; color: var(--tsc-primary); }
.tsc-div__stat--ok { border-left: 3px solid var(--tsc-success); }
.tsc-div__stat-title--ok { color: var(--tsc-success); }
.tsc-div__risk-active { background-color: var(--tsc-error-soft); }
.tsc-div__risk-active td { color: var(--tsc-error); font-weight: 700; }

/* ==========================================================================
   IgnitionPart (.tsc-ign): hero de ignición con tokens
   ========================================================================== */
.tsc-ign {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 340px;
    padding: clamp(20px, 4vw, 36px);
    background: var(--tsc-grad-hero);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    box-shadow: var(--tsc-shadow-2);
    color: var(--tsc-text-1);
}

.tsc-ign__bg { position: absolute; inset: 0; z-index: 0; }

.tsc-ign__veil {
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 180deg at 50% 50%, color-mix(in srgb, var(--tsc-primary) 14%, transparent), color-mix(in srgb, var(--tsc-violet) 10%, transparent), color-mix(in srgb, var(--tsc-accent) 12%, transparent), color-mix(in srgb, var(--tsc-primary) 14%, transparent));
    filter: blur(40px);
    opacity: .7;
    animation: tsc-ign-spin 30s linear infinite;
}

.tsc-ign__particles {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, var(--tsc-text-2), transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 80%, var(--tsc-text-2), transparent 60%),
        radial-gradient(2px 2px at 40% 60%, var(--tsc-text-3), transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 25%, var(--tsc-text-3), transparent 60%);
    opacity: .5;
    animation: tsc-ign-drift 60s linear infinite;
}

.tsc-ign__scan {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(transparent 96%, color-mix(in srgb, var(--tsc-primary) 14%, transparent) 100%),
        linear-gradient(90deg, transparent 96%, color-mix(in srgb, var(--tsc-primary) 14%, transparent) 100%);
    background-size: 100% 22px, 22px 100%;
    mask: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    opacity: .35;
    animation: tsc-ign-scan 6s ease-in-out infinite;
}

@keyframes tsc-ign-spin { to { transform: rotate(360deg); } }
@keyframes tsc-ign-drift { from { transform: translateY(0); } to { transform: translateY(-400px); } }
@keyframes tsc-ign-scan { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }

.tsc-ign__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
}

.tsc-ign__title { margin: 0 0 var(--tsc-sp-3); line-height: 1.15; font-weight: 700; color: var(--tsc-text-1); }
.tsc-ign__pre { display: block; font-size: var(--tsc-fs-12); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tsc-text-3); }
.tsc-ign__hl {
    display: block;
    font-size: clamp(22px, 3vw, 36px);
    background: var(--tsc-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tsc-primary);
}
.tsc-ign__post { display: block; font-size: clamp(16px, 2vw, 20px); color: var(--tsc-text-2); font-weight: 500; }

.tsc-ign__phrases { display: grid; gap: var(--tsc-sp-2); margin: var(--tsc-sp-3) 0 var(--tsc-sp-4); }

.tsc-ign__pill {
    --tsc-pill-c: var(--tsc-success);
    display: inline-flex;
    align-items: center;
    gap: var(--tsc-sp-2);
    width: fit-content;
    max-width: 100%;
    padding: var(--tsc-sp-2) var(--tsc-sp-3);
    font-size: var(--tsc-fs-14);
    font-weight: 600;
    color: var(--tsc-text-1);
    background: color-mix(in srgb, var(--tsc-pill-c) 14%, var(--tsc-bg-1));
    border: 1px solid color-mix(in srgb, var(--tsc-pill-c) 35%, transparent);
    border-radius: var(--tsc-r-pill);
}
.tsc-ign__pill--ok { --tsc-pill-c: var(--tsc-success); }
.tsc-ign__pill--info { --tsc-pill-c: var(--tsc-info); }
.tsc-ign__pill--warn { --tsc-pill-c: var(--tsc-warning); }

.tsc-ign__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--tsc-r-pill);
    background: var(--tsc-pill-c);
    animation: tsc-ign-pulse 2.2s ease-in-out infinite;
}
@keyframes tsc-ign-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.tsc-ign__btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--tsc-sp-3) var(--tsc-sp-5);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    color: var(--tsc-on-accent);
    background: var(--tsc-accent);
    border: none;
    border-radius: var(--tsc-r-sm);
    box-shadow: var(--tsc-shadow-glow);
    transition: transform var(--tsc-dur-fast) var(--tsc-ease), filter var(--tsc-dur-fast) var(--tsc-ease);
}
.tsc-ign__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tsc-ign__btn:active { transform: translateY(0); }
.tsc-ign__btn:focus-visible { outline: 2px solid var(--tsc-primary); outline-offset: 2px; }
.tsc-ign__btn:disabled { cursor: wait; opacity: .8; }
.tsc-ign__btn-text { font-weight: 700; font-size: clamp(14px, 2vw, 18px); }
.tsc-ign__btn-sub { font-size: var(--tsc-fs-12); opacity: .85; }
.tsc-ign__shine { display: none; }

.tsc-ign__tip { margin-top: var(--tsc-sp-2); font-size: var(--tsc-fs-12); color: var(--tsc-text-2); }

.tsc-ign__right { display: grid; place-items: center; min-height: 220px; }

.tsc-ign__rocket {
    display: grid;
    place-items: center;
    width: clamp(120px, 24vw, 220px);
    height: clamp(120px, 24vw, 220px);
    cursor: pointer;
    filter: drop-shadow(0 14px 26px var(--tsc-primary-soft));
}
.tsc-ign__rocket-icon {
    width: clamp(90px, 16vw, 160px);
    height: clamp(90px, 16vw, 160px);
    font-size: clamp(90px, 16vw, 160px);
    color: var(--tsc-primary);
    transform-origin: center;
}
.tsc-ign__rocket--shake { animation: tsc-ign-shake .6s infinite; }
.tsc-ign__rocket--lift { animation: tsc-ign-lift 1.1s ease-in forwards; }
@keyframes tsc-ign-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(1px, -1px) rotate(-.8deg); }
    40% { transform: translate(-1px, 1px) rotate(.8deg); }
    60% { transform: translate(1px, 1px) rotate(-.6deg); }
    80% { transform: translate(-1px, -1px) rotate(.6deg); }
}
@keyframes tsc-ign-lift { 0% { transform: translateY(0); } 40% { transform: translateY(-8px); } 100% { transform: translateY(-40px); } }

.tsc-ign__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tsc-bg-0) 60%, transparent), color-mix(in srgb, var(--tsc-bg-0) 85%, transparent));
    backdrop-filter: blur(2px);
}
.tsc-ign__count {
    font-family: var(--tsc-font-mono);
    font-weight: 700;
    font-size: clamp(64px, 14vw, 180px);
    color: var(--tsc-text-1);
    letter-spacing: 2px;
    animation: tsc-ign-pop .8s ease-out both;
    will-change: transform, opacity;
}
@keyframes tsc-ign-pop {
    0% { opacity: 0; transform: scale(.6); }
    65% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
.tsc-ign__go {
    font-weight: 700;
    font-size: clamp(42px, 10vw, 120px);
    line-height: .9;
    letter-spacing: 1px;
    background: var(--tsc-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tsc-accent);
    animation: tsc-ign-go 1s ease-in-out;
}
@keyframes tsc-ign-go {
    0% { opacity: 0; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1.02); }
}

.tsc-ign__smokefloor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 44%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease-in;
    mask: linear-gradient(to top, black 65%, transparent 100%);
}
.tsc-ign__smokefloor--on { opacity: .9; }
.tsc-ign__smoke {
    position: absolute;
    bottom: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tsc-text-2) 55%, transparent), color-mix(in srgb, var(--tsc-text-2) 30%, transparent) 55%, transparent 70%);
    filter: blur(2px);
    opacity: .75;
    animation: tsc-ign-smoke 3.6s ease-in infinite;
}
.tsc-ign__smoke--1 { left: 6%; animation-delay: 0s; }
.tsc-ign__smoke--2 { left: 18%; animation-delay: .4s; }
.tsc-ign__smoke--3 { left: 30%; animation-delay: .8s; }
.tsc-ign__smoke--4 { left: 42%; animation-delay: .2s; }
.tsc-ign__smoke--5 { left: 54%; animation-delay: .6s; }
.tsc-ign__smoke--6 { left: 66%; animation-delay: 1s; }
.tsc-ign__smoke--7 { left: 78%; animation-delay: .3s; }
.tsc-ign__smoke--8 { left: 88%; animation-delay: .7s; }
@keyframes tsc-ign-smoke {
    0% { transform: translateY(0) scale(.9); opacity: .75; }
    60% { transform: translateY(-60px) scale(1.15); opacity: .45; }
    100% { transform: translateY(-100px) scale(1.35); opacity: 0; }
}

.tsc-ign__fire {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 28%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease-out;
}
.tsc-ign__fire--on { opacity: 1; }
.tsc-ign__flame {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 60% at 50% 100%, var(--tsc-warning) 0%, color-mix(in srgb, var(--tsc-warning) 70%, var(--tsc-error)) 35%, var(--tsc-error) 60%, transparent 85%);
    mix-blend-mode: screen;
    filter: blur(1px);
    mask: linear-gradient(to top, black 70%, transparent 100%);
    animation: tsc-ign-flame .42s ease-in-out infinite;
}
@keyframes tsc-ign-flame { 0%, 100% { opacity: .95; transform: scaleY(1); } 50% { opacity: .85; transform: scaleY(1.06); } }
.tsc-ign__heat {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to top, color-mix(in srgb, var(--tsc-warning) 20%, transparent) 0 4px, color-mix(in srgb, var(--tsc-error) 10%, transparent) 4px 8px, transparent 8px 12px);
    mix-blend-mode: screen;
    mask: linear-gradient(to top, black 70%, transparent 100%);
    animation: tsc-ign-heat 1.2s linear infinite;
}
@keyframes tsc-ign-heat { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.tsc-ign__sparks {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 15% 95%, var(--tsc-warning), transparent 60%),
        radial-gradient(2px 2px at 35% 98%, var(--tsc-warning), transparent 60%),
        radial-gradient(2px 2px at 60% 96%, var(--tsc-warning), transparent 60%),
        radial-gradient(2px 2px at 82% 97%, var(--tsc-warning), transparent 60%);
    opacity: .8;
    mask: linear-gradient(to top, black 68%, transparent 100%);
    animation: tsc-ign-spark 1.4s ease-in-out infinite;
}
@keyframes tsc-ign-spark { 0% { transform: translateY(0); opacity: .9; } 60% { transform: translateY(-10px); opacity: .7; } 100% { transform: translateY(-18px); opacity: .5; } }

@media (max-width: 900px) {
    .tsc-ign__content { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tsc-ign__veil, .tsc-ign__particles, .tsc-ign__scan, .tsc-ign__dot, .tsc-ign__flame, .tsc-ign__heat, .tsc-ign__sparks, .tsc-ign__smoke { animation: none; }
}

/* SimilarTemplatesPart (.tsc-sim): acento de familia por tokens */
.tsc-sim__loading { height: 160px; }
.tsc-sim__card {
    min-height: 110px;
    padding: var(--tsc-sp-3) var(--tsc-sp-4);
    cursor: pointer;
    border-left: 3px solid var(--tsc-fam-c, var(--tsc-primary));
}
.tsc-sim__icon { color: var(--tsc-fam-c, var(--tsc-primary)); }
.tsc-sim__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tsc-text-1); }
.tsc-sim__card .flex-grow-1 { min-width: 0; }
.tsc-sim__meta { color: var(--tsc-text-2); }
.tsc-sim__chip { margin-top: var(--tsc-sp-1); margin-right: var(--tsc-sp-1); font-family: var(--tsc-font-mono); }
.tsc-sim__all { text-transform: none; font-weight: 500; }

/* TemplateCloneButtonPart (.tsc-clone): CTA lima del tema */
.tsc-clone { text-transform: none; letter-spacing: .2px; }
.tsc-clone:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--tsc-shadow-glow); }
.tsc-clone:disabled { cursor: not-allowed; }
.tsc-clone__icon { margin-right: var(--tsc-sp-1); font-size: 18px; }
.tsc-clone__text { font-size: var(--tsc-fs-14); font-weight: 600; }

/* MergePorfolioTemplateToCustomPortfolioPart (.tsc-merge) */
.tsc-merge { text-transform: none; transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-fast) var(--tsc-ease); }
.tsc-merge:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--tsc-shadow-glow); }
.tsc-merge:disabled { cursor: not-allowed; }
.tsc-merge__dlg { max-width: 720px; }
.tsc-merge__opt { width: 100%; }
.tsc-merge__warn { color: var(--tsc-error); font-weight: 600; font-size: var(--tsc-fs-12); }
.tsc-merge__preview .mud-table-container { max-height: 300px; overflow: auto; }

/* AddTradingSystemToCustomPortfolioPart (.tsc-addsys) */
.tsc-addsys { transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-fast) var(--tsc-ease); }
.tsc-addsys:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--tsc-shadow-glow); }
.tsc-addsys--loading { opacity: .85; }

/* PortfolioHeaderPanel (.tsc-php) */
.tsc-php { background: var(--tsc-bg-1); overflow: hidden; }
.tsc-php__header {
    padding: var(--tsc-sp-2) var(--tsc-sp-4);
    background: var(--tsc-grad-appbar);
    color: var(--tsc-text-1);
    border-radius: var(--tsc-r-sm);
    transition: box-shadow var(--tsc-dur-base) var(--tsc-ease);
}
.tsc-php__header:hover { box-shadow: var(--tsc-shadow-glow); }
.tsc-php__icon { margin-right: var(--tsc-sp-3); color: var(--tsc-primary); }
.tsc-php__content {
    padding: var(--tsc-sp-4) var(--tsc-sp-3) var(--tsc-sp-2);
    background: var(--tsc-bg-1);
    border-left: 3px solid var(--tsc-primary);
    border-radius: 0 0 var(--tsc-r-sm) var(--tsc-r-sm);
}
.tsc-php__label { margin-bottom: var(--tsc-sp-1); font-size: var(--tsc-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tsc-text-3); }
.tsc-php__dates div { display: flex; align-items: center; margin-bottom: var(--tsc-sp-1); font-size: var(--tsc-fs-12); color: var(--tsc-text-2); }
.tsc-php__dateicon { margin-right: var(--tsc-sp-1); font-size: 1rem; }
.tsc-php__cap--off { text-decoration: line-through; opacity: .6; }
.tsc-php .mud-grid > .mud-grid-item { padding-top: 0; }

/* PortfolioSimulator (.tsc-sim2) */
.tsc-sim2 { background: var(--tsc-bg-1); }
.tsc-sim2__note { color: var(--tsc-text-2); }
.tsc-sim2__opt { flex: 1; min-width: 200px; max-width: 300px; }
.tsc-sim2__strong { font-weight: 600; }
.tsc-sim2__chart {
    width: 100%;
    margin-top: var(--tsc-sp-2);
    padding: var(--tsc-sp-4);
    background: var(--tsc-bg-0);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
}
.tsc-sim2__chart > div { width: 100%; }
.tsc-sim2 .mud-chart { color: var(--tsc-text-2); }

/* BrokerCapabilitiesChips */
.tsc-brk__off { text-decoration: line-through; opacity: .7; }

/* PortfolioRiskConfiguration / PortfolioComputationalCost */
.tsc-risk, .tsc-ccost { background: var(--tsc-bg-1); }

/* Selector de eventos del filtro de fechas: ancho suficiente para la etiqueta y la flecha */
.tsc-range__events { min-width: 260px; }

/* Reverso de la card: contenido compacto y sin barra de scroll visible */
.tsc-sc__back .tsc-sc__body {
    padding-block: var(--tsc-sp-1);
    scrollbar-width: none;
}
.tsc-sc__back .tsc-sc__body::-webkit-scrollbar { display: none; }
.tsc-sc__back .tsc-sc__perf { margin-bottom: var(--tsc-sp-1); }
.tsc-sc__back .tsc-sc__tech th,
.tsc-sc__back .tsc-sc__tech td { padding-block: 2px; }

/* Anverso de la card: la lista de premios absorbe el espacio libre (su scroll es el único visible);
   el cuerpo no muestra barra propia aunque haya muchas etiquetas. */
.tsc-sc__front .tsc-sc__body {
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
}
.tsc-sc__front .tsc-sc__body::-webkit-scrollbar { display: none; }
.tsc-sc__front .tsc-sc__body > * { flex-shrink: 0; }
.tsc-sc__front .tsc-sc__awards {
    flex: 0 1 auto;
    min-height: 72px;
    display: flex;
    flex-direction: column;
}
.tsc-sc__front .tsc-sc__awards-list { flex: 1 1 auto; min-height: 28px; }