/* ==========================================================================
   TSC Design System v2 · área p2
   Propietario: EVO006-P2 · Portafolios, Allocator, Trading, Catalog, Tools, Reports, Analytics, Awards, VPS, Signature, UserOnBoarding
   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 p2 --baseline tools/visual-qa/lint-baseline.json
   ========================================================================== */

/* ---------- Utilidades compartidas del área ---------- */
.pg-p2-mono {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
}

.pg-p2-log {
    max-height: 320px;
    overflow: auto;
    padding: var(--tsc-sp-3) var(--tsc-sp-4);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
    color: var(--tsc-text-2);
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-12);
    line-height: var(--tsc-lh-body);
    white-space: pre-wrap;
}

.pg-p2-panel {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

/* celdas numéricas marcadas con Class="tsc-num" dentro de páginas p2 */
.pg-p2 .mud-table-body .mud-table-cell.tsc-num {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Portfolio Mixer (.pg-mixer) · migrado desde el <style> de Portfolio-Mixer.razor
   ========================================================================== */
.pg-mixer__kpis {
    margin-bottom: var(--tsc-sp-4);
}

.pg-mixer__cap--off {
    text-decoration: line-through;
    opacity: .6;
}

/* Cabecera del panel expandible: superficie hero en lugar del degradado azul */
.pg-mixer .portfolio-panel-header {
    padding: var(--tsc-sp-2) var(--tsc-sp-3);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-grad-hero);
    color: var(--tsc-text-1);
}

.pg-mixer .portfolio-header-icon {
    margin-right: var(--tsc-sp-2);
    color: var(--tsc-primary);
}

.pg-mixer .portfolio-expansion-panel .mud-expand-panel {
    background-color: transparent;
}

.pg-mixer .portfolio-expansion-panel .mud-expand-panel .mud-expand-panel-header .mud-icon-button {
    color: var(--tsc-text-1);
    background-color: transparent;
}

.pg-mixer .portfolio-expansion-panel .mud-expand-panel .mud-expand-panel-header .mud-icon-button:hover {
    background-color: var(--tsc-primary-soft);
}

.pg-mixer .portfolio-panel-content {
    padding: var(--tsc-sp-4);
    background: transparent;
}

.pg-mixer .input-label {
    color: var(--tsc-text-2);
    font-size: var(--tsc-fs-13);
}

/* Fechas del portafolio en una línea */
.pg-mixer .portfolio-dates-justified {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--tsc-sp-2);
    width: 100%;
    margin-top: var(--tsc-sp-2);
    padding: var(--tsc-sp-2) var(--tsc-sp-3);
    border-top: 1px solid var(--tsc-border);
    color: var(--tsc-text-2);
    font-size: var(--tsc-fs-13);
}

.pg-mixer .portfolio-dates-justified .date-item {
    display: flex;
    align-items: center;
    flex: 1;
    font-variant-numeric: tabular-nums;
}

.pg-mixer .portfolio-dates-justified .date-item:first-child { justify-content: flex-start; }
.pg-mixer .portfolio-dates-justified .date-item:nth-child(2) { justify-content: center; }
.pg-mixer .portfolio-dates-justified .date-item:last-child { justify-content: flex-end; }
.pg-mixer .portfolio-dates-justified .date-icon { margin-right: var(--tsc-sp-1); }

/* Tarjetas de configuración, gráficos y gestor de asignación */
.pg-mixer .pg-mixer__risk-card,
.pg-mixer .pg-mixer__charts,
.pg-mixer .pg-mixer__manager {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

.pg-mixer .pg-mixer__charts { width: 100%; overflow: hidden; }
.pg-mixer .pg-mixer__manager { min-height: 500px; }
.pg-mixer .pg-mixer__tabs { width: 100%; }
.pg-mixer .pg-mixer__chart-loading { height: 400px; }
.pg-mixer .pg-mixer__chart-panel { background: transparent; }
.pg-mixer .pg-mixer__section-title { font-weight: 600; }
.pg-mixer .pg-mixer__type-filter { min-width: 120px; }
.pg-mixer .pg-mixer__note { font-style: italic; color: var(--tsc-text-2); }
.pg-mixer .pg-mixer__strong { font-weight: 600; }

/* Estadísticas del portafolio como mini tarjetas */
.pg-mixer .pg-mixer__statcard > * {
    font-variant-numeric: tabular-nums;
}

.pg-mixer .pg-mixer__statcard b {
    font-family: var(--tsc-font-mono);
    color: var(--tsc-text-1);
}

.pg-mixer .pg-mixer__statcard .tsc-eyebrow {
    display: block;
    margin-bottom: var(--tsc-sp-2);
}

/* Tabla de sistemas muy densa (sin !important: especificidad de página) */
.pg-mixer .mud-table-dense .mud-table-row .mud-table-cell {
    padding: 0 var(--tsc-sp-1);
}

.pg-mixer .mud-table-dense .mud-table-head .mud-table-row .mud-table-cell {
    padding-top: var(--tsc-sp-1);
    padding-bottom: var(--tsc-sp-1);
}

.pg-mixer .mud-table-dense .mud-table-row {
    min-height: 40px;
}

.pg-mixer .mud-table-dense .mud-select-input,
.pg-mixer .mud-table-dense .mud-input,
.pg-mixer .mud-table-dense .mud-input-control,
.pg-mixer .mud-table-dense .mud-input-control .mud-input-adornment {
    margin: 0;
}

.pg-mixer .mud-table-dense .mud-input {
    padding: 0;
}

.pg-mixer .mud-table-dense .mud-numeric-field {
    box-sizing: border-box;
    width: 70px;
    min-width: 70px;
    max-width: 80px;
    height: 24px;
    font-size: var(--tsc-fs-14);
}

.pg-mixer .mud-table-dense .mud-input-outlined-border {
    border-width: 1px;
}

.pg-mixer .mud-table-dense .mud-input-control .mud-input-slot.mud-input-slot {
    height: 24px;
    padding: 0 var(--tsc-sp-2);
}

.pg-mixer .mud-table-dense .mud-input-adornment {
    height: 22px;
}

.pg-mixer .mud-table-dense .mud-input-adornment .mud-icon-button.mud-icon-button {
    width: 16px;
    height: 16px;
    padding: 2px;
}

.pg-mixer .mud-table-dense .mud-input-adornment .mud-icon-size-small {
    font-size: 1rem;
}

.pg-mixer .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.pg-mixer .edit-button.mud-icon-button {
    min-width: unset;
    padding: 2px;
}

.pg-mixer .group-header-icon {
    margin-right: var(--tsc-sp-2);
    vertical-align: middle;
}

/* Cabeceras de grupo (Portafolio / subportafolio) */
.pg-mixer .mud-table .mud-table-cell.portfolio-header {
    border-left: 3px solid var(--tsc-primary);
    border-radius: var(--tsc-r-sm);
    background-color: var(--tsc-primary-soft);
    color: var(--tsc-text-1);
    font-weight: 600;
}

.pg-mixer .mud-table .mud-table-cell.subportfolio-header {
    border-left: 3px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-sm);
    background-color: var(--tsc-bg-2);
    color: var(--tsc-text-1);
    font-weight: 500;
}

.pg-mixer .mud-table-cell-custom-group {
    border-radius: var(--tsc-r-sm);
    background-color: var(--tsc-accent-soft);
    font-weight: 500;
}

.pg-mixer .mud-table-cell-custom-group-footer {
    color: var(--tsc-text-2);
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-12);
}

.pg-mixer .group-header-filter-button {
    opacity: .7;
    transition: opacity var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-mixer .group-header-filter-button:hover {
    opacity: 1;
}

/* Columna "Curve": colapsa al mínimo y limita la miniatura */
.pg-mixer th.curve-col,
.pg-mixer td.curve-col {
    width: 1%;
    white-space: nowrap;
}

.pg-mixer .curve-thumb {
    display: inline-block;
    max-width: 48px;
    max-height: 28px;
    overflow: hidden;
}

/* ==========================================================================
   Automatic Allocator (.pg-allocator) · migrado desde AutomaticAllocator.razor
   ========================================================================== */
.pg-allocator .aa-controls-card,
.pg-allocator .aa-progress-panel {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    overflow: hidden;
}

.pg-allocator .pg-allocator__field { width: 200px; }
.pg-allocator .pg-allocator__field--sm { width: 180px; }

/* CTA de optimización: lima del sistema (Filled Primary) con estado ocupado */
.pg-allocator .aa-ignite-btn {
    transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease);
}

.pg-allocator .aa-ignite-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--tsc-shadow-glow);
}

.pg-allocator .aa-ignite-btn-busy {
    opacity: .85;
}

.pg-allocator .aa-progress-panels {
    background: transparent;
}

.pg-allocator .aa-progress-panel .mud-expand-panel-header {
    padding: var(--tsc-sp-2) var(--tsc-sp-3);
    border-bottom: 1px solid var(--tsc-border);
    background: var(--tsc-bg-2);
    color: var(--tsc-text-1);
}

.pg-allocator .aa-progress-panel .mud-expand-panel-header .mud-icon-root {
    color: var(--tsc-primary);
}

.pg-allocator .aa-progress-header {
    width: 100%;
}

.pg-allocator .aa-progress-title,
.pg-allocator .aa-results-title {
    color: var(--tsc-text-1);
    font-weight: 600;
}

.pg-allocator .aa-progress-bar .mud-progress-linear-bar {
    background: var(--tsc-grad-brand);
}

/* Log de progreso: panel mono con scroll (.pg-p2-log) */
.pg-allocator .aa-log {
    max-height: 400px;
    padding: 0;
    white-space: normal;
}

.pg-allocator .aa-log .log-entry {
    padding: var(--tsc-sp-1) var(--tsc-sp-3);
    border-bottom: 1px solid var(--tsc-border);
    color: var(--tsc-text-1);
}

.pg-allocator .aa-log .log-entry:last-child {
    border-bottom: 0;
}

.pg-allocator .aa-log .log-timestamp {
    margin-right: var(--tsc-sp-2);
    color: var(--tsc-text-3);
}

.pg-allocator .aa-log .log-phase {
    display: inline-block;
    margin-right: var(--tsc-sp-2);
    padding: 0 var(--tsc-sp-2);
    border-radius: var(--tsc-r-pill);
    background: var(--tsc-muted-soft);
    color: var(--tsc-text-2);
    font-weight: 600;
}

.pg-allocator .aa-log .phase-initialization { background: var(--tsc-info-soft); color: var(--tsc-info); }
.pg-allocator .aa-log .phase-carga-datos { background: var(--tsc-warning-soft); color: var(--tsc-warning); }
.pg-allocator .aa-log .phase-optimizacion { background: var(--tsc-primary-soft); color: var(--tsc-primary); }
.pg-allocator .aa-log .phase-monte-carlo { background: var(--tsc-accent-soft); color: var(--tsc-text-1); }
.pg-allocator .aa-log .phase-refinamiento,
.pg-allocator .aa-log .phase-completado { background: var(--tsc-success-soft); color: var(--tsc-success); }
.pg-allocator .aa-log .phase-error { background: var(--tsc-error-soft); color: var(--tsc-error); }

.pg-allocator .aa-log .log-sharpe {
    margin-left: var(--tsc-sp-2);
    color: var(--tsc-success);
}

/* Resultados */
.pg-allocator .aa-results {
    padding: var(--tsc-sp-2) 0 0;
}

.pg-allocator .aa-results-footnote {
    color: var(--tsc-text-3);
}

/* Tabla de comparación */
.pg-allocator .mud-table .mud-table-cell.pg-allocator__r { text-align: right; }
.pg-allocator .mud-table .mud-table-cell.pg-allocator__c { text-align: center; }
.pg-allocator .pg-allocator__strong { font-weight: 500; }

.pg-allocator .pending-cell {
    color: var(--tsc-warning);
    font-style: italic;
    text-align: center;
}

.pg-allocator .significant-change {
    color: var(--tsc-error);
    font-family: var(--tsc-font-mono);
    font-weight: 600;
}

.pg-allocator .minor-change {
    color: var(--tsc-text-3);
    font-family: var(--tsc-font-mono);
}

.pg-allocator .forced-allocation {
    opacity: .6;
    background-color: var(--tsc-bg-2);
}

/* ==========================================================================
   Portfolio Template Viewer (.pg-tplview) · migrado desde PortfolioTemplateViewer.razor
   ========================================================================== */
.pg-tplview .template-hero {
    padding: var(--tsc-sp-4) var(--tsc-sp-5);
    background: var(--tsc-grad-glow), var(--tsc-bg-1);
}

.pg-tplview__spark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--tsc-sp-1);
}

.pg-tplview__loading { height: 60vh; }
.pg-tplview__nochart { height: 360px; color: var(--tsc-text-3); }
.pg-tplview .pg-tplview__alloc-bar { width: 120px; }
.pg-tplview .muted { color: var(--tsc-text-2); }

.pg-tplview .stats-hero {
    margin-top: var(--tsc-sp-2);
    margin-bottom: var(--tsc-sp-2);
}

/* KPI: anatomía .tsc-stat sobre el markup existente (.kpi-card) */
.pg-tplview .kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: var(--tsc-sp-4);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
    overflow: hidden;
}

.pg-tplview .kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tsc-kpi-c, var(--tsc-primary));
}

.pg-tplview .kpi-card .kpi-icon {
    margin-right: var(--tsc-sp-3);
    font-size: 28px;
    color: var(--tsc-kpi-c, var(--tsc-primary));
}

.pg-tplview .kpi-title {
    color: var(--tsc-text-3);
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-transform: uppercase;
}

.pg-tplview .kpi-value {
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-24);
    font-weight: 600;
    line-height: var(--tsc-lh-title);
    font-variant-numeric: tabular-nums;
}

.pg-tplview .kpi-green { --tsc-kpi-c: var(--tsc-success); }
.pg-tplview .kpi-blue { --tsc-kpi-c: var(--tsc-info); }
.pg-tplview .kpi-indigo { --tsc-kpi-c: var(--tsc-violet); }
.pg-tplview .kpi-red { --tsc-kpi-c: var(--tsc-error); }
.pg-tplview .kpi-amber { --tsc-kpi-c: var(--tsc-warning); }
.pg-tplview .kpi-grey { --tsc-kpi-c: var(--tsc-text-3); }

.pg-tplview .pg-tplview__help {
    margin-left: var(--tsc-sp-1);
    opacity: .8;
    cursor: help;
}

/* Popovers explicativos (se renderizan fuera de la página: prefijo en el nombre) */
.pg-tplview__pop-wrap {
    max-width: 400px;
    min-width: 320px;
}

.pg-tplview__pop.mud-paper {
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-pop-c, var(--tsc-primary));
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
    color: var(--tsc-text-1);
}

.pg-tplview__pop--up { --tsc-pop-c: var(--tsc-success); }
.pg-tplview__pop--info { --tsc-pop-c: var(--tsc-info); }
.pg-tplview__pop--violet { --tsc-pop-c: var(--tsc-violet); }
.pg-tplview__pop--down { --tsc-pop-c: var(--tsc-error); }
.pg-tplview__pop--warn { --tsc-pop-c: var(--tsc-warning); }
.pg-tplview__pop--muted { --tsc-pop-c: var(--tsc-text-3); }

.pg-tplview__pop .pg-tplview__pop-close {
    color: var(--tsc-primary);
}

/* Tarjetas de sección */
.pg-tplview .section-card {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

.pg-tplview .clone-button-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--tsc-sp-3);
    margin: var(--tsc-sp-5) 0;
}

/* Paneles expandibles: cabecera bg-2 con barra de color por sección */
.pg-tplview .exp-panel {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    overflow: hidden;
}

.pg-tplview .exp-panel .mud-expand-panel-header {
    padding: var(--tsc-sp-2) var(--tsc-sp-4);
    border-left: 3px solid var(--tsc-exp-c, var(--tsc-primary));
    background: var(--tsc-bg-2);
    color: var(--tsc-text-1);
    transition: background-color var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-tplview .exp-panel .mud-expand-panel-header:hover {
    background: var(--tsc-bg-3);
}

.pg-tplview .exp-panel .mud-expand-panel-content {
    padding: var(--tsc-sp-3);
    background: var(--tsc-bg-1);
}

.pg-tplview .exp-panel .panel-icon {
    margin-right: var(--tsc-sp-2);
    font-size: 24px;
    color: var(--tsc-exp-c, var(--tsc-primary));
}

.pg-tplview .exp-alloc { --tsc-exp-c: var(--tsc-info); }
.pg-tplview .exp-corr { --tsc-exp-c: var(--tsc-violet); }
.pg-tplview .exp-pnl { --tsc-exp-c: var(--tsc-success); }
.pg-tplview .exp-monthly { --tsc-exp-c: var(--tsc-accent); }
.pg-tplview .exp-alphas { --tsc-exp-c: var(--tsc-primary); }

/* ==========================================================================
   Custom Portfolios (.pg-cportfolios) · Plantillas (.pg-tpllist) · Detalles (.pg-pdetails)
   Créditos (.pg-credits)
   ========================================================================== */
.pg-cportfolios .pg-cportfolios__help {
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-info);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-info-soft);
    overflow: hidden;
}

.pg-cportfolios .pg-cportfolios__help .mud-expand-panel {
    background: transparent;
    color: var(--tsc-text-1);
}

.pg-tpllist .pg-tpllist__name {
    font-weight: 500;
}

.pg-tpllist .tsc-page-header .tsc-stat {
    min-width: 180px;
}

.pg-pdetails {
    max-height: 500px;
    overflow-y: auto;
}

.pg-pdetails .pg-pdetails__broker {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
}

.pg-pdetails b {
    color: var(--tsc-text-2);
    font-weight: 500;
}

.pg-credits .mud-table .mud-table-cell.pg-credits__r {
    text-align: right;
}

/* ==========================================================================
   Redirector (.pg-redirector) · portafolio no disponible
   ========================================================================== */
.pg-redirector .hero-section {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    background: var(--tsc-grad-glow), var(--tsc-bg-1);
}

.pg-redirector .hero-icon {
    color: var(--tsc-primary);
}

.pg-redirector .animated-float {
    animation: pgRedirectorFloat 3s var(--tsc-ease-in-out) infinite;
}

@keyframes pgRedirectorFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-redirector .animated-float { animation: none; }
}

.pg-redirector .msg-grid .mud-grid-item { display: flex; }

.pg-redirector .msg-block,
.pg-redirector .hero-pill {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--tsc-sp-3) var(--tsc-sp-4);
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-msg-c, var(--tsc-primary));
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
    color: var(--tsc-text-1);
}

.pg-redirector .msg-block { justify-content: space-between; }

.pg-redirector .msg1, .pg-redirector .pill-blue { --tsc-msg-c: var(--tsc-info); }
.pg-redirector .msg2, .pg-redirector .pill-purple { --tsc-msg-c: var(--tsc-violet); }
.pg-redirector .msg3, .pg-redirector .pill-amber { --tsc-msg-c: var(--tsc-warning); }
.pg-redirector .pill-green { --tsc-msg-c: var(--tsc-success); }

.pg-redirector .msg-title { margin: 0; font-weight: 600; }
.pg-redirector .msg-text { margin: 0; }

.pg-redirector .msg-icon,
.pg-redirector .pill-icon {
    color: var(--tsc-msg-c, var(--tsc-primary));
}

.pg-redirector .msg-icon { margin-left: var(--tsc-sp-3); font-size: 36px; }
.pg-redirector .pill-icon { margin-right: var(--tsc-sp-3); font-size: 26px; }
.pg-redirector .pill-title { font-weight: 600; }
.pg-redirector .pill-sub { color: var(--tsc-text-2); font-size: var(--tsc-fs-13); }

.pg-redirector .cta-hero {
    padding: var(--tsc-sp-5) var(--tsc-sp-6);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    background: var(--tsc-grad-hero);
    color: var(--tsc-text-1);
}

.pg-redirector .pg-redirector__pills {
    max-width: 1100px;
    margin: 0 auto;
}

/* ==========================================================================
   Trading Cards Gallery (.pg-cards) · migrado desde TradingCardsGallery.razor
   ========================================================================== */
.pg-cards.trading-gallery-container {
    min-height: 100vh;
}

.pg-cards .stats-section,
.pg-cards .filter-section,
.pg-cards .gallery-section {
    margin-bottom: var(--tsc-sp-5);
}

.pg-cards .pg-cards__stat--legendary .tsc-stat__icon { color: var(--tsc-warning); }
.pg-cards .pg-cards__stat--epic .tsc-stat__icon { color: var(--tsc-violet); }
.pg-cards .pg-cards__stat--rare .tsc-stat__icon { color: var(--tsc-info); }

.pg-cards .filter-paper,
.pg-cards .loading-paper,
.pg-cards .empty-paper {
    padding: var(--tsc-sp-5);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

.pg-cards .loading-paper,
.pg-cards .empty-paper {
    text-align: center;
}

.pg-cards .filter-label {
    color: var(--tsc-text-3);
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-transform: uppercase;
}

.pg-cards .filter-button {
    border-radius: var(--tsc-r-pill);
    font-weight: 600;
    transition: transform var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-cards .filter-button:hover { transform: translateY(-1px); }

.pg-cards .refresh-button {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-pill);
}

.pg-cards .loading-section,
.pg-cards .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    margin: var(--tsc-sp-7) 0;
}

.pg-cards .loading-subtitle,
.pg-cards .empty-subtitle,
.pg-cards .end-results-text {
    color: var(--tsc-text-2);
}

.pg-cards .loading-subtitle { font-style: italic; }
.pg-cards .empty-subtitle { margin-bottom: var(--tsc-sp-5); }

.pg-cards .empty-icon {
    color: var(--tsc-text-3);
    font-size: 4rem;
}

.pg-cards .gallery-title {
    margin-bottom: var(--tsc-sp-5);
    color: var(--tsc-text-1);
    font-weight: 600;
}

.pg-cards .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: var(--tsc-sp-5);
    justify-items: center;
}

.pg-cards .card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    animation: pgCardsFadeIn var(--tsc-dur-slow) var(--tsc-ease) both;
    animation-delay: calc(var(--index, 0) * 40ms);
}

@keyframes pgCardsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-cards .card-wrapper { animation: none; }
}

.pg-cards .load-more-section,
.pg-cards .loading-more-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--tsc-sp-6) 0;
}

.pg-cards .load-more-button,
.pg-cards .load-all-button {
    padding: var(--tsc-sp-3) var(--tsc-sp-6);
    border-radius: var(--tsc-r-pill);
    font-weight: 600;
    transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease);
}

.pg-cards .load-more-button:hover,
.pg-cards .load-all-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--tsc-shadow-glow);
}

.pg-cards .load-all-button {
    border: 1px solid var(--tsc-border-strong);
    background: transparent;
    color: var(--tsc-primary);
}

.pg-cards .load-all-button:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pg-cards .end-results-section {
    margin: var(--tsc-sp-6) 0;
    text-align: center;
}

.pg-cards .end-results-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tsc-sp-2);
    margin-top: var(--tsc-sp-4);
}

.pg-cards .loading-all-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--tsc-sp-6) 0;
    padding: var(--tsc-sp-5);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-primary-soft);
}

@media (max-width: 768px) {
    .pg-cards .cards-container {
        grid-template-columns: 1fr;
        gap: var(--tsc-sp-4);
    }
}

/* ==========================================================================
   Trading Systems Gallery (.pg-tsgallery) · Showcase (.pg-showcase)
   ========================================================================== */
.pg-tsgallery .pg-tsgallery__loading { height: 400px; }

.pg-tsgallery .filter-button {
    margin: 2px;
    transition: transform var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-tsgallery .filter-button:hover { transform: translateY(-1px); }

.pg-tsgallery .card-wrapper {
    transition: transform var(--tsc-dur-base) var(--tsc-ease);
}

.pg-tsgallery .card-wrapper:hover { transform: translateY(-4px); }

.pg-tsgallery .pg-tsgallery__fab {
    position: fixed;
    right: var(--tsc-sp-5);
    bottom: var(--tsc-sp-5);
    z-index: 1000;
}

@media (max-width: 768px) {
    .pg-tsgallery .filter-button {
        padding: var(--tsc-sp-1) var(--tsc-sp-2);
        font-size: var(--tsc-fs-12);
    }
}

.pg-showcase .trading-card {
    height: 300px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    overflow: hidden;
    transition: transform var(--tsc-dur-base) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease);
}

.pg-showcase .trading-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tsc-shadow-glow);
}

.pg-showcase .pg-showcase__body { height: 300px; }

.pg-showcase .pg-showcase__body--flex {
    display: flex;
    flex-direction: column;
}

.pg-showcase .metric-chip {
    height: 24px;
    margin: 2px;
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-12);
}

.pg-showcase .chart-container {
    width: 100%;
    height: 120px;
}

.pg-showcase .filter-chip {
    margin: var(--tsc-sp-1);
    cursor: pointer;
}

.pg-showcase .performance-badge {
    position: absolute;
    top: var(--tsc-sp-3);
    right: var(--tsc-sp-3);
    z-index: 10;
}

.pg-showcase .system-alias {
    color: var(--tsc-primary);
    font-size: var(--tsc-fs-18);
    font-weight: 600;
}

.pg-showcase .system-symbol {
    color: var(--tsc-text-2);
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-13);
    text-transform: uppercase;
}

/* ==========================================================================
   Trading System Information (.pg-tsinfo) · migrado desde Catalog/TradingSystemInformation.razor
   ========================================================================== */
.pg-tsinfo .pg-tsinfo__loading { min-height: 30vh; }

.pg-tsinfo .hero-section {
    padding: var(--tsc-sp-4) var(--tsc-sp-5);
    background: var(--tsc-grad-glow), var(--tsc-bg-1);
}

.pg-tsinfo .pg-tsinfo__total {
    min-width: 180px;
    text-align: right;
}

.pg-tsinfo .performance-positive { color: var(--tsc-success); font-weight: 600; }
.pg-tsinfo .performance-negative,
.pg-tsinfo .value-negative { color: var(--tsc-error); font-weight: 700; }
.pg-tsinfo .performance-neutral { color: var(--tsc-text-3); font-weight: 600; }
.pg-tsinfo .value-important { font-weight: 700; }

.pg-tsinfo .metric-card,
.pg-tsinfo .chart-container,
.pg-tsinfo .section-card {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    overflow: hidden;
}

.pg-tsinfo .metric-card {
    transition: transform var(--tsc-dur-fast) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease);
}

.pg-tsinfo .metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--tsc-shadow-glow);
}

.pg-tsinfo .metric-card .mud-typography-body1 {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Tablas de estadísticas: cabecera bg-2 con acento semántico */
.pg-tsinfo .performance-table,
.pg-tsinfo .risk-table,
.pg-tsinfo .detailed-stats-table,
.pg-tsinfo .stats-table {
    border-left: 3px solid var(--tsc-tbl-c, var(--tsc-border-strong));
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-1);
}

.pg-tsinfo .performance-table { --tsc-tbl-c: var(--tsc-success); }
.pg-tsinfo .risk-table { --tsc-tbl-c: var(--tsc-warning); }
.pg-tsinfo .detailed-stats-table { --tsc-tbl-c: var(--tsc-info); }

.pg-tsinfo .mud-simple-table.mud-table-dense table * tr td,
.pg-tsinfo .mud-simple-table.mud-table-dense table * tr th {
    padding: 6px 10px;
    border-bottom: 1px solid var(--tsc-border);
    font-size: var(--tsc-fs-13);
}

.pg-tsinfo .mud-simple-table table tbody tr td:last-child {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pg-tsinfo .mud-simple-table table tbody tr td strong {
    color: var(--tsc-text-2);
    font-weight: 500;
}

.pg-tsinfo .info-badge {
    padding: var(--tsc-sp-2);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
    text-align: center;
}

.pg-tsinfo .info-badge .mud-typography-body2 {
    font-family: var(--tsc-font-mono);
}

.pg-tsinfo .gallery-container {
    border-radius: var(--tsc-r-md);
    overflow: hidden;
}

.pg-tsinfo .system-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--tsc-sp-2);
    margin-bottom: var(--tsc-sp-2);
}

/* Densidad compacta de la ficha (antes reglas globales con !important) */
.pg-tsinfo .mud-card .mud-card-header {
    padding: 6px 12px;
}

.pg-tsinfo .mud-card .mud-card-content {
    padding: 6px 12px;
}

.pg-tsinfo .mud-tabs .mud-tabs-tabbar .mud-tab {
    min-height: 32px;
    font-size: var(--tsc-fs-12);
}

.pg-tsinfo .mud-tabs .mud-tab-panel {
    font-size: var(--tsc-fs-13);
}

.pg-tsinfo .mobile-responsive.mud-container {
    padding: var(--tsc-sp-1);
}

.pg-tsinfo .mud-charts-yaxis text,
.pg-tsinfo .mud-charts-xaxis text {
    font-size: 9px;
}

@media (max-width: 960px) {
    .pg-tsinfo .hero-section {
        margin: var(--tsc-sp-1);
        padding: var(--tsc-sp-3);
    }

    .pg-tsinfo .metric-card {
        margin-bottom: var(--tsc-sp-1);
    }

    .pg-tsinfo .mud-simple-table.mud-table-dense table * tr td,
    .pg-tsinfo .mud-simple-table.mud-table-dense table * tr th {
        padding: 4px 8px;
        font-size: var(--tsc-fs-12);
    }
}

/* ==========================================================================
   Herramientas: Gold (.pg-gold), Term Risk (.pg-termrisk), Yield Curve (.pg-yield, .pg-yexpert)
   Antes forzaban un fondo oscuro fijo; ahora siguen los tokens de ambos temas.
   ========================================================================== */
.pg-p2-transparent { background: transparent; }

.pg-gold .gold-card,
.pg-yield .yield-card,
.pg-termrisk .termrisk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--tsc-sp-5);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
}

.pg-termrisk .termrisk-card {
    position: relative;
    padding: var(--tsc-sp-4);
}

.pg-gold .chart-container {
    width: 100%;
    height: 800px;
    min-height: 600px;
}

.pg-yield .chart-container {
    position: relative;
    width: 100%;
    height: 600px;
}

@media (min-width: 1200px) {
    .pg-yield .chart-container { height: 700px; }
}

@media (max-width: 960px) {
    .pg-yield .chart-container { height: 500px; }
}

@media (max-width: 600px) {
    .pg-yield .chart-container { height: 400px; }
}

/* Radar táctico: cajas con barra semántica */
.pg-gold .metric-box,
.pg-yield .metric-box {
    margin-bottom: var(--tsc-sp-3);
    padding: var(--tsc-sp-3);
    border-left: 3px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
}

.pg-gold .metric-box.bullish,
.pg-yield .metric-box.bullish { border-left-color: var(--tsc-success); }
.pg-gold .metric-box.bearish,
.pg-yield .metric-box.bearish { border-left-color: var(--tsc-error); }
.pg-gold .metric-box.neutral,
.pg-yield .metric-box.neutral { border-left-color: var(--tsc-warning); }
.pg-gold .metric-box.gold { border-left-color: var(--tsc-accent); }
.pg-yield .metric-box.blue { border-left-color: var(--tsc-info); }

.pg-gold .metric-label,
.pg-yield .metric-label {
    color: var(--tsc-text-3);
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-transform: uppercase;
}

.pg-gold .metric-value,
.pg-yield .metric-value {
    color: var(--tsc-text-1);
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-18);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pg-gold .pg-gold__basis {
    color: var(--tsc-text-2);
    font-size: var(--tsc-fs-14);
}

.pg-gold .narrative-text,
.pg-yield .narrative-text,
.pg-termrisk .pg-termrisk__narrative {
    color: var(--tsc-text-1);
    font-size: var(--tsc-fs-16);
    line-height: var(--tsc-lh-body);
    white-space: pre-line;
}

.pg-gold .pg-gold__title { color: var(--tsc-warning); }
.pg-yield .pg-yield__title { color: var(--tsc-info); }

.pg-gold .gold-card.pg-gold__verdict { border-left: 3px solid var(--tsc-warning); }
.pg-yield .yield-card.pg-yield__verdict { border-left: 3px solid var(--tsc-info); }

/* Secciones comerciales (CTA) */
.pg-gold .section-card,
.pg-yield .section-card,
.pg-termrisk .section-card {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    background: var(--tsc-bg-1);
    overflow: hidden;
}

.pg-gold .gradient-soft-dark,
.pg-yield .gradient-soft-dark,
.pg-termrisk .gradient-soft-dark {
    background: var(--tsc-grad-glow), var(--tsc-bg-1);
}

.pg-gold .hero-gradient-cta,
.pg-yield .hero-gradient-cta {
    background: var(--tsc-grad-hero);
    color: var(--tsc-text-1);
}

.pg-gold .pg-gold__next,
.pg-yield .pg-yield__next {
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-next-c, var(--tsc-info));
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
}

.pg-gold .pg-gold__next { --tsc-next-c: var(--tsc-warning); }

/* Term Risk: cuadrícula, termómetro SVG y trazas */
.pg-termrisk .dashboard-row { margin-bottom: var(--tsc-sp-4); }
.pg-termrisk .upper-row { height: 36vh; }
.pg-termrisk .lower-row { height: 42vh; }
.pg-termrisk .h-100 { height: 100%; }

.pg-termrisk .card-title {
    flex-shrink: 0;
    margin-bottom: var(--tsc-sp-4);
    color: var(--tsc-text-2);
    font-size: var(--tsc-fs-12);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-align: center;
    text-transform: uppercase;
}

.pg-termrisk .ts-chart {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.pg-termrisk .risk-gauge-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: var(--tsc-sp-1) 0;
}

.pg-termrisk .risk-gauge-svg {
    width: 80%;
    max-width: 360px;
    height: auto;
}

.pg-termrisk .pg-termrisk__seg--low { stroke: var(--tsc-success); }
.pg-termrisk .pg-termrisk__seg--mid { stroke: var(--tsc-warning); }
.pg-termrisk .pg-termrisk__seg--high { stroke: var(--tsc-chart-6); }
.pg-termrisk .pg-termrisk__seg--max { stroke: var(--tsc-error); }

.pg-termrisk .pg-termrisk__needle {
    fill: var(--tsc-text-1);
    stroke: var(--tsc-bg-0);
}

.pg-termrisk .pg-termrisk__hub { fill: var(--tsc-text-1); }
.pg-termrisk .pg-termrisk__hub-inner { fill: var(--tsc-bg-1); }

.pg-termrisk .risk-gauge-text {
    margin-top: calc(-1 * var(--tsc-sp-5));
    color: var(--pg-gauge, var(--tsc-text-1));
    font-family: var(--tsc-font-mono);
    font-size: var(--tsc-fs-30);
    font-weight: 700;
}

.pg-termrisk .vvix-bar-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: hidden; /* VER004: el gráfico Plotly desbordaba 14 px a 1024 */
    min-height: 200px;
}

.pg-termrisk .pg-termrisk__traces {
    max-height: 250px;
    overflow-y: auto;
}

.pg-termrisk .pg-termrisk__step {
    text-align: left;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
}

@media (max-width: 960px) {
    .pg-termrisk .upper-row,
    .pg-termrisk .lower-row { height: auto; }
    .pg-termrisk .ts-chart,
    .pg-termrisk .termrisk-card { min-height: 260px; }
    .pg-termrisk .risk-gauge-svg { width: 100%; max-width: 320px; margin-top: calc(-1 * var(--tsc-sp-2)); }
    .pg-termrisk .risk-gauge-text { margin-top: calc(-1 * var(--tsc-sp-2)); font-size: var(--tsc-fs-24); }
}

@media (max-width: 600px) {
    .pg-termrisk .ts-chart { min-height: 240px; }
    .pg-termrisk .termrisk-card { min-height: 220px; padding: var(--tsc-sp-3); }
    .pg-termrisk .risk-gauge-container { padding: var(--tsc-sp-2) 0; }
    .pg-termrisk .risk-gauge-text { font-size: var(--tsc-fs-20); }
}

/* Yield Curve Expert (embebido en el radar) */
.pg-yexpert .status-badge {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-3);
    margin-bottom: var(--tsc-sp-3);
    padding: var(--tsc-sp-3);
    border-left: 3px solid var(--tsc-border-strong);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
}

.pg-yexpert .status-badge.alert-max { border-left-color: var(--tsc-error); }
.pg-yexpert .status-badge.alert-high { border-left-color: var(--tsc-chart-6); }
.pg-yexpert .status-badge.alert-medium { border-left-color: var(--tsc-warning); }
.pg-yexpert .status-badge.alert-low,
.pg-yexpert .status-badge.bullish { border-left-color: var(--tsc-success); }
.pg-yexpert .status-badge.neutral { border-left-color: var(--tsc-text-3); }
.pg-yexpert .status-badge.rally { border-left-color: var(--tsc-info); }

.pg-yexpert .status-emoji { font-size: 2rem; line-height: 1; }
.pg-yexpert .status-content { flex: 1; }

.pg-yexpert .status-title {
    margin-bottom: var(--tsc-sp-1);
    color: var(--tsc-text-1);
    font-size: var(--tsc-fs-14);
    font-weight: 600;
}

.pg-yexpert .status-subtitle,
.pg-yexpert .section-header {
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-transform: uppercase;
}

.pg-yexpert .status-subtitle { color: var(--tsc-text-3); }

.pg-yexpert .section-header {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-2);
    margin-bottom: var(--tsc-sp-2);
    color: var(--tsc-info);
}

.pg-yexpert .narrative-box {
    margin: var(--tsc-sp-3) 0;
    padding: var(--tsc-sp-3);
    border-left: 3px solid var(--tsc-info);
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-info-soft);
}

.pg-yexpert .narrative-text {
    color: var(--tsc-text-1);
    font-size: var(--tsc-fs-13);
    line-height: var(--tsc-lh-body);
}

.pg-yexpert .compact-divider {
    margin: var(--tsc-sp-4) 0;
    opacity: .3;
}

/* ==========================================================================
   Last Report / Track Record (.pg-lastreport) · P&L Attributions (.pg-attrib)
   ========================================================================== */
.pg-lastreport .sticky-nav {
    position: sticky;
    top: var(--tsc-appbar-h);
    z-index: 5;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-glass-bg);
    -webkit-backdrop-filter: blur(var(--tsc-glass-blur));
    backdrop-filter: blur(var(--tsc-glass-blur));
}

.pg-lastreport .nav-link {
    color: var(--tsc-text-2);
    transition: color var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-lastreport .nav-link:hover {
    color: var(--tsc-primary);
}

.pg-lastreport .hero-gradient-main,
.pg-lastreport .hero-gradient-challenges,
.pg-lastreport .hero-gradient-risk,
.pg-lastreport .hero-gradient-recovery,
.pg-lastreport .hero-gradient-currency,
.pg-lastreport .hero-gradient-versatility,
.pg-lastreport .hero-gradient-cta,
.pg-lastreport .hero-gradient-track {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    background: var(--tsc-grad-hero);
    color: var(--tsc-text-1);
}

.pg-lastreport .hero-gradient-challenges,
.pg-lastreport .hero-gradient-risk,
.pg-lastreport .hero-gradient-recovery,
.pg-lastreport .hero-gradient-currency,
.pg-lastreport .hero-gradient-versatility,
.pg-lastreport .hero-gradient-cta,
.pg-lastreport .hero-gradient-track {
    margin-top: var(--tsc-sp-7);
}

.pg-lastreport .pg-lastreport__callout {
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-accent);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-grad-glow), var(--tsc-bg-2);
}

.pg-lastreport .track-wrapper {
    position: relative;
    padding: var(--tsc-sp-5);
    border-radius: var(--tsc-r-lg);
    overflow: visible;
}

.pg-lastreport .track-vertical-list {
    display: flex;
    flex-direction: column;
    gap: var(--tsc-sp-6);
}

.pg-lastreport .track-line-card {
    padding: var(--tsc-sp-2) 0 0;
    border-bottom: 1px solid var(--tsc-border);
}

.pg-lastreport .track-line-card:last-child { border-bottom: 0; }

.pg-lastreport .track-img-real {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.pg-lastreport .track-metrics-bar { flex-wrap: wrap; }
.pg-lastreport .track-chip { font-weight: 600; }
.pg-lastreport .track-timeline { margin-top: var(--tsc-sp-2); }

.pg-lastreport .future-zone {
    border: 1px dashed var(--tsc-border-strong);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-primary-soft);
}

.pg-attrib .pg-attrib__years { min-width: 140px; }
.pg-attrib .pg-attrib__group { min-width: 220px; }
.pg-attrib .pg-attrib__topn { width: 110px; }
.pg-attrib .pg-attrib__loading { height: 200px; }

/* ==========================================================================
   Sistemas premiados (.pg-awards) · migrado desde Awards/TradingSystemWithPrizes.razor
   ========================================================================== */
.pg-awards.trading-awards-container { min-height: 100vh; }

.pg-awards .stats-section,
.pg-awards .filter-section,
.pg-awards .gallery-section {
    margin-bottom: var(--tsc-sp-5);
}

.pg-awards .filter-paper,
.pg-awards .loading-paper,
.pg-awards .empty-paper {
    padding: var(--tsc-sp-5);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
}

.pg-awards .loading-paper,
.pg-awards .empty-paper { text-align: center; }

.pg-awards .filter-label {
    color: var(--tsc-text-3);
    font-size: var(--tsc-fs-11);
    font-weight: 600;
    letter-spacing: var(--tsc-eyebrow-tracking);
    text-transform: uppercase;
}

.pg-awards .filter-button {
    border-radius: var(--tsc-r-pill);
    font-weight: 600;
}

.pg-awards .refresh-button {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-pill);
}

.pg-awards .pg-awards__year { min-width: 160px; }

.pg-awards .gallery-title {
    display: flex;
    align-items: center;
    gap: var(--tsc-sp-2);
    margin-bottom: var(--tsc-sp-5);
    color: var(--tsc-text-1);
    font-weight: 600;
}

.pg-awards .awards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    gap: var(--tsc-sp-6);
    justify-items: center;
}

.pg-awards .award-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    animation: pgAwardsIn var(--tsc-dur-slow) var(--tsc-ease) both;
    animation-delay: calc(var(--index, 0) * 40ms);
}

@keyframes pgAwardsIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-awards .award-wrapper { animation: none; }
}

.pg-awards .award-card {
    width: 100%;
    max-width: 450px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-lg);
    background: var(--tsc-bg-1);
    color: var(--tsc-text-1);
    overflow: hidden;
    transition: transform var(--tsc-dur-base) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease), border-color var(--tsc-dur-fast) var(--tsc-ease);
}

.pg-awards .award-card:hover {
    transform: translateY(-2px);
    border-color: var(--tsc-primary);
    box-shadow: var(--tsc-shadow-glow);
}

.pg-awards .award-header {
    border-bottom: 1px solid var(--tsc-border);
    background: var(--tsc-bg-2);
}

.pg-awards .award-header .awards-badge-title {
    color: var(--tsc-text-1);
    font-size: var(--tsc-fs-18);
    font-weight: 600;
    line-height: var(--tsc-lh-title);
}

.pg-awards .award-header .awards-badge-category {
    color: var(--tsc-text-2);
    font-weight: 500;
}

.pg-awards .position-chip {
    font-family: var(--tsc-font-mono);
    font-weight: 700;
}

.pg-awards .system-card-container { margin-bottom: var(--tsc-sp-5); }

.pg-awards .award-details {
    padding: var(--tsc-sp-5);
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-accent);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
    color: var(--tsc-text-1);
}

.pg-awards .award-details .mud-typography-subtitle2 {
    color: var(--tsc-text-1);
    font-weight: 600;
}

.pg-awards .award-details .mud-typography-body2 {
    color: var(--tsc-text-2);
    font-variant-numeric: tabular-nums;
}

.pg-awards .award-details .mud-typography-body2 strong { color: var(--tsc-text-1); }
.pg-awards .award-details .mud-icon-root { color: var(--tsc-text-3); }
.pg-awards .award-details .mud-divider { margin: var(--tsc-sp-2) 0; border-color: var(--tsc-border); }

.pg-awards .award-date {
    color: var(--tsc-text-3);
    font-size: var(--tsc-fs-12);
    font-style: italic;
}

.pg-awards .load-more-section,
.pg-awards .loading-more-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--tsc-sp-6) 0;
}

.pg-awards .loading-more-section {
    padding: var(--tsc-sp-5);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-primary-soft);
}

.pg-awards .load-more-button {
    padding: var(--tsc-sp-3) var(--tsc-sp-6);
    border-radius: var(--tsc-r-pill);
    font-weight: 600;
}

.pg-awards .loading-section,
.pg-awards .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    margin: var(--tsc-sp-7) 0;
}

.pg-awards .loading-subtitle { color: var(--tsc-text-2); font-style: italic; }
.pg-awards .empty-icon { color: var(--tsc-text-3); font-size: 4rem; }
.pg-awards .empty-subtitle { margin-bottom: var(--tsc-sp-5); color: var(--tsc-text-2); }

.pg-awards .end-results-section {
    margin: var(--tsc-sp-6) 0;
    text-align: center;
}

.pg-awards .end-results-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tsc-sp-2);
    margin-top: var(--tsc-sp-4);
    color: var(--tsc-text-2);
}

@media (max-width: 768px) {
    .pg-awards .awards-container {
        grid-template-columns: 1fr;
        gap: var(--tsc-sp-5);
    }

    .pg-awards .award-card { max-width: 100%; }
}

/* ==========================================================================
   VPS (.pg-vps) · Documentos firmados (.pg-docstatus) · Onboarding (.pg-onboarding)
   Cuentas de broker (.pg-brokers)
   ========================================================================== */
.pg-vps .pg-vps__block {
    height: 100%;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-2);
}

.pg-vps .pg-vps__block .tsc-eyebrow {
    display: block;
    color: var(--tsc-primary);
}

.pg-vps .pg-vps__price {
    color: var(--tsc-success);
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
}

.pg-docstatus .pg-docstatus__ok .tsc-stat__icon { color: var(--tsc-success); }
.pg-docstatus .pg-docstatus__warn .tsc-stat__icon { color: var(--tsc-warning); }

.pg-docstatus .pg-docstatus__doc {
    height: 100%;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

.pg-docstatus .signed-document {
    border-left: 3px solid var(--tsc-success);
    background: linear-gradient(var(--tsc-success-soft), var(--tsc-success-soft)), var(--tsc-bg-1);
}

.pg-docstatus .pending-document {
    border-left: 3px solid var(--tsc-warning);
    background: linear-gradient(var(--tsc-warning-soft), var(--tsc-warning-soft)), var(--tsc-bg-1);
}

.pg-docstatus .mud-card-header .mud-avatar {
    width: 40px;
    height: 40px;
}

.pg-docstatus .mud-card .mud-card-actions {
    gap: var(--tsc-sp-2);
    padding: var(--tsc-sp-4);
}

@media (max-width: 600px) {
    .pg-docstatus .mud-card .mud-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pg-docstatus .mud-card .mud-card-actions .mud-button-root {
        width: 100%;
    }
}

.pg-onboarding .pg-onboarding__readonly .mud-input {
    font-family: var(--tsc-font-mono);
}

/* Cuentas de broker */
.pg-brokers .sync-indicator,
.pg-brokers .seat-assigned,
.pg-brokers .seat-not-assigned {
    margin: var(--tsc-sp-1) 0;
    padding: var(--tsc-sp-2);
    border: 1px solid var(--tsc-border);
    border-left: 3px solid var(--tsc-seat-c, var(--tsc-primary));
    border-radius: var(--tsc-r-md);
    background: linear-gradient(var(--tsc-seat-soft, var(--tsc-primary-soft)), var(--tsc-seat-soft, var(--tsc-primary-soft))), var(--tsc-bg-1);
}

.pg-brokers .sync-indicator { --tsc-seat-c: var(--tsc-success); --tsc-seat-soft: var(--tsc-success-soft); }
.pg-brokers .seat-assigned { --tsc-seat-c: var(--tsc-info); --tsc-seat-soft: var(--tsc-info-soft); }
.pg-brokers .seat-not-assigned { --tsc-seat-c: var(--tsc-warning); --tsc-seat-soft: var(--tsc-warning-soft); }

.pg-brokers .pg-brokers__account {
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-r-md);
    background: var(--tsc-bg-1);
}

.pg-brokers .disconnected-account {
    border: 1px solid var(--tsc-error);
    border-radius: var(--tsc-r-md);
    animation: pgBrokersPulse 2s var(--tsc-ease-in-out) infinite;
}

.pg-brokers .disconnected-account .pg-brokers__account {
    border-color: transparent;
}

@keyframes pgBrokersPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--tsc-error-soft); }
    50% { box-shadow: 0 0 0 6px var(--tsc-error-soft); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-brokers .disconnected-account { animation: none; }
}

.pg-brokers .pg-brokers__cap--off {
    text-decoration: line-through;
    opacity: .7;
}

/* El diálogo OTP se renderiza fuera de la página: prefijo en el nombre */
.pg-brokers__otp {
    font-family: var(--tsc-font-mono);
    letter-spacing: 5px;
    font-variant-numeric: tabular-nums;
}

/* VER004 · Grupos de botones que no caben en móvil (galería de sistemas, VPS): desplazamiento interno en vez de scroll horizontal de página */
.pg-btngroup-fit {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* VER004 · En móvil las celdas de la rejilla de tarjetas/premios crecían hasta el min-content (400-458 px) y provocaban scroll horizontal */
.pg-cards .card-wrapper,
.pg-awards .award-wrapper { min-width: 0; }
.pg-awards .award-card { min-width: 0; }

/* VER004 · wwwroot/lib/Gallery.js inyecta `.card-wrapper { opacity: 0; transform: translateY(30px) }` y solo lo revierte
   si alguien llama a initializeGallery() (nadie lo hace). En /trading-systems-gallery las tarjetas quedaban invisibles
   siempre y en /trading-cards-gallery con prefers-reduced-motion. Se fija el estado visible con más especificidad. */
.pg-cards .card-wrapper,
.pg-tsgallery .card-wrapper {
    opacity: 1;
    transform: none;
}