/* ═══════════════════════════════════════════════════════════
   FSR Dashboard - Mejoras Desktop VISIBLES
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    
    /* ═══════════════════════════════════════════════════════════
       FONDO ANIMADO MÁS VISIBLE
       ═══════════════════════════════════════════════════════════ */
    body {
        background: 
            radial-gradient(ellipse at 20% 30%, rgba(0, 170, 255, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 70%, rgba(0, 229, 160, 0.08) 0%, transparent 50%),
            linear-gradient(180deg, #05080f 0%, #0a0f1e 100%) !important;
        background-size: 100% 100%, 100% 100%, 100% 200%;
        animation: gradientShift 20s ease-in-out infinite;
    }

    @keyframes gradientShift {
        0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
        50% { background-position: 0% 0%, 0% 0%, 0% 100%; }
    }

    /* ══════════════════════════════════════════════════════════
       HEADER GLASSMORPHISM
       ══════════════════════════════════════════════════════════ */
    header, .header, nav {
        background: rgba(10, 14, 23, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid rgba(0, 170, 255, 0.2) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }

    /* ══════════════════════════════════════════════════════════
       TARJETAS KPI CON ANIMACIÓN DE ENTRADA MUY VISIBLE
       ══════════════════════════════════════════════════════════ */
    .kpi {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        background: linear-gradient(145deg, 
            rgba(15, 21, 37, 0.9), 
            rgba(11, 15, 28, 0.95)) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0, 170, 255, 0.15) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .kpi:nth-child(1) { animation-delay: 0.1s; }
    .kpi:nth-child(2) { animation-delay: 0.2s; }
    .kpi:nth-child(3) { animation-delay: 0.3s; }
    .kpi:nth-child(4) { animation-delay: 0.4s; }
    .kpi:nth-child(5) { animation-delay: 0.5s; }
    .kpi:nth-child(6) { animation-delay: 0.6s; }
    .kpi:nth-child(7) { animation-delay: 0.7s; }
    .kpi:nth-child(8) { animation-delay: 0.8s; }

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

    /* Hover en tarjetas - elevación más visible */
    .kpi:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(0, 170, 255, 0.5) !important;
        box-shadow: 
            0 20px 60px rgba(0, 170, 255, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    /* ══════════════════════════════════════════════════════════
       NÚMEROS KPI CON EFECTO HOVER DRÁSTICO
       ══════════════════════════════════════════════════════════ */
    .kpi-value {
        font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
        font-weight: 800 !important;
        letter-spacing: -1px !important;
        transition: all 0.3s ease !important;
    }

    .kpi-value:hover {
        transform: scale(1.15) !important;
        text-shadow: 0 0 20px rgba(0, 255, 136, 0.8) !important;
        color: #00ff88 !important;
    }

    /* ══════════════════════════════════════════════════════════
       ETIQUETAS MÁS VISIBLES
       ══════════════════════════════════════════════════════════ */
    .kpi-label {
        color: #b8d4f0 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        text-shadow: 0 0 8px rgba(0, 170, 255, 0.3) !important;
    }

    /* ══════════════════════════════════════════════════════════
       PESTAÑAS CON HOVER VISIBLE
       ══════════════════════════════════════════════════════════ */
    .tabs button,
    .nav-tabs button,
    .tab {
        transition: all 0.3s ease !important;
    }

    .tabs button:hover,
    .nav-tabs button:hover,
    .tab:hover {
        transform: translateY(-3px) !important;
        background: rgba(0, 170, 255, 0.15) !important;
        box-shadow: 0 4px 16px rgba(0, 170, 255, 0.3) !important;
    }

    /* ══════════════════════════════════════════════════════════
       GRÁFICOS CON GLOW MUY VISIBLE
       ══════════════════════════════════════════════════════════ */
    canvas {
        filter: drop-shadow(0 0 30px rgba(0, 170, 255, 0.15));
        transition: filter 0.3s ease;
    }

    canvas:hover {
        filter: drop-shadow(0 0 50px rgba(0, 170, 255, 0.3));
    }

    /* ══════════════════════════════════════════════════════════
       SCROLLBAR PREMIUM
       ══════════════════════════════════════════════════════════ */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, 
            rgba(0, 170, 255, 0.6), 
            rgba(0, 170, 255, 0.3));
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, 
            rgba(0, 170, 255, 0.8), 
            rgba(0, 170, 255, 0.5));
    }
}

/* ═══════════════════════════════════════════════════════════
   RESTAURAR: Efectos en TODAS las tarjetas y tablas
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    /* TODAS las tarjetas/contenedores del dashboard */
    .card, .kpi, .stat-card, .info-card,
    section > div,
    div[class*="container"],
    .chart-container,
    .activity-log,
    .stats-container,
    .metrics-container {
        background: linear-gradient(145deg, 
            rgba(15, 21, 37, 0.9), 
            rgba(11, 15, 28, 0.95)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0, 170, 255, 0.15) !important;
        border-radius: 16px !important;
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative;
        overflow: hidden;
    }

    /* Hover en TODAS las tarjetas - elevación + brillo */
    .card:hover, .kpi:hover, .stat-card:hover, .info-card:hover,
    section > div:hover,
    .chart-container:hover,
    .activity-log:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(0, 170, 255, 0.4) !important;
        box-shadow: 
            0 16px 48px rgba(0, 170, 255, 0.15),
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
    }

    /* Línea luminosa superior en TODAS las tarjetas */
    .card::before, .kpi::before, .stat-card::before,
    section > div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(0, 170, 255, 0.5), 
            transparent);
        opacity: 0.6;
        pointer-events: none;
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA DE COLORES: Valores positivos/negativos más vivos
       ═══════════════════════════════════════════════════════════ */

    /* Valores positivos - verde neón brillante */
    .text-green, .positive, [style*="color: var(--green)"],
    span[style*="color:#00e5a0"], span[style*="color: #00e5a0"],
    span[style*="color:var(--green)"] {
        color: #00ff88 !important;
        text-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important;
        font-weight: 700 !important;
    }

    /* Valores negativos - rojo brillante */
    .text-red, .negative, [style*="color: var(--red)"],
    span[style*="color:#ff3c5f"], span[style*="color: #ff3c5f"],
    span[style*="color:var(--red)"] {
        color: #ff4466 !important;
        text-shadow: 0 0 10px rgba(255, 68, 102, 0.5) !important;
        font-weight: 700 !important;
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA: Títulos de secciones más visibles
       ═══════════════════════════════════════════════════════════ */
    h3, h4, .section-title,
    div[style*="font-weight: 700"][style*="text-transform"] {
        color: #e8f0ff !important;
        text-shadow: 0 0 8px rgba(0, 170, 255, 0.2) !important;
        letter-spacing: 0.5px;
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA: Filas de tablas con hover
       ═══════════════════════════════════════════════════════════ */
    tr, .table-row, .activity-row, .log-row,
    div[style*="padding: 8px"][style*="border-left"] {
        transition: all 0.2s ease !important;
        border-radius: 6px !important;
        margin: 2px 0 !important;
    }

    tr:hover, .table-row:hover, .activity-row:hover, .log-row:hover {
        background: rgba(0, 170, 255, 0.08) !important;
        transform: translateX(4px) !important;
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA: Gráficos con glow más visible
       ═══════════════════════════════════════════════════════════ */
    canvas {
        border: 1px solid rgba(0, 170, 255, 0.1) !important;
        border-radius: 8px !important;
        filter: drop-shadow(0 0 20px rgba(0, 170, 255, 0.1));
        transition: all 0.3s ease;
    }

    canvas:hover {
        filter: drop-shadow(0 0 40px rgba(0, 170, 255, 0.25));
        border-color: rgba(0, 170, 255, 0.3) !important;
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA: Badges y estadísticas con animación
       ═══════════════════════════════════════════════════════════ */
    .badge,
    span[style*="border-radius"],
    .stat-value {
        animation: badgeGlow 3s ease-in-out infinite;
    }

    @keyframes badgeGlow {
        0%, 100% { 
            box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
        }
        50% { 
            box-shadow: 0 0 16px rgba(0, 170, 255, 0.6);
        }
    }

    /* ═══════════════════════════════════════════════════════════
       MEJORA: Barras de progreso con brillo
       ═══════════════════════════════════════════════════════════ */
    progress, [role="progressbar"],
    div[style*="width:"][style*="background"] {
        border-radius: 8px !important;
        box-shadow: 0 0 10px rgba(0, 170, 255, 0.2);
    }
}

/* ═══════════════════════════════════════════════════════════
   MEJORA TIPOGRÁFICA PREMIUM (Inter + JetBrains Mono)
   ═══════════════════════════════════════════════════════════ */

/* 1. Importar fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* 2. Base global: Inter para toda la UI */
body, p, span, div, a, button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1.6 !important;
}

/* 3. Títulos y Encabezados de sección */
h1, h2, h3, h4, h5, h6, .section-title, .card-title, .header-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important; /* Más compacto y moderno */
    color: #ffffff !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
}

/* 4. Números y Datos Financieros (Alineación Tabular) */
.kpi-value, .stat-value, td, .data-cell, 
[class*="price"], [class*="value"], [class*="amount"],
span[style*="font-weight: 700"] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-feature-settings: "tnum" !important; /* Números tabulares */
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.03em !important;
}

/* 5. Etiquetas, Labels y Texto Secundario */
.kpi-label, .text-muted, small, .label, .subtitle, th {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important; /* 11.2px */
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important; /* Gris azulado profesional */
}

/* 6. Tablas: Mejora de legibilidad */
table, .table {
    font-size: 0.875rem !important; /* 14px */
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

th {
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    color: #cbd5e1 !important;
}

/* 7. Ajuste específico para los badges de estado */
.badge, .status-badge {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
    padding: 4px 10px !important;
}


/* ═══════════════════════════════════════════════════════════
   CORRECCIÓN URGENTE: Restaurar y POTENCIAR COLORES NEÓN
   ═══════════════════════════════════════════════════════════ */

/* Texto base general (sin afectar elementos con colores específicos) */
body, p, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, th, .kpi-label, .text-muted, small {
    color: #e2e8f0 !important;
}

/* 🟢 VERDE NEÓN POTENCIADO (Ganancias, Subidas, Positivo) */
.text-green, .positive, .up, .profit, .gain, .buy,
span[style*="color: #00e5a0" i], span[style*="color:#00e5a0" i], 
span[style*="color:var(--green)" i], span[style*="color: #00ff88" i],
div[style*="color: #00e5a0" i], div[style*="color:#00e5a0" i],
td span[style*="color: #00e5a0" i], td span[style*="color:#00e5a0" i] {
    color: #00ff88 !important;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.8), 0 0 30px rgba(0, 255, 136, 0.4) !important;
    font-weight: 700 !important;
}

/* 🔴 ROJO NEÓN POTENCIADO (Pérdidas, Bajadas, Negativo) */
.text-red, .negative, .down, .loss, .sell,
span[style*="color: #ff3c5f" i], span[style*="color:#ff3c5f" i], 
span[style*="color:var(--red)" i], span[style*="color: #ff2244" i],
div[style*="color: #ff3c5f" i], div[style*="color:#ff3c5f" i],
td span[style*="color: #ff3c5f" i], td span[style*="color:#ff3c5f" i] {
    color: #ff2244 !important;
    text-shadow: 0 0 15px rgba(255, 34, 68, 0.8), 0 0 30px rgba(255, 34, 68, 0.4) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   MEJORAS SECCIÓN: POSICIONES (Tarjetas de Trading)
   ═══════════════════════════════════════════════════════════ */

/* 1. Ticker de la posición (ALM, CZR) más impactante */
h3, .position-header h3, div[style*="font-size: 1.25rem"][style*="font-weight: 700"] {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(0, 170, 255, 0.3) !important;
}

/* 2. Badges Premium (ABIERTA, SMALL CAP, Sectores) */
.badge, span[style*="border-radius: 12px"], span[style*="border-radius: 4px"][style*="padding"] {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.2s ease !important;
}

.badge:hover, span[style*="border-radius: 12px"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Grid de métricas (PRECIO ENTRADA, STOP LOSS, etc.) */
/* Labels (texto pequeño superior) */
div[style*="font-size: 0.75rem"][style*="color: rgb(156, 163, 175)"], 
.text-muted, .label-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #64748b !important; /* Gris azulado profesional */
}

/* Valores (Precios y números) */
td, .value-text, div[style*="font-weight: 700"][style*="font-size: 1rem"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-feature-settings: "tnum" !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.02em !important;
}

/* 4. Barra de progreso (SL -> Entrada -> TP) */
/* Track de la barra */
div[style*="height: 8px"][style*="background: rgb(31, 41, 55)"], 
.progress-track, [role="progressbar"] {
    background: rgba(15, 23, 42, 0.8) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    height: 10px !important;
}

/* Relleno de la barra (verde/rojo) */
div[style*="background: rgb(34, 197, 94)"], 
div[style*="background: rgb(239, 68, 68)"],
.progress-fill {
    border-radius: 10px !important;
    box-shadow: 0 0 15px currentColor !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto "Shimmer" (brillo que se mueve) en la barra de progreso */
div[style*="background: rgb(34, 197, 94)"]::after,
div[style*="background: rgb(239, 68, 68)"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    animation: shimmer 2.5s infinite !important;
}

@keyframes shimmer {
    100% { left: 100% !important; }
}

/* 5. P&L en el header de la posición (€2.45 (-2.9%)) */
div[style*="font-weight: 700"][style*="font-size: 1rem"][style*="margin-left"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.03em !important;
}

/* Animación de pulso para el P&L en vivo */
@keyframes pulsePnL {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

div[style*="color: rgb(239, 68, 68)"][style*="font-weight: 700"],
div[style*="color: rgb(34, 197, 94)"][style*="font-weight: 700"] {
    animation: pulsePnL 2s ease-in-out infinite !important;
}


/* ═══════════════════════════════════════════════════════════
   MEJORAS POSICIONES - SELECTORES REALES DEL DASHBOARD
   ═══════════════════════════════════════════════════════════ */

/* 1. Tarjeta de posición completa */
.pos-card {
    background: linear-gradient(145deg, rgba(15, 21, 37, 0.95), rgba(11, 15, 28, 0.98)) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 170, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.pos-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0, 170, 255, 0.5) !important;
    box-shadow: 0 20px 60px rgba(0, 170, 255, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Línea luminosa superior en tarjetas de posición */
.pos-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 170, 255, 0.6), transparent) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* 2. Ticker de la posición (ALM, CZR) */
.pos-ticker {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(0, 170, 255, 0.4) !important;
}

/* 3. Header de posición */
.pos-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

/* 4. Grid de métricas (PRECIO ENTRADA, STOP LOSS, etc.) */
.pos-item {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.pos-item:hover {
    background: rgba(0, 170, 255, 0.08) !important;
    border-color: rgba(0, 170, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Labels (texto pequeño superior) */
.pos-item-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

/* Valores (Precios y números) */
.pos-item-val {
    font-family: 'JetBrains Mono', monospace !important;
    font-feature-settings: "tnum" !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: -0.02em !important;
    color: #e2e8f0 !important;
}

/* 5. Badges de estado (ABIERTA, SMALL CAP, etc.) */
.pos-card span[style*="border-radius"],
.pos-card .badge {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.2s ease !important;
}

.pos-card span[style*="border-radius"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 6. Barra de progreso SL→Entrada→TP */
.pos-card [style*="height: 8px"],
.pos-card .progress-track {
    background: rgba(15, 23, 42, 0.9) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
    height: 10px !important;
    position: relative !important;
}

/* Relleno de la barra */
.pos-card [style*="background: rgb(34, 197, 94)"],
.pos-card [style*="background: rgb(239, 68, 68)"] {
    border-radius: 10px !important;
    box-shadow: 0 0 20px currentColor !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto shimmer en la barra */
.pos-card [style*="background: rgb(34, 197, 94)"]::after,
.pos-card [style*="background: rgb(239, 68, 68)"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    animation: posShimmer 2s infinite !important;
}

@keyframes posShimmer {
    100% { left: 100% !important; }
}

/* 7. P&L en el header (€2.45 (-2.9%)) */
.pos-header [style*="font-weight: 700"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.03em !important;
}