Painel de Negociações (Boleta)

<!-- Painel de Negociações (Boleta) -->
<div class="trdr-boleta">

  <!-- Abas -->
  <div class="trdr-boleta-abas">
    <div class="trdr-boleta-segment-control">
      <button class="trdr-boleta-segment trdr-boleta-segment-active">Avançado</button>
      <button class="trdr-boleta-segment">Simples</button>
    </div>
  </div>

  <!-- Campos -->
  <div class="trdr-boleta-container">
    <!-- Estratégia -->
    <div style="display:flex;align-items:center;justify-content:space-between">
      <span class="trdr-boleta-label">Estratégia</span>
      <span style="color:var(--content-primary);font-size:12px;font-weight:500">Manejo ▾</span>
    </div>

    <!-- Disponível -->
    <div style="display:flex;align-items:center;justify-content:space-between">
      <span class="trdr-boleta-label">Disp.</span>
      <span style="color:var(--content-primary);font-size:12px;font-weight:500">258.010.200,00 USDT</span>
    </div>

    <!-- Quantidade -->
    <div style="display:flex;flex-direction:column;gap:8px">
      <span class="trdr-boleta-label">Quantidade</span>
      <input class="trdr-boleta-input" placeholder="Inserir" />
      <div style="display:flex;gap:4px">
        <button class="trdr-boleta-quick-btn">1</button>
        <button class="trdr-boleta-quick-btn">2</button>
        <button class="trdr-boleta-quick-btn">3</button>
      </div>
    </div>

    <!-- Preço da Ordem -->
    <div style="display:flex;flex-direction:column;gap:8px">
      <span class="trdr-boleta-label">Preço da Ordem</span>
      <input class="trdr-boleta-input" value="0,00" />
    </div>

    <!-- TP/SL -->
    <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
      <input type="checkbox" style="display:none" />
      <span style="width:16px;height:16px;border:1px solid var(--border-default);border-radius:5px;background:var(--surface-tertiary);flex-shrink:0;display:block"></span>
      <span style="font-size:12px;font-weight:500;color:var(--content-primary)">TP/SL</span>
    </label>
  </div>

  <!-- Botões -->
  <div class="trdr-boleta-botoes">
    <div style="display:flex;gap:8px">
      <button class="trdr-boleta-btn-long">CP Limite</button>
      <button class="trdr-boleta-btn-short">VD Limite</button>
    </div>
    <div style="display:flex;gap:8px">
      <button class="trdr-boleta-btn-long">CP Mercado</button>
      <button class="trdr-boleta-btn-short">VD Mercado</button>
    </div>
    <div style="display:flex;gap:8px">
      <button class="trdr-boleta-btn-long">Bid</button>
      <button class="trdr-boleta-btn-short">Ask</button>
    </div>
    <button class="trdr-boleta-btn-zerar">Zerar (5)</button>
    <button class="trdr-boleta-btn-ghost">Cancelar ordens (2) + Zerar (5)</button>
    <div style="display:flex;gap:8px">
      <button class="trdr-boleta-btn-ghost" style="width:auto;flex-shrink:0">Cancelar Ordem</button>
      <button class="trdr-boleta-btn-ghost" style="flex:1;min-width:100px">Inverter</button>
    </div>
  </div>

</div>