/* ============================================================
   🎨 VARIABLES & RESET - MODERN FINTECH THEME
   ============================================================ */
   :root {
    --bg-dark: #060606;
    --bg-panel: #080808;
    --bg-card: #0f0f0f;
    --bg-input: #080808;

    /* Acentos */
    --accent-primary: #61B754;
    --accent-secondary: #7000ff;
    --accent-glow: rgba(97, 183, 84, 0.4);
    
    /* Estados */
    --success: #00ff9d;
    --danger: #ff4757;
    --warning: #ffb142;
    --neutral: #636e72;

    /* Texto */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-tertiary: #555555;

    /* Bordes y Glassmorphism */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --glass-bg: #080808;
    --glass-border: rgba(255, 255, 255, 0.05);
    
    /* Sombras */
    --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(97, 183, 84, 0.15);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: #060606;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

.ambient-light {
    display: none;
}

/* ============================================================
   ⏳ LOADER INICIAL
   ============================================================ */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #060606;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.loader-logo-wrapper {
    position: relative;
    width: 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 145px;
    height: 145px;
    border: 3px solid rgba(97, 183, 84, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral); }

/* ============================================================
   🏗️ LAYOUT & HEADER
   ============================================================ */
.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 25px 20px 20px 20px;
}

.header-wrapper {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    overflow: visible;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 20px;
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/* Pestañas del header centradas */
.header-tabs {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 4px;
    gap: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-tab-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    opacity: 0.6;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    transition: all 0.2s ease;
}

.header-tab-btn:hover {
    color: var(--text-primary);
    background: transparent;
    opacity: 0.8;
}

.header-tab-btn:hover::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: -1;
}

.header-tab-btn.active {
    color: var(--text-primary);
    font-weight: 400;
    opacity: 1;
    background: transparent;
}

.header-tab-btn.active .tab-icon {
    color: var(--accent-primary);
}

.header-tab-btn.active::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    z-index: -1;
}

/* Compound Interest corner badge on Test tab */
.tab-ci-badge {
    position: absolute;
    bottom: -4px;
    right: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent #3d7a3a transparent;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.tab-ci-badge svg {
    position: absolute;
    bottom: -17px;
    right: 0px;
    width: 10px;
    height: 10px;
    color: #ffffff;
    stroke: #ffffff;
}

.logo-area { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    width: 32px; 
    height: 32px;
    border-radius: 6px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    transform: translateZ(0);
    filter: contrast(1.1) brightness(1.05);
    flex-shrink: 0;
}

.app-header h1 { 
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem; 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    color: #FFFFFF;
    text-transform: uppercase;
    position: relative;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    backface-visibility: hidden;
    transform: translateZ(0);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}


.highlight { 
    color: #61B754;
    font-weight: 700;
    margin-left: 1px;
}

.main-content-wrapper { 
    animation: fadeIn 0.4s ease-out; 
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   🔍 EXPLORAR & BÚSQUEDA
   ============================================================ */
.browse-section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    margin-top: 5px;
}

.categories-sidebar {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    padding: 15px 20px 15px 20px;
    box-shadow: var(--shadow-card);
    height: 630px;
    max-height: 630px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* Buscador del sidebar */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    transition: all 0.3s ease;
    margin-bottom: 2px;
}

.sidebar-search:focus-within {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-card), 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.sidebar-search input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0;
    width: 100%;
    outline: none;
    font-size: 0.8rem;
    font-weight: 300;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

.sidebar-search input::placeholder {
    color: #888888;
    opacity: 1;
    font-weight: 300;
}

.sidebar-search-icon {
    width: 20px;
    height: 20px;
    opacity: 1;
    flex-shrink: 0;
    color: #888888;
}

.main-content {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    padding: 15px 30px 15px 30px;
    box-shadow: var(--shadow-card);
    height: 630px;
    max-height: 630px;
}

/* Sidebar de categorías */
.categories { 
    display: flex; 
    flex-direction: column;
    gap: 3px; 
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.categories::-webkit-scrollbar { width: 6px; }
.categories::-webkit-scrollbar-track { background: transparent; }
.categories::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.categories::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Separador de categorías */
.cat-separator {
    height: 1px;
    background: var(--glass-border);
    margin: 6px 0;
}

/* Grupos de categorías con subgrupos */
.category-group {
    display: flex;
    flex-direction: column;
}

.category-parent {
    position: relative;
}

.category-parent .cat-name {
    flex: 1;
}

.cat-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0px;
    margin-right: -4px;
}

.category-group.expanded .cat-chevron {
    transform: rotate(180deg);
}

.category-subgroup {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 20px;
    margin-top: 2px;
}

.category-group.expanded .category-subgroup {
    display: flex;
}

.sub-btn {
    padding: 4px 10px;
    background: transparent;
}

.sub-btn .cat-name {
    font-size: 0.75rem;
}

.category-btn {
    display: flex; 
    align-items: center;
    gap: 12px; 
    padding: 7px 10px; 
    width: 100%;
    background: linear-gradient(90deg, 
        rgba(18, 18, 18, 1) 0%, 
        var(--bg-card) 70%, 
        rgba(22, 22, 22, 1) 100%);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer; 
    transition: all 0.2s ease;
    text-align: left;
}

.category-btn:hover { 
    background: linear-gradient(90deg, 
        rgba(15, 15, 15, 1) 0%, 
        rgba(255, 255, 255, 0.05) 70%, 
        rgba(25, 25, 25, 1) 100%);
}

.category-btn.active { 
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.cat-icon { 
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-primary);
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.cat-name { 
    font-size: 0.8rem; 
    font-weight: 400; 
    color: var(--text-primary);
    flex: 1;
    font-family: 'Inter', sans-serif;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.category-btn:hover .cat-name {
    opacity: 0.8;
}

.category-btn.active .cat-name { 
    color: var(--text-primary);
    opacity: 1;
}

.category-btn.active .cat-icon {
    color: var(--accent-primary);
    opacity: 1;
}

.cat-count { 
    display: none;
}

.category-btn.active .cat-count { 
    display: none;
}

.grid-controls {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    gap: 25px;
    margin-bottom: 15px;
    margin-left: -30px;
    margin-right: -30px;
    background: transparent;
    padding: 0 30px 15px 30px;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
}

.search-wrapper {
    display: flex; align-items: center; gap: 10px;
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md); 
    padding: 8px 15px;
    transition: all 0.3s ease;
    grid-column: span 1;
    height: 36px;
    box-sizing: border-box;
}
.search-wrapper:focus-within { 
    border-color: rgba(255, 255, 255, 0.25); 
    box-shadow: var(--shadow-card), 0 0 0 3px rgba(255, 255, 255, 0.05); 
}
.search-wrapper input { 
    background: transparent; 
    border: none; 
    color: var(--text-primary); 
    padding: 0; 
    width: 100%; 
    outline: none; 
    font-size: 0.85rem; 
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}
.search-icon-img { 
    width: 20px; 
    height: 20px; 
    opacity: 1;
    flex-shrink: 0;
    color: #62B654;
}

/* ============================================================
   🌍 FILTRO DE REGIONES/PAÍSES
   ============================================================ */
.region-filter {
    position: relative;
    grid-column: span 1;
    width: 220px;
}

.region-dropdown {
    position: relative;
}

.region-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    text-align: left;
    height: 36px;
    box-sizing: border-box;
}

.region-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.region-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--accent-primary);
}

.region-btn-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.region-btn-arrow.rotated {
    transform: rotate(180deg);
}

.region-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 1000;
    overflow: hidden;
}

.region-dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.region-popup {
    display: flex;
    min-width: 520px;
    max-height: 350px;
}

.region-tabs {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid var(--border-subtle);
    min-width: 150px;
    padding: 8px 0;
    flex-shrink: 0;
}

.region-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    opacity: 1;
}

.region-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.region-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    opacity: 1;
}

.region-countries {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    align-content: start;
    min-width: 350px;
}

.region-countries::-webkit-scrollbar {
    width: 4px;
}

.region-countries::-webkit-scrollbar-track {
    background: transparent;
}

.region-countries::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.country-option {
    padding: 8px 10px;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.country-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.country-option.selected {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.controls-group { 
    display: contents;
}

/* Estilos para selects tradicionales */
select {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    color: var(--text-primary); 
    padding: 5px 15px;
    border-radius: var(--radius-md); 
    outline: none; 
    cursor: pointer;
    grid-column: span 1;
    font-size: 0.85rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

select:hover { 
    border-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   💰 SELECTOR DE DIVISAS
   ============================================================ */
.currency-selector {
    position: relative;
}

.currency-dropdown {
    position: relative;
}

.currency-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 32px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.currency-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.currency-dropdown-content {
    display: none;
    position: fixed;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    min-width: 80px;
    z-index: 99999;
}

.currency-dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.currency-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.currency-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.currency-option:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}

.currency-option.selected {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 500;
}

/* ============================================================
   📊 SELECTOR DE ORDENAMIENTO PERSONALIZADO
   ============================================================ */
.sort-selector {
    position: relative;
    grid-column: span 1;
}

.sort-dropdown {
    position: relative;
}

.sort-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 140px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    text-align: left;
    height: 36px;
    box-sizing: border-box;
}

.sort-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.sort-btn-arrow {
    margin-left: 8px;
    transition: transform 0.2s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.sort-btn-arrow.rotated {
    transform: rotate(180deg);
}

.sort-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    width: 100%;
    min-width: fit-content;
    z-index: 1000;
    overflow: hidden;
}

.sort-dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.sort-option {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.sort-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sort-option:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}

.sort-option.selected {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* ============================================================
   🌐 SELECTOR DE IDIOMAS
   ============================================================ */
.header-selectors {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-selector {
    position: relative;
}

.language-dropdown {
    position: relative;
}

.language-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
}

.language-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.language-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
}

.language-dropdown-content {
    display: none;
    position: fixed;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    min-width: 140px;
    z-index: 99999;
}

.language-dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
}

.language-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.language-option:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}

.language-option.selected {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 500;
}

.language-option span {
    flex: 1;
}

.timeframe-selector-global {
    display: flex; align-items: center; 
    background: var(--glass-bg); 
    padding: 3px;
    border-radius: var(--radius-md); 
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    gap: 4px; 
    width: fit-content;
    height: 36px;
    box-sizing: border-box;
}

.timeframe-selector-global.view-mode-selector {
    padding: 3px;
    height: 36px;
    gap: 0;
    order: -1;
}
.timeframe-label {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
    padding-right: 12px;
    margin-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Inter', sans-serif;
}
.timeframe-btn {
    padding: 8px 12px; 
    background: transparent;
    border: none;
    color: var(--text-primary); 
    border-radius: var(--radius-sm); 
    cursor: pointer;
    font-size: 0.85rem; 
    font-weight: 400; 
    line-height: 1.2;
    vertical-align: top;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    box-sizing: border-box;
}
.timeframe-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}
.timeframe-btn:hover { 
    color: var(--text-primary);
    opacity: 0.8;
}
.timeframe-btn.active { 
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary); 
    font-weight: 400;
    opacity: 1;
}

/* ============================================================
   🔄 SELECTOR DE MODO DE VISTA MEJORADO
   ============================================================ */
.view-mode-selector .timeframe-btn {
    padding: 6px 6px;
    min-width: 30px;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-primary); 
    border-radius: var(--radius-sm); 
    cursor: pointer;
    font-size: 0.85rem; 
    font-weight: 400; 
    line-height: 1.2;
    vertical-align: top;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    opacity: 0.6;
    display: flex;
    align-items: center;
    height: 28px;
    box-sizing: border-box;
}

.view-mode-selector .timeframe-btn:hover { 
    color: var(--text-primary);
    opacity: 0.8;
}

.view-mode-selector .timeframe-btn.active { 
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary); 
    font-weight: 400;
    opacity: 1;
}

.view-mode-selector .timeframe-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================================
   🕒 SELECTOR DE PERÍODOS UNIFICADO
   ============================================================ */
.timeframe-selector-unified {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    height: 36px;
    width: 400px;
    box-sizing: border-box;
    position: relative;
    grid-column: span 1;
}

.timeframe-selector-unified .sort-dropdown {
    position: relative;
    flex: 1;
}

.timeframe-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Dropdown de números con cuadrícula */
#timeframeNumberDropdown {
    width: 200px !important;
    max-height: none !important;
    overflow: visible !important;
    display: none;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100%;
    margin-top: 4px;
}

#timeframeNumberDropdown.show {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 6px;
}

#timeframeNumberDropdown .sort-option {
    padding: 6px 4px !important;
    text-align: center;
    justify-content: center;
    min-height: 28px;
    font-size: 0.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-weight: 400;
    border: none !important;
}

#timeframeNumberDropdown .sort-option:not(:last-child) {
    border-bottom: none !important;
}

#timeframeNumberDropdown .sort-option:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

#timeframeNumberDropdown .sort-option.selected {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

.timeframe-selector-unified .sort-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    text-align: left;
    height: 36px;
    box-sizing: border-box;
}

.timeframe-selector-unified .sort-btn span {
    font-family: 'Inter', sans-serif;
}

.timeframe-selector-unified .sort-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.timeframe-selector-unified .sort-dropdown:first-child .sort-btn {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.timeframe-selector-unified .sort-dropdown:first-child .sort-btn:hover {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.timeframe-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.timeframe-apply-btn {
    background: #1f4a1d;
    border: 1px solid #2d5a2a;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    margin: 4px;
}

.timeframe-apply-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.timeframe-apply-btn:active {
    background: #163a15;
}

/* Range Date Picker Styles */
.range-date-container {
    display: flex;
    align-items: center;
}

.range-date-picker {
    position: relative;
}

.range-date-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 1000;
    min-width: 220px;
}

.range-date-dropdown.show {
    display: block;
}

.range-date-grid {
    display: flex;
    padding: 8px;
    gap: 8px;
}

.range-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    flex: 1;
}

.range-month-btn {
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.range-month-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.range-month-btn.selected {
    background: transparent;
    color: var(--accent-primary);
}

.range-years {
    width: 60px;
    max-height: 108px;
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.range-year-btn {
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    flex-shrink: 0;
}

.range-year-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.range-year-btn.selected {
    background: transparent;
    color: var(--accent-primary);
}

/* Scrollbar para años */
.range-years::-webkit-scrollbar {
    width: 4px;
}

.range-years::-webkit-scrollbar-track {
    background: transparent;
}

.range-years::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.range-years::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.symbol-grid-wrapper {
    position: relative;
    min-height: 532px;
    height: 532px;
}

.symbol-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px; max-height: 532px; overflow-y: auto; padding-right: 0;
}

/* Loader dentro del grid de símbolos */
.symbol-grid-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 9, 9, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-md);
}

.symbol-grid-loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.symbol-grid-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(97, 183, 84, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.symbol-grid-loader-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    max-width: 320px;
}

/* Animación suave para las tarjetas */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chartFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.symbol-card {
    animation: cardSlideIn 0.3s ease-out, chartFadeIn 0.6s ease-out 0.2s;
    animation-fill-mode: both;
}

/* Escalonar la animación de las tarjetas */
.symbol-card:nth-child(1) { animation-delay: 0.05s, 0.25s; }
.symbol-card:nth-child(2) { animation-delay: 0.1s, 0.3s; }
.symbol-card:nth-child(3) { animation-delay: 0.15s, 0.35s; }
.symbol-card:nth-child(4) { animation-delay: 0.2s, 0.4s; }
.symbol-card:nth-child(5) { animation-delay: 0.25s, 0.45s; }
.symbol-card:nth-child(6) { animation-delay: 0.3s, 0.5s; }
.symbol-card:nth-child(7) { animation-delay: 0.35s, 0.55s; }
.symbol-card:nth-child(8) { animation-delay: 0.4s, 0.6s; }
.symbol-card:nth-child(9) { animation-delay: 0.45s, 0.65s; }
.symbol-card:nth-child(10) { animation-delay: 0.5s, 0.7s; }

/* Estados especiales para las tarjetas */
.symbol-card.selected-for-portfolio {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(97, 183, 84, 0.3);
}

.symbol-card.selected-for-portfolio::before {
    opacity: 1;
    width: 4px;
}

.symbol-card.selected-for-portfolio::after {
    background: linear-gradient(135deg, 
        rgba(97, 183, 84, 0.1) 0%, 
        rgba(20, 20, 20, 0.85) 50%, 
        rgba(97, 183, 84, 0.1) 100%);
}
.symbol-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 16px; border-radius: var(--radius-md); cursor: pointer;
    transition: all 0.25s ease; position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 94px;
}
.symbol-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
    background: var(--accent-primary); opacity: 0; transition: all 0.25s ease;
    display: none;
}
.symbol-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, 
            rgba(15, 15, 15, 0.90) 0%, 
            rgba(20, 20, 20, 0.80) 50%, 
            rgba(25, 25, 25, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}
.symbol-card > * {
    position: relative;
    z-index: 2;
}
.symbol-card:hover { 
    background-color: rgba(255,255,255,0.02); 
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 15px rgba(97, 183, 84, 0.08);
}
.symbol-card:hover::after {
    background: 
        linear-gradient(135deg, 
            rgba(10, 10, 10, 0.82) 0%, 
            rgba(20, 20, 20, 0.68) 50%, 
            rgba(30, 30, 30, 0.75) 100%);
    animation: cardShine 1.2s ease-out forwards;
}

@keyframes cardShine {
    0% {
        background: 
            linear-gradient(120deg, 
                rgba(10, 10, 10, 0.82) 0%, 
                rgba(10, 10, 10, 0.82) 20%,
                rgba(255, 255, 255, 0.06) 30%,
                rgba(255, 255, 255, 0.10) 35%,
                rgba(255, 255, 255, 0.06) 40%,
                rgba(10, 10, 10, 0.82) 50%,
                rgba(20, 20, 20, 0.68) 100%);
        background-size: 300% 100%;
        background-position: 100% 0;
    }
    100% {
        background: 
            linear-gradient(120deg, 
                rgba(10, 10, 10, 0.82) 0%, 
                rgba(10, 10, 10, 0.82) 20%,
                rgba(255, 255, 255, 0.06) 30%,
                rgba(255, 255, 255, 0.10) 35%,
                rgba(255, 255, 255, 0.06) 40%,
                rgba(10, 10, 10, 0.82) 50%,
                rgba(20, 20, 20, 0.68) 100%);
        background-size: 300% 100%;
        background-position: -100% 0;
    }
}
.symbol-card:hover::before { opacity: 1; }
.symbol-card-header { 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-start; 
    position: relative;
    z-index: 3;
}
.symbol-card-left { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px;
    position: relative;
    z-index: 3;
}

.symbol-card-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 32px;
    gap: 2px;
    margin-right: 15px;
}

.symbol-card-code { 
    font-weight: 700; 
    color: var(--text-primary); 
    font-size: 0.9rem;
    line-height: 1.1;
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
    font-family: 'Inter', sans-serif;
}

.symbol-card-company {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    max-width: 120px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    position: relative;
    z-index: 3;
    word-wrap: break-word;
    hyphens: auto;
}
.symbol-card-return { 
    font-size: 0.75rem; 
    font-weight: 400;
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: -8px;
    font-family: 'Inter', sans-serif;
}
.symbol-card-return.positive { color: var(--success); }
.symbol-card-return.negative { color: var(--danger); }
.symbol-card-return.dd-green { color: #00ff9d; }
.symbol-card-return.dd-yellow { color: #7dd3fc; }
.symbol-card-return.dd-orange { color: #ffeb3b; }
.symbol-card-return.dd-red { color: #ff4757; }
.symbol-card-return.sharpe-excellent { color: #00ff9d; }
.symbol-card-return.sharpe-good { color: #7dd3fc; }
.symbol-card-return.sharpe-acceptable { color: #ffeb3b; }
.symbol-card-return.sharpe-poor { color: #ff4757; }
.symbol-card-return.volume-badge { color: #9ca3af; }
.symbol-card-return.market-cap-badge { color: #a78bfa; }

/* ============================================================
   ⭐ FAVORITOS
   ============================================================ */
.favorite-star {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    opacity: 0.3;
}

.favorite-star:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.favorite-star.favorited {
    opacity: 0.6;
}

.favorite-star svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #4b5563;
    stroke-width: 1.5;
    transition: all 0.2s ease;
}

.favorite-star.favorited svg {
    fill: #4b5563;
    stroke: #374151;
}

.favorite-star:hover svg {
    stroke: #6b7280;
}

.symbol-card {
    position: relative;
}
/* ============================================================
   📈 CHARTS & STATS
   ============================================================ */

/* Estadísticas en el header del gráfico */
.chart-header-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 15px;
    margin-top: -5px;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
}

.chart-header-stats .header-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px !important;
    font-family: 'Inter', sans-serif !important;
    min-width: 80px;
    padding: 4px 8px;
    background: linear-gradient(to bottom, 
        #0a0a0a 0%, 
        var(--glass-bg) 50%, 
        #060606 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
    overflow: hidden;
    min-height: 36px;
}

.chart-header-stats .header-stat-label {
    color: var(--text-secondary);
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
}

.chart-header-stats .header-stat-value {
    color: var(--text-primary);
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    text-align: center;
    min-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

.chart-header-stats .header-stat-value.positive {
    color: var(--success) !important;
}

.chart-header-stats .header-stat-value.negative {
    color: var(--danger) !important;
}

.chart-header-stats .header-stat-value.neutral {
    color: var(--text-secondary);
}

/* Drawdown siempre naranja */
.chart-header-stats .header-stat-value.drawdown {
    color: #ff8c00 !important;
}

/* Sharpe siempre azul más claro */
.chart-header-stats .header-stat-value.sharpe {
    color: #7dd3fc !important;
}

/* Especificidad adicional para asegurar que se apliquen los colores */
#chartHeaderStats .header-stat-value.drawdown {
    color: #ff8c00 !important;
}

#chartHeaderStats .header-stat-value.sharpe {
    color: #7dd3fc !important;
}

/* Colores específicos para Sharpe Ratio por calidad (como fallback) */
.chart-header-stats .header-stat-value.sharpe-excellent {
    color: #00ff9d;
}

.chart-header-stats .header-stat-value.sharpe-good {
    color: #7dd3fc;
}

.chart-header-stats .header-stat-value.sharpe-acceptable {
    color: #ffeb3b;
}

.chart-header-stats .header-stat-value.sharpe-poor {
    color: #ff4757;
}

/* Responsive para estadísticas del header */
@media (max-width: 1200px) {
    .chart-header-stats {
        gap: 10px;
        margin-left: 12px;
        margin-top: -3px;
    }
    
    .chart-header-stats .header-stat-item {
        min-width: 75px;
        min-height: 32px;
        padding: 3px 6px;
    }
    
    .chart-header-stats .header-stat-label {
        font-size: 0.75rem !important;
    }
    
    .chart-header-stats .header-stat-value {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 768px) {
    .chart-header-stats {
        gap: 8px;
        margin-left: 10px;
        margin-top: -2px;
        flex-wrap: wrap;
    }
    
    .chart-header-stats .header-stat-item {
        min-width: 70px;
        min-height: 28px;
        padding: 2px 4px;
    }
    
    .chart-header-stats .header-stat-label {
        font-size: 0.7rem !important;
    }
    
    .chart-header-stats .header-stat-value {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .chart-header-stats {
        display: none;
    }
}
.chart-section {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 15px 25px 10px 25px; margin: 30px 0;
    box-shadow: var(--shadow-card);
}
.chart-header { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    margin-bottom: 12px;
    position: relative;
    flex-wrap: wrap;
    gap: 15px;
}
.chart-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-shrink: 0;
}
.chart-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    border: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
}
.chart-header h3 { 
    color: var(--text-primary); 
    font-size: 1.1rem; 
    font-weight: 600; 
    margin: 0;
}
.chart-price {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 20px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.chart-container-wrapper { 
    position: relative; 
    height: 407px; 
    width: 100%; 
}

.chart-container-wrapper canvas {
    cursor: grab;
}

.chart-container-wrapper canvas:active {
    cursor: grabbing;
}

/* Toggle para tipo de gráfico (velas/línea) */
.chart-type-toggle {
    position: absolute;
    top: 11px;
    left: 11px;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--glass-bg);
    border: none;
    border-radius: 0;
    padding: 0;
    z-index: 10;
}

.chart-type-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.chart-type-btn:hover {
    color: var(--text-primary);
}

.chart-type-btn.active {
    color: var(--accent-primary);
}

.chart-type-btn svg {
    width: 18px;
    height: 18px;
}

.chart-toggle-separator {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.chart-indicators-btn {
    width: 32px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    position: relative;
}

.chart-indicators-btn svg {
    width: 18px;
    height: 18px;
}

.chart-indicators-btn:hover {
    color: var(--text-primary);
}

.chart-indicators-btn.active {
    color: var(--accent-primary);
}

/* Popup de indicadores */
.indicators-popup {
    position: absolute;
    top: 38px;
    left: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 1000;
    display: none;
    min-width: 240px;
    overflow: hidden;
}

.indicators-popup.visible {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.indicators-popup-content {
    display: flex;
    padding: 8px 0;
}

.indicators-column {
    flex: 1;
    padding: 0 4px;
}

.indicators-column:first-child {
    border-right: 1px solid var(--border-subtle);
}

.indicators-column-title {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 6px;
    margin: 0 4px 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.indicator-option {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 4px;
}

.indicator-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.indicator-option input[type="checkbox"],
.indicator-option input[type="radio"] {
    display: none;
}

.indicator-option input:checked + span {
    color: var(--accent-primary);
}

.comparison-badge {
    background: rgba(21, 22, 27, 0.95);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
}

.comparison-badge-text {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.comparison-badge-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.comparison-badge-close:hover {
    background: rgba(255, 71, 87, 0.2);
    color: var(--danger);
}

.chart-legend {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.legend-remove-btn:hover {
    background: rgba(255, 71, 87, 0.3);
    color: var(--danger);
    border-radius: 50%;
}

/* Contenedor para los botones del gráfico */
.chart-controls {
    display: flex;
    gap: 0;
    position: absolute;
    right: 70px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0;
    padding: 0;
}

/* Botones de herramientas de dibujo - estilo unificado */
.draw-line-btn,
.draw-rect-btn,
.draw-freehand-btn,
.clear-all-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.draw-line-btn svg,
.draw-rect-btn svg,
.draw-freehand-btn svg,
.clear-all-btn svg {
    width: 18px;
    height: 18px;
}

.draw-line-btn:hover,
.draw-rect-btn:hover,
.draw-freehand-btn:hover {
    color: var(--text-primary);
}

.draw-line-btn.active,
.draw-rect-btn.active,
.draw-freehand-btn.active {
    color: var(--accent-primary);
}

.clear-all-btn:hover {
    color: #ff4757;
}

.delete-line-btn {
    position: absolute;
    background: rgba(255, 71, 87, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 32px;
    height: 32px;
    z-index: 10000;
    box-shadow: 0 3px 12px rgba(255, 71, 87, 0.6);
    pointer-events: auto;
    user-select: none;
}

.delete-line-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.delete-line-btn:hover {
    background: rgba(255, 71, 87, 1);
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.delete-line-btn:active {
    transform: scale(1.05);
}

.section-heading {
    font-size: 1.2rem; color: var(--text-secondary);
    margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.section-heading::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }



/* ============================================================
   🔗 CORRELACIONES
   ============================================================ */
.correlation-section {
    background: var(--glass-bg); border-radius: var(--radius-lg);
    padding: 25px; border: 1px solid var(--glass-border);
    margin-top: 25px;
}

/* ============================================================
   📑 PESTAÑAS PRINCIPALES
   ============================================================ */
.main-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.main-tab-content.active {
    display: block;
}

.single-row-container {
    position: relative;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    padding: 15px 30px 15px 30px;
    box-shadow: var(--shadow-card);
    margin-top: 5px;
    min-height: 630px;
    overflow: visible;
}

.section-main-title {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

/* Ajustes para que las pestañas no Browse tengan una sola fila */
#portfolioTab .simulator-section {
    min-height: 595px;
    overflow-y: auto;
}

#portfolioTab .animated-section {
    min-height: 595px;
    overflow: visible;
}

#demoTab .demo-section {
    min-height: 595px;
    overflow: visible;
}

/* Asegurar que Simulator y Tracker tengan la misma altura que las demás pestañas */
.simulator-section {
    display: flex;
    flex-direction: column;
    min-height: 595px;
}

.demo-section {
    display: flex;
    flex-direction: column;
    min-height: 595px;
    overflow: visible;
}


/* Correlations ahora es el container principal y no necesita restricción de altura */

.correlation-type-buttons { 
    display: flex; 
    align-items: center; 
    background: var(--bg-panel); 
    padding: 4px 8px 4px 12px;
    border-radius: var(--radius-sm); 
    border: 1px solid var(--border-subtle);
    gap: 4px;
}
.correlation-label { 
    color: var(--text-primary); 
    font-size: 0.85rem; 
    font-weight: 600;
    white-space: nowrap;
    padding-right: 12px;
    margin-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.correlation-btn {
    background: transparent; 
    border: none;
    color: var(--text-secondary); 
    padding: 6px 16px; 
    border-radius: 4px;
    cursor: pointer; 
    transition: 0.2s;
    font-size: 0.85rem;
    font-weight: 600;
}
.correlation-btn:hover { color: var(--text-primary); }
.correlation-btn.active { background: var(--accent-primary); color: #000; box-shadow: 0 2px 4px rgba(97, 183, 84, 0.3); font-weight: 700; }

.correlation-list {
    position: relative;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    padding: 15px 8px 15px 8px;
    box-shadow: var(--shadow-card);
    margin: 5px 0 0 0;
    min-height: 630px;
    height: 630px;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.coverage-group-header {
    display: grid;
    grid-template-columns: 779px 500px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    height: 35px;
}

.group-header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-right: 1px solid var(--border-subtle);
    text-align: center;
}

.group-header-section:last-child {
    border-right: none;
}

.asset-info {
    background: transparent;
}

.portfolio-synergy {
    background: transparent;
}

.coverage-header {
    display: grid;
    grid-template-columns: 143px 120px 216px 120px 120px 60px 120px 120px 120px 80px 60px;
    align-items: center;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border-subtle);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 40px;
}

.coverage-header > div {
    padding: 10px 6px;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
}

.coverage-header > div:last-child {
    border-right: none;
}

.sortable-header {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.sortable-header:hover {
    background: rgba(97, 183, 84, 0.1);
    color: var(--accent-primary);
}

.sortable-header.active-sort {
    color: var(--accent-primary);
    font-weight: 800;
}

.header-separator {
    background: var(--border-subtle);
    border-left: none !important;
    border-right: none !important;
}

.coverage-table-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thick;
    scrollbar-color: #555 var(--bg-card);
    padding-bottom: 80px; /* Aumentar aún más el espacio inferior */
}

.coverage-table-body::-webkit-scrollbar {
    width: 12px;
}

.coverage-table-body::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 6px;
}

.coverage-table-body::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 6px;
    border: 2px solid var(--bg-card);
}

.coverage-table-body::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.coverage-table-body::-webkit-scrollbar-thumb:active {
    background: var(--accent-primary);
}

.coverage-row {
    display: grid;
    grid-template-columns: 143px 120px 216px 120px 120px 60px 120px 120px 120px 80px 60px;
    align-items: center;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
    height: 40px;
}

.coverage-row > div {
    padding: 6px 4px;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-sizing: border-box;
}

.coverage-row > div:last-child {
    border-right: none;
}

.coverage-row:last-child {
    border-bottom: none;
}

.coverage-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.coverage-row.clickable {
    cursor: pointer;
}

.coverage-row.clickable:hover {
    background: rgba(97, 183, 84, 0.1);
    border-left: 3px solid var(--accent-primary);
}

.coverage-row.clickable-row {
    cursor: pointer;
}

.coverage-row.clickable-row:hover {
    background: rgba(97, 183, 84, 0.1) !important;
    border-left: 3px solid var(--accent-primary);
}

.coverage-row.compared-active {
    background: var(--bg-card);
}

.coverage-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coverage-logo img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
    background: transparent;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
}

.coverage-symbol {
    display: flex;
    align-items: center;
}

.symbol-text {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: inherit;
}

.coverage-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.name-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.coverage-symbol {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 8px !important;
}

.symbol-logo-inline {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
    background: transparent;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    flex-shrink: 0;
}

.coverage-name {
    justify-content: flex-start !important;
    padding-left: 12px !important;
}

.coverage-group {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important;
}

.coverage-data {
    justify-content: center !important;
}

.coverage-drawdown-improvement,
.coverage-return-impact {
    justify-content: center !important;
}

.coverage-individual-drawdown,
.coverage-individual-return {
    justify-content: center !important;
    padding: 6px 4px;
}

.coverage-view {
    justify-content: center !important;
    padding: 6px 4px;
}

.coverage-decorrelation {
    justify-content: center !important;
    padding: 6px 4px;
}

.decorrelation-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.decorrelation-value.decorrelation-excellent {
    color: #00ff9d;
}

.decorrelation-value.decorrelation-good {
    color: #7dd3fc;
}

.decorrelation-value.decorrelation-acceptable {
    color: #ffeb3b;
}

.decorrelation-value.decorrelation-poor {
    color: #ff4757;
}

.view-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.view-btn:hover {
    background: rgba(97, 183, 84, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.05);
}

.view-btn.active {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.view-btn.active:hover {
    background: rgba(97, 183, 84, 0.1);
    transform: scale(1.05);
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

.individual-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.coverage-sharpe {
    justify-content: center !important;
    padding: 6px 4px;
}

.sharpe-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.sharpe-value.sharpe-excellent {
    color: #00ff9d;
}

.sharpe-value.sharpe-good {
    color: #7dd3fc;
}

.sharpe-value.sharpe-acceptable {
    color: #ffeb3b;
}

.sharpe-value.sharpe-poor {
    color: #ff4757;
}

.coverage-add-to-portfolio {
    justify-content: center !important;
    padding: 4px !important;
}

.add-to-portfolio-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.add-to-portfolio-btn:hover {
    background: rgba(97, 183, 84, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.05);
}

.add-to-portfolio-btn:active {
    transform: scale(0.95);
}

.add-to-portfolio-btn.disabled {
    background: transparent;
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.4;
    border-color: var(--border-subtle);
}

.add-to-portfolio-btn.disabled:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
    color: var(--text-tertiary);
    border-color: var(--border-subtle);
}

.add-to-portfolio-btn svg {
    width: 18px;
    height: 18px;
}



.group-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.2s ease;
    max-width: fit-content;
}

.group-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #62B654;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.group-icon svg {
    width: 100%;
    height: 100%;
}

.group-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 600;
}

.data-text.complete {
    color: var(--success);
    font-weight: 700;
}

.data-text.good {
    color: #7dd3fc;
    font-weight: 700;
}

.data-text.partial {
    color: #fbbf24;
    font-weight: 700;
}

.data-text.limited {
    color: var(--danger);
    font-weight: 700;
}

.progress-bar-discrete {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-fill-discrete {
    height: 100%;
    border-radius: 0;
    transition: width 0.8s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
}

.progress-text-discrete {
    position: absolute;
    z-index: 2;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.value-text {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.value-text.positive {
    color: var(--success);
}

.value-text.negative {
    color: var(--danger);
}

.value-text.neutral {
    color: var(--text-secondary);
}

.tooltip-container {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.tooltip-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.progress-bar-integrated {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-text {
    position: absolute;
    z-index: 2;
    font-weight: 700;
    font-size: 0.75rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    pointer-events: none;
}



.progress-bar {
    width: 75%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.progress-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.8s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Colores dinámicos basados en mejora/empeoramiento */
.progress-fill.progress-positive {
    background: linear-gradient(90deg, 
        rgba(34, 197, 94, 0.2) 0%, 
        rgba(34, 197, 94, 0.4) 100%);
    box-shadow: none;
}

.progress-fill.progress-negative {
    background: linear-gradient(90deg, 
        rgba(239, 68, 68, 0.2) 0%, 
        rgba(239, 68, 68, 0.4) 100%);
    box-shadow: none;
}

.progress-fill.progress-uncorrelated {
    background: linear-gradient(90deg, 
        rgba(128, 128, 128, 0.15) 0%, 
        rgba(128, 128, 128, 0.25) 100%);
    box-shadow: none;
}

/* Colores fijos para columnas que no cambian dinámicamente */
.progress-fill.recovery-speed-color {
    background: linear-gradient(90deg, 
        rgba(22, 163, 74, 0.2) 0%, 
        rgba(22, 163, 74, 0.4) 100%);
    box-shadow: none;
}

.progress-fill.synergy-score-color {
    background: linear-gradient(90deg, 
        rgba(74, 222, 128, 0.2) 0%, 
        rgba(74, 222, 128, 0.4) 100%);
    box-shadow: none;
}





.coverage-annual-return .value.positive {
    color: var(--success);
}

.coverage-annual-return .value.negative {
    color: var(--danger);
}

.coverage-annual-return .value.neutral {
    color: var(--text-secondary);
}

.coverage-drawdown-reduction .value.high-positive {
    color: var(--success);
}

.coverage-drawdown-reduction .value.medium-positive {
    color: #fbbf24;
}

.coverage-drawdown-reduction .value.high-negative {
    color: var(--danger);
}

.coverage-drawdown-reduction .value.neutral {
    color: var(--text-secondary);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 1200px) {
    .correlation-list {
        width: 1090px;
    }
    
    .coverage-group-header {
        font-size: 0.75rem;
        height: 32px;
        grid-template-columns: 654px 420px;
    }
    
    .coverage-header,
    .coverage-row {
        grid-template-columns: 124px 100px 180px 100px 100px 50px 100px 100px 100px 70px 50px;
    }
    
    .coverage-header {
        font-size: 0.65rem;
        height: 36px;
    }
    
    .coverage-header > div {
        padding: 8px 4px;
        height: 36px;
    }
    
    .view-btn,
    .add-to-portfolio-btn {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    
    .view-btn svg,
    .add-to-portfolio-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .coverage-row {
        height: 36px;
    }
    
    .coverage-row > div {
        padding: 4px 3px;
        height: 36px;
    }
    
    .symbol-logo-inline {
        width: 18px;
        height: 18px;
    }
    
    .symbol-text {
        font-size: 0.75rem;
    }
    
    .name-text {
        font-size: 0.7rem;
    }
    
    .individual-value {
        font-size: 0.7rem;
    }
    
    .group-badge {
        padding: 0;
        gap: 4px;
    }
    
    .coverage-group {
        padding-left: 8px !important;
    }
    
    .group-icon {
        width: 12px;
        height: 12px;
    }
    
    .group-name {
        font-size: 0.7rem;
    }
    
    .data-text {
        font-size: 0.7rem;
    }
    
    .coverage-total-return .value,
    .coverage-annual-return .value,
    .coverage-max-drawdown .value,
    .coverage-coverage .value {
        font-size: 0.7rem;
    }
    
    .progress-bar {
        width: 90%;
        height: 4px;
    }
    
    .value-container {
        gap: 2px;
    }
}

@media (max-width: 768px) {
    .correlation-list {
        width: 820px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .coverage-group-header {
        font-size: 0.7rem;
        height: 28px;
        grid-template-columns: 510px 340px;
    }
    
    .group-header-section {
        padding: 6px 8px;
    }
    
    .coverage-header,
    .coverage-row {
        grid-template-columns: 98px 80px 132px 80px 80px 40px 80px 80px 80px 60px 40px;
    }
    
    .coverage-header {
        font-size: 0.6rem;
        height: 32px;
    }
    
    .coverage-header > div {
        padding: 6px 3px;
        height: 32px;
    }
    
    .view-btn,
    .add-to-portfolio-btn {
        width: 24px;
        height: 24px;
        padding: 3px;
    }
    
    .view-btn svg,
    .add-to-portfolio-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .coverage-row {
        height: 32px;
    }
    
    .coverage-row > div {
        padding: 4px 2px;
        height: 32px;
    }
    
    .symbol-logo-inline {
        width: 16px;
        height: 16px;
    }
    
    .symbol-text {
        font-size: 0.7rem;
    }
    
    .name-text {
        font-size: 0.65rem;
    }
    
    .individual-value {
        font-size: 0.65rem;
    }
    
    .coverage-name {
        padding-left: 8px !important;
    }
    
    .group-badge {
        padding: 0;
        gap: 3px;
    }
    
    .coverage-group {
        padding-left: 6px !important;
    }
    
    .progress-bar-integrated {
        height: 100%;
        width: 100%;
    }
    
    .progress-text {
        font-size: 0.65rem;
    }
    
    .progress-text-discrete {
        font-size: 0.65rem;
    }
    
    .value-text {
        font-size: 0.65rem;
    }
    
    .tooltip {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
    
    .group-icon {
        width: 10px;
        height: 10px;
    }
    
    .group-name {
        font-size: 0.65rem;
    }
    
    .data-text {
        font-size: 0.65rem;
    }
    
    .coverage-total-return .value,
    .coverage-annual-return .value,
    .coverage-max-drawdown .value,
    .coverage-coverage .value {
        font-size: 0.65rem;
    }
    
    .progress-bar-integrated {
        height: 100%;
        width: 100%;
    }
    
    .progress-text {
        font-size: 0.7rem;
    }
    
    .progress-text-discrete {
        font-size: 0.7rem;
    }
    
    .value-text {
        font-size: 0.7rem;
    }
    
    .tooltip {
        font-size: 0.7rem;
        padding: 5px 9px;
    }
}



/* Pestañas de análisis - Estilo navegador */
.analysis-tabs {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    padding: 3px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    gap: 4px;
    width: fit-content;
    margin: 0 0 20px 0;
}

.analysis-tab-btn {
    padding: 5px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    vertical-align: top;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.analysis-tab-btn:hover {
    color: var(--text-primary);
}

.analysis-tab-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-weight: 400;
}

.analysis-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.analysis-tab-content.active {
    display: block;
}

/* Análisis Temporal - Gráficos elegantes */
.temporal-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 15px;
    padding: 20px;
    min-height: 532px;
}

.temporal-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.temporal-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-primary);
    opacity: 0;
    transition: all 0.25s ease;
}

.temporal-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, 
            rgba(15, 15, 15, 0.90) 0%, 
            rgba(20, 20, 20, 0.80) 50%, 
            rgba(25, 25, 25, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}

.temporal-section > * {
    position: relative;
    z-index: 2;
}

.temporal-section:hover {
    background-color: rgba(255,255,255,0.02);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 15px rgba(97, 183, 84, 0.08);
}

.temporal-section:hover::after {
    background: 
        linear-gradient(135deg, 
            rgba(10, 10, 10, 0.82) 0%, 
            rgba(20, 20, 20, 0.68) 50%, 
            rgba(30, 30, 30, 0.75) 100%);
}

.temporal-section:hover::before {
    opacity: 1;
}

.temporal-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.temporal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.temporal-values {
    display: flex;
    gap: 12px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.temporal-value, .temporal-date {
    font-weight: 500;
}

.temporal-value span, .temporal-date span {
    color: var(--text-primary);
    font-weight: 600;
}

.temporal-chart-container {
    position: relative;
    height: 140px;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px;
}

.temporal-chart-container canvas {
    border-radius: 4px;
}

.temporal-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Responsive: en pantallas grandes mostrar en una fila */
@media (min-width: 1400px) {
    .temporal-analysis {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   📊 PROBABILIDADES DE RENTABILIDAD - FORMATO COMPACTO
   ============================================================ */
.profitability-probability-section {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.4), rgba(13, 13, 13, 0.6));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.profitability-probability-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(97, 183, 84, 0.3) 20%, 
        rgba(97, 183, 84, 0.6) 50%, 
        rgba(97, 183, 84, 0.3) 80%, 
        transparent
    );
}

.profitability-probability-section:hover {
    border-color: rgba(97, 183, 84, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(97, 183, 84, 0.1);
    transform: translateY(-2px);
}

.profitability-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.profitability-chart-container {
    position: relative;
    height: 140px;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px;
}

.profitability-chart-container canvas {
    border-radius: 4px;
}

/* ============================================================
   🕹️ SIMULADOR
   ============================================================ */
.simulator-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 25px;
    margin-top: 30px;
    align-items: stretch;
}

.simulator-left-panel, .simulator-right-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.simulator-right-panel {
    justify-content: flex-start;
}

/* Espaciado extra en la configuración */
.config-section { margin-bottom: 16px; overflow: visible; }
.config-section:last-child { margin-bottom: 0; }
.config-section-compact { margin-bottom: 0; }
.config-section-compact .config-group { gap: 16px; }

.section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.section-title svg,
.section-title-icon {
    width: 16px;
    height: 16px;
    color: var(--text-primary);
    opacity: 0.9;
    flex-shrink: 0;
}

/* Frequency Buttons */
.frequency-buttons {
    display: flex;
    gap: 2px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.frequency-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.frequency-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.frequency-btn.active {
    background: #1f4a1d;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #2d5a2a;
}



/* Inputs Configuración */
.config-group { display: flex; flex-direction: column; gap: 20px; overflow: visible; }
.config-group-horizontal { flex-direction: row; gap: 15px; }
.config-group-compact { gap: 12px; }

.investment-row {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 15px;
}

.investment-row .input-with-prefix input {
    padding: 8px 10px 8px 26px;
    font-size: 0.85rem;
    height: 36px;
    box-sizing: border-box;
}

.investment-row .input-prefix {
    left: 10px;
    font-size: 0.85rem;
}

.config-field { flex: 1; }
.config-field-small { flex: 1; }
.config-field label { display: block; color: #ffffff; font-size: 0.85rem; margin-bottom: 8px; font-weight: 500; }

.input-with-prefix { position: relative; display: flex; align-items: center; }
.input-prefix { position: absolute; left: 12px; color: var(--text-tertiary); font-weight: 600; pointer-events: none; font-size: 0.85rem; }
.input-suffix { position: absolute; right: 12px; color: var(--text-tertiary); font-weight: 600; pointer-events: none; font-size: 0.85rem; }
.input-with-suffix input { padding-left: 12px; padding-right: 28px; }
.input-with-prefix input {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border-subtle);
    padding: 8px 12px 8px 28px; color: var(--text-primary);
    border-radius: var(--radius-sm); font-size: 0.85rem; transition: all 0.2s ease; font-weight: 600;
    height: 36px; box-sizing: border-box;
}
.input-with-prefix input:hover { border-color: rgba(255, 255, 255, 0.15); }
.input-with-prefix input:focus { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); outline: none; }

/* Hide number input spinners */
.input-with-prefix input[type="number"]::-webkit-outer-spin-button,
.input-with-prefix input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-with-prefix input[type="number"] {
    -moz-appearance: textfield;
}

/* Toggle Switch Moderno */
.toggle-option {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-input); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
}
.toggle-option:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.toggle-info label { margin-bottom: 2px; display: block; color: var(--text-primary); font-size: 0.9rem;}
.toggle-description { font-size: 0.75rem; color: var(--text-tertiary); display: block;}
.toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-panel); transition: .4s; border-radius: 24px; border: 1px solid var(--text-tertiary);
}
.toggle-slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background-color: var(--text-secondary); transition: .4s; border-radius: 50%;
}
input:checked + .toggle-slider { background-color: #1f4a1d; border-color: #2d5a2a; }
input:checked + .toggle-slider:before { transform: translateX(20px); background-color: #ffffff; }

/* Period Buttons */
.period-buttons {
    display: flex; background: var(--bg-input); border-radius: var(--radius-sm);
    padding: 4px; border: 1px solid var(--border-subtle); gap: 2px;
}
.period-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.period-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.period-btn.active { 
    background: #1f4a1d; 
    color: #ffffff; 
    border: 1px solid #2d5a2a; 
    font-weight: 700; 
}

/* Custom period button & panel */
.period-btn-custom {
    flex: 0 0 auto;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.period-btn-custom svg {
    display: block;
}

.custom-period-panel {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.custom-period-input {
    width: 40px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 2px;
    outline: none;
    -moz-appearance: textfield;
}

.custom-period-input::-webkit-outer-spin-button,
.custom-period-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-period-input:focus {
    border-color: rgba(255, 255, 255, 0.25);
}

.custom-period-unit-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.custom-period-unit-btn {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-period-unit-btn.active {
    background: #1f4a1d;
    color: #ffffff;
}

.custom-period-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    background: #1f4a1d;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.custom-period-apply:hover {
    background: #2d5a2a;
}

/* Portfolio Config */




.simulate-btn-header {
    background: #1f4a1d;
    color: #ffffff; 
    border: 1px solid #2d5a2a; 
    padding: 10px 16px; 
    border-radius: 8px;
    font-weight: 600; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 5px;
    font-size: 12px;
    transition: all 0.2s ease;
    min-width: 85px;
    height: 38px;
}
.simulate-btn-header .btn-icon { width: 13px; height: 13px; }
.simulate-btn-header:hover { 
    background: #2d5a2a;
    border-color: #3d6b39;
}

.simulate-btn-header:disabled {
    background: var(--glass-bg);
    color: #3d6b39;
    border: 1px solid #2d5a2a;
    cursor: not-allowed;
    opacity: 0.6;
}

.simulate-btn-header:disabled:hover {
    background: var(--glass-bg);
    border-color: #2d5a2a;
}



.portfolio-main-row {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.portfolio-assets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
    position: relative;
    align-items: center;
    min-height: 50px;
}

.portfolio-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.add-asset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 50px;
    background: var(--glass-bg);
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
}

.add-asset-btn:hover {
    border-color: #3d6b39;
    color: #3d6b39;
    background: rgba(31, 74, 29, 0.1);
    transform: translateY(-2px);
}

.add-asset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Estado del botón durante selección múltiple */
.add-asset-btn.in-selection-mode {
    opacity: 0.6;
}

.add-asset-btn svg {
    width: 24px;
    height: 24px;
}

.add-asset-btn.error-state {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.05);
    color: #ff4757;
}





.portfolio-message {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    z-index: 10;
    opacity: 1;
}

.portfolio-message.error {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.portfolio-message.success {
    background: rgba(31, 74, 29, 0.2);
    border: 1px solid #2d5a2a;
    color: #3d6b39;
}



.portfolio-asset-card {
    position: relative;
    width: 120px;
    height: 50px;
    flex-shrink: 0;
}

.portfolio-asset-card-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}



.portfolio-asset-card:hover .portfolio-asset-card-inner {
    border-color: #3d6b39;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(97, 183, 84, 0.1);
}

.portfolio-asset-card:hover {
    z-index: 100;
}

.portfolio-asset-card.portfolio-asset-selected .portfolio-asset-card-inner {
    border-color: #3d6b39;
    box-shadow: 0 0 0 1px #3d6b39;
}

.portfolio-asset-card-inner {
    cursor: pointer;
}

.portfolio-asset-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

.portfolio-asset-top {
    display: flex;
    align-items: stretch;
    height: calc(100% - 3px);
}

.portfolio-asset-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 6px 8px;
    min-width: 0;
}

.portfolio-asset-right {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border-left: 1px solid var(--border-subtle);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-asset-right:hover {
    background: rgba(255, 255, 255, 0.03);
}

.portfolio-asset-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.portfolio-asset-symbol {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.portfolio-asset-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background: rgba(255, 71, 87, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0;
    visibility: hidden;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.portfolio-asset-card:hover .portfolio-asset-remove {
    opacity: 1;
    visibility: visible;
}

.portfolio-asset-remove:hover {
    background: #ff4757;
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.5);
}

.portfolio-asset-remove svg {
    width: 10px;
    height: 10px;
}

.portfolio-asset-allocation {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    margin-left: auto;
}

.portfolio-asset-allocation input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 10px;
    color: var(--text-primary);
    width: 26px;
    text-align: center;
    -moz-appearance: textfield; /* Firefox */
}

/* Eliminar flechitas en Chrome, Safari, Edge */
.portfolio-asset-allocation input::-webkit-outer-spin-button,
.portfolio-asset-allocation input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.portfolio-asset-allocation input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.portfolio-asset-allocation span {
    font-size: 9px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Nuevos estilos para el diseño con barra de progreso vertical */

.portfolio-asset-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}

.portfolio-asset-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #2d5a27, #4a7c59);
    transition: width 0.3s ease;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.portfolio-asset-percentage {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    z-index: 2;
    position: relative;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.portfolio-asset-percentage:hover {
    background: rgba(0, 0, 0, 0.3);
}

.portfolio-asset-percentage-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    outline: none;
    padding: 2px;
    -moz-appearance: textfield; /* Firefox */
}

/* Eliminar flechitas en Chrome, Safari, Edge */
.portfolio-asset-percentage-input::-webkit-outer-spin-button,
.portfolio-asset-percentage-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



.symbol-input-wrapper { position: relative; width: 100%; }
.symbol-input {
    background: transparent; border: none; color: var(--accent-primary);
    font-weight: 700; width: 100%; outline: none; text-transform: uppercase; font-size: 0.95rem;
}
.symbol-input::placeholder { color: var(--text-tertiary); font-weight: 400; text-transform: none; }

/* DROPDOWN */
.symbol-dropdown {
    position: absolute; top: 100%; left: 0; width: 300px;
    background: #1a1c24; border: 1px solid var(--accent-primary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: 9999; max-height: 250px; overflow-y: auto; display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); margin-top: 5px;
}
.symbol-dropdown.active { display: block; }
.symbol-dropdown-item {
    padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-subtle);
    transition: 0.2s; display: flex; flex-direction: column; gap: 2px;
}
.symbol-dropdown-item:hover { background: rgba(97, 183, 84, 0.1); }
.symbol-dropdown-item-code { color: var(--text-primary); font-weight: 700; font-size: 0.9rem; }
.symbol-dropdown-item-name { color: var(--text-secondary); font-size: 0.8rem; }

.allocation-input {
    background: rgba(255,255,255,0.05); border: 1px solid transparent; border-radius: 4px;
    color: var(--text-primary); text-align: center; padding: 6px; width: 100%; font-weight: 600;
}
.allocation-input:focus { border-color: var(--accent-primary); background: rgba(0,0,0,0.2); outline: none; }

/* Centrado de valores numéricos */
.initial-amount, .monthly-amount { 
    font-size: 0.85rem; color: var(--text-secondary); 
    text-align: center; /* Centrado */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.remove-symbol-btn {
    background: transparent; border: none; color: var(--text-tertiary);
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
}
.remove-symbol-btn svg { width: 16px; height: 16px; }
.remove-symbol-btn:hover { color: var(--danger); }

/* ============================================================
   🏁 PORTFOLIO SUB-TABS & ANIMATED RACE
   ============================================================ */
.portfolio-subtabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 0;
    width: fit-content;
}

.portfolio-subtab-btn {
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.subtab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    transition: all 0.2s ease;
}

.portfolio-subtab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.portfolio-subtab-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.portfolio-subtab-btn.active .subtab-icon {
    color: var(--accent-primary);
}

.portfolio-subtab-content {
    display: none;
}

.portfolio-subtab-content.active {
    display: block;
}

/* Animated Race Layout */
.animated-section {
    display: flex;
    flex-direction: column;
    min-height: 595px;
}

.animated-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 25px;
    margin-top: 10px;
    align-items: stretch;
}

.animated-left-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.animated-left-panel .config-section {
    margin-bottom: 8px;
}

.animated-left-panel .config-group {
    gap: 12px;
}

.animated-left-panel .config-section-compact .config-group {
    gap: 10px;
}

.animated-left-panel .config-field label {
    margin-bottom: 5px;
    font-size: 0.82rem;
}

.animated-left-panel .section-title {
    margin-bottom: 8px;
}

.animated-right-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 500px;
}

.optional-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

.race-controls {
    margin-top: auto;
    padding-top: 12px;
}

.race-start-btn {
    width: 100%;
    padding: 12px 20px;
    background: #1f4a1d;
    border: 1px solid #2d5a2a;
    color: #ffffff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.race-start-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.race-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.race-start-btn .btn-icon {
    width: 14px;
    height: 14px;
}

.race-chart-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.race-chart-container canvas {
    width: 100%;
    flex: 1;
}

.race-chart-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.race-chart-overlay p {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.race-chart-overlay.hidden {
    display: none;
}

.race-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 4px 10px 4px;
    flex-wrap: wrap;
}

.race-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
}

.race-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.race-legend-value {
    font-weight: 600;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.race-results {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(6, 6, 6, 0.92);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(8px);
}

.race-results-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.race-results-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.race-results-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.race-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.race-result-rank {
    font-size: 1.1rem;
    font-weight: 700;
    width: 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.race-result-rank.gold { color: #fbbf24; }
.race-result-rank.silver { color: #9ca3af; }
.race-result-rank.bronze { color: #b45309; }

.race-result-symbol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.race-result-symbol img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
}

.race-result-symbol span {
    font-weight: 600;
    font-size: 0.9rem;
}

.race-result-value {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.race-result-return {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.race-result-return.positive {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.race-result-return.negative {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.race-replay-btn {
    margin-top: 8px;
    padding: 10px 28px;
    background: #1f4a1d;
    border: 1px solid #2d5a2a;
    color: #ffffff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.race-replay-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

/* ============================================================
   📅 YEARS - YEAR BY YEAR COMPARISON
   ============================================================ */
.years-layout {
    grid-template-columns: 240px 1fr;
}

.years-left-panel {
    padding: 18px;
}

.years-left-panel .config-group {
    gap: 14px;
}

.years-duration-buttons {
    display: flex;
    gap: 2px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.years-duration-buttons .period-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 0.75rem;
}

.years-custom-unit-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.years-chart-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.years-chart-container canvas {
    display: block;
    flex: 1;
    min-height: 0;
}

.years-right-panel {
    overflow: hidden;
}

.years-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 8px 4px;
    flex-wrap: wrap;
    max-height: 72px;
    overflow: hidden;
    flex-shrink: 0;
}

.years-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.years-legend-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.years-legend-item.dimmed {
    opacity: 0.3;
}

.years-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   🎮 DEMO - INVERSIONES FICTICIAS
   ============================================================ */
.demo-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 25px;
    margin-top: 30px;
    align-items: stretch;
    overflow: visible;
}

.demo-left-panel, .demo-right-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 10px 25px 25px 25px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 530px;
}

/* Asegurar que el panel izquierdo tenga espacio para el calendario */
.demo-left-panel {
    position: relative;
    z-index: 10;
}

/* Asegurar que el panel derecho tenga altura fija para consistencia */
.demo-right-panel {
    min-height: 530px;
    max-height: 530px;
}

.demo-symbol-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    height: 36px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.demo-symbol-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.demo-symbol-input:focus-within {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.demo-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #888888;
    opacity: 1;
}

.demo-symbol-input input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.demo-symbol-input input::placeholder {
    color: #888888;
    opacity: 1;
    font-weight: 300;
    text-transform: none;
}

/* Dropdown de autocompletado para Demo */
.demo-symbol-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 4px;
    padding: 4px 0;
}

.demo-symbol-dropdown::-webkit-scrollbar {
    width: 4px;
}

.demo-symbol-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.demo-symbol-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.demo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--radius-sm);
    margin: 0 4px;
}

.demo-dropdown-item:last-child {
    border-bottom: none;
}

.demo-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.demo-dropdown-item.demo-dropdown-empty {
    color: var(--text-tertiary);
    cursor: default;
    justify-content: center;
    padding: 10px 12px;
}

.demo-dropdown-item.demo-dropdown-empty:hover {
    background: transparent;
}

.demo-dropdown-logo {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    object-fit: cover;
}

.demo-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.demo-dropdown-symbol {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.demo-dropdown-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón Add Manually en el dropdown */
.demo-dropdown-add-manual {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--radius-sm);
    margin: 0 4px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.demo-dropdown-add-manual:hover {
    background: rgba(255, 255, 255, 0.08);
}

.demo-dropdown-add-manual svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.demo-dropdown-add-manual-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.demo-dropdown-add-manual-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.demo-dropdown-add-manual-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Portfolio symbol search (Test tab) */
#portfolioSymbolWrapper {
    position: relative;
}

.portfolio-dropdown-already-added {
    opacity: 0.5;
}

.portfolio-dropdown-check {
    color: var(--accent-green, #4ade80);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Compound Interest shortcut button */
.compound-interest-shortcut {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #2d5a2a;
    border-radius: 6px;
    background: #1f4a1d;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}

.compound-interest-shortcut svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.compound-interest-shortcut:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.compound-interest-shortcut:active {
    transform: scale(0.96);
}

/* Compound Interest in dropdown */
.demo-dropdown-compound {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.demo-dropdown-compound-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #ffffff;
}

.portfolio-asset-logo-svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #ffffff;
}

/* Formulario manual de inversión */
.manual-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.manual-form-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    opacity: 0.8;
}

.back-to-normal-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.back-to-normal-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.back-to-normal-btn svg {
    width: 16px;
    height: 16px;
}

/* Botón cancelar edición en título */
.back-to-new-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-left: auto;
}

.back-to-new-btn:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.back-to-new-btn svg {
    width: 16px;
    height: 16px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-text-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    padding: 8px 12px;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    font-weight: 600;
    height: 36px;
    box-sizing: border-box;
}

.demo-text-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.demo-text-input:focus {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    outline: none;
}

/* Sección de contribuciones manuales */
.manual-contributions-section {
    margin-top: 8px;
}

.manual-contributions-section > label {
    display: block;
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 500;
}

.manual-contribution-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
}

.manual-contribution-row:first-child {
    border-color: rgba(255, 255, 255, 0.15);
}

.contribution-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.contribution-amount-field,
.contribution-date-field {
    margin-bottom: 0;
}

.contribution-date-field .custom-date-picker .demo-date-input {
    padding: 8px 26px 8px 4px;
    font-size: 0.78rem;
    height: 36px;
    box-sizing: border-box;
}
.contribution-date-field .custom-date-picker .demo-date-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.contribution-date-field .calendar-icon-btn {
    width: 24px;
    height: 24px;
    right: 2px;
}

.contribution-date-field .calendar-icon-btn svg {
    width: 14px;
    height: 14px;
}

.contribution-label {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 4px !important;
    white-space: nowrap;
}

/* Inputs más pequeños dentro de contribuciones */
.contribution-amount-field .input-with-prefix input {
    padding: 8px 10px 8px 24px;
    font-size: 0.85rem;
    height: 36px;
    box-sizing: border-box;
}
.contribution-amount-field .input-with-prefix input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.contribution-amount-field .input-prefix {
    left: 8px;
    font-size: 0.85rem;
}

.remove-contribution-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-contribution-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.remove-contribution-btn svg {
    width: 14px;
    height: 14px;
}

.add-contribution-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 15px;
    background: transparent;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
    height: 36px;
    box-sizing: border-box;
}

.add-contribution-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.add-contribution-btn svg {
    width: 16px;
    height: 16px;
}

.current-value-field {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

/* ============================================
   FORMULARIO DE AÑADIR CONTRIBUCIÓN A ACTIVO EXISTENTE
   ============================================ */

/* Badge de número de contribuciones */
.contributions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    margin-left: 6px;
    min-width: 14px;
    height: 14px;
}

/* Asset Name display (como input pero no editable) */
.add-contribution-asset-name {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.add-contribution-inline-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.add-contribution-asset-fullname {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Fila de Buy Price debajo de Amount/Date */
.contribution-buy-price-row {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.contribution-price-field {
    margin-bottom: 0;
}

.contribution-price-field .input-with-prefix input {
    padding: 8px 10px 8px 24px;
    font-size: 0.85rem;
    height: 36px;
    box-sizing: border-box;
}

.contribution-price-field .input-with-prefix input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.contribution-price-field .input-prefix {
    left: 8px;
    font-size: 0.85rem;
}

/* Input readonly para Current Total Value */
#addContributionCurrentValue {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Indicador de inversión manual en la lista */
.demo-manual-badge {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 8px;
}

.demo-manual-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.demo-manual-icon svg {
    width: 20px;
    height: 20px;
}

.use-current-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.use-current-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.use-current-btn svg {
    width: 18px;
    height: 18px;
}

.demo-date-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    padding: 8px 10px;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    font-weight: 600;
    cursor: text;
    height: 36px;
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
}

.demo-date-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Custom Date Picker */
.custom-date-picker {
    position: relative;
    width: 100%;
}

.custom-date-picker .demo-date-input {
    padding-right: 36px;
}

.calendar-icon-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.calendar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.calendar-icon-btn svg {
    width: 16px;
    height: 16px;
}

.custom-calendar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 9999;
    min-width: 280px;
    padding: 12px;
}

.custom-calendar.show {
    display: block;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.calendar-nav-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-month-year {
    display: flex;
    gap: 8px;
    align-items: center;
}

.calendar-month-btn,
.calendar-year-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.calendar-month-btn:hover,
.calendar-year-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 4px;
    font-family: 'Inter', sans-serif;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    text-align: center;
}

.calendar-day:hover:not(.disabled):not(.other-month) {
    background: rgba(255, 255, 255, 0.08);
}

.calendar-day.today {
    border: 1px solid var(--accent-primary);
}

.calendar-day.selected {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.calendar-day.other-month {
    color: var(--text-tertiary);
}

.calendar-day.disabled {
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Month/Year selector dropdown */
.calendar-selector {
    display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 1001;
    padding: 8px;
}

.calendar-selector.show {
    display: block;
}

.calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.calendar-years-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
}

.calendar-selector-btn {
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.calendar-selector-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.calendar-selector-btn.selected {
    background: rgba(255, 255, 255, 0.15);
}

/* Input de fecha dentro de contribuciones - más compacto */
.demo-date-input:focus {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    outline: none;
}

.create-investment-btn {
    background: #1f4a1d;
    color: #ffffff;
    border: 1px solid #2d5a2a;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    margin-top: 15px;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
}

.create-investment-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.create-investment-btn:active {
    background: #163a15;
}

.create-investment-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.create-investment-btn .btn-text {
    transition: opacity 0.3s ease;
}

.create-investment-btn .tick-icon {
    font-size: 1.1rem;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
}

.create-investment-btn.showing-tick .tick-icon {
    opacity: 1;
}

.create-investment-btn.showing-tick svg,
.create-investment-btn.showing-tick .btn-text {
    opacity: 0;
}

.demo-investments-header {
    margin-bottom: 2px;
}

.demo-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 15px;
}

/* Demo View Tabs - Botones de navegación */
.demo-view-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.demo-view-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.demo-view-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.demo-view-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.demo-view-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Demo View Content - Contenedores de vistas */
.demo-view-content {
    display: none;
    flex-direction: column;
    flex: 1;
    height: 430px;
    min-height: 430px;
    max-height: 430px;
    overflow: visible;
}

.demo-view-content.active {
    display: flex;
}

/* Estilos para la vista de Line Chart */
/* La lógica de mostrar/ocultar está más abajo con :not(:empty) */

#demoViewLineChart .demo-chart-empty-state {
    display: flex;
}

.demo-chart-empty-state,
.demo-pie-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
    flex: 1;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.demo-chart-empty-state svg,
.demo-pie-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.demo-chart-empty-state h4,
.demo-pie-empty-state h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.demo-chart-empty-state p,
.demo-pie-empty-state p {
    font-size: 0.85rem;
    margin: 0;
    max-width: 280px;
}

/* Estilos para la vista de Pie Chart */
#demoViewPieChart .demo-pie-section {
    display: none;
}

#demoViewPieChart .demo-pie-empty-state {
    display: flex;
}

.demo-pie-section {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex: 1;
    max-height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.demo-pie-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    position: relative;
}

.demo-pie-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.demo-refresh-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
}

.demo-refresh-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.demo-refresh-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================================
   📊 TABLA DE INVERSIONES - FORMATO TABLA
   ============================================================ */

/* Contenedor de tabla */
.demo-investments-table-wrapper {
    background: #111111;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Encabezados de tabla */
.demo-table-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #111111;
    border-bottom: 1px solid #222222;
    gap: 0;
    min-height: 32px;
}

.demo-table-header .demo-table-col {
    font-size: 0.7rem;
    font-weight: 500;
    color: #888;
    text-transform: none;
    letter-spacing: 0;
}

/* Fila de tabla */
.demo-table-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
    padding: 6px 12px;
    min-height: 32px;
}

/* Filas de inversión */
.demo-investment-card {
    background: #111111;
    border: none;
    border-bottom: 1px solid #222222;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-height: auto;
    overflow: visible;
}

.demo-investment-card:last-child {
    border-bottom: none;
}

.demo-investment-card:hover {
    background: #1a1a1a;
}

.demo-investment-card::before {
    display: none;
}

/* Columnas de tabla */
.demo-table-col {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    padding: 0;
}

.demo-col-asset {
    flex: 2.5;
    gap: 10px;
    min-width: 0;
    padding-left: 8px;
}

/* Contenedor de logo con tamaño fijo */
.demo-logo-container {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Placeholder cuando no hay logo */
.demo-logo-placeholder {
    width: 22px;
    height: 22px;
    background: #252525;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-logo-placeholder svg {
    width: 14px;
    height: 14px;
    color: #444;
}

.demo-col-date {
    flex: 1.2;
    font-size: 0.7rem;
    color: #888;
    justify-content: flex-start !important;
    padding-left: 8px;
}

.demo-col-invested,
.demo-col-value,
.demo-col-profit,
.demo-col-return {
    flex: 1;
    justify-content: flex-start !important;
    text-align: left;
    padding-left: 8px;
}

.demo-col-actions {
    flex: 0 0 50px;
    justify-content: flex-end !important;
    gap: 4px;
    padding-right: 8px;
}

/* Estilos para valores en tabla */
.demo-table-row .demo-stat-value {
    font-size: 0.7rem;
    font-weight: 400;
    color: #ccc;
}

.demo-table-row .demo-stat-value.positive {
    color: #4ade80;
}

.demo-table-row .demo-stat-value.negative {
    color: #f87171;
}

/* Símbolo en formato tabla */
.demo-table-row .demo-investment-symbol {
    font-weight: 500;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logo en formato tabla */
.demo-table-row .demo-investment-logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Botones de acción - iconos pequeños estilo imagen */
.demo-table-row .demo-investment-edit,
.demo-table-row .demo-investment-remove {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-table-row .demo-investment-edit:hover {
    color: #aaa;
}

.demo-table-row .demo-investment-remove:hover {
    color: #aaa;
}

.demo-table-row .demo-investment-edit svg,
.demo-table-row .demo-investment-remove svg {
    width: 14px;
    height: 14px;
}

/* Fila Total - primera fila destacada */
.demo-total-summary {
    background: #111111;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    min-height: auto;
}

.demo-total-summary .demo-table-row {
    background: transparent;
    border-top: 1px solid #222222;
    border-bottom: none;
}

.demo-total-summary .demo-table-row .demo-investment-symbol {
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}

.demo-total-summary .demo-total-icon {
    width: 16px;
    height: 16px;
    color: #fff;
    flex-shrink: 0;
}

.demo-total-summary .demo-stat-value {
    font-weight: 500;
    font-size: 0.7rem;
    color: #ccc;
}

.demo-total-summary::before {
    display: none;
}
    background: var(--accent-primary);
    opacity: 1;
    transition: 0.2s;
}

/* Estilos específicos para el cuadro total */
.demo-total-summary .demo-investment-stats {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 25px;
}

.demo-total-summary .demo-stat {
    text-align: center;
    width: 75px;
    flex-shrink: 0;
}

.total-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.total-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.total-return {
    font-size: 0.9rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.total-return.positive {
    color: var(--success);
    background: rgba(0, 255, 157, 0.1);
}

.total-return.negative {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.1);
}

.demo-investments-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Estilos de filas de inversión ya definidos arriba en la sección de tabla */

.demo-investment-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.demo-investment-left {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

.demo-investment-logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
    background: transparent;
    flex-shrink: 0;
}

.demo-investment-symbol {
    font-weight: 500;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-investment-date {
    font-size: 0.75rem;
    color: #888;
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-investment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.demo-investment-actions-spacer {
    width: 56px;
    flex-shrink: 0;
}

.demo-investment-edit {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-investment-edit:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.demo-investment-edit svg {
    width: 14px;
    height: 14px;
}

.demo-investment-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-investment-remove:hover {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.1);
}

.demo-investment-remove svg {
    width: 14px;
    height: 14px;
}

/* Modal de edición de inversión */
.demo-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.demo-edit-modal-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.demo-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.demo-edit-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.demo-edit-modal-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.demo-edit-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.demo-edit-modal-close svg {
    width: 18px;
    height: 18px;
}

.demo-edit-modal-body {
    padding: 20px;
}

.demo-edit-symbol-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 16px 0;
}

.demo-edit-field {
    margin-bottom: 16px;
}

.demo-edit-field:last-child {
    margin-bottom: 0;
}

.demo-edit-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.demo-edit-field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.demo-edit-field input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Custom date picker inside edit modal */
.demo-edit-field .custom-date-picker {
    position: relative;
    width: 100%;
}

.demo-edit-field .custom-date-picker .demo-date-input {
    width: 100%;
    padding: 10px 12px;
    padding-right: 35px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.demo-edit-field .custom-date-picker .demo-date-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.demo-edit-field .custom-calendar {
    z-index: 10001;
}

.demo-edit-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.demo-edit-cancel {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.demo-edit-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.demo-edit-save {
    flex: 1;
    padding: 10px 16px;
    background: var(--accent-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.demo-edit-save:hover {
    background: var(--accent-hover);
}

/* Tarjeta de inversión manual */
.demo-manual-card {
    border-left: none;
}

.demo-manual-card .demo-investment-symbol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.demo-investment-stats {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 25px;
}

.demo-stat {
    text-align: center;
    width: 75px;
    flex-shrink: 0;
}

.demo-stat-label {
    font-size: 0.55rem; /* Reducido para líneas más delgadas */
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0px; /* Sin margen para compactar */
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.demo-stat-value {
    font-size: 0.7rem; /* Reducido para líneas más delgadas */
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.demo-stat-value.positive {
    color: var(--success);
}

.demo-stat-value.negative {
    color: var(--danger);
}

.demo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.demo-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.demo-empty-state h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
}

.demo-empty-state p {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 300px;
}

/* Demo Chart Mode Toggle */
.demo-chart-mode-toggle {
    display: none;
    gap: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px;
    align-self: center;
}

.demo-chart-mode-toggle.visible {
    display: flex;
}

.demo-chart-mode-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.demo-chart-mode-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.demo-chart-mode-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.demo-chart-mode-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Demo Chart Styles */
.demo-chart-section {
    margin-top: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 15px;
    box-shadow: var(--shadow-card);
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

/* Header eliminado - ya no se usa */

.demo-chart-container {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 350px;
    height: 100%;
}

.demo-chart-container canvas {
    border-radius: 4px;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"><line x1="2" y1="10" x2="8" y2="10" stroke="white" stroke-width="1.5"/><line x1="12" y1="10" x2="18" y2="10" stroke="white" stroke-width="1.5"/><line x1="10" y1="2" x2="10" y2="8" stroke="white" stroke-width="1.5"/><line x1="10" y1="12" x2="10" y2="18" stroke="white" stroke-width="1.5"/></svg>') 10 10, crosshair;
}

/* Fixed tooltip for demo chart - top left corner */
.demo-chart-fixed-tooltip {
    position: absolute;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    z-index: 10;
    pointer-events: none;
    width: 155px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.demo-chart-fixed-tooltip .fixed-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.demo-chart-fixed-tooltip .fixed-tooltip-row:last-child {
    margin-bottom: 0;
}

.demo-chart-fixed-tooltip .fixed-tooltip-label {
    font-size: 0.65rem;
    color: #a0a0a0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

#fixedTooltipPortfolio,
#fixedTooltipInvested {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Ocultar chart section por defecto cuando está vacío */
#demoViewLineChart .demo-chart-section {
    display: none;
}

#demoViewLineChart .demo-chart-section:not(:empty) {
    display: flex;
}

/* ============================================================
   📊 RESULTADOS SIMULACIÓN
   ============================================================ */
.simulation-results { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-subtle); animation: fadeIn 0.5s ease-out; }

/* Título de sección de resultados */
.simulation-results h3 {
    color: var(--text-primary);
    margin-bottom: 35px; /* Espaciado aumentado */
    font-size: 1.4rem;
}

.results-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 30px; }
.result-card-compact {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 15px 10px; text-align: center; position: relative; overflow: hidden;
}
.highlight-card { background: rgba(97, 183, 84, 0.05); border-color: var(--accent-primary); box-shadow: 0 0 15px rgba(97, 183, 84, 0.1); }
.result-compact-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px;}
.result-compact-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); word-break: break-word;}
.result-compact-value.positive { color: var(--success); }
.result-compact-value.negative { color: var(--danger); }

/* Contenedor del gráfico de simulación */
.simulation-chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.simulation-chart-container canvas {
    border-radius: 4px;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"><line x1="2" y1="10" x2="8" y2="10" stroke="white" stroke-width="1.5"/><line x1="12" y1="10" x2="18" y2="10" stroke="white" stroke-width="1.5"/><line x1="10" y1="2" x2="10" y2="8" stroke="white" stroke-width="1.5"/><line x1="10" y1="12" x2="10" y2="18" stroke="white" stroke-width="1.5"/></svg>') 10 10, crosshair;
}

/* Fixed tooltip for simulation chart */
.simulation-chart-fixed-tooltip {
    position: absolute;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    z-index: 10;
    pointer-events: none;
    width: 195px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
}

.simulation-chart-fixed-tooltip .fixed-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.simulation-chart-fixed-tooltip .fixed-tooltip-row:last-child {
    margin-bottom: 0;
}

.simulation-chart-fixed-tooltip .fixed-tooltip-label {
    font-size: 0.65rem;
    color: #a0a0a0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

#simFixedTooltipPortfolio,
#simFixedTooltipInvested {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.results-chart {
    position: relative;
    background: var(--glass-bg); border-radius: var(--radius-lg); padding: 20px;
    border: 1px solid var(--glass-border); margin-bottom: 30px;
    box-shadow: var(--shadow-card); height: 400px;
}



/* Título de detalles por activo */
.results-details h4 {
    color: var(--text-primary);
    margin-bottom: 25px; /* Espaciado aumentado */
    font-size: 1.2rem;
    margin-top: 0;
}

.symbol-details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; }
.symbol-detail-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px; }
.symbol-detail-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: 10px; margin-bottom: 10px; }
.symbol-detail-name { color: var(--accent-primary); font-weight: 700; font-size: 1rem; }
.symbol-detail-allocation { background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600;}
.symbol-detail-stat { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; }
.symbol-detail-stat-label { color: var(--text-secondary); }
.symbol-detail-stat-value { color: var(--text-primary); font-weight: 600; }

.empty-state { padding: 80px 0; text-align: center; }
.empty-icon-pulse { font-size: 4rem; margin-bottom: 20px; animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; text-shadow: 0 0 0 rgba(0,229,255,0); }
    50% { transform: scale(1.1); opacity: 0.8; text-shadow: 0 0 20px rgba(0,229,255,0.5); }
    100% { transform: scale(1); opacity: 1; text-shadow: 0 0 0 rgba(0,229,255,0); }
}

/* Notificaciones */
.error-notification, .warning-notification, .success-notification {
    position: fixed; top: 20px; right: 20px; min-width: 320px; padding: 16px; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 10000; animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.error-notification { background: linear-gradient(135deg, #dc2626, #991b1b); border-left: 4px solid #7f1d1d; }
.warning-notification { background: linear-gradient(135deg, #f59e0b, #d97706); border-left: 4px solid #92400e; }
.success-notification { background: linear-gradient(135deg, #10b981, #059669); border-left: 4px solid #065f46; }
.error-content { display: flex; align-items: flex-start; gap: 12px; color: #fff; }
.error-icon { font-size: 1.5rem; margin-top: 2px; }
.error-text p { margin: 0; font-size: 0.9rem; }
.error-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .browse-section { grid-template-columns: 220px 1fr; gap: 25px; }
    .categories-sidebar { padding: 15px; min-height: 580px; }
    .main-content { min-height: 580px; }
    .symbol-grid-wrapper { min-height: 525px; height: 525px; }
    .symbol-grid { max-height: 525px; }
    .symbol-grid.ranking-view { height: 580px; }
    .simulator-layout { grid-template-columns: 1fr; }
    .animated-layout { grid-template-columns: 1fr; }
    .years-layout { grid-template-columns: 1fr; }
    .demo-layout { grid-template-columns: 1fr; }
    .portfolio-main-row { flex-direction: column; gap: 15px; align-items: stretch; }
    .portfolio-assets-grid { gap: 8px; justify-content: center; }
    .portfolio-controls { justify-content: center; }
    .add-asset-btn, .portfolio-asset-card { width: 120px; height: 50px; }
    .portfolio-asset-logo { width: 18px; height: 18px; }
    .portfolio-asset-right { width: 30%; }
    .portfolio-asset-percentage { font-size: 10px; }
    .portfolio-asset-percentage-input { font-size: 10px; }
}
@media (max-width: 768px) {
    .browse-section { grid-template-columns: 1fr; }
    .categories-sidebar { 
        position: static;
        max-height: 300px;
        overflow-y: auto;
    }
    .app-header { flex-direction: column; gap: 15px; padding: 15px; }
    .header-tabs { order: -1; margin-bottom: 10px; }
    .header-tab-btn { padding: 6px 12px; font-size: 0.8rem; }
    .grid-controls { flex-direction: column; }
    .controls-group { width: 100%; justify-content: space-between; }
    .symbol-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-main-row { flex-direction: column; gap: 12px; }
    .portfolio-assets-grid { gap: 6px; justify-content: center; }
    .portfolio-controls { flex-direction: column; gap: 10px; }
    .add-asset-btn, .portfolio-asset-card { width: 110px; height: 45px; }
    .portfolio-asset-logo { width: 16px; height: 16px; }
    .portfolio-asset-content { gap: 1px; }
    .portfolio-asset-right { width: 30%; }
    .portfolio-asset-percentage { font-size: 9px; }
    .portfolio-asset-percentage-input { font-size: 9px; }
    .portfolio-asset-symbol { font-size: 11px; }
    
    /* Demo responsive */
    .demo-layout { grid-template-columns: 1fr; gap: 20px; }
    .demo-left-panel, .demo-right-panel { padding: 20px; min-height: auto; max-height: none; }
    .demo-header-top { flex-direction: column; align-items: stretch; gap: 10px; }
    .demo-view-tabs { width: 100%; justify-content: center; }
    .demo-view-tab { padding: 6px 10px; font-size: 0.75rem; }
    .demo-view-tab svg { width: 14px; height: 14px; }
    .demo-chart-mode-btn { padding: 4px 8px; font-size: 0.68rem; }
    .demo-chart-mode-btn svg { width: 11px; height: 11px; }
    
    /* Tabla responsive */
    .demo-table-header { display: none; }
    .demo-table-row { flex-wrap: wrap; gap: 4px; padding: 10px 12px; }
    .demo-col-asset { flex: 0 0 100%; }
    .demo-col-date { flex: 0 0 100%; justify-content: flex-start; margin-bottom: 4px; }
    .demo-col-invested,
    .demo-col-value,
    .demo-col-profit,
    .demo-col-return { flex: 1 1 45%; min-width: 70px; justify-content: flex-start; }
    .demo-col-actions { flex: 0 0 100%; justify-content: flex-end; margin-top: 4px; }
    
    .demo-investment-card { padding: 0; }
}

/* ============================================================
   📊 GRÁFICO INTEGRADO EN EL ESPACIO DE ACTIVOS
   ============================================================ */
.chart-section-inline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    padding: 8px 2px 2px 2px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.chart-section-inline[style*="display: flex"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.chart-section-inline .chart-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    flex-shrink: 0;
}

.back-to-grid-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-left: -20px;
    margin-right: 4px;
}

.back-to-grid-btn svg {
    width: 28px;
    height: 28px;
}

.back-to-grid-btn:hover {
    color: rgba(255, 255, 255, 0.5);
}

.back-to-grid-btn:active {
    color: var(--accent-primary);
}

.chart-section-inline .chart-container-wrapper {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.chart-section-inline .chart-container-wrapper canvas {
    cursor: grab;
}

.chart-section-inline .chart-container-wrapper canvas:active {
    cursor: grabbing;
}

/* Estilos para el gráfico */

/* Overlay específico para estadísticas del portfolio */
#portfolioStatsOverlay {
    display: none; /* Oculto por ahora, se puede implementar en el header también */
}

/* Overlay específico para estadísticas del demo */
#demoStatsOverlay {
    top: 10px; /* Perfecto - cerca del eje de €5,500 */
    left: 36px; /* 2 milímetros más a la izquierda */
}

/* Ocultar el grid cuando se muestra el gráfico */
.symbol-grid {
    transition: opacity 0.2s ease;
}

.symbol-grid-wrapper.chart-active #symbolGrid {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.symbol-grid-wrapper.chart-active .chart-section-inline {
    display: flex;
}

/* ============================================================
/* ============================================================
   🎯 MODO DE SELECCIÓN MÚLTIPLE DE ASSETS
   ============================================================ */

.multi-select-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(21, 22, 27, 0.95);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.multi-select-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.multi-select-icon {
    font-size: 1.2rem;
}

.multi-select-text strong {
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.multi-select-text p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
}

.symbol-card.selected-for-portfolio {
    background: rgba(97, 183, 84, 0.15) !important;
    border-color: rgba(97, 183, 84, 0.4) !important;
}

/* Panel de control pequeño y centrado */
.multi-select-control-panel {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(13, 13, 13, 0.95);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: auto;
    min-width: 200px;
}

.multi-select-control-panel.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.control-panel-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.selection-counter {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.selection-counter span {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.9rem;
}

.control-panel-buttons {
    display: flex;
    gap: 8px;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    min-width: 60px;
    justify-content: center;
}

.control-btn svg {
    width: 14px;
    height: 14px;
}

.cancel-btn {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.cancel-btn:hover {
    background: rgba(255, 71, 87, 0.2);
    border-color: #ff4757;
}

.done-btn {
    background: var(--accent-primary);
    color: #000;
    border: 1px solid var(--accent-primary);
}

.done-btn:hover:not(:disabled) {
    background: #4a9c41;
}

.done-btn:disabled {
    background: rgba(97, 183, 84, 0.3);
    color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
    border-color: rgba(97, 183, 84, 0.3);
}

.done-btn.has-selections {
    box-shadow: 0 1px 4px rgba(97, 183, 84, 0.2);
}

/* Ajustar el container para hacer espacio al panel */
.symbol-grid-wrapper {
    position: relative;
    padding-bottom: 0;
}

.symbol-grid-wrapper:has(.multi-select-control-panel) {
    padding-bottom: 80px;
}

/* ============================================================
   🔍 FILTRO DE BÚSQUEDA EN HEADER DE COVERAGE
   ============================================================ */

.header-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-search-btn {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-search-btn:hover {
    opacity: 1;
    background: rgba(97, 183, 84, 0.15);
    transform: scale(1.1);
}

.header-search-btn.active {
    opacity: 1;
    background: rgba(97, 183, 84, 0.2);
    box-shadow: 0 0 8px rgba(97, 183, 84, 0.3);
}

.header-search-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(69%) sepia(85%) saturate(347%) hue-rotate(75deg) brightness(95%) contrast(89%);
}

.header-back-btn {
    background: transparent;
    border: none;
    padding: 1px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.header-back-btn:hover {
    opacity: 0.9;
    background: rgba(97, 183, 84, 0.1);
    transform: translateX(-1px);
}

.header-back-btn svg {
    width: 11px;
    height: 11px;
    color: var(--accent-primary);
    stroke-width: 2.2;
}

/* Contenedor del buscador de Coverage */
.coverage-search-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Ancho similar a la columna Name */
    z-index: 1000;
    margin-top: 8px;
}

.coverage-search-input {
    width: 100%;
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.coverage-search-input::placeholder {
    color: var(--text-secondary);
}

.coverage-search-input:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(97, 183, 84, 0.2);
}

/* Dropdown del buscador de Coverage - igual que Demo */
.coverage-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    overflow-y: auto;
    margin-top: 4px;
}

.coverage-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.coverage-dropdown-item:last-child {
    border-bottom: none;
}

.coverage-dropdown-item:hover {
    background: rgba(97, 183, 84, 0.1);
    border-color: var(--accent-primary);
}

.coverage-dropdown-item.coverage-dropdown-empty {
    color: var(--text-tertiary);
    cursor: default;
    font-style: italic;
}

.coverage-dropdown-item.coverage-dropdown-empty:hover {
    background: transparent;
}

.coverage-dropdown-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.coverage-dropdown-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.coverage-dropdown-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.coverage-dropdown-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Estilos para el buscador de Analytics */
.analytics-search-section {
    margin-bottom: 30px;
    padding: 0 20px;
    position: relative;
}

.analytics-search-section .search-wrapper {
    max-width: 400px;
    margin: 0 auto;
}

.analytics-search-section .search-wrapper input {
    font-size: 0.9rem;
}

/* Dropdown del buscador de Analytics */
.analytics-search-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-height: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    overflow-y: auto;
    margin-top: 4px;
}

.analytics-dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.analytics-dropdown-item:last-child {
    border-bottom: none;
}

.analytics-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.analytics-dropdown-item.analytics-dropdown-empty {
    color: var(--text-tertiary);
    cursor: default;
    font-style: italic;
}

.analytics-dropdown-item.analytics-dropdown-empty:hover {
    background: transparent;
}

.analytics-dropdown-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.analytics-dropdown-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.analytics-dropdown-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.analytics-dropdown-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Información del activo seleccionado en Analytics */
.selected-asset-info {
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-asset-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    position: relative;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    flex-shrink: 0;
}

.selected-asset-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 32px;
    gap: 1px;
}

.selected-asset-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
}

.selected-asset-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.symbol-card-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
    line-height: 1.1;
    position: relative;
    z-index: 3;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    margin-top: 0;
}

.symbol-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    z-index: 3;
    margin-right: 0;
    margin-top: auto;
}

.symbol-logo { 
    width: 32px; 
    height: 32px; 
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    align-self: flex-start;
    margin-top: 0;
}

/* Placeholder cuando no hay logo en Explore */
.symbol-logo-placeholder {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    background: #252525;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    align-self: flex-start;
    margin-top: 0;
    flex-shrink: 0;
}

.symbol-logo-placeholder svg {
    width: 20px;
    height: 20px;
    color: #444;
}
.symbol-card-middle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    position: relative;
    z-index: 3;
    min-height: 32px;
}
/* Información del activo en el gráfico - diseño compacto */
.chart-asset-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.chart-asset-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 32px;
    gap: 1px;
}

.chart-symbol-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
}

.chart-company {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    max-width: 200px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.chart-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
}
/* Selector de divisas en el header */
.header-currency {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.header-currency select {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
    height: 28px;
    box-shadow: var(--shadow-card);
    line-height: 1;
}

.header-currency select:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(97, 183, 84, 0.2);
}

.header-currency select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(97, 183, 84, 0.1);
}
/* ============================================
   VISTA DE RANKING - DOS COLUMNAS (OPTIMIZADA)
   ============================================ */

.symbol-grid.ranking-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -10px;
}

.symbol-grid.ranking-view::-webkit-scrollbar {
    width: 8px;
}

.symbol-grid.ranking-view::-webkit-scrollbar-track {
    background: transparent;
}

.symbol-grid.ranking-view::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.symbol-grid.ranking-view::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ranking-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass-bg);
    padding: 4px 8px;
    margin: -4px -8px 0 -8px;
}

.ranking-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 4px 8px;
    flex: 1;
}

.ranking-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.ranking-column-header {
    text-align: left;
    padding: 4px 16px;
    border: none;
    font-weight: 400;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    opacity: 1;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, 
        rgba(18, 18, 18, 1) 0%, 
        var(--bg-card) 70%, 
        rgba(22, 22, 22, 1) 100%);
    backdrop-filter: blur(10px);
}

.ranking-column-header.winners,
.ranking-column-header.losers {
    /* Mismo fondo gris para ambos */
}

.ranking-column-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 4px;
}

.ranking-header-title {
    flex: 1;
    color: var(--text-primary);
    opacity: 1;
    font-family: 'Inter', sans-serif;
}

.ranking-header-count {
    font-size: 0.75rem;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--text-primary);
    font-weight: 400;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    opacity: 0.9;
}

.symbol-ranking-item {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    cursor: pointer;
    height: 49px; /* Volver al tamaño que permite 10 elementos */
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.symbol-ranking-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    border-radius: 6px;
}

.symbol-ranking-progress {
    position: absolute;
    top: 8px;
    left: 8px; /* Empezar mucho más atrás, cerca del borde */
    height: 33px;
    transition: all 0.2s ease;
    z-index: 1;
    border-radius: 2px;
}

.symbol-ranking-item:hover .symbol-ranking-progress {
    opacity: 0.95;
    filter: brightness(1.05);
}

.symbol-ranking-progress.positive {
    background: linear-gradient(90deg, 
        rgba(97, 183, 84, 0.5) 0%, 
        rgba(97, 183, 84, 0.4) 100%);
}

.symbol-ranking-progress.negative {
    background: linear-gradient(90deg, 
        rgba(255, 71, 87, 0.5) 0%, 
        rgba(255, 71, 87, 0.4) 100%);
}

.symbol-ranking-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 0 8px;
    height: 100%; /* Ocupar toda la altura del elemento */
}

.symbol-ranking-end {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    z-index: 3;
    height: 100%; /* Ocupar toda la altura para centrar verticalmente */
}

.symbol-ranking-logo {
    width: 32px; /* Aumentado de 20px a 32px para mejor resolución */
    height: 32px; /* Aumentado de 20px a 32px para mejor resolución */
    border-radius: 4px; /* Aumentado proporcionalmente */
    object-fit: cover;
    background: var(--bg-secondary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.symbol-ranking-item:hover .symbol-ranking-logo {
    filter: brightness(1.05) contrast(1.02);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.symbol-ranking-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
    overflow: hidden;
    min-width: 0;
}

.symbol-ranking-code {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}

.symbol-ranking-item:hover .symbol-ranking-code {
    color: #f8f9fa;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.symbol-ranking-return {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.1;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
}

.symbol-ranking-item:hover .symbol-ranking-return {
    filter: brightness(1.1);
}

.symbol-ranking-return.positive { color: var(--success); }
.symbol-ranking-return.negative { color: var(--danger); }

/* Subtítulo para nombres de índices (inline a la derecha del código) */
.symbol-ranking-subtitle {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-left: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.symbol-ranking-item:hover .symbol-ranking-subtitle {
    opacity: 0.9;
}

/* ============================================
   RANKING BAR CHART RACE
   ============================================ */

.ranking-race-btn {
    background: #1f4a1d;
    color: #ffffff;
    border: 1px solid #2d5a2a;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ranking-race-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.ranking-race-btn:active {
    background: #163a15;
}

.ranking-race-btn svg {
    width: 12px;
    height: 12px;
}

.ranking-race-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 20;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.ranking-race-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.ranking-race-overlay.closing {
    opacity: 0;
    transform: scale(0.97);
}

.ranking-race-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(90deg, rgba(18, 18, 18, 1) 0%, var(--bg-card) 70%, rgba(22, 22, 22, 1) 100%);
    flex-shrink: 0;
}

.ranking-race-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.ranking-race-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
}

.ranking-race-speed {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.race-speed-btn {
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.race-speed-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.race-speed-btn.active {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.ranking-race-close-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.ranking-race-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.ranking-race-replay-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #2d5a2a;
    border-radius: var(--radius-sm);
    background: #1f4a1d;
    color: #ffffff;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.ranking-race-replay-btn:hover {
    background: #2d5a2a;
    border-color: #3d6b39;
}

.ranking-race-replay-btn:active {
    background: #163a15;
}

.ranking-race-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.ranking-race-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================
   MAP VIEW - WORLD MAP VISUALIZATION
   ============================================ */

.symbol-grid.map-view {
    display: flex;
    flex-direction: column;
    height: 720px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    background: var(--bg-main);
    border-radius: var(--radius-md);
}

.symbol-grid.map-view > svg {
    flex: 1;
    width: 100%;
    height: auto;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
}

.symbol-grid.map-view > svg path {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 0.5;
}

.symbol-grid.map-view > svg path * {
    pointer-events: none;
}

.symbol-grid.map-view > svg path.country-hover {
    opacity: 0.8 !important;
    filter: brightness(1.3);
}

.map-legend {
    position: absolute;
    bottom: 2px;
    left: 2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    z-index: 10;
}

.map-legend-title {
    font-size: 0.7rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    opacity: 0.6;
    margin-bottom: 2px;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    opacity: 0.6;
}

.legend-color {
    width: 12px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

.map-tooltip {
    position: absolute;
    background: rgba(var(--bg-panel-rgb), 0.95);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    pointer-events: none;
    z-index: 100;
    box-shadow: var(--shadow-card);
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltip-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tooltip-count {
    font-size: 0.8rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    color: var(--text-secondary);
}

.tooltip-return {
    font-size: 0.8rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    margin-top: 2px;
    color: #fff;
}

.tooltip-return.positive {
    color: #fff;
}

.tooltip-return.negative {
    color: #fff;
}

.map-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--text-secondary);
}

.map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--danger);
    font-size: 1rem;
}

/* ============================================================
   📊 HEATMAP VIEW (Finviz style)
   ============================================================ */

.symbol-grid.heatmap-view {
    display: block;
    height: 720px;
    overflow: hidden;
    padding: 0;
    background: var(--bg-main);
}

.heatmap-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.heatmap-content {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.heatmap-sector {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.heatmap-sector-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
}

.heatmap-sector-label-compact {
    height: 12px;
    font-size: 0.5rem;
    padding: 0 2px;
    line-height: 12px;
}

.heatmap-sector-label-mini {
    height: 10px;
    font-size: 0.5rem;
    padding: 0;
    text-align: center;
    line-height: 10px;
}

.heatmap-cell {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    overflow: hidden;
    will-change: left, top, width, height;
}

.heatmap-cell:hover {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Heatmap Tooltip */
.heatmap-tooltip {
    display: none;
    position: absolute;
    border: 3px solid #000;
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 150px;
    max-width: 320px;
}

/* Nuevo layout con sparkline */
.heatmap-tooltip-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.heatmap-tooltip-info {
    flex: 1;
    min-width: 0;
}

.heatmap-tooltip-chart {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.heatmap-tooltip-chart svg {
    display: block;
}

.heatmap-tooltip .tooltip-symbol {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-tooltip .tooltip-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-tooltip .tooltip-return {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-cell .heatmap-hover-info {
    display: none;
}

.heatmap-symbol {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    text-rendering: geometricPrecision;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-return {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    text-rendering: geometricPrecision;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-name {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-rendering: geometricPrecision;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-mcap {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    text-rendering: geometricPrecision;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary);
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .symbol-grid.map-view {
        height: auto;
        min-height: 500px;
    }
    
    .map-legend {
        gap: 10px;
        padding: 10px;
    }
    
    .map-legend-item {
        font-size: 0.7rem;
    }
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .symbol-grid.ranking-view {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: -10px;
    }
    
    .ranking-column-header {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .symbol-ranking-item {
        min-height: 32px;
        padding: 5px 8px;
    }
    
    .symbol-ranking-logo {
        width: 18px;
        height: 18px;
    }
}

/* FORZAR ESTILOS DE ESTADÍSTICAS - FINAL DEL ARCHIVO */
#chartHeaderStats .header-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

#chartHeaderStats .header-stat-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

/* Mantener colores específicos para valores con estados */
#chartHeaderStats .header-stat-value.positive {
    color: var(--success) !important;
}

#chartHeaderStats .header-stat-value.negative {
    color: var(--danger) !important;
}

#chartHeaderStats .header-stat-value.sharpe-excellent {
    color: #00ff9d !important;
}

#chartHeaderStats .header-stat-value.sharpe-good {
    color: #7dd3fc !important;
}

#chartHeaderStats .header-stat-value.sharpe-acceptable {
    color: #ffeb3b !important;
}

#chartHeaderStats .header-stat-value.sharpe-poor {
    color: #ff4757 !important;
}

/* Drawdown siempre naranja - ID específico */
#chartHeaderStats .header-stat-value.drawdown {
    color: #ff8c00 !important;
}

/* Sharpe siempre azul más claro - ID específico */
#chartHeaderStats .header-stat-value.sharpe {
    color: #7dd3fc !important;
}

/* Efecto hover para los recuadros de estadísticas */
.chart-header-stats .header-stat-item:hover {
    background: linear-gradient(to bottom, 
        #0c0c0c 0%, 
        #090909 50%, 
        #050505 100%);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}




/* ============================================================
   🔐 LOGIN SCREEN
   ============================================================ */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #060606;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.login-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 340px;
    padding: 40px 30px;
}

.login-logo-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.login-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.login-input {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.login-input::placeholder {
    color: #666;
}

.login-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

.login-btn {
    background: #1a3a18;
    border: 1px solid #2a5a26;
    color: #ffffff;
    padding: 14px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.login-btn:hover {
    background: #245a20;
    border-color: #3a7a34;
}

.login-signup-btn {
    background: transparent;
    border: none;
    color: var(--accent-primary);
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: not-allowed;
    opacity: 0.35;
    transition: all 0.2s ease;
}

.login-guest-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.login-guest-btn:hover {
    opacity: 1;
    color: var(--text-primary);
}

/* ============================================================
   👤 PROFILE ICON (HEADER)
   ============================================================ */
.profile-icon-wrapper {
    display: flex;
    align-items: center;
}

.profile-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.profile-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   📋 PROFILE OVERLAY
   ============================================================ */
.profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #060606;
    z-index: 100000;
    animation: profileSlideIn 0.3s ease-out;
}

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

.profile-overlay-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 30px 24px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.profile-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.profile-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.profile-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 60px;
    padding-bottom: 30px;
}

.profile-avatar-area {
    position: relative;
    display: inline-block;
}

.profile-avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar-placeholder {
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-edit-pencil {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

.profile-edit-pencil:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.profile-edit-pencil.avatar-pencil {
    position: absolute;
    bottom: -4px;
    right: -4px;
}

.profile-username-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-username {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.profile-email {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
}

.profile-bio-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.profile-bio {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-tertiary);
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.profile-body {
    flex: 1;
    padding: 20px 0;
}

.profile-footer {
    padding: 20px 0 40px;
}

.profile-logout-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid rgba(255, 70, 70, 0.3);
    border-radius: var(--radius-md);
    color: #ff4757;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.profile-logout-btn:hover {
    background: rgba(255, 70, 70, 0.08);
    border-color: rgba(255, 70, 70, 0.5);
}


/* ============================================================
   👤 PROFILE - AVATAR, USERNAME, BIO WITH EDIT PENCILS
   ============================================================ */
.profile-avatar-area {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
}

.profile-avatar-area .profile-avatar-wrapper {
    position: relative;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.profile-edit-pencil {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.profile-edit-pencil:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}

.profile-edit-pencil.avatar-pencil {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-username-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.profile-username {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.profile-bio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.profile-bio {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.profile-email {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-tertiary);
    font-family: 'Inter', sans-serif;
}


/* ============================================================
   ✏️ PROFILE EDIT MODALS
   ============================================================ */
.profile-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.profile-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    animation: modalSlideUp 0.2s ease-out;
}

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

.profile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-modal-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.profile-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    padding: 0;
}

.profile-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.profile-modal-body {
    padding: 16px 20px;
}

.profile-modal-input {
    width: 100%;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.profile-modal-input:focus {
    border-color: rgba(255, 255, 255, 0.25);
}

.profile-modal-input::placeholder {
    color: #555;
}

.profile-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px 16px;
    justify-content: flex-end;
}

.profile-modal-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
}

.profile-modal-save {
    background: #1a3a18;
    border: 1px solid #2a5a26;
    color: #ffffff;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-modal-save:hover {
    background: #245a20;
}

.avatar-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.avatar-upload-btn {
    width: 100%;
    background: #0f0f0f;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.15s ease;
}

.avatar-upload-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

.avatar-presets-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avatar-presets-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.avatar-presets-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.avatar-presets-coming {
    font-size: 0.78rem;
    color: #444;
    font-family: 'Inter', sans-serif;
    font-style: italic;
}