<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 280" fill="none">
  <defs>
    <linearGradient id="bg-t" x1="0" y1="0" x2="640" y2="280" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#00244D"/>
      <stop offset="100%" stop-color="#0A3A5C"/>
    </linearGradient>
    <linearGradient id="glow-t" x1="320" y1="60" x2="320" y2="240" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#085D55" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#085D55" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="candle-green" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2DD4A8"/>
      <stop offset="100%" stop-color="#085D55"/>
    </linearGradient>
    <linearGradient id="candle-red" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FF6B6B"/>
      <stop offset="100%" stop-color="#C0392B"/>
    </linearGradient>
    <linearGradient id="line-gold" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#F2A900" stop-opacity="0"/>
      <stop offset="20%" stop-color="#F2A900"/>
      <stop offset="80%" stop-color="#F2A900"/>
      <stop offset="100%" stop-color="#F2A900" stop-opacity="0"/>
    </linearGradient>
    <filter id="glow-filter">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="640" height="280" fill="url(#bg-t)"/>

  <!-- Subtle grid -->
  <g stroke="rgba(255,255,255,0.04)" stroke-width="0.5">
    <line x1="0" y1="70" x2="640" y2="70"/>
    <line x1="0" y1="120" x2="640" y2="120"/>
    <line x1="0" y1="170" x2="640" y2="170"/>
    <line x1="0" y1="220" x2="640" y2="220"/>
    <line x1="80" y1="0" x2="80" y2="280"/>
    <line x1="160" y1="0" x2="160" y2="280"/>
    <line x1="240" y1="0" x2="240" y2="280"/>
    <line x1="320" y1="0" x2="320" y2="280"/>
    <line x1="400" y1="0" x2="400" y2="280"/>
    <line x1="480" y1="0" x2="480" y2="280"/>
    <line x1="560" y1="0" x2="560" y2="280"/>
  </g>

  <!-- Glow behind chart area -->
  <ellipse cx="340" cy="160" rx="220" ry="120" fill="url(#glow-t)"/>

  <!-- Monitor frame -->
  <rect x="120" y="30" width="400" height="210" rx="12" fill="#0D1B2A" stroke="rgba(255,255,255,0.1)" stroke-width="1.5"/>
  <!-- Screen bezel -->
  <rect x="132" y="42" width="376" height="186" rx="6" fill="#0A1628"/>
  <!-- Monitor stand -->
  <rect x="290" y="240" width="60" height="16" rx="2" fill="#0D1B2A" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
  <rect x="260" y="254" width="120" height="8" rx="4" fill="#0D1B2A" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
  <!-- Screen power indicator -->
  <circle cx="320" cy="236" r="2" fill="#2DD4A8" opacity="0.6"/>

  <!-- Inside monitor: Chart area -->
  <g transform="translate(145, 52)">
    <!-- Y-axis labels -->
    <text x="0" y="18" fill="rgba(255,255,255,0.25)" font-size="8" font-family="monospace">4800</text>
    <text x="0" y="55" fill="rgba(255,255,255,0.25)" font-size="8" font-family="monospace">4600</text>
    <text x="0" y="92" fill="rgba(255,255,255,0.25)" font-size="8" font-family="monospace">4400</text>
    <text x="0" y="129" fill="rgba(255,255,255,0.25)" font-size="8" font-family="monospace">4200</text>
    <text x="0" y="162" fill="rgba(255,255,255,0.25)" font-size="8" font-family="monospace">4000</text>

    <!-- Horizontal guide lines inside chart -->
    <g stroke="rgba(255,255,255,0.04)" stroke-width="0.5" stroke-dasharray="3,3">
      <line x1="35" y1="14" x2="340" y2="14"/>
      <line x1="35" y1="51" x2="340" y2="51"/>
      <line x1="35" y1="88" x2="340" y2="88"/>
      <line x1="35" y1="125" x2="340" y2="125"/>
      <line x1="35" y1="158" x2="340" y2="158"/>
    </g>

    <!-- Candlesticks -->
    <!-- Candle 1 - red -->
    <line x1="60" y1="85" x2="60" y2="140" stroke="#C0392B" stroke-width="1"/>
    <rect x="55" y="95" width="10" height="30" rx="1" fill="url(#candle-red)"/>

    <!-- Candle 2 - red -->
    <line x1="82" y1="100" x2="82" y2="150" stroke="#C0392B" stroke-width="1"/>
    <rect x="77" y="108" width="10" height="28" rx="1" fill="url(#candle-red)"/>

    <!-- Candle 3 - green -->
    <line x1="104" y1="90" x2="104" y2="148" stroke="#085D55" stroke-width="1"/>
    <rect x="99" y="100" width="10" height="35" rx="1" fill="url(#candle-green)"/>

    <!-- Candle 4 - green -->
    <line x1="126" y1="70" x2="126" y2="120" stroke="#085D55" stroke-width="1"/>
    <rect x="121" y="78" width="10" height="30" rx="1" fill="url(#candle-green)"/>

    <!-- Candle 5 - green (big) -->
    <line x1="148" y1="45" x2="148" y2="100" stroke="#085D55" stroke-width="1"/>
    <rect x="143" y="52" width="10" height="38" rx="1" fill="url(#candle-green)"/>

    <!-- Candle 6 - red (pullback) -->
    <line x1="170" y1="48" x2="170" y2="85" stroke="#C0392B" stroke-width="1"/>
    <rect x="165" y="55" width="10" height="20" rx="1" fill="url(#candle-red)"/>

    <!-- Candle 7 - green -->
    <line x1="192" y1="35" x2="192" y2="72" stroke="#085D55" stroke-width="1"/>
    <rect x="187" y="40" width="10" height="22" rx="1" fill="url(#candle-green)"/>

    <!-- Candle 8 - green -->
    <line x1="214" y1="22" x2="214" y2="58" stroke="#085D55" stroke-width="1"/>
    <rect x="209" y="28" width="10" height="20" rx="1" fill="url(#candle-green)"/>

    <!-- Candle 9 - red small -->
    <line x1="236" y1="20" x2="236" y2="50" stroke="#C0392B" stroke-width="1"/>
    <rect x="231" y="26" width="10" height="16" rx="1" fill="url(#candle-red)"/>

    <!-- Candle 10 - green -->
    <line x1="258" y1="10" x2="258" y2="40" stroke="#085D55" stroke-width="1"/>
    <rect x="253" y="14" width="10" height="18" rx="1" fill="url(#candle-green)"/>

    <!-- Moving average line (gold - Ichimoku feel) -->
    <polyline points="55,120 77,130 99,118 121,95 143,72 165,65 187,55 209,42 231,38 253,28"
      stroke="url(#line-gold)" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-filter)"/>

    <!-- Fibonacci levels -->
    <line x1="270" y1="14" x2="330" y2="14" stroke="#F2A900" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.5"/>
    <text x="332" y="17" fill="#F2A900" font-size="7" font-family="monospace" opacity="0.6">0.000</text>

    <line x1="270" y1="60" x2="330" y2="60" stroke="#F2A900" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.4"/>
    <text x="332" y="63" fill="#F2A900" font-size="7" font-family="monospace" opacity="0.5">0.382</text>

    <line x1="270" y1="88" x2="330" y2="88" stroke="#F2A900" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.4"/>
    <text x="332" y="91" fill="#F2A900" font-size="7" font-family="monospace" opacity="0.5">0.618</text>

    <line x1="270" y1="130" x2="330" y2="130" stroke="#F2A900" stroke-width="0.8" stroke-dasharray="2,2" opacity="0.3"/>
    <text x="332" y="133" fill="#F2A900" font-size="7" font-family="monospace" opacity="0.4">1.000</text>

    <!-- Volume bars at bottom -->
    <g opacity="0.3">
      <rect x="55" y="148" width="10" height="18" rx="1" fill="#C0392B"/>
      <rect x="77" y="152" width="10" height="14" rx="1" fill="#C0392B"/>
      <rect x="99" y="145" width="10" height="21" rx="1" fill="#2DD4A8"/>
      <rect x="121" y="150" width="10" height="16" rx="1" fill="#2DD4A8"/>
      <rect x="143" y="140" width="10" height="26" rx="1" fill="#2DD4A8"/>
      <rect x="165" y="155" width="10" height="11" rx="1" fill="#C0392B"/>
      <rect x="187" y="148" width="10" height="18" rx="1" fill="#2DD4A8"/>
      <rect x="209" y="151" width="10" height="15" rx="1" fill="#2DD4A8"/>
      <rect x="231" y="156" width="10" height="10" rx="1" fill="#C0392B"/>
      <rect x="253" y="146" width="10" height="20" rx="1" fill="#2DD4A8"/>
    </g>
  </g>

  <!-- Floating annotation: "Soporte" -->
  <g transform="translate(195, 198)" opacity="0.8">
    <rect x="0" y="0" width="56" height="18" rx="4" fill="#085D55"/>
    <text x="28" y="12.5" text-anchor="middle" fill="white" font-size="8" font-family="sans-serif" font-weight="600">Soporte</text>
    <line x1="28" y1="18" x2="28" y2="26" stroke="#085D55" stroke-width="1"/>
  </g>

  <!-- Floating annotation: "Resistencia" -->
  <g transform="translate(370, 72)" opacity="0.8">
    <rect x="0" y="0" width="68" height="18" rx="4" fill="#F2A900"/>
    <text x="34" y="12.5" text-anchor="middle" fill="#00244D" font-size="8" font-family="sans-serif" font-weight="700">Resistencia</text>
    <line x1="34" y1="18" x2="34" y2="28" stroke="#F2A900" stroke-width="1"/>
  </g>

  <!-- Decorative: small floating elements -->
  <!-- Cursor arrow -->
  <g transform="translate(460, 110)" opacity="0.5">
    <path d="M0,0 L0,18 L5,14 L9,22 L12,21 L8,13 L14,12 Z" fill="white"/>
  </g>

  <!-- Floating mini chart icon top-left -->
  <g transform="translate(48, 55)" opacity="0.15">
    <rect width="40" height="30" rx="6" stroke="white" stroke-width="1" fill="none"/>
    <polyline points="8,22 16,14 24,18 32,8" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round"/>
  </g>

  <!-- Floating candlestick icon bottom-right -->
  <g transform="translate(555, 180)" opacity="0.12">
    <line x1="10" y1="0" x2="10" y2="30" stroke="white" stroke-width="1.5"/>
    <rect x="5" y="8" width="10" height="14" rx="2" stroke="white" stroke-width="1.5" fill="none"/>
    <line x1="30" y1="5" x2="30" y2="35" stroke="white" stroke-width="1.5"/>
    <rect x="25" y="12" width="10" height="16" rx="2" stroke="white" stroke-width="1.5" fill="none"/>
  </g>

  <!-- Corner accent dots -->
  <circle cx="30" cy="30" r="3" fill="#F2A900" opacity="0.2"/>
  <circle cx="610" cy="30" r="3" fill="#085D55" opacity="0.2"/>
  <circle cx="30" cy="250" r="3" fill="#085D55" opacity="0.2"/>
  <circle cx="610" cy="250" r="3" fill="#F2A900" opacity="0.2"/>
</svg>
