// Helper para generar cartón 3x9 seguro
function createPortalCard(index = 1) {
  if (window.generateCard3x9) {
    return window.generateCard3x9(index, 15);
  }
  // Cuadrícula 3x9 oficial de respaldo (5 números por fila, 15 en total)
  const fallbackGrid = [
    [7, null, 25, null, 42, null, 68, null, 81],
    [null, 14, null, 33, null, 55, null, 77, null],
    [3, null, 29, null, 48, null, null, 79, 90]
  ];
  const allNums = [3, 7, 14, 25, 29, 33, 42, 48, 55, 68, 77, 79, 81, 90];
  const code = 'CR-' + Math.floor(10000 + Math.random() * 90000);
  return {
    id: code,
    card_code: code,
    title: `Cartón #${index}`,
    grid: fallbackGrid,
    numbers: allNums,
    allNumbers: allNums
  };
}

function AuthPortal({ onLoginSuccess, viewersCount = 48 }) {
  const room = window.useBingoRoom ? window.useBingoRoom() : {};
  const isSalesOpen = room.isSalesOpen !== undefined ? room.isSalesOpen : true;

  // =========================================================================
  // CONFIGURACIÓN DE COMPRA ONLINE PÚBLICA (PRESERVADA PARA FUTURAS EDICIONES)
  // Para este sorteo, la venta se realiza exclusivamente por Vendedoras Oficiales.
  // Para reactivar en el futuro: cambiar ENABLE_PUBLIC_ONLINE_PURCHASE = true
  // =========================================================================
  const [enablePublicPurchase, setEnablePublicPurchase] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      if (urlParams.get('comprar') === 'true' || urlParams.get('checkout') === 'true') return true;
    } catch (e) {}
    return false; // Deshabilitado para esta edición (solo vendedoras)
  });

  // Pestañas: 'spectator' (por defecto) | 'seller-login' | 'admin-login' | 'player-upload'
  const [activeTab, setActiveTab] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const mode = urlParams.get('mode') || urlParams.get('role') || urlParams.get('tab');
      if (mode === 'admin' || mode === 'organizer') return 'admin-login';
      if (mode === 'seller' || mode === 'vendedor') return 'seller-login';
      if (mode === 'spectator' || mode === 'player-lookup' || mode === 'mis-cartones' || mode === 'sorteo' || mode === 'sala') return 'spectator';
      if (enablePublicPurchase && (mode === 'comprar' || mode === 'player-upload' || mode === 'showcase')) return 'player-upload';
      return 'spectator'; // Por defecto: Entrar a la Sala / Ver Sorteo
    } catch (e) {
      return 'spectator';
    }
  });

  // Estado de Compra de Cartones
  const [cardsCount, setCardsCount] = useState(4); // Por defecto 4 cartones (Promo 3+1 por $3.000)
  const [customSelectedCards, setCustomSelectedCards] = useState([]);
  const [showSelectorModal, setShowSelectorModal] = useState(false);

  // Cálculo de Precio y Promoción: La máxima promo es 3+1 (4 cartones x $3.000)
  const pricePerCard = 1000;
  const activeCount = customSelectedCards.length > 0 ? customSelectedCards.length : Math.max(1, cardsCount);
  const isExactThree = activeCount === 3;
  const isFourOrMore = activeCount >= 4;
  const bonusCards = (isExactThree || isFourOrMore) ? 1 : 0; // Máximo 1 cartón de regalo en total
  const payableCount = isExactThree ? 3 : (isFourOrMore ? activeCount - 1 : activeCount);
  const totalPrice = payableCount * pricePerCard;
  const totalCardsToReceive = isExactThree ? 4 : activeCount;

  // Estado de Cartones en Vista Previa
  const [generatedPreviewCards, setGeneratedPreviewCards] = useState(() => {
    const initial = [];
    for (let i = 1; i <= 4; i++) {
      const c = createPortalCard(i);
      if (i === 4) {
        c.es_promo = true;
        c.title = `Cartón #${i} (🎁 PROMO 3+1 REGALO)`;
      }
      initial.push(c);
    }
    return initial;
  });

  const [showCardsPreviewList, setShowCardsPreviewList] = useState(true);

  // Sincronizar vista previa cuando cambia cantidad o selección personalizada
  useEffect(() => {
    if (customSelectedCards && customSelectedCards.length > 0) {
      const list = customSelectedCards.map((c, i) => ({
        ...c,
        es_promo: i >= payableCount,
        title: i >= payableCount ? `${c.title || `Cartón #${i + 1}`} (🎁 PROMO 3+1 REGALO)` : (c.title || `Cartón #${i + 1}`)
      }));
      while (list.length < totalCardsToReceive) {
        const bonusIdx = list.length + 1;
        const bonusCard = createPortalCard(bonusIdx);
        bonusCard.es_promo = true;
        bonusCard.title = `Cartón #${bonusIdx} (🎁 PROMO 3+1 REGALO)`;
        list.push(bonusCard);
      }
      setGeneratedPreviewCards(list);
    } else {
      const list = [];
      for (let i = 1; i <= totalCardsToReceive; i++) {
        const c = createPortalCard(i);
        if (i > payableCount) {
          c.es_promo = true;
          c.title = `Cartón #${i} (🎁 PROMO 3+1 REGALO)`;
        }
        list.push(c);
      }
      setGeneratedPreviewCards(list);
    }
  }, [activeCount, customSelectedCards, totalCardsToReceive, payableCount]);

  const handleRegeneratePreview = () => {
    if (customSelectedCards && customSelectedCards.length > 0) {
      setCustomSelectedCards([]);
    }
    const list = [];
    for (let i = 1; i <= totalCardsToReceive; i++) {
      const c = createPortalCard(i);
      if (i > payableCount) {
        c.es_promo = true;
        c.title = `Cartón #${i} (🎁 PROMO 3+1 REGALO)`;
      }
      list.push(c);
    }
    setGeneratedPreviewCards(list);
  };

  // Estado del Formulario de Carga de Comprobante
  const [formData, setFormData] = useState({
    fullName: '',
    phone: '',
    operationNumber: '',
    receiptImage: null,
    previewUrl: null
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitMessage, setSubmitMessage] = useState(null);

  // Estado para búsqueda por teléfono / código de cartón
  const [lookupQuery, setLookupQuery] = useState('');
  const [lookupError, setLookupError] = useState(null);

  // Estado para login de organizador
  const [adminUser, setAdminUser] = useState('admin');
  const [adminPass, setAdminPass] = useState('');
  const [adminLoading, setAdminLoading] = useState(false);
  const [adminError, setAdminError] = useState(null);

  // Visibilidad protegida de la pestaña Organizador (oculta por defecto al público)
  const [showAdminTab, setShowAdminTab] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get('admin') === 'true' || urlParams.get('mode') === 'admin' || urlParams.get('role') === 'admin';
    } catch (e) {
      return false;
    }
  });

  // Atajo secreto: 3 clics en el logo de La Mami revelan la pestaña de Organizador
  const [logoClicks, setLogoClicks] = useState(0);
  const handleSecretLogoClick = () => {
    setLogoClicks(prev => {
      const count = prev + 1;
      if (count >= 3) {
        setShowAdminTab(true);
        setActiveTab('admin-login');
        return 0;
      }
      return count;
    });
  };

  // Estado para login de vendedor / promotor
  const [sellerPhone, setSellerPhone] = useState('');
  const [sellerPin, setSellerPin] = useState('');
  const [sellerError, setSellerError] = useState(null);
  const [sellerLoading, setSellerLoading] = useState(false);
  const [activeSellersList, setActiveSellersList] = useState([]);

  // Cargar vendedores oficiales activos desde Supabase
  useEffect(() => {
    async function loadActiveSellers() {
      if (window.supabaseClient) {
        try {
          const { data } = await window.supabaseClient
            .from('vendedores')
            .select('nombre')
            .eq('is_active', true)
            .order('created_at', { ascending: true });
          if (data && data.length > 0) {
            setActiveSellersList(data.map(s => s.nombre));
          }
        } catch (e) {}
      }
    }
    loadActiveSellers();
  }, []);

  const handleSellerLogin = async (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (!sellerPhone.trim() || !sellerPin.trim()) {
      setSellerError("Ingresa tu teléfono y PIN de vendedor.");
      return;
    }
    setSellerLoading(true);
    setSellerError(null);
    try {
      if (window.ReceiptService && window.ReceiptService.authenticateSeller) {
        const res = await window.ReceiptService.authenticateSeller(sellerPhone.trim(), sellerPin.trim());
        if (res && res.success) {
          onLoginSuccess({
            role: 'seller',
            id: res.id,
            name: res.nombre,
            phone: res.telefono
          });
          return;
        } else {
          setSellerError(res?.message || "Teléfono o PIN incorrecto.");
        }
      } else {
        setSellerError("Error de conexión con el servicio.");
      }
    } catch (err) {
      setSellerError(err.message || "Error al autenticar");
    } finally {
      setSellerLoading(false);
    }
  };

  // Manejo de archivo de comprobante
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setFormData(prev => ({
          ...prev,
          receiptImage: file,
          previewUrl: reader.result
        }));
      };
      reader.readAsDataURL(file);
    }
  };

  // 1. Envío del Formulario y Carga de Comprobante
  const handleSubmitReceipt = async (e) => {
    e.preventDefault();
    if (!formData.fullName.trim()) {
      alert("Por favor ingresa tu Nombre y Apellido.");
      return;
    }
    if (!formData.phone.trim()) {
      alert("Por favor ingresa tu número de WhatsApp o Teléfono.");
      return;
    }
    if (cardsCount < 1) {
      alert("Debes elegir al menos 1 cartón para comprar.");
      return;
    }

    setIsSubmitting(true);
    setSubmitMessage(`Procesando comprobante y asignando ${totalCardsToReceive} cartones oficiales (${cardsCount} comprados + ${bonusCards} gratis)...`);

    try {
      const finalCards = generatedPreviewCards.map((c, i) => ({
        id: c.id || c.card_code || ('CR-' + (10000 + i + 1)),
        card_code: c.id || c.card_code || ('CR-' + (10000 + i + 1)),
        title: `${formData.fullName} - ${c.es_promo ? `Cartón #${i + 1} (🎁 PROMO 3+1 REGALO)` : (c.title || `Cartón #${i + 1}`)}`,
        grid: c.grid,
        allNumbers: c.allNumbers || (c.grid ? c.grid.flat().filter(n => n !== null && n !== undefined) : []),
        es_promo: !!c.es_promo,
        is_active: false
      }));

      // Guardar en Supabase como PENDIENTE (Método 1 y 2 Anti-Fraude)
      if (window.ReceiptService && window.ReceiptService.submitReceipt) {
        await window.ReceiptService.submitReceipt({
          player_name: formData.fullName,
          phone: formData.phone,
          amount: totalPrice,
          cards_count: finalCards.length,
          operation_number: formData.operationNumber || `OP-${Date.now().toString().slice(-6)}`,
          receipt_image_url: formData.previewUrl || '',
          cards: finalCards,
          status: 'pending',
          is_active: false
        });
      }

      setSubmitMessage(`¡Comprobante recibido con éxito! Tus ${finalCards.length} cartones están registrados como 🟡 PENDIENTE DE REVISIÓN. El organizador activará tus cartones para el sorteo.`);

      setTimeout(() => {
        setIsSubmitting(false);
        onLoginSuccess({
          role: 'player',
          name: formData.fullName,
          phone: formData.phone,
          cards: finalCards,
          amount: totalPrice,
          isPendingApproval: true
        });
      }, 1200);
    } catch (err) {
      console.error(err);
      setIsSubmitting(false);
      alert("Error procesando comprobante: " + err.message);
    }
  };

  // 2. Búsqueda de Cartones por Teléfono
  // 2. Consulta y Acceso Directo por Teléfono o Código de Cartón
  const normalizePhone = (p) => {
    if (!p) return '';
    let clean = String(p).replace(/[^0-9]/g, '');
    if (clean.startsWith('549')) clean = clean.slice(3);
    else if (clean.startsWith('54')) clean = clean.slice(2);
    if (clean.startsWith('0')) clean = clean.slice(1);
    if (clean.startsWith('15')) clean = clean.slice(2);
    return clean;
  };

  const matchPhones = (p1, p2) => {
    const c1 = normalizePhone(p1);
    const c2 = normalizePhone(p2);
    if (!c1 || !c2) return false;
    if (c1 === c2) return true;
    const minLen = Math.min(c1.length, c2.length);
    if (minLen >= 6) {
      if (c1.endsWith(c2) || c2.endsWith(c1) || c1.includes(c2) || c2.includes(c1)) {
        return true;
      }
    }
    return false;
  };

  const handleLookup = async (e) => {
    e.preventDefault();
    if (!lookupQuery.trim()) {
      setLookupError("Ingresa tu teléfono o número de cartón.");
      return;
    }
    setLookupError(null);
    setIsSubmitting(true);

    try {
      const rawQuery = lookupQuery.trim().toLowerCase();
      const codeQuery = lookupQuery.trim().toUpperCase();
      let matchingReceipts = [];

      // 1. Buscar en comprobantes por teléfono o nombre
      if (window.ReceiptService && window.ReceiptService.getReceipts) {
        const receipts = await window.ReceiptService.getReceipts();
        matchingReceipts = receipts.filter(r => {
          if (matchPhones(r.player_phone, lookupQuery)) return true;
          if (matchPhones(r.phone, lookupQuery)) return true;
          if (r.player_name && r.player_name.toLowerCase().includes(rawQuery)) return true;
          return false;
        });
      }

      // 2. Si no hubo coincidencia directa por teléfono/nombre, buscar por código de cartón (ej: CR-70196 o 70196)
      if (matchingReceipts.length === 0 && window.supabaseClient) {
        const cleanDigits = codeQuery.replace(/[^0-9]/g, '');
        let cardMatches = [];

        // Buscar en bingo_cards
        const { data: bcMatches } = await window.supabaseClient
          .from('bingo_cards')
          .select('receipt_id, player_name, player_phone, card_code')
          .or(`card_code.ilike.%${codeQuery}%,card_code.ilike.%${cleanDigits}%`)
          .limit(10);
        if (bcMatches && bcMatches.length > 0) cardMatches = cardMatches.concat(bcMatches);

        // Buscar en cartones relacionales
        const { data: relMatches } = await window.supabaseClient
          .from('cartones')
          .select('receipt_id, codigo_carton')
          .or(`codigo_carton.ilike.%${codeQuery}%,codigo_carton.ilike.%${cleanDigits}%`)
          .limit(10);
        if (relMatches && relMatches.length > 0) cardMatches = cardMatches.concat(relMatches);

        const rIds = [...new Set(cardMatches.map(b => b.receipt_id).filter(Boolean))];
        if (rIds.length > 0) {
          const { data: foundRecs } = await window.supabaseClient
            .from('receipts')
            .select('*')
            .in('id', rIds);
          if (foundRecs && foundRecs.length > 0) {
            matchingReceipts = foundRecs;
          }
        }
      }

      if (matchingReceipts.length > 0) {
        // Verificar si los comprobantes están aprobados o pendientes
        const hasPendingOnly = matchingReceipts.every(r => r.status === 'pending');
        if (hasPendingOnly) {
          setIsSubmitting(false);
          setLookupError("Tu comprobante ya está registrado pero aún está pendiente de aprobación por el organizador. Apenas sea verificado podrás ver tus cartones.");
          return;
        }

        // Obtener y combinar todos los cartones de todos los comprobantes del jugador
        let combinedCards = [];
        let totalSpent = 0;
        const playerName = matchingReceipts.find(r => r.player_name)?.player_name || 'Jugador';
        const playerPhone = matchingReceipts.find(r => r.player_phone || r.phone)?.player_phone || lookupQuery.trim();

        for (const r of matchingReceipts) {
          totalSpent += parseFloat(r.amount || 0);
          let cards = (r.cards && r.cards.length > 0) ? r.cards : [];
          if (cards.length === 0 && window.ReceiptService?.getCardsByReceiptId) {
            cards = await window.ReceiptService.getCardsByReceiptId(r.id);
          }
          if (cards && cards.length > 0) {
            combinedCards = combinedCards.concat(cards);
          }
        }

        // Si combinedCards sigue vacío, buscar directamente en bingo_cards o cartones por player_phone
        if (combinedCards.length === 0 && window.supabaseClient) {
          const norm = normalizePhone(lookupQuery);
          const { data: directBC } = await window.supabaseClient
            .from('bingo_cards')
            .select('*')
            .or(`player_phone.ilike.%${norm}%,player_name.ilike.%${rawQuery}%`);
          if (directBC && directBC.length > 0) {
            combinedCards = directBC.map((c, idx) => ({
              id: c.card_code || c.id,
              card_code: c.card_code || c.id,
              title: c.title || `Cartón Oficial #${idx + 1}`,
              playerName: c.player_name || playerName,
              playerPhone: c.player_phone || playerPhone,
              grid: c.grid,
              es_promo: c.es_promo,
              is_active: c.is_active
            }));
          }
        }

        if (combinedCards.length > 0) {
          // Eliminar posibles duplicados por ID o código de cartón
          const uniqueCards = [];
          const seenIds = new Set();
          for (const c of combinedCards) {
            const cid = c.card_code || c.id;
            if (!seenIds.has(cid)) {
              seenIds.add(cid);
              uniqueCards.push(c);
            }
          }

          setIsSubmitting(false);
          onLoginSuccess({
            role: 'player',
            name: playerName,
            phone: playerPhone,
            cards: uniqueCards,
            amount: totalSpent
          });
          return;
        }
      }

      setIsSubmitting(false);
      setLookupError("No se encontraron cartones activos asociados a ese teléfono o código. Verifica haber ingresado el número con el que compraste.");
    } catch (err) {
      console.error("Error en handleLookup:", err);
      setIsSubmitting(false);
      setLookupError("Error de conexión al buscar los cartones. Intenta nuevamente.");
    }
  };

  // 3. Acceso de Espectador Libre
  const handleGuestSpectator = () => {
    onLoginSuccess({
      role: 'spectator',
      name: 'Espectador Anónimo',
      cards: null
    });
  };

  // 4. Login Seguro de Organizador / Administrador con Usuario y Contraseña
  const handleAdminLogin = async (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (!adminUser.trim() || !adminPass.trim()) {
      setAdminError("Ingresa tu usuario y contraseña de Organizador.");
      return;
    }
    setAdminLoading(true);
    setAdminError(null);
    try {
      let res = null;
      if (window.ReceiptService && window.ReceiptService.authenticateAdmin) {
        res = await window.ReceiptService.authenticateAdmin(adminUser, adminPass);
      } else {
        const cleanUser = adminUser.trim().toLowerCase();
        const cleanPass = adminPass.trim();
        if ((cleanUser === 'admin' || cleanUser === 'organizador') && (cleanPass === 'LotaMami2026!' || cleanPass === '1234')) {
          res = { success: true, role: 'admin', name: 'Organizador Oficial', adminPin: '1234' };
        } else {
          res = { success: false, message: 'Usuario o contraseña incorrectos.' };
        }
      }

      if (res && res.success) {
        onLoginSuccess({
          role: 'admin',
          originalRole: 'admin',
          name: 'Organizador Oficial',
          adminPin: res.adminPin || '1234'
        });
      } else {
        setAdminError(res?.message || "Usuario o contraseña de Organizador incorrectos.");
      }
    } catch (err) {
      setAdminError(err.message || "Error al autenticar");
    } finally {
      setAdminLoading(false);
    }
  };

  const calculatedCards = Math.max(1, Math.floor(parseInt(formData.amount || '0', 10) / 1000));

  return (
    <div className="auth-portal-container">
      {/* Hero Central */}
      <div className="auth-hero-header">
        <div className="auth-logo-badge" onClick={handleSecretLogoClick} title="Lota Familiar La Mami" style={{
          cursor: 'pointer',
          width: '110px',
          height: '110px',
          borderRadius: '50%',
          background: 'transparent',
          boxShadow: '0 0 35px rgba(244, 63, 94, 0.45), 0 0 15px rgba(245, 158, 11, 0.35)',
          border: '3px solid #f43f5e',
          overflow: 'hidden',
          padding: 0,
          margin: '0 auto 14px',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <img 
            src="./assets/logo.png" 
            alt="Lota Familiar La Mami" 
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} 
          />
        </div>
        <h1 className="auth-title">LOTA FAMILIAR LA MAMI</h1>
        <p className="auth-subtitle">
          Sorteo oficial en vivo de 90 bolillas • 3 Grandes Premios + Premio por Nº de Cartón
        </p>

        <div className="auth-hero-badges" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginTop: '10px', flexWrap: 'wrap', justifyContent: 'center', maxWidth: '100%' }}>
          <div className="auth-hero-badge-pill" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', background: 'rgba(244, 63, 94, 0.15)', border: '1px solid rgba(244, 63, 94, 0.4)', padding: '5px 12px', borderRadius: 'var(--radius-full)', color: '#fca5a5', fontSize: '0.82rem' }}>
            <span className="status-dot offline" style={{ width: '8px', height: '8px', backgroundColor: '#f43f5e', boxShadow: '0 0 10px #f43f5e', flexShrink: 0 }}></span>
            <span>En directo: <strong>{viewersCount} espectadores</strong></span>
          </div>

          {isSalesOpen ? (
            <div className="auth-hero-badge-pill" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', background: 'rgba(16, 185, 129, 0.15)', border: '1px solid rgba(16, 185, 129, 0.45)', padding: '5px 12px', borderRadius: 'var(--radius-full)', color: '#6ee7b7', fontSize: '0.82rem', fontWeight: '800' }}>
              <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#10b981', boxShadow: '0 0 8px #10b981', flexShrink: 0 }}></span>
              <span>Venta Oficial: <strong>ABIERTA</strong></span>
            </div>
          ) : (
            <div className="auth-hero-badge-pill" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', background: 'rgba(239, 68, 68, 0.18)', border: '1px solid rgba(239, 68, 68, 0.5)', padding: '5px 12px', borderRadius: 'var(--radius-full)', color: '#fca5a5', fontSize: '0.82rem', fontWeight: '800' }}>
              <i className="fa-solid fa-lock" style={{ color: '#f87171' }}></i>
              <span>Venta Oficial: <strong>CERRADA</strong></span>
            </div>
          )}
        </div>
      </div>

      {/* Tabla Oficial de Premios en Juego (Visible arriba antes de entrar a cualquier opción) */}
      <div className="auth-prizes-top-container">
        <div className="auth-prizes-top-title">
          <i className="fa-solid fa-trophy" style={{ color: 'var(--accent-gold)' }}></i>
          <span>TABLA OFICIAL DE PREMIOS • POZO TOTAL $240.000</span>
        </div>

        {/* 1. EL GRAN PREMIO MAYOR - PRIMERO Y BIEN DESTACADO */}
        <div className="auth-grand-prize-hero">
          <div className="auth-grand-prize-left">
            <div className="auth-grand-prize-crown">
              👑
            </div>
            <div className="auth-grand-prize-info">
              <div className="auth-grand-prize-badge">
                <i className="fa-solid fa-fire"></i>
                <span>PREMIO MAYOR DE LA NOCHE</span>
              </div>
              <div className="auth-grand-prize-name">
                1° Premio: Gran Pozo Bingo
              </div>
              <div className="auth-grand-prize-subtitle">
                ¡El pozo principal más esperado del sorteo!
              </div>
            </div>
          </div>
          <div className="auth-grand-prize-right">
            <strong className="auth-grand-prize-amount">$100.000</strong>
            <span className="auth-grand-prize-plus">+ $10.000 en 1ª Línea</span>
          </div>
        </div>

        {/* 2. Demás Premios Oficiales en Orden (2° y 3° Premio + Línea Oficial) */}
        <div className="auth-prizes-strip">
          <div className="auth-prize-mini-item highlight">
            <span>🥈 2° Premio (Bingo)</span>
            <strong style={{ color: 'var(--accent-green)' }}>$50.000</strong>
            <small style={{ fontSize: '0.68rem', color: '#94a3b8' }}>+ $10k en 1ª Línea</small>
          </div>
          <div className="auth-prize-mini-item highlight">
            <span>🥉 3° Premio (Bingo)</span>
            <strong style={{ color: 'var(--accent-green)' }}>$50.000</strong>
            <small style={{ fontSize: '0.68rem', color: '#94a3b8' }}>+ $10k en 1ª Línea</small>
          </div>
          <div className="auth-prize-mini-item">
            <span>🥇 1ª Línea Oficial</span>
            <strong style={{ color: '#ffffff' }}>$10.000</strong>
            <small style={{ fontSize: '0.68rem', color: '#94a3b8' }}>En cada premio</small>
          </div>
        </div>

        {/* 3. Premio Diferenciado: Sorteo Especial por Número de Cartón */}
        <div className="auth-prize-carton-banner">
          <div className="auth-prize-carton-left">
            <div className="auth-prize-carton-icon">
              <i className="fa-solid fa-ticket"></i>
            </div>
            <div className="auth-prize-carton-text">
              <div className="auth-prize-carton-badge">
                <i className="fa-solid fa-star"></i>
                <span>SORTEO EXTRA AL CIERRE</span>
              </div>
              <div className="auth-prize-carton-title">
                Premio por Nº de Cartón
              </div>
              <div className="auth-prize-carton-desc">
                Participan todos los cartones vendidos • ¡Ganas con el número de serie de tu cartón!
              </div>
            </div>
          </div>
          <div className="auth-prize-carton-right">
            <span className="auth-prize-carton-label">PREMIO EXTRA</span>
            <strong className="auth-prize-carton-amount">$10.000</strong>
          </div>
        </div>
      </div>

      {/* Tarjeta de Entrada Principal */}
      <div className="auth-card-wrapper">
        {/* Selector de Pestañas Unificadas */}
        <div className="auth-tab-bar">
          {/* Pestaña de Compra Online (Preservada intacta para futuras ediciones) */}
          {enablePublicPurchase && (
            <button 
              className={`auth-tab-btn ${activeTab === 'player-upload' || activeTab === 'showcase' ? 'active' : ''}`}
              onClick={() => { setActiveTab('player-upload'); setSubmitMessage(null); }}
            >
              <i className={`fa-solid ${isSalesOpen ? 'fa-cart-shopping' : 'fa-lock'}`} style={{ color: isSalesOpen ? 'var(--accent-green)' : '#f87171' }}></i>
              <span>{isSalesOpen ? 'Comprar Cartones' : 'Venta Cerrada'}</span>
            </button>
          )}

          <button 
            className={`auth-tab-btn ${activeTab === 'spectator' || activeTab === 'player-lookup' ? 'active' : ''}`}
            onClick={() => { setActiveTab('spectator'); setSubmitMessage(null); }}
          >
            <i className="fa-solid fa-tv" style={{ color: '#f43f5e' }}></i>
            <span>Sala en Vivo</span>
          </button>

          <button 
            className={`auth-tab-btn ${activeTab === 'seller-login' ? 'active' : ''}`}
            onClick={() => { setActiveTab('seller-login'); setSubmitMessage(null); }}
          >
            <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-cyan)' }}></i>
            <span>Vendedores</span>
          </button>

          {/* Pestaña de Organizador: Oculta por defecto para seguridad pública */}
          {showAdminTab && (
            <button 
              className={`auth-tab-btn ${activeTab === 'admin-login' ? 'active' : ''}`}
              onClick={() => { setActiveTab('admin-login'); setSubmitMessage(null); }}
              style={{ borderBottomColor: 'var(--accent-gold)' }}
            >
              <i className="fa-solid fa-lock" style={{ color: 'var(--accent-gold)' }}></i>
              <span>Organizador</span>
            </button>
          )}
        </div>

        {/* PESTAÑA UNIFICADA: Cargar Datos, Elegir del Catálogo y Comprobante (PRESERVADA PARA FUTURAS EDICIONES) */}
        {enablePublicPurchase && (activeTab === 'player-upload' || activeTab === 'showcase') && (
          isSalesOpen ? (
          <form onSubmit={handleSubmitReceipt} className="auth-form-body">
            <div className="auth-form-header">
              <h3><i className="fa-solid fa-cart-shopping" style={{ color: 'var(--accent-teal)' }}></i> 1. Elige tu cantidad o explora cartones del catálogo</h3>
              <p>Precio oficial: <strong>$1.000 por cartón</strong>. ¡Por cada 3 cartones te regalamos 1 cartón más (Promo 3+1)!</p>
            </div>

            {/* Opción Destacada de Elegir Cartones del Catálogo / Explorar Números */}
            <div style={{
              marginBottom: '16px',
              padding: '14px 18px',
              borderRadius: 'var(--radius-lg)',
              background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.85))',
              border: customSelectedCards.length > 0 ? '1.5px solid #10b981' : '1.5px solid rgba(245, 158, 11, 0.45)',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              flexWrap: 'wrap',
              gap: '12px',
              boxShadow: '0 4px 16px rgba(0,0,0,0.25)'
            }}>
              <div>
                <div style={{ fontSize: '0.94rem', fontWeight: '800', color: '#ffffff', display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <i className="fa-solid fa-layer-group" style={{ color: 'var(--accent-gold)' }}></i>
                  {customSelectedCards.length > 0 
                    ? `✓ ${customSelectedCards.length} Cartones elegidos del catálogo` 
                    : '¿Quieres explorar cartones o buscar tus números de la suerte?'}
                </div>
                <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', display: 'block', marginTop: '2px' }}>
                  {customSelectedCards.length > 0 
                    ? 'Tus cartones seleccionados están reservados para tu compra oficial.' 
                    : 'Explora la cuadrícula 3x9 oficial y elige tus números uno por uno con la Promo 3+1.'}
                </span>
              </div>

              <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                {customSelectedCards.length > 0 && (
                  <button
                    type="button"
                    className="btn btn-secondary btn-sm"
                    onClick={() => {
                      setCustomSelectedCards([]);
                      setCardsCount(4);
                    }}
                    style={{ fontSize: '0.78rem', padding: '6px 10px', color: '#f87171' }}
                    title="Borrar selección personalizada y usar aleatorios"
                  >
                    <i className="fa-solid fa-rotate-left"></i> Restablecer
                  </button>
                )}
                <button
                  type="button"
                  className="btn btn-sm"
                  onClick={() => setShowSelectorModal(true)}
                  style={{
                    fontWeight: '800',
                    padding: '8px 16px',
                    fontSize: '0.85rem',
                    background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                    color: '#111827',
                    border: 'none',
                    borderRadius: 'var(--radius-md)',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '6px',
                    boxShadow: '0 2px 8px rgba(245, 158, 11, 0.35)',
                    cursor: 'pointer'
                  }}
                >
                  <i className="fa-solid fa-table-cells"></i>
                  <span>{customSelectedCards.length > 0 ? 'Modificar Selección' : '🗂️ Abrir Catálogo (Elegir Números)'}</span>
                </button>
              </div>
            </div>

            {/* Selector Rápido con Chips de Promoción */}
            <div className="ticket-selector-chips">
              <button 
                type="button" 
                className={`ticket-chip-btn ${activeCount === 1 ? 'active' : ''}`}
                onClick={() => { setCardsCount(1); if (customSelectedCards.length > 0) setCustomSelectedCards([]); }}
              >
                <span className="ticket-chip-qty">1 Cartón</span>
                <span className="ticket-chip-price">$1.000</span>
                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Recibes 1</span>
              </button>

              <button 
                type="button" 
                className={`ticket-chip-btn ${activeCount === 2 ? 'active' : ''}`}
                onClick={() => { setCardsCount(2); if (customSelectedCards.length > 0) setCustomSelectedCards([]); }}
              >
                <span className="ticket-chip-qty">2 Cartones</span>
                <span className="ticket-chip-price">$2.000</span>
                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Recibes 2</span>
              </button>

              <button 
                type="button" 
                className={`ticket-chip-btn ${activeCount === 4 || activeCount === 3 ? 'active' : ''}`}
                onClick={() => { setCardsCount(4); if (customSelectedCards.length > 0) setCustomSelectedCards([]); }}
              >
                <span className="ticket-chip-qty">4 Cartones (Promo 3+1)</span>
                <span className="ticket-chip-price" style={{ color: 'var(--accent-gold)' }}>$3.000</span>
                <span className="ticket-chip-promo">🎁 Paga 3 y Recibe 4</span>
              </button>
            </div>

            {/* Stepper Manual de Cantidad */}
            <div className="form-group" style={{ marginTop: '6px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                <label className="form-label" style={{ marginBottom: 0 }}>O elige otra cantidad de cartones:</label>
                <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>$1.000 c/u</span>
              </div>
              <div className="ticket-stepper-control">
                <button 
                  type="button" 
                  className="ticket-stepper-btn"
                  onClick={() => setCardsCount(prev => Math.max(1, prev - 1))}
                  title="Restar 1 cartón"
                >
                  <i className="fa-solid fa-minus"></i>
                </button>
                <input 
                  type="number"
                  min="1"
                  max="50"
                  className="ticket-stepper-value"
                  value={cardsCount}
                  onChange={(e) => setCardsCount(Math.max(1, parseInt(e.target.value || '1', 10)))}
                />
                <button 
                  type="button" 
                  className="ticket-stepper-btn"
                  onClick={() => setCardsCount(prev => prev + 1)}
                  title="Sumar 1 cartón"
                >
                  <i className="fa-solid fa-plus"></i>
                </button>
              </div>
            </div>

            {/* Caja de Resumen de Precio y Promoción 3+1 */}
            <div className={`promo-summary-box ${bonusCards > 0 ? 'has-promo' : ''}`}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>Monto a transferir:</span>
                <strong style={{ fontSize: '1.3rem', color: 'var(--accent-gold)', fontFamily: 'var(--font-numbers)' }}>
                  ${totalPrice.toLocaleString()}
                </strong>
              </div>

              {bonusCards > 0 ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent-green)', fontSize: '0.84rem', fontWeight: '700', background: 'rgba(16, 185, 129, 0.15)', padding: '6px 10px', borderRadius: 'var(--radius-sm)', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
                  <i className="fa-solid fa-gift" style={{ fontSize: '1rem' }}></i>
                  <span>¡Promo 3+1 aplicada! Te llevas <strong>4 cartones por solo $3.000 (+1 cartón GRATIS)</strong></span>
                </div>
              ) : (
                <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
                  💡 <em>Tip: Si compras 3 cartones por $3.000, ¡recibes 4 cartones oficiales con la Promo 3+1!</em>
                </div>
              )}

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '6px' }}>
                <span style={{ fontSize: '0.85rem', fontWeight: '600' }}>Total de cartones que recibirás:</span>
                <span style={{ fontSize: '1.05rem', fontWeight: '900', color: 'var(--accent-teal)', fontFamily: 'var(--font-numbers)' }}>
                  🎟️ {totalCardsToReceive} {totalCardsToReceive === 1 ? 'Cartón' : 'Cartones'}
                </span>
              </div>
            </div>

            {/* Datos para realizar la transferencia */}
            <div style={{ background: 'rgba(15, 23, 42, 0.6)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: '10px 14px', fontSize: '0.82rem' }}>
              <div style={{ fontWeight: '800', color: 'var(--text-main)', marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                <i className="fa-solid fa-money-bill-transfer" style={{ color: 'var(--accent-gold)' }}></i>
                Datos para transferir los ${totalPrice.toLocaleString()}:
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px', color: 'var(--text-muted)' }}>
                <div>Alias: <strong style={{ color: '#38bdf8' }}>BINGO.OFICIAL.MP</strong></div>
                <div>CVU: <strong style={{ color: '#38bdf8' }}>0000003100049281729481</strong></div>
              </div>
            </div>

            {/* ========================================================
                VISTA PREVIA COMPLETA DE LOS CARTONES A COMPRAR (3x9)
               ======================================================== */}
            <div style={{ marginTop: '14px', background: 'rgba(15, 23, 42, 0.85)', border: '1.5px solid rgba(0, 229, 255, 0.35)', borderRadius: 'var(--radius-md)', padding: '14px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px', marginBottom: '12px' }}>
                <div>
                  <div style={{ fontSize: '0.98rem', fontWeight: '900', color: 'var(--text-main)', display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <i className="fa-solid fa-eye" style={{ color: 'var(--accent-gold)' }}></i>
                    Vista Previa de los {generatedPreviewCards.length} Cartones a Recibir
                  </div>
                  <span style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>
                    Revisa los números oficiales de tus cartones antes de enviar el comprobante.
                  </span>
                </div>

                <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
                  <button 
                    type="button" 
                    className="btn btn-secondary btn-sm"
                    onClick={handleRegeneratePreview}
                    style={{ fontSize: '0.78rem', padding: '5px 10px', display: 'flex', alignItems: 'center', gap: '5px' }}
                    title="Generar nuevas combinaciones de números"
                  >
                    <i className="fa-solid fa-shuffle"></i>
                    <span>Barajar Otros</span>
                  </button>

                  <button 
                    type="button" 
                    className="btn btn-secondary btn-sm"
                    onClick={() => setShowSelectorModal(true)}
                    style={{ fontSize: '0.78rem', padding: '5px 10px', color: 'var(--accent-cyan)', display: 'flex', alignItems: 'center', gap: '5px' }}
                  >
                    <i className="fa-solid fa-hand-pointer"></i>
                    <span>Elegir del Catálogo</span>
                  </button>

                  <button 
                    type="button" 
                    className="btn btn-secondary btn-sm"
                    onClick={() => window.downloadCardsPDF && window.downloadCardsPDF(generatedPreviewCards, formData.fullName || 'Vista Previa')}
                    style={{ fontSize: '0.78rem', padding: '5px 10px', color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', display: 'flex', alignItems: 'center', gap: '5px' }}
                    title="Descargar PDF de prueba de estos cartones"
                  >
                    <i className="fa-solid fa-file-pdf"></i>
                    <span>PDF</span>
                  </button>
                </div>
              </div>

              {/* Contenedor desplazable de cartones 3x9 */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', maxHeight: '420px', overflowY: 'auto', paddingRight: '4px' }}>
                {generatedPreviewCards.map((card, idx) => {
                  const isPromo = card.es_promo || (idx === 3 && generatedPreviewCards.length === 4);
                  const themeClass = 'card-theme-ruby';
                  return (
                  <div 
                    key={card.id || idx} 
                    className={`bingo-card-3x9-wrapper ${themeClass}`}
                  >
                    <div className="card-header-bar">
                      <div className="card-header-info">
                        <span className="card-title-text" style={{ fontWeight: '800' }}>
                          {isPromo ? `🎁 Cartón #${idx + 1} (PROMO 3+1 REGALO)` : (card.title || `Cartón Oficial #${idx + 1}`)}
                        </span>
                        <span className="card-serial-tag">{card.id || `CR-${10000 + idx + 1}`}</span>
                      </div>

                      <span className="brand-badge" style={{ backgroundColor: isPromo ? 'var(--accent-gold)' : 'var(--accent-teal)', color: isPromo ? '#111' : '#fff', fontWeight: '800' }}>
                        {isPromo ? '🎁 REGALO GRATIS' : `● CARTÓN ${idx + 1}`}
                      </span>
                    </div>

                    <div className="teal-bingo-ticket">
                      <div className="ticket-col-headers">
                        {['1-9','10-19','20-29','30-39','40-49','50-59','60-69','70-79','80-90'].map((col, cIdx) => (
                          <div key={cIdx} className="ticket-col-header-item">{col}</div>
                        ))}
                      </div>

                      <div className="ticket-grid-3x9">
                        {(card.grid || []).map((row, rIdx) => (
                          <div key={rIdx} className="ticket-row">
                            {row.map((cellNum, cIdx) => {
                              if (cellNum === null || cellNum === undefined) {
                                return (
                                  <div key={cIdx} className="ticket-cell empty">
                                    {rIdx === 2 && cIdx === 7 && (
                                      <span className="watermark-text">Lota Familiar La Mami</span>
                                    )}
                                  </div>
                                );
                              }
                              return (
                                <div key={cIdx} className="ticket-cell">
                                  <span>{cellNum}</span>
                                </div>
                              );
                            })}
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="ticket-status-footer" style={{ marginTop: '8px', paddingTop: '6px', fontSize: '0.75rem' }}>
                      <span style={{ color: 'var(--text-muted)' }}>15 números oficiales • 5 por fila</span>
                      <span style={{ color: card.es_promo ? 'var(--accent-gold)' : 'var(--accent-cyan)', fontWeight: '700' }}>
                        {card.es_promo ? '🎁 Cartón Bonificado 100% Gratis' : 'Listo para asignar a tu nombre'}
                      </span>
                    </div>
                  </div>
                );
              })}
              </div>
            </div>

            {/* Paso 2: Datos del Jugador */}
            <div className="auth-form-header" style={{ marginTop: '16px' }}>
              <h3><i className="fa-solid fa-id-card" style={{ color: 'var(--accent-teal)' }}></i> 2. Tus datos y comprobante</h3>
            </div>

            <div className="auth-grid-2">
              <div className="form-group">
                <label className="form-label">Nombre y Apellido *</label>
                <input 
                  type="text" 
                  className="form-input" 
                  placeholder="Ej: Carlos Gómez"
                  value={formData.fullName}
                  onChange={(e) => setFormData(prev => ({ ...prev, fullName: e.target.value }))}
                  required
                />
              </div>

              <div className="form-group">
                <label className="form-label">WhatsApp / Teléfono *</label>
                <input 
                  type="tel" 
                  className="form-input" 
                  placeholder="Ej: 11 5544 3322"
                  value={formData.phone}
                  onChange={(e) => setFormData(prev => ({ ...prev, phone: e.target.value }))}
                  required
                />
              </div>
            </div>

            <div className="form-group">
              <label className="form-label">N° de Operación / Transferencia</label>
              <input 
                type="text" 
                className="form-input" 
                placeholder="Ej: OP-849204 (opcional)"
                value={formData.operationNumber}
                onChange={(e) => setFormData(prev => ({ ...prev, operationNumber: e.target.value }))}
              />
            </div>

            {/* Zona de Subida de Comprobante */}
            <div className="form-group">
              <label className="form-label">Adjuntar Foto del Comprobante (Mercado Pago / Banco)</label>
              <div className="receipt-dropzone" onClick={() => document.getElementById('receipt-file-input').click()}>
                <input 
                  id="receipt-file-input" 
                  type="file" 
                  accept="image/*" 
                  style={{ display: 'none' }} 
                  onChange={handleFileChange}
                />
                {formData.previewUrl ? (
                  <div style={{ textAlign: 'center' }}>
                    <img src={formData.previewUrl} alt="Vista previa del comprobante" className="receipt-preview-img" />
                    <div style={{ fontSize: '0.8rem', color: 'var(--accent-green)', marginTop: '6px' }}>
                      <i className="fa-solid fa-circle-check"></i> Comprobante adjuntado (clic para cambiar)
                    </div>
                  </div>
                ) : (
                  <div style={{ textAlign: 'center' }}>
                    <i className="fa-solid fa-cloud-arrow-up" style={{ fontSize: '2rem', color: 'var(--accent-teal)', marginBottom: '6px' }}></i>
                    <div style={{ fontSize: '0.9rem', fontWeight: '700' }}>Haz clic para seleccionar la captura del comprobante</div>
                    <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>Formatos soportados: JPG, PNG, PDF</div>
                  </div>
                )}
              </div>
            </div>

            {submitMessage && (
              <div style={{ background: 'rgba(16, 185, 129, 0.15)', border: '1px solid var(--accent-green)', padding: '10px', borderRadius: 'var(--radius-md)', color: 'var(--accent-green)', fontSize: '0.85rem', textAlign: 'center' }}>
                <i className="fa-solid fa-spinner fa-spin" style={{ marginRight: '6px' }}></i>
                {submitMessage}
              </div>
            )}

            <button 
              type="submit" 
              className="btn btn-primary" 
              style={{ width: '100%', padding: '14px', fontSize: '1.05rem', fontWeight: '800' }}
              disabled={isSubmitting}
            >
              <i className={`fa-solid ${isSubmitting ? 'fa-spinner fa-spin' : 'fa-ticket'}`}></i>
              {isSubmitting ? 'Validando comprobante...' : `Validar Comprobante ($${totalPrice.toLocaleString()}) y Recibir ${totalCardsToReceive} Cartones`}
            </button>
          </form>
          ) : (
            <div className="auth-form-body" style={{ padding: '28px 20px', textAlign: 'center' }}>
              <div style={{
                width: '64px',
                height: '64px',
                borderRadius: '50%',
                background: 'rgba(239, 68, 68, 0.15)',
                border: '2px solid rgba(239, 68, 68, 0.5)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.75rem',
                color: '#f87171',
                marginBottom: '14px',
                boxShadow: '0 0 20px rgba(239, 68, 68, 0.25)'
              }}>
                <i className="fa-solid fa-lock"></i>
              </div>
              
              <h3 style={{ fontSize: '1.35rem', fontWeight: '900', color: '#ffffff', marginBottom: '6px' }}>
                Venta Oficial de Cartones Cerrada
              </h3>
              
              <p style={{ maxWidth: '520px', margin: '0 auto 16px', color: 'var(--text-secondary)', fontSize: '0.9rem', lineHeight: '1.5' }}>
                La venta de cartones para esta edición de <strong>Lota Familiar La Mami</strong> ha concluido. El bolillero oficial ha comenzado o está a punto de iniciar.
              </p>

              <div style={{
                maxWidth: '480px',
                margin: '0 auto 20px',
                background: 'rgba(15, 23, 42, 0.85)',
                border: '1.5px solid rgba(245, 158, 11, 0.4)',
                borderRadius: 'var(--radius-md)',
                padding: '14px 18px',
                textAlign: 'left',
                fontSize: '0.85rem',
                color: 'var(--text-secondary)'
              }}>
                <div style={{ fontWeight: '800', color: 'var(--accent-gold)', marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <i className="fa-solid fa-ticket"></i> ¿Ya tienes tus cartones adquiridos?
                </div>
                Ingresa a la sala para seguir la transmisión en directo, escuchar al locutor, ver las bolillas extraídas y controlar tus cartones en tiempo real.
              </div>

              <button
                type="button"
                className="btn"
                onClick={() => setActiveTab('spectator')}
                style={{
                  padding: '12px 24px',
                  fontSize: '0.95rem',
                  fontWeight: '900',
                  background: 'linear-gradient(135deg, #f43f5e, #be123c)',
                  color: '#ffffff',
                  border: 'none',
                  borderRadius: 'var(--radius-lg)',
                  boxShadow: '0 4px 20px rgba(244, 63, 94, 0.45)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: '10px'
                }}
              >
                <i className="fa-solid fa-tv"></i>
                <span>Entrar a la Sala / Ver Sorteo en Vivo</span>
              </button>
            </div>
          )
        )}

        {/* PESTAÑA UNIFICADA: Entrar a la Sala / Ver Sorteo y Cargar Cartones */}
        {(activeTab === 'spectator' || activeTab === 'player-lookup') && (
          <div className="auth-form-body" style={{ padding: '24px' }}>
            <div className="auth-form-header" style={{ textAlign: 'center', marginBottom: '20px' }}>
              <div style={{
                width: '64px',
                height: '64px',
                borderRadius: '50%',
                background: 'rgba(244, 63, 94, 0.15)',
                border: '2px solid #f43f5e',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 12px',
                color: '#f43f5e',
                fontSize: '1.8rem'
              }}>
                <i className="fa-solid fa-tv"></i>
              </div>
              <h3 style={{ fontSize: '1.25rem', fontWeight: '800', marginBottom: '6px' }}>
                Sala Oficial del Sorteo en Vivo
              </h3>
              <p style={{ color: 'var(--text-muted)', fontSize: '0.88rem', maxWidth: '460px', margin: '0 auto' }}>
                Sigue la extracción física de bolillas en directo, escucha al locutor y juega con tus cartones interactivos.
              </p>
            </div>

            {/* Aviso Institucional: Venta exclusiva por vendedoras autorizadas para esta edición */}
            {!enablePublicPurchase && (
              <div style={{
                background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.85))',
                border: '1.5px solid rgba(245, 158, 11, 0.45)',
                borderRadius: 'var(--radius-lg)',
                padding: '12px 14px',
                marginBottom: '16px',
                display: 'flex',
                alignItems: 'center',
                gap: '10px',
                fontSize: '0.84rem',
                color: '#e2e8f0',
                lineHeight: 1.4,
                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.2)',
                boxSizing: 'border-box',
                width: '100%'
              }}>
                <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-gold)', fontSize: '1.3rem', flexShrink: 0 }}></i>
                <div style={{ minWidth: 0, flex: 1, wordBreak: 'break-word' }}>
                  <strong style={{ color: 'var(--accent-gold)', display: 'block', fontSize: '0.9rem', marginBottom: '2px' }}>
                    Venta de cartones con Vendedores Autorizados
                  </strong>
                  Para este sorteo, la adquisición de cartones se realiza exclusivamente con nuestros vendedores autorizados{activeSellersList.length > 0 ? ` (${activeSellersList.join(', ')})` : ''}. Ingresa tu WhatsApp abajo para ver tus cartones asignados.
                </div>
              </div>
            )}

            {/* OPCIÓN 1: Ingreso Rápido con Cartones Comprados */}
            <form onSubmit={handleLookup} className="auth-lookup-box" style={{
              background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85))',
              border: '1.5px solid rgba(56, 189, 248, 0.35)',
              borderRadius: 'var(--radius-lg)',
              padding: '14px 16px',
              marginBottom: '16px',
              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.25)',
              boxSizing: 'border-box',
              width: '100%'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                <i className="fa-solid fa-ticket" style={{ color: 'var(--accent-cyan)', fontSize: '1.1rem' }}></i>
                <span style={{ fontSize: '0.95rem', fontWeight: '800', color: '#ffffff' }}>
                  ¿Ya tienes cartones comprados?
                </span>
              </div>
              <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '12px', lineHeight: 1.4 }}>
                Ingresa tu número de WhatsApp o código de cartón para cargarlos automáticamente en pantalla al entrar:
              </p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
                <div style={{ position: 'relative', width: '100%' }}>
                  <i className="fa-solid fa-phone" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--accent-cyan)', fontSize: '0.9rem' }}></i>
                  <input 
                    type="text" 
                    className="form-input" 
                    style={{ paddingLeft: '34px', fontSize: '0.95rem', width: '100%' }}
                    placeholder="Tu teléfono o WhatsApp (ej: 11 5544 3322)"
                    value={lookupQuery}
                    onChange={(e) => setLookupQuery(e.target.value)}
                  />
                </div>
                <button 
                  type="submit" 
                  className="btn btn-primary" 
                  style={{ width: '100%', padding: '12px', fontSize: '0.95rem', fontWeight: '800', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}
                  disabled={isSubmitting}
                >
                  <i className={`fa-solid ${isSubmitting ? 'fa-spinner fa-spin' : 'fa-right-to-bracket'}`}></i>
                  <span>{isSubmitting ? 'Buscando...' : 'Entrar con mis Cartones'}</span>
                </button>
              </div>

              {lookupError && (
                <div style={{ background: 'rgba(244, 63, 94, 0.15)', border: '1px solid #f43f5e', padding: '8px 12px', borderRadius: 'var(--radius-md)', color: '#fca5a5', fontSize: '0.82rem', marginTop: '10px' }}>
                  {lookupError}
                </div>
              )}
            </form>

            {/* SEPARADOR "O" */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', margin: '14px 0 18px' }}>
              <div style={{ flex: 1, height: '1px', background: 'var(--border-subtle)' }}></div>
              <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', fontWeight: '700', textTransform: 'uppercase' }}>O entrar sin cartones</span>
              <div style={{ flex: 1, height: '1px', background: 'var(--border-subtle)' }}></div>
            </div>

            {/* OPCIÓN 2: Entrada Libre como Espectador */}
            <button 
              type="button"
              onClick={handleGuestSpectator}
              className="btn btn-danger" 
              style={{ width: '100%', padding: '13px', fontSize: '1rem', fontWeight: '800', background: 'linear-gradient(135deg, #f43f5e, #e11d48)' }}
            >
              <i className="fa-solid fa-play"></i>
              <span>Ver Sorteo en Vivo (Como Espectador)</span>
            </button>
            <div style={{ fontSize: '0.76rem', color: 'var(--text-muted)', textAlign: 'center', marginTop: '8px' }}>
              Podrás ver el bolillero y escuchar la locución en tiempo real (modo solo lectura).
            </div>
          </div>
        )}

        {/* PESTAÑA: Login de Vendedor / Promotor */}
        {activeTab === 'seller-login' && (
          <form onSubmit={handleSellerLogin} className="auth-form-body">
            <div className="auth-form-header">
              <h3>
                <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-cyan)' }}></i> 
                Acceso para Vendedores y Promotores
              </h3>
              <p>Terminal para registrar nuevos compradores, emitir cartones oficiales y enviar comprobantes por WhatsApp.</p>
            </div>

            <div className="form-group">
              <label className="form-label">Teléfono o Nombre de Vendedor</label>
              <input 
                type="text" 
                className="form-input" 
                placeholder="Ej: 387123456 o tu nombre"
                value={sellerPhone}
                onChange={(e) => setSellerPhone(e.target.value)}
                autoFocus
                required
              />
            </div>

            <div className="form-group">
              <label className="form-label">PIN de Acceso</label>
              <input 
                type="password" 
                className="form-input" 
                placeholder="Ingresa tu PIN (Ej: 1234)"
                value={sellerPin}
                onChange={(e) => setSellerPin(e.target.value)}
                required
              />
            </div>

            {sellerError && (
              <div style={{ background: 'rgba(244, 63, 94, 0.15)', border: '1px solid #f43f5e', padding: '8px 12px', borderRadius: 'var(--radius-md)', color: '#fca5a5', fontSize: '0.85rem' }}>
                {sellerError}
              </div>
            )}

            <button 
              type="submit" 
              className="btn btn-primary" 
              disabled={sellerLoading}
              style={{ width: '100%', padding: '12px', fontSize: '1rem', fontWeight: '800', background: 'linear-gradient(135deg, var(--accent-cyan), #0284c7)' }}
            >
              <i className={`fa-solid ${sellerLoading ? 'fa-spinner fa-spin' : 'fa-right-to-bracket'}`}></i>
              {sellerLoading ? 'Verificando en Supabase...' : 'Ingresar a mi Terminal de Venta'}
            </button>

            <div style={{ textAlign: 'center', marginTop: '10px', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
              ¿Eres vendedor y aún no tienes cuenta? Solicítale tu PIN al organizador del bingo.
            </div>
          </form>
        )}

        {/* PESTAÑA 4: Login de Organizador */}
        {activeTab === 'admin-login' && (
          <form onSubmit={handleAdminLogin} className="auth-form-body">
            <div className="auth-form-header">
              <h3><i className="fa-solid fa-user-shield" style={{ color: 'var(--accent-gold)' }}></i> Acceso Exclusivo de Organizador</h3>
              <p>Mesa de control del bolillero, administración de comprobantes y validación de premios.</p>
            </div>

            <div className="form-group">
              <label className="form-label">Usuario Administrador</label>
              <input 
                type="text" 
                className="form-input" 
                placeholder="Ej: admin"
                value={adminUser}
                onChange={(e) => setAdminUser(e.target.value)}
                autoFocus
                required
              />
            </div>

            <div className="form-group">
              <label className="form-label">Contraseña Maestra de Seguridad</label>
              <input 
                type="password" 
                className="form-input" 
                placeholder="••••••••••••"
                value={adminPass}
                onChange={(e) => setAdminPass(e.target.value)}
                required
              />
            </div>

            {adminError && (
              <div style={{ background: 'rgba(244, 63, 94, 0.15)', border: '1px solid #f43f5e', padding: '8px 12px', borderRadius: 'var(--radius-md)', color: '#fca5a5', fontSize: '0.85rem' }}>
                {adminError}
              </div>
            )}

            <button 
              type="submit" 
              className="btn btn-accent" 
              disabled={adminLoading}
              style={{ width: '100%', padding: '12px', fontSize: '1rem', fontWeight: '800' }}
            >
              <i className={`fa-solid ${adminLoading ? 'fa-spinner fa-spin' : 'fa-lock-open'}`}></i>
              <span style={{ marginLeft: '8px' }}>{adminLoading ? 'Verificando credenciales...' : 'Ingresar a Mesa de Control'}</span>
            </button>
          </form>
        )}
      </div>

      {/* Modal de Selección de Cartones en el Inicio */}
      {showSelectorModal && (
        <window.CardSelectorModal 
          isOpen={showSelectorModal}
          onClose={() => setShowSelectorModal(false)}
          onConfirmSelection={(data) => {
            if (data && data.cards) {
              setCustomSelectedCards(data.cards);
              setCardsCount(data.cards.length);
              if (data.playerName && !formData.fullName) {
                setFormData(prev => ({ ...prev, fullName: data.playerName }));
              }
              if (data.playerPhone && !formData.phone) {
                setFormData(prev => ({ ...prev, phone: data.playerPhone }));
              }
            }
          }}
          initialSelectedCards={customSelectedCards}
        />
      )}
    </div>
  );
}

window.AuthPortal = AuthPortal;