<svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520">
  <rect width="800" height="520" fill="#f8fafc"/>
  <!-- nav -->
  <rect width="800" height="58" fill="#fff"/>
  <line x1="0" y1="58" x2="800" y2="58" stroke="#e2e8f0" stroke-width="1"/>
  <text x="36" y="38" font-family="Arial" font-size="17" fill="#1e293b" font-weight="900">💸 DividirGastos</text>
  <rect x="600" y="15" width="160" height="30" rx="8" fill="#6c63ff"/>
  <text x="680" y="34" font-family="Arial" font-size="13" fill="#fff" text-anchor="middle" font-weight="700">+ Agregar gasto</text>

  <!-- sidebar -->
  <rect x="0" y="58" width="220" height="462" fill="#f1f5f9"/>
  <line x1="220" y1="58" x2="220" y2="520" stroke="#e2e8f0" stroke-width="1"/>
  <text x="20" y="88" font-family="Arial" font-size="11" fill="#64748b" letter-spacing="2">MIS GRUPOS</text>
  <!-- group items -->
  <rect x="10" y="96" width="200" height="44" rx="8" fill="#6c63ff"/>
  <text x="36" y="118" font-family="Arial" font-size="13" fill="#fff" font-weight="700">🏖️ Viaje a Bariloche</text>
  <text x="36" y="132" font-family="Arial" font-size="10" fill="#c4b5fd">4 personas · activo</text>
  <rect x="10" y="148" width="200" height="44" rx="8" fill="transparent"/>
  <text x="36" y="170" font-family="Arial" font-size="13" fill="#334155" font-weight="600">🍕 Cena del viernes</text>
  <text x="36" y="184" font-family="Arial" font-size="10" fill="#94a3b8">3 personas · cerrado</text>
  <rect x="10" y="200" width="200" height="44" rx="8" fill="transparent"/>
  <text x="36" y="222" font-family="Arial" font-size="13" fill="#334155" font-weight="600">🏠 Depto compartido</text>
  <text x="36" y="236" font-family="Arial" font-size="10" fill="#94a3b8">3 personas · activo</text>
  <!-- divider -->
  <line x1="20" y1="254" x2="200" y2="254" stroke="#e2e8f0" stroke-width="1"/>
  <text x="20" y="274" font-family="Arial" font-size="11" fill="#64748b" letter-spacing="2">BALANCE</text>
  <text x="20" y="302" font-family="Arial" font-size="12" fill="#334155">Te deben</text>
  <text x="200" y="302" font-family="Arial" font-size="14" fill="#10b981" text-anchor="end" font-weight="700">+$12.400</text>
  <text x="20" y="326" font-family="Arial" font-size="12" fill="#334155">Debés</text>
  <text x="200" y="326" font-family="Arial" font-size="14" fill="#ef4444" text-anchor="end" font-weight="700">-$4.200</text>
  <line x1="20" y1="340" x2="200" y2="340" stroke="#e2e8f0" stroke-width="1"/>
  <text x="20" y="362" font-family="Arial" font-size="12" fill="#334155" font-weight="700">Neto</text>
  <text x="200" y="362" font-family="Arial" font-size="15" fill="#10b981" text-anchor="end" font-weight="900">+$8.200</text>

  <!-- main content -->
  <text x="244" y="90" font-family="Arial" font-size="16" fill="#1e293b" font-weight="900">🏖️ Viaje a Bariloche</text>
  <text x="244" y="110" font-family="Arial" font-size="11" fill="#64748b">Marcos, Juli, Sofi, Vos · 4 personas</text>

  <!-- avatars -->
  <circle cx="360" cy="100" r="14" fill="#6c63ff"/>
  <text x="360" y="105" font-family="Arial" font-size="11" fill="#fff" text-anchor="middle">M</text>
  <circle cx="386" cy="100" r="14" fill="#ec4899"/>
  <text x="386" y="105" font-family="Arial" font-size="11" fill="#fff" text-anchor="middle">J</text>
  <circle cx="412" cy="100" r="14" fill="#f59e0b"/>
  <text x="412" y="105" font-family="Arial" font-size="11" fill="#fff" text-anchor="middle">S</text>
  <circle cx="438" cy="100" r="14" fill="#10b981"/>
  <text x="438" y="105" font-family="Arial" font-size="11" fill="#fff" text-anchor="middle">Vos</text>

  <!-- expense list header -->
  <rect x="236" y="124" width="540" height="32" rx="6" fill="#f1f5f9"/>
  <text x="256" y="144" font-family="Arial" font-size="11" fill="#64748b" font-weight="700">DESCRIPCIÓN</text>
  <text x="510" y="144" font-family="Arial" font-size="11" fill="#64748b" font-weight="700">PAGÓ</text>
  <text x="600" y="144" font-family="Arial" font-size="11" fill="#64748b" font-weight="700">TOTAL</text>
  <text x="700" y="144" font-family="Arial" font-size="11" fill="#64748b" font-weight="700">TU PARTE</text>

  <!-- expense rows -->
  <!-- row 1 -->
  <rect x="236" y="160" width="540" height="44" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
  <text x="256" y="179" font-family="Arial" font-size="13" fill="#1e293b" font-weight="600">🏨 Hotel 3 noches</text>
  <text x="256" y="195" font-family="Arial" font-size="10" fill="#94a3b8">hace 2 días · dividido en 4</text>
  <circle cx="520" cy="182" r="12" fill="#6c63ff"/>
  <text x="520" y="186" font-family="Arial" font-size="10" fill="#fff" text-anchor="middle">M</text>
  <text x="600" y="186" font-family="Arial" font-size="13" fill="#1e293b" text-anchor="middle" font-weight="700">$48.000</text>
  <text x="720" y="186" font-family="Arial" font-size="13" fill="#ef4444" text-anchor="middle" font-weight="700">-$12.000</text>

  <!-- row 2 -->
  <rect x="236" y="210" width="540" height="44" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
  <text x="256" y="229" font-family="Arial" font-size="13" fill="#1e293b" font-weight="600">🍽️ Cena en el lago</text>
  <text x="256" y="245" font-family="Arial" font-size="10" fill="#94a3b8">ayer · dividido en 4</text>
  <circle cx="520" cy="232" r="12" fill="#10b981"/>
  <text x="520" y="236" font-family="Arial" font-size="10" fill="#fff" text-anchor="middle">V</text>
  <text x="600" y="236" font-family="Arial" font-size="13" fill="#1e293b" text-anchor="middle" font-weight="700">$22.400</text>
  <text x="720" y="236" font-family="Arial" font-size="13" fill="#10b981" text-anchor="middle" font-weight="700">+$16.800</text>

  <!-- row 3 -->
  <rect x="236" y="260" width="540" height="44" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
  <text x="256" y="279" font-family="Arial" font-size="13" fill="#1e293b" font-weight="600">⛷️ Clases de ski</text>
  <text x="256" y="295" font-family="Arial" font-size="10" fill="#94a3b8">hoy · dividido en 4</text>
  <circle cx="520" cy="282" r="12" fill="#ec4899"/>
  <text x="520" y="286" font-family="Arial" font-size="10" fill="#fff" text-anchor="middle">J</text>
  <text x="600" y="282" font-family="Arial" font-size="13" fill="#1e293b" text-anchor="middle" font-weight="700">$36.000</text>
  <text x="720" y="282" font-family="Arial" font-size="13" fill="#ef4444" text-anchor="middle" font-weight="700">-$9.000</text>

  <!-- settlement box -->
  <rect x="236" y="320" width="540" height="96" rx="12" fill="#f0fdf4" stroke="#bbf7d0" stroke-width="1.5"/>
  <text x="256" y="346" font-family="Arial" font-size="13" fill="#065f46" font-weight="800">✅ Cómo saldar cuentas</text>
  <text x="256" y="370" font-family="Arial" font-size="12" fill="#374151">Marcos le paga <tspan font-weight="700" fill="#059669">$12.000</tspan> a Vos</text>
  <text x="256" y="390" font-family="Arial" font-size="12" fill="#374151">Juli le paga <tspan font-weight="700" fill="#059669">$4.800</tspan> a Vos</text>
  <text x="256" y="410" font-family="Arial" font-size="12" fill="#374151">Sofi está al día ✓</text>
  <rect x="650" y="338" width="110" height="32" rx="8" fill="#059669"/>
  <text x="705" y="358" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle" font-weight="700">Compartir</text>

  <!-- chart -->
  <rect x="236" y="428" width="540" height="72" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
  <text x="256" y="450" font-family="Arial" font-size="11" fill="#64748b">TOTAL GASTADO</text>
  <text x="700" y="450" font-family="Arial" font-size="14" fill="#1e293b" text-anchor="end" font-weight="900">$106.400</text>
  <rect x="256" y="460" width="200" height="12" rx="6" fill="#6c63ff"/>
  <rect x="456" y="460" width="60" height="12" rx="6" fill="#ec4899"/>
  <rect x="516" y="460" width="80" height="12" rx="6" fill="#f59e0b"/>
  <rect x="596" y="460" width="96" height="12" rx="6" fill="#10b981"/>
  <text x="256" y="490" font-family="Arial" font-size="10" fill="#6c63ff">Marcos 45%</text>
  <text x="380" y="490" font-family="Arial" font-size="10" fill="#ec4899">Juli 13%</text>
  <text x="456" y="490" font-family="Arial" font-size="10" fill="#f59e0b">Sofi 20%</text>
  <text x="556" y="490" font-family="Arial" font-size="10" fill="#10b981">Vos 21%</text>

  <rect y="506" width="800" height="14" fill="#f1f5f9"/>
  <text x="400" y="517" font-family="Arial" font-size="9" fill="#94a3b8" text-anchor="middle">dividirgastos.com.ar</text>
</svg>
