<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 400" fill="none">
  <defs>
    <linearGradient id="h-bg" x1="0" y1="0" x2="520" y2="400" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#0B1D33"/>
      <stop offset="100%" stop-color="#00244D"/>
    </linearGradient>
    <linearGradient id="h-sidebar" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#071626"/>
      <stop offset="100%" stop-color="#0A1E38"/>
    </linearGradient>
    <linearGradient id="h-progress" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#F2A900"/>
      <stop offset="100%" stop-color="#FFCC44"/>
    </linearGradient>
    <linearGradient id="h-teal" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#085D55"/>
      <stop offset="100%" stop-color="#2DD4A8"/>
    </linearGradient>
  </defs>

  <!-- App frame -->
  <rect width="520" height="400" rx="12" fill="url(#h-bg)"/>

  <!-- Top bar -->
  <rect x="0" y="0" width="520" height="38" rx="12" fill="#071626"/>
  <rect x="0" y="12" width="520" height="26" fill="#071626"/>
  <!-- Window dots -->
  <circle cx="18" cy="19" r="5" fill="#FF5F57"/>
  <circle cx="34" cy="19" r="5" fill="#FFBD2E"/>
  <circle cx="50" cy="19" r="5" fill="#28CA41"/>
  <!-- Title bar text -->
  <text x="260" y="23" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="10" font-family="sans-serif" font-weight="600">Inversor Inteligente — Portal de Cursos</text>

  <!-- Sidebar -->
  <rect x="0" y="38" width="150" height="362" fill="url(#h-sidebar)"/>
  <rect x="149" y="38" width="1" height="362" fill="rgba(255,255,255,0.06)"/>

  <!-- Sidebar: Logo area -->
  <g transform="translate(16, 54)">
    <rect width="24" height="24" rx="6" fill="#085D55"/>
    <text x="12" y="16" text-anchor="middle" fill="white" font-size="11" font-family="sans-serif" font-weight="800">IF</text>
    <text x="32" y="11" fill="white" font-size="9" font-family="sans-serif" font-weight="700">Ichimoku</text>
    <text x="32" y="22" fill="rgba(255,255,255,0.4)" font-size="8" font-family="sans-serif">Fibonacci</text>
  </g>

  <!-- Sidebar: Progress overview -->
  <g transform="translate(16, 96)">
    <text x="0" y="0" fill="rgba(255,255,255,0.3)" font-size="8" font-family="sans-serif" font-weight="600" letter-spacing="1">TU PROGRESO</text>
    <rect x="0" y="10" width="118" height="5" rx="2.5" fill="rgba(255,255,255,0.08)"/>
    <rect x="0" y="10" width="72" height="5" rx="2.5" fill="url(#h-progress)"/>
    <text x="122" y="15" fill="#F2A900" font-size="8" font-family="sans-serif" font-weight="700">61%</text>
  </g>

  <!-- Sidebar: Module list -->
  <g transform="translate(12, 130)">
    <!-- Module 1 (completed) -->
    <g transform="translate(0, 0)">
      <rect x="0" y="0" width="126" height="30" rx="6" fill="rgba(45,212,168,0.08)"/>
      <circle cx="16" cy="15" r="7" fill="#2DD4A8"/>
      <path d="M13,15 L15.5,17.5 L19.5,12.5" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <text x="30" y="12" fill="rgba(255,255,255,0.7)" font-size="7" font-family="sans-serif">Módulo 1</text>
      <text x="30" y="22" fill="rgba(255,255,255,0.4)" font-size="7" font-family="sans-serif">Introducción</text>
    </g>

    <!-- Module 2 (active) -->
    <g transform="translate(0, 38)">
      <rect x="0" y="0" width="126" height="30" rx="6" fill="rgba(242,169,0,0.12)" stroke="rgba(242,169,0,0.3)" stroke-width="1"/>
      <circle cx="16" cy="15" r="7" fill="#F2A900"/>
      <text x="13.5" y="18.5" fill="#00244D" font-size="8" font-family="sans-serif" font-weight="800">2</text>
      <text x="30" y="12" fill="white" font-size="7" font-family="sans-serif" font-weight="600">Módulo 2</text>
      <text x="30" y="22" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif">Instrumentos</text>
    </g>

    <!-- Module 3 (locked) -->
    <g transform="translate(0, 76)">
      <rect x="0" y="0" width="126" height="30" rx="6" fill="rgba(255,255,255,0.02)"/>
      <circle cx="16" cy="15" r="7" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
      <text x="13.5" y="18.5" fill="rgba(255,255,255,0.25)" font-size="8" font-family="sans-serif" font-weight="700">3</text>
      <text x="30" y="12" fill="rgba(255,255,255,0.3)" font-size="7" font-family="sans-serif">Módulo 3</text>
      <text x="30" y="22" fill="rgba(255,255,255,0.2)" font-size="7" font-family="sans-serif">Selección</text>
    </g>

    <!-- Module 4 (locked) -->
    <g transform="translate(0, 114)">
      <rect x="0" y="0" width="126" height="30" rx="6" fill="rgba(255,255,255,0.02)"/>
      <circle cx="16" cy="15" r="7" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
      <text x="13.5" y="18.5" fill="rgba(255,255,255,0.25)" font-size="8" font-family="sans-serif" font-weight="700">4</text>
      <text x="30" y="12" fill="rgba(255,255,255,0.3)" font-size="7" font-family="sans-serif">Módulo 4</text>
      <text x="30" y="22" fill="rgba(255,255,255,0.2)" font-size="7" font-family="sans-serif">Psicología</text>
    </g>
  </g>

  <!-- Sidebar: bottom user -->
  <g transform="translate(12, 348)">
    <rect x="0" y="0" width="126" height="36" rx="8" fill="rgba(255,255,255,0.03)"/>
    <circle cx="18" cy="18" r="10" fill="#085D55"/>
    <text x="18" y="22" text-anchor="middle" fill="white" font-size="9" font-family="sans-serif" font-weight="700">AD</text>
    <text x="34" y="15" fill="rgba(255,255,255,0.6)" font-size="8" font-family="sans-serif" font-weight="600">Adam Dub</text>
    <text x="34" y="26" fill="rgba(255,255,255,0.3)" font-size="7" font-family="sans-serif">Alumno</text>
  </g>

  <!-- ===== MAIN CONTENT ===== -->

  <!-- Video player area -->
  <g transform="translate(162, 50)">
    <rect width="346" height="195" rx="10" fill="#0A1628" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>

    <!-- Video "screen" with fake content -->
    <rect x="2" y="2" width="342" height="168" rx="8" fill="#060F1C"/>

    <!-- Slide content: chart illustration inside video -->
    <g transform="translate(20, 20)">
      <text x="0" y="12" fill="white" font-size="12" font-family="sans-serif" font-weight="700">ETFs — Concepto y Utilidad</text>
      <text x="0" y="26" fill="rgba(255,255,255,0.35)" font-size="9" font-family="sans-serif">Módulo 2 · Clase 3 de 6</text>

      <!-- Mini chart inside video -->
      <g transform="translate(0, 42)">
        <rect width="140" height="90" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/>
        <!-- Bar chart -->
        <rect x="14" y="60" width="14" height="20" rx="2" fill="#2DD4A8" opacity="0.5"/>
        <rect x="34" y="45" width="14" height="35" rx="2" fill="#2DD4A8" opacity="0.6"/>
        <rect x="54" y="30" width="14" height="50" rx="2" fill="#2DD4A8" opacity="0.75"/>
        <rect x="74" y="20" width="14" height="60" rx="2" fill="#F2A900" opacity="0.9"/>
        <rect x="94" y="35" width="14" height="45" rx="2" fill="#2DD4A8" opacity="0.6"/>
        <rect x="114" y="50" width="14" height="30" rx="2" fill="#2DD4A8" opacity="0.5"/>
        <text x="70" y="14" text-anchor="middle" fill="rgba(255,255,255,0.4)" font-size="7" font-family="sans-serif">Rendimiento ETFs globales</text>
      </g>

      <!-- Pie chart mini -->
      <g transform="translate(180, 72)">
        <circle cx="30" cy="30" r="28" fill="none" stroke="#F2A900" stroke-width="10" stroke-dasharray="70 106" stroke-dashoffset="0" transform="rotate(-90 30 30)"/>
        <circle cx="30" cy="30" r="28" fill="none" stroke="#2DD4A8" stroke-width="10" stroke-dasharray="55 121" stroke-dashoffset="-70" transform="rotate(-90 30 30)"/>
        <circle cx="30" cy="30" r="28" fill="none" stroke="#00244D" stroke-width="10" stroke-dasharray="35 141" stroke-dashoffset="-125" transform="rotate(-90 30 30)"/>
        <circle cx="30" cy="30" r="16" fill="#060F1C"/>
        <text x="30" y="33" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif" font-weight="600">ETF</text>
      </g>

      <!-- Labels next to pie -->
      <g transform="translate(250, 58)">
        <circle cx="4" cy="5" r="3" fill="#F2A900"/>
        <text x="12" y="8" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif">SPY 40%</text>
        <circle cx="4" cy="20" r="3" fill="#2DD4A8"/>
        <text x="12" y="23" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif">QQQ 31%</text>
        <circle cx="4" cy="35" r="3" fill="#00244D" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/>
        <text x="12" y="38" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif">IWM 20%</text>
      </g>
    </g>

    <!-- Video progress bar -->
    <g transform="translate(2, 172)">
      <rect width="342" height="22" rx="0 0 8 8" fill="#0D1B2A"/>
      <!-- Play button -->
      <g transform="translate(10, 4)">
        <rect width="14" height="14" rx="3" fill="rgba(255,255,255,0.08)"/>
        <path d="M6,4 L11,7.5 L6,11 Z" fill="rgba(255,255,255,0.6)"/>
      </g>
      <!-- Scrubber -->
      <rect x="30" y="8" width="240" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
      <rect x="30" y="8" width="144" height="3" rx="1.5" fill="url(#h-progress)"/>
      <circle cx="174" cy="9.5" r="5" fill="#F2A900"/>
      <!-- Time -->
      <text x="280" y="13" fill="rgba(255,255,255,0.35)" font-size="8" font-family="monospace">12:34 / 18:20</text>
    </g>
  </g>

  <!-- Lesson list below video -->
  <g transform="translate(162, 258)">
    <text x="0" y="12" fill="rgba(255,255,255,0.3)" font-size="8" font-family="sans-serif" font-weight="600" letter-spacing="1">CLASES DEL MÓDULO 2</text>

    <!-- Lesson 1 (completed) -->
    <g transform="translate(0, 24)">
      <rect width="346" height="32" rx="6" fill="rgba(255,255,255,0.02)"/>
      <circle cx="16" cy="16" r="7" fill="#2DD4A8"/>
      <path d="M13,16 L15.5,18.5 L19.5,13.5" stroke="white" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <text x="30" y="13" fill="rgba(255,255,255,0.5)" font-size="9" font-family="sans-serif">Obligaciones Negociables</text>
      <text x="30" y="24" fill="rgba(255,255,255,0.25)" font-size="7" font-family="sans-serif">15:42 · Completada</text>
      <text x="320" y="18" fill="#2DD4A8" font-size="8" font-family="sans-serif" font-weight="600">100%</text>
    </g>

    <!-- Lesson 2 (completed) -->
    <g transform="translate(0, 60)">
      <rect width="346" height="32" rx="6" fill="rgba(255,255,255,0.02)"/>
      <circle cx="16" cy="16" r="7" fill="#2DD4A8"/>
      <path d="M13,16 L15.5,18.5 L19.5,13.5" stroke="white" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <text x="30" y="13" fill="rgba(255,255,255,0.5)" font-size="9" font-family="sans-serif">FCIs — Concepto y Utilidad</text>
      <text x="30" y="24" fill="rgba(255,255,255,0.25)" font-size="7" font-family="sans-serif">20:15 · Completada</text>
      <text x="320" y="18" fill="#2DD4A8" font-size="8" font-family="sans-serif" font-weight="600">100%</text>
    </g>

    <!-- Lesson 3 (active/playing) -->
    <g transform="translate(0, 96)">
      <rect width="346" height="32" rx="6" fill="rgba(242,169,0,0.08)" stroke="rgba(242,169,0,0.2)" stroke-width="1"/>
      <circle cx="16" cy="16" r="7" fill="#F2A900"/>
      <path d="M14,12 L14,20 L20,16 Z" fill="#00244D"/>
      <text x="30" y="13" fill="white" font-size="9" font-family="sans-serif" font-weight="600">ETFs — Concepto y Utilidad</text>
      <text x="30" y="24" fill="rgba(255,255,255,0.35)" font-size="7" font-family="sans-serif">18:20 · Reproduciendo...</text>
      <text x="320" y="18" fill="#F2A900" font-size="8" font-family="sans-serif" font-weight="600">60%</text>
    </g>
  </g>
</svg>
