@jjlmoya/utils-streaming 1.1.0

package/src/tool/sorteo/component.astro

@@ -0,0 +1,1319 @@
+---
+import { Icon } from 'astro-icon/components';
+import { SORTEO_TOOL } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await SORTEO_TOOL.entry.i18n[locale]?.();
+const ui = content?.ui;
+---
+
+<div id="sorteo-app" class="sorteo-container">
+  <div id="main-grid" class="sorteo-grid">
+    <div id="sidebar-panel" class="sorteo-sidebar">
+      <div class="sorteo-stats-card">
+        <div class="sorteo-stats-icon">
+          <Icon name="mdi:account-group" />
+        </div>
+        <div class="sorteo-stats-content">
+          <h2 class="sorteo-stats-label">{ui?.totalParticipants}</h2>
+          <div class="sorteo-stats-value-wrapper">
+            <span id="count-display" class="sorteo-count">0</span>
+            <span id="ready-badge" class="sorteo-badge hidden">{ui?.ready}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="sorteo-panel-tabs">
+        <div class="sorteo-tabs-header">
+          <button id="tab-participants-btn" class="sorteo-tab-btn active" type="button">
+            {ui?.participants}
+          </button>
+          <button id="tab-settings-btn" class="sorteo-tab-btn" type="button">
+            {ui?.settings}
+          </button>
+        </div>
+
+        <div id="tab-participants-view" class="sorteo-tab-view">
+          <div class="sorteo-view-actions">
+            <label class="sorteo-upload-label">
+              <Icon name="mdi:file-upload-outline" />
+              {ui?.importFile}
+              <input type="file" id="file-import" accept=".txt,.csv,.json" class="hidden" />
+            </label>
+
+            <button id="clear-btn" class="sorteo-icon-btn" title={ui?.clearAll}>
+              <Icon name="mdi:trash-can-outline" />
+            </button>
+          </div>
+
+          <div class="sorteo-textarea-wrapper">
+            <textarea
+              id="participants-input"
+              class="sorteo-textarea"
+              placeholder={ui?.placeholder}
+              spellcheck="false"
+            ></textarea>
+            <div class="sorteo-textarea-fade"></div>
+          </div>
+
+          <div class="sorteo-view-footer">
+            <span>{ui?.onePerLine}</span>
+            <span id="line-count">0 {ui?.lines}</span>
+          </div>
+        </div>
+
+        <div id="tab-settings-view" class="sorteo-tab-view hidden">
+          <div class="sorteo-settings-content">
+            <div class="sorteo-settings-section">
+              <h3 class="sorteo-section-title">
+                <Icon name="mdi:filter-variant" /> {ui?.filters}
+              </h3>
+
+              <div class="sorteo-options-list">
+                <label class="sorteo-option-item">
+                  <span class="sorteo-option-label">{ui?.allowDuplicates}</span>
+                  <div class="sorteo-switch">
+                    <input type="checkbox" id="opt-duplicates" class="sr-only" />
+                    <div class="sorteo-switch-slider"></div>
+                  </div>
+                </label>
+
+                <label class="sorteo-option-item">
+                  <span class="sorteo-option-label">{ui?.winnerCount}</span>
+                  <input
+                    type="number"
+                    id="opt-winner-count"
+                    min="1"
+                    max="50"
+                    value="1"
+                    class="sorteo-number-input"
+                  />
+                </label>
+
+                <label class="sorteo-option-item">
+                  <span class="sorteo-option-label">{ui?.autoRemove}</span>
+                  <div class="sorteo-switch">
+                    <input type="checkbox" id="opt-auto-remove" class="sr-only" />
+                    <div class="sorteo-switch-slider success"></div>
+                  </div>
+                </label>
+
+                <div class="sorteo-field-group">
+                  <span class="sorteo-field-label">{ui?.blacklist}</span>
+                  <textarea
+                    id="blacklist-input"
+                    class="sorteo-textarea-small"
+                    placeholder={ui?.blacklistPlaceholder}
+                  ></textarea>
+                  <p class="sorteo-field-info">{ui?.blacklistInfo}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="sorteo-settings-section">
+              <h3 class="sorteo-section-title">
+                <Icon name="mdi:auto-fix" /> {ui?.sceneEffects}
+              </h3>
+
+              <div class="sorteo-options-list">
+                <label class="sorteo-option-item">
+                  <span class="sorteo-option-label">{ui?.countdown}</span>
+                  <div class="sorteo-switch">
+                    <input type="checkbox" id="opt-countdown" class="sr-only" checked />
+                    <div class="sorteo-switch-slider primary"></div>
+                  </div>
+                </label>
+
+                <label class="sorteo-option-item">
+                  <span class="sorteo-option-label">{ui?.confetti}</span>
+                  <div class="sorteo-switch">
+                    <input type="checkbox" id="opt-confetti" class="sr-only" checked />
+                    <div class="sorteo-switch-slider primary"></div>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="stage-panel" class="sorteo-stage">
+      <button id="zen-toggle" class="sorteo-zen-btn" title={ui?.zenMode}>
+        <Icon id="icon-zen-open" name="mdi:dock-left" />
+        <Icon id="icon-zen-close" name="mdi:window-maximize" class="hidden" />
+      </button>
+
+      <div class="sorteo-studio">
+        <div class="sorteo-studio-header">
+          <div class="sorteo-dots">
+            <div class="dot red"></div>
+            <div class="dot yellow"></div>
+            <div class="dot green"></div>
+          </div>
+          <div class="sorteo-version">LIVE STUDIO v2.0</div>
+        </div>
+
+        <div class="sorteo-arena">
+          <div class="sorteo-grid-bg"></div>
+          <div class="sorteo-glow"></div>
+
+          <div class="sorteo-content">
+            <div id="state-empty" class="sorteo-state-empty">
+              <div class="sorteo-empty-icon">
+                <Icon name="mdi:ticket-outline" />
+              </div>
+              <h2 class="sorteo-empty-title">{ui?.waitingParticipants}</h2>
+            </div>
+
+            <div id="state-countdown" class="sorteo-state-countdown hidden">
+              <div id="countdown-number" class="sorteo-countdown-text">3</div>
+            </div>
+
+            <div id="state-active" class="sorteo-state-active hidden">
+              <div class="sorteo-active-label">{ui?.winner}</div>
+
+              <div class="sorteo-winner-display">
+                <h2 id="main-display" class="sorteo-winner-name">???</h2>
+              </div>
+
+              <div id="multi-results" class="sorteo-multi-results hidden"></div>
+
+              <div id="winner-actions" class="sorteo-winner-actions hidden">
+                <button id="btn-reroll" class="sorteo-reroll-btn">
+                  {ui?.reroll}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="sorteo-studio-footer">
+          <button id="trigger-btn" class="sorteo-main-btn" disabled>
+            <div class="sorteo-btn-glow"></div>
+            <div class="sorteo-btn-content">
+              <span>{ui?.startGiveaway}</span>
+              <Icon name="mdi:arrow-right" />
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="sorteo-history">
+    <div class="sorteo-history-container">
+      <h3 class="sorteo-history-title">
+        <Icon name="mdi:history" />
+        {ui?.history}
+      </h3>
+      <div id="history-list" class="sorteo-history-list">
+        <span class="sorteo-no-winners">{ui?.noWinnersYet}</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { GiveawayEngine } from './engine';
+  import {
+    playBeep,
+    runCountdownSequence,
+    triggerConfetti,
+    addToHistory,
+  } from './ui-manager';
+
+  const engine = new GiveawayEngine();
+  const els = {
+    input: document.getElementById('participants-input') as HTMLTextAreaElement,
+    blacklistInput: document.getElementById('blacklist-input') as HTMLTextAreaElement,
+    countDisplay: document.getElementById('count-display'),
+    lineCount: document.getElementById('line-count'),
+    readyBadge: document.getElementById('ready-badge'),
+    triggerBtn: document.getElementById('trigger-btn') as HTMLButtonElement,
+    clearBtn: document.getElementById('clear-btn'),
+    fileImport: document.getElementById('file-import') as HTMLInputElement,
+    tabParticipantsBtn: document.getElementById('tab-participants-btn'),
+    tabSettingsBtn: document.getElementById('tab-settings-btn'),
+    tabParticipantsView: document.getElementById('tab-participants-view'),
+    tabSettingsView: document.getElementById('tab-settings-view'),
+    stateEmpty: document.getElementById('state-empty'),
+    stateActive: document.getElementById('state-active'),
+    stateCountdown: document.getElementById('state-countdown'),
+    mainDisplay: document.getElementById('main-display'),
+    countdownNumber: document.getElementById('countdown-number'),
+    winnerActions: document.getElementById('winner-actions'),
+    btnReroll: document.getElementById('btn-reroll'),
+    historyList: document.getElementById('history-list'),
+    optCountdown: document.getElementById('opt-countdown') as HTMLInputElement,
+    optConfetti: document.getElementById('opt-confetti') as HTMLInputElement,
+    optDuplicates: document.getElementById('opt-duplicates') as HTMLInputElement,
+    optWinnerCount: document.getElementById('opt-winner-count') as HTMLInputElement,
+    optAutoRemove: document.getElementById('opt-auto-remove') as HTMLInputElement,
+    multiResults: document.getElementById('multi-results'),
+    sidebarPanel: document.getElementById('sidebar-panel'),
+    stagePanel: document.getElementById('stage-panel'),
+    zenToggle: document.getElementById('zen-toggle'),
+  };
+
+  let isRunning = false;
+  let audioContext: AudioContext | null = null;
+  let isZenMode = false;
+  const historyEmptyText = 'Aún no hay ganadores...';
+
+  function initAudio() {
+    if (audioContext) return;
+    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    audioContext = new AudioContextClass();
+  }
+
+  function toggleStage(active: boolean) {
+    els.stateEmpty?.classList.toggle('hidden', active);
+    els.stateActive?.classList.toggle('hidden', !active);
+  }
+
+  function handleZen() {
+    isZenMode = !isZenMode;
+    els.sidebarPanel?.classList.toggle('hidden', isZenMode);
+    els.stagePanel?.classList.toggle('zen-active', isZenMode);
+    document.getElementById('icon-zen-open')?.classList.toggle('hidden', isZenMode);
+    document.getElementById('icon-zen-close')?.classList.toggle('hidden', !isZenMode);
+  }
+
+  function update() {
+    engine.setAllowDuplicates(els.optDuplicates.checked);
+    engine.setBlacklistFromText(els.blacklistInput.value);
+    engine.setParticipantsFromText(els.input.value);
+    const count = engine.getCount();
+    if (els.countDisplay) els.countDisplay.textContent = count.toString();
+    const isValid = count >= 1;
+    els.readyBadge?.classList.toggle('hidden', !isValid);
+    els.triggerBtn.disabled = !isValid || isRunning;
+    els.stateEmpty?.classList.toggle('hidden-anim', count > 0);
+    if (count === 0) els.stateActive?.classList.add('hidden');
+  }
+
+  function tab(name: 'participants' | 'settings') {
+    const isP = name === 'participants';
+    els.tabParticipantsView?.classList.toggle('hidden', !isP);
+    els.tabSettingsView?.classList.toggle('hidden', isP);
+    els.tabParticipantsBtn?.classList.toggle('active', isP);
+    els.tabSettingsBtn?.classList.toggle('active', !isP);
+  }
+
+  async function start() {
+    if (isRunning || engine.getCount() < 1) return;
+    isRunning = true;
+    els.triggerBtn.disabled = true;
+    initAudio();
+    toggleStage(false);
+    if (els.optCountdown.checked) await runCountdownSequence(els, audioContext, playBeep);
+    toggleStage(true);
+    await animateRoll(engine.getParticipants(), parseInt(els.optWinnerCount?.value || '1'));
+  }
+
+  async function animateRoll(participants: string[], winnerCount: number) {
+    const duration = 2000;
+    const startT = Date.now();
+    const frame = () => {
+      const elapsed = Date.now() - startT;
+      const progress = Math.min(elapsed / duration, 1);
+      if (progress < 1) {
+        if (Math.random() > (1 - Math.pow(1 - progress, 3)) * 0.8) {
+          if (els.mainDisplay) {
+            const part = participants[Math.floor(Math.random() * participants.length)];
+            els.mainDisplay.textContent = part || '';
+          }
+          playBeep(audioContext, 200, 0.02, 'sawtooth');
+        }
+        requestAnimationFrame(frame);
+      } else finalize(winnerCount);
+    };
+    frame();
+  }
+
+  function finalize(count: number) {
+    const winners = engine.pickWinners(count);
+    renderWinners(winners);
+    if (els.optConfetti.checked) triggerConfetti(document.querySelector('.sorteo-arena'));
+    playBeep(audioContext, 880, 0.3, 'sine');
+    addToHistory(els.historyList, winners, historyEmptyText);
+    if (els.optAutoRemove.checked) {
+      winners.forEach(w => engine.removeParticipant(w));
+      const lines = els.input.value.split('\n');
+      winners.forEach(w => {
+        const idx = lines.findIndex(l => l.trim().toLowerCase().startsWith(w.toLowerCase()));
+        if (idx !== -1) lines.splice(idx, 1);
+      });
+      els.input.value = lines.join('\n');
+    }
+    update();
+    els.winnerActions?.classList.remove('hidden');
+    isRunning = false;
+    els.triggerBtn.disabled = false;
+  }
+
+  function renderWinners(winners: string[]) {
+    if (winners.length === 1) {
+      if (els.mainDisplay) {
+        els.mainDisplay.textContent = winners[0] || '';
+        els.mainDisplay.classList.remove('hidden');
+        els.mainDisplay.classList.add('winner-success', 'scale-up');
+      }
+      els.multiResults?.classList.add('hidden');
+    } else {
+      els.mainDisplay?.classList.add('hidden');
+      els.multiResults?.classList.remove('hidden');
+      if (els.multiResults) els.multiResults.innerHTML = winners.map((w, i) => `<div class="sorteo-result-card animate-zoom-in" style="animation-delay: ${i * 50}ms"><span class="sorteo-result-name">${w}</span><div class="sorteo-result-idx">#${i + 1}</div></div>`).join('');
+    }
+  }
+
+  els.input.addEventListener('input', update);
+  els.blacklistInput?.addEventListener('input', update);
+  els.optDuplicates?.addEventListener('change', update);
+  els.zenToggle?.addEventListener('click', handleZen);
+  els.tabParticipantsBtn?.addEventListener('click', () => tab('participants'));
+  els.tabSettingsBtn?.addEventListener('click', () => tab('settings'));
+  els.triggerBtn.addEventListener('click', start);
+  els.btnReroll?.addEventListener('click', start);
+  els.clearBtn?.addEventListener('click', () => {
+    els.input.value = '';
+    update();
+    if (els.mainDisplay) els.mainDisplay.textContent = '???';
+    els.stateActive?.classList.add('hidden');
+    els.stateEmpty?.classList.remove('hidden', 'hidden-anim');
+  });
+  update();
+</script>
+
+<style>
+  .sorteo-container {
+    --sorteo-primary: #6366f1;
+    --sorteo-secondary: #a855f7;
+    --sorteo-accent: #ec4899;
+    --sorteo-success: #10b981;
+    --sorteo-warning: #fbbf24;
+    --sorteo-danger: #ef4444;
+    --sorteo-bg: #f8fafc;
+    --sorteo-card: #fff;
+    --sorteo-border: #e2e8f0;
+    --sorteo-text: #1e293b;
+    --sorteo-text-muted: #64748b;
+    --sorteo-studio-bg: #0f172a;
+
+    width: 100%;
+    max-width: 80rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+  }
+
+  :global(.theme-dark) .sorteo-container {
+    --sorteo-bg: #020617;
+    --sorteo-card: #0f172a;
+    --sorteo-border: #1e293b;
+    --sorteo-text: #f1f5f9;
+    --sorteo-text-muted: #94a3b8;
+  }
+
+  .sorteo-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 1280px) {
+    .sorteo-grid {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  .sorteo-sidebar {
+    grid-column: span 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: 800px;
+    transition: all 0.5s ease;
+  }
+
+  @media (min-width: 1280px) {
+    .sorteo-sidebar {
+      grid-column: span 4;
+    }
+  }
+
+  .sorteo-sidebar.hidden {
+    display: none;
+  }
+
+  .sorteo-stats-card {
+    background: var(--sorteo-card);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--sorteo-border);
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .sorteo-stats-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 1rem;
+    opacity: 0.1;
+    transition: opacity 0.3s;
+  }
+
+  .sorteo-stats-card:hover .sorteo-stats-icon {
+    opacity: 0.2;
+  }
+
+  .sorteo-stats-icon [data-icon] {
+    width: 6rem;
+    height: 6rem;
+    color: var(--sorteo-primary);
+  }
+
+  .sorteo-stats-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--sorteo-text-muted);
+    margin: 0;
+  }
+
+  .sorteo-stats-value-wrapper {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+  }
+
+  .sorteo-count {
+    font-size: 3rem;
+    font-weight: 900;
+    color: var(--sorteo-text);
+    letter-spacing: -0.05em;
+  }
+
+  .sorteo-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--sorteo-success);
+    background: rgba(16, 185, 129, 0.1);
+    padding: 0.125rem 0.5rem;
+    border-radius: 9999px;
+  }
+
+  .sorteo-panel-tabs {
+    flex: 1;
+    background: var(--sorteo-card);
+    border-radius: 1.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--sorteo-border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .sorteo-tabs-header {
+    display: flex;
+    border-bottom: 1px solid var(--sorteo-border);
+  }
+
+  .sorteo-tab-btn {
+    flex: 1;
+    padding: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-align: center;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--sorteo-text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+    outline: none;
+  }
+
+  .sorteo-tab-btn.active {
+    border-bottom-color: var(--sorteo-primary);
+    color: var(--sorteo-primary);
+    background: rgba(99, 102, 241, 0.05);
+  }
+
+  .sorteo-tab-view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .sorteo-tab-view.hidden {
+    display: none;
+  }
+
+  .sorteo-view-actions {
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--sorteo-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sorteo-upload-label {
+    cursor: pointer;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    background: rgba(99, 102, 241, 0.05);
+    color: var(--sorteo-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background 0.2s;
+  }
+
+  .sorteo-upload-label:hover {
+    background: rgba(99, 102, 241, 0.1);
+  }
+
+  .sorteo-icon-btn {
+    color: var(--sorteo-text-muted);
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .sorteo-icon-btn:hover {
+    color: var(--sorteo-danger);
+    background: rgba(239, 68, 68, 0.05);
+  }
+
+  .sorteo-textarea-wrapper {
+    flex: 1;
+    position: relative;
+    min-height: 0;
+  }
+
+  .sorteo-textarea {
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    border: none;
+    background: transparent;
+    resize: none;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--sorteo-text);
+    outline: none;
+  }
+
+  .sorteo-textarea-fade {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2rem;
+    background: linear-gradient(to top, var(--sorteo-card), transparent);
+    pointer-events: none;
+  }
+
+  .sorteo-view-footer {
+    padding: 0.5rem 1rem;
+    border-top: 1px solid var(--sorteo-border);
+    font-size: 0.625rem;
+    color: var(--sorteo-text-muted);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sorteo-settings-content {
+    flex: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .sorteo-section-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--sorteo-text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .sorteo-options-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .sorteo-option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background: rgba(0,0,0,0.02);
+    border: 1px solid var(--sorteo-border);
+    border-radius: 0.75rem;
+    cursor: pointer;
+  }
+
+  :global(.theme-dark) .sorteo-option-item {
+      background: rgba(255,255,255,0.02);
+  }
+
+  .sorteo-option-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--sorteo-text);
+  }
+
+  .sorteo-switch {
+    position: relative;
+    width: 2.25rem;
+    height: 1.25rem;
+  }
+
+  .sorteo-switch-slider {
+    position: absolute;
+    inset: 0;
+    background: #cbd5e1;
+    border-radius: 9999px;
+    transition: all 0.3s;
+  }
+
+  :global(.theme-dark) .sorteo-switch-slider {
+      background: #334155;
+  }
+
+  .sorteo-switch-slider::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 1rem;
+    height: 1rem;
+    background: white;
+    border-radius: 50%;
+    transition: all 0.3s;
+  }
+
+  .sorteo-switch input:checked + .sorteo-switch-slider {
+    background: var(--sorteo-primary);
+  }
+
+  .sorteo-switch input:checked + .sorteo-switch-slider.success {
+      background: var(--sorteo-success);
+  }
+
+  .sorteo-switch input:checked + .sorteo-switch-slider.primary {
+      background: var(--sorteo-secondary);
+  }
+
+  .sorteo-switch input:checked + .sorteo-switch-slider::after {
+    transform: translateX(1rem);
+  }
+
+  .sorteo-number-input {
+    width: 4rem;
+    text-align: center;
+    background: var(--sorteo-card);
+    border: 1px solid var(--sorteo-border);
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    font-weight: 700;
+    color: var(--sorteo-text);
+    outline: none;
+  }
+
+  .sorteo-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .sorteo-field-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--sorteo-text);
+  }
+
+  .sorteo-textarea-small {
+    width: 100%;
+    height: 8rem;
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    background: rgba(0,0,0,0.02);
+    border: 1px solid var(--sorteo-border);
+    color: var(--sorteo-text);
+    font-size: 0.75rem;
+    outline: none;
+    resize: none;
+  }
+
+  .sorteo-field-info {
+    font-size: 0.625rem;
+    color: var(--sorteo-text-muted);
+    margin: 0;
+  }
+
+  .sorteo-stage {
+    grid-column: span 1;
+    height: 800px;
+    position: relative;
+    transition: all 0.5s ease-in-out;
+  }
+
+  @media (min-width: 1280px) {
+    .sorteo-stage {
+      grid-column: span 8;
+    }
+  }
+
+  .sorteo-stage.zen-active {
+    grid-column: span 12;
+  }
+
+  .sorteo-zen-btn {
+    position: absolute;
+    top: 1.5rem;
+    left: 1.5rem;
+    z-index: 50;
+    padding: 0.5rem;
+    border-radius: 9999px;
+    border: none;
+    background: rgba(255, 255, 255, 0.05);
+    color: #94a3b8;
+    backdrop-filter: blur(8px);
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.3s;
+  }
+
+  .sorteo-stage:hover .sorteo-zen-btn {
+    opacity: 1;
+  }
+
+  .sorteo-zen-btn:hover {
+    background: white;
+    color: var(--sorteo-primary);
+  }
+
+  :global(.theme-dark) .sorteo-zen-btn:hover {
+      background: black;
+  }
+
+  .sorteo-studio {
+    height: 100%;
+    background: var(--sorteo-studio-bg);
+    border-radius: 2rem;
+    border: 4px solid #1e293b;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .sorteo-studio-header {
+    height: 3rem;
+    background: #020617;
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    gap: 0.5rem;
+  }
+
+  .sorteo-dots {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+  }
+
+  .dot.red {
+    background: #ef4444;
+    opacity: 0.5;
+  }
+  .dot.yellow {
+    background: #f59e0b;
+    opacity: 0.5;
+  }
+  .dot.green {
+    background: #10b981;
+    opacity: 0.5;
+  }
+
+  .sorteo-version {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: #475569;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+  }
+
+  .sorteo-arena {
+    flex: 1;
+    position: relative;
+    background: radial-gradient(circle at center, #1e1b4b, #020617);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .sorteo-grid-bg {
+    position: absolute;
+    inset: 0;
+    background-image: 
+      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+    background-size: 4rem 4rem;
+    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
+  }
+
+  .sorteo-glow {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 800px;
+    height: 500px;
+    background: rgba(99, 102, 241, 0.15);
+    filter: blur(120px);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  .sorteo-content {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    max-width: 56rem;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .sorteo-state-empty {
+    transition: all 0.5s ease;
+  }
+
+  .sorteo-state-empty.hidden-anim {
+    opacity: 0;
+    transform: translateY(1rem);
+    pointer-events: none;
+  }
+
+  .sorteo-empty-icon {
+    width: 6rem;
+    height: 6rem;
+    background: rgba(30, 41, 59, 0.5);
+    border: 1px solid rgba(51, 65, 85, 0.5);
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    animation: pulse 2s infinite;
+  }
+
+  .sorteo-empty-icon [data-icon] {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: #64748b;
+  }
+
+  .sorteo-empty-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: #475569;
+    margin: 0;
+  }
+
+  .sorteo-state-countdown {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    pointer-events: none;
+  }
+
+  .sorteo-countdown-text {
+    font-size: 15rem;
+    font-weight: 900;
+    color: rgba(255,255,255,0.1);
+    transform: scale(1.5);
+    filter: blur(2px);
+  }
+
+  .sorteo-state-active {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .sorteo-active-label {
+    color: #818cf8;
+    font-size: 0.875rem;
+    letter-spacing: 0.5em;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+
+  .sorteo-winner-display {
+    padding: 3rem 0;
+  }
+
+  .sorteo-winner-name {
+    font-size: clamp(3rem, 15vw, 8rem);
+    font-weight: 900;
+    color: white;
+    letter-spacing: -0.02em;
+    margin: 0;
+    text-shadow: 0 0 50px rgba(99, 102, 241, 0.5);
+    word-break: break-all;
+    line-height: 1.1;
+  }
+
+  .sorteo-winner-name.winner-success {
+      color: #34d399;
+      text-shadow: 0 0 40px rgba(52, 211, 153, 0.8), 0 0 80px rgba(52, 211, 153, 0.4);
+  }
+
+  .sorteo-winner-name.scale-up {
+      transform: scale(1.1);
+      transition: transform 0.5s;
+  }
+
+  .sorteo-multi-results {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    width: 100%;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+
+  @media (min-width: 768px) {
+    .sorteo-multi-results { grid-template-columns: repeat(2, 1fr); }
+  }
+
+  @media (min-width: 1024px) {
+    .sorteo-multi-results { grid-template-columns: repeat(3, 1fr); }
+  }
+
+  .sorteo-result-card {
+    background: rgba(30, 41, 59, 0.8);
+    border: 1px solid rgba(51, 65, 85, 0.5);
+    padding: 1rem;
+    border-radius: 0.75rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+  }
+
+  .sorteo-result-card:hover {
+      background: rgba(16, 185, 129, 0.1);
+      border-color: rgba(16, 185, 129, 0.3);
+  }
+
+  .sorteo-result-name {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: white;
+    word-break: break-all;
+  }
+
+  .sorteo-result-idx {
+    position: absolute;
+    top: 0.375rem;
+    left: 0.375rem;
+    font-size: 0.625rem;
+    color: #64748b;
+  }
+
+  .sorteo-winner-actions {
+    margin-top: 3rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .sorteo-reroll-btn {
+    background: #1e293b;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 9999px;
+    font-weight: 700;
+    font-size: 0.875rem;
+    border: 1px solid #334155;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .sorteo-reroll-btn:hover {
+    background: #334155;
+  }
+
+  .sorteo-studio-footer {
+    height: 6rem;
+    background: #0f172a;
+    border-top: 1px solid #1e293b;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 2rem;
+  }
+
+  .sorteo-main-btn {
+    width: 100%;
+    max-width: 28rem;
+    position: relative;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+  }
+
+  .sorteo-btn-glow {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
+    border-radius: 0.75rem;
+    filter: blur(8px);
+    opacity: 0.25;
+    transition: opacity 0.5s;
+  }
+
+  .sorteo-main-btn:hover:not(:disabled) .sorteo-btn-glow {
+    opacity: 0.75;
+  }
+
+  .sorteo-main-btn:disabled .sorteo-btn-glow {
+    display: none;
+  }
+
+  .sorteo-btn-content {
+    position: relative;
+    height: 3.5rem;
+    background: white;
+    border-radius: 0.75rem;
+    border: 1px solid #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    transition: transform 0.1s;
+  }
+
+  :global(.theme-dark) .sorteo-btn-content {
+      background: #020617;
+      border-color: #1e293b;
+  }
+
+  .sorteo-main-btn:active:not(:disabled) .sorteo-btn-content {
+    transform: scale(0.98);
+  }
+
+  .sorteo-btn-content span {
+    font-size: 1.25rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: linear-gradient(90deg, #4f46e5, #9333ea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  :global(.theme-dark) .sorteo-btn-content span {
+      background: linear-gradient(90deg, #818cf8, #c084fc);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+  }
+
+  .sorteo-main-btn:disabled .sorteo-btn-content span {
+      background: none;
+      -webkit-text-fill-color: #475569;
+      color: #475569;
+  }
+
+  .sorteo-btn-content [data-icon] {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: #a855f7;
+  }
+
+  .sorteo-main-btn:disabled .sorteo-btn-content [data-icon] {
+      color: #475569;
+  }
+
+  .sorteo-history {
+    margin-top: 3rem;
+  }
+
+  .sorteo-history-container {
+    border-top: 1px solid var(--sorteo-border);
+    padding-top: 2rem;
+  }
+
+  .sorteo-history-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--sorteo-text);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .sorteo-history-title [data-icon] {
+    width: 1.25rem;
+    height: 1.25rem;
+    opacity: 0.5;
+  }
+
+  .sorteo-history-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .sorteo-no-winners {
+    font-size: 0.875rem;
+    font-style: italic;
+    color: var(--sorteo-text-muted);
+  }
+
+  .sorteo-history-item {
+    background: var(--sorteo-card);
+    border: 1px solid var(--sorteo-border);
+    border-radius: 9999px;
+    padding: 0.375rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--sorteo-text);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    animation: zoom-in 0.3s ease-out;
+  }
+
+  .sorteo-history-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: var(--sorteo-success);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .hidden { display: none; }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes ping-slow {
+    0% {
+      transform: scale(1);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
+
+  .animate-ping-slow {
+    animation: ping-slow 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes zoom-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .animate-zoom-in {
+      animation: zoom-in 0.5s ease-out both;
+  }
+
+  .sorteo-confetti-particle {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      z-index: 50;
+      left: 50%;
+      top: 50%;
+      opacity: 1;
+      transform: translate(0, 0) rotate(0deg) scale(0.5);
+      animation: confetti-fly 1.5s cubic-bezier(0.1, 1, 0.2, 1) forwards;
+  }
+
+  @keyframes confetti-fly {
+      to {
+          transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
+          opacity: 0;
+      }
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--sorteo-border);
+    border-radius: 10px;
+  }
+</style>