/* MODIFICADO: estilos globales y de contenedores */
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #f6f7f8;
      color: #374151;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    /* NUEVO: asegurar override para modo oscuro en móvil */
    .dark body {
      background-color: #101922;
      color: #e5e7eb;
    }
    a {
      color: #2563eb;
      text-decoration: none;
      transition: color 0.2s;
    }
    a:hover {
      color: #1d4ed8;
    }
    /* Fin de estilos globales */

    /* HERO adaptado a colores del sitio (primary) */
    .brand-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(90deg, #137fec 0%, #3ba3ff 100%);
    }
    .dark .brand-hero {
      background: linear-gradient(90deg, #0f61b9 0%, #0b3e6e 100%);
    }
    .brand-hero::before {
      content: "";
      position: absolute; inset: -20% -10% auto auto;
      width: 60%; height: 160%;
      background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
      transform: rotate(-12deg);
      pointer-events: none;
    }
    .brand-hero::after {
      content: "";
      position: absolute; inset: auto -10% -20% auto;
      width: 55%; height: 150%;
      background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 70%);
      transform: rotate(-6deg);
      pointer-events: none;
    }
    .brand-watermark {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      font-weight: 800; letter-spacing: .05em;
      font-size: clamp(4rem, 12vw, 10rem);
      color: rgba(255,255,255,.16);
      text-transform: uppercase;
      user-select: none; pointer-events: none;
      filter: blur(.2px);
      z-index: 0; /* asegura que no tape el botón en móvil */
    }
    .dark .brand-watermark {
      color: rgba(255,255,255,.10);
    }
    .brand-logo {
      background: white;
      border-radius: 9999px;
      box-shadow: 0 8px 24px rgba(0,0,0,.15);
    }
    .social-btn {
      height: 36px; width: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      color: #1f2937; /* gray-800 */
      background: #ffffff;
      border-radius: 9999px;
      box-shadow: 0 6px 16px rgba(0,0,0,.20);
      transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
    }
    .dark .social-btn {
      background: #111827; /* gray-900 */
      color: #e5e7eb;      /* gray-200 */
      box-shadow: 0 6px 16px rgba(0,0,0,.35);
    }
    .nav-pill {
      display: inline-flex; align-items: center; justify-content: center;
      padding: .5rem .875rem;
      background: rgba(17,24,39,.75); /* gray-900/75 en claro para contraste */
      color: #fff; font-weight: 600; font-size: .9rem;
      border-radius: .625rem;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
      transition: background-color .15s ease, transform .08s ease;
    }
    .nav-pill:hover { background: #52525b; transform: translateY(-1px); }
    .dark .nav-pill { background: #3f3f46; }
    .theme-toggle-hero {
      position: absolute; top: .75rem; right: .75rem;
      height: 36px; width: 36px; border-radius: 9999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 4px 12px rgba(0,0,0,.20);
      transition: background-color .15s ease;
      z-index: 50; /* NUEVO: sobre el watermark en móvil */
    }
    .theme-toggle-hero:hover { background: #fff; }
    .dark .theme-toggle-hero {
      background: rgba(31,41,55,.9); /* gray-800 */
      border-color: rgba(255,255,255,.08);
    }

    .modal {
      display: none !important;
    }

    .modal.is-open {
      display: flex !important;
    }

    .number.selected {
      background-color: #137fec !important;
      color: white !important;
    }

    /* Panel flotante minimizado */
    .floating-minimized {
      height: 44px;
      max-height: 44px;
      cursor: pointer;
      overflow: hidden !important;
      padding: 0 !important;
    }

    .floating-minimized .floating-content {
      display: none;
    }

    /* Cambiado: separar y alinear a la derecha el botón, texto centrado */
    .floating-minimized .floating-minimized-bar {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 44px;
    }

    .floating-minimized-bar {
      display: none !important;
    }

    .floating-minimized #floating-hide {
      display: none !important;
    }

    /* Fix modo oscuro: tabla de precios con mejor contraste */
    .dark #pricing-table {
      background-color: rgba(17, 24, 39, 0.6);
      /* bg-gray-900/60 */
      border-color: #374151;
      /* gray-700 */
    }

    .dark #pricing-table thead {
      background-color: rgba(31, 41, 55, 0.85);
      /* bg-gray-800/85 */
    }

    .dark #pricing-table th,
    .dark #pricing-table td {
      color: #e5e7eb;
      /* text-gray-200 */
      border-color: #4b5563;
      /* gray-600 */
    }

    .dark #pricing-table tbody tr:hover {
      background-color: rgba(31, 41, 55, 0.6);
      /* hover sutil */
    }

    /* Choices.js dark mode */
    .dark .choices {
      --c-bg: #1f2937;
      /* gray-800 */
      --c-bg-dropdown: #111827;
      /* gray-900 */
      --c-border: #374151;
      /* gray-700 */
      --c-text: #e5e7eb;
      /* gray-200 */
      --c-muted: #9ca3af;
      /* gray-400 */
      --c-muted-600: #6b7280;
      /* gray-500/600 */
      --c-focus: #3b82f6;
      /* blue-500 */
    }

    .dark .choices__inner {
      background-color: var(--c-bg);
      border-color: var(--c-border);
      color: var(--c-text);
    }

    .dark .choices.is-focused .choices__inner,
    .dark .choices.is-open .choices__inner {
      border-color: var(--c-focus);
      box-shadow: 0 0 0 1px var(--c-focus);
    }

    /* Caret del select-one */
    .dark .choices[data-type*="select-one"]::after {
      border-color: var(--c-muted) transparent transparent;
    }

    .dark .choices[data-type*="select-one"].is-open::after {
      border-color: transparent transparent var(--c-muted);
    }

    /* Texto seleccionado y placeholder */
    .dark .choices__list--single .choices__item {
      color: var(--c-text);
    }

    .dark .choices__placeholder {
      color: var(--c-muted);
      opacity: 1;
    }

    /* Dropdown y elementos */
    .dark .choices__list--dropdown,
    .dark .choices__list[aria-expanded] {
      background-color: #111827 !important;
      /* ya cubierto, reforzado */
    }

    .dark .choices__list--dropdown .choices__item--selectable {
      color: #e5e7eb !important;
      /* text-gray-200 */
    }

    .dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .dark .choices__list--dropdown .choices__item--selectable:hover {
      background-color: #374151 !important;
      /* gray-700 */
      color: #e5e7eb !important;
    }

    /* Control (single item) en hover: asegurar contraste */
    .dark .choices__list--single .choices__item {
      color: #e5e7eb !important;
    }

    /* Desactivar visualmente el campo de búsqueda en el selector de series */
    #series-select-container .choices__input,
    #series-select-container .choices__input--cloned {
      display: none !important;
    }

    /* Fix: evitar saltos de línea en el selector de series (Choices) */
    #series-select-container .choices {
      min-width: 8rem;
      /* estabilidad del ancho */
    }

    #series-select-container .choices__list--single,
    #series-select-container .choices__list--single .choices__item,
    #series-select-container .choices__item--choice {
      white-space: nowrap !important;
    }

    #series-select-container .choices__list--single .choices__item {
      display: inline-flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #series-select-container .choices__list--dropdown .choices__item {
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Ribbon tipo "ribbon-three" (esquina superior derecha) */
    .ribbon-three {
      position: absolute;
      top: 40px;
      right: -48px;            /* cuelga fuera del borde derecho */
      transform: rotate(45deg);
      z-index: 20;
      width: 200px;
      height: 25px;              /* altura un poco mayor para centrar mejor */
      display: grid;             /* centro perfecto con grid */
      place-items: center;       /* centro horizontal y vertical */
      padding: 0;                /* sin padding para no desalinear */
      line-height: 1;             /* baseline estable */
      white-space: nowrap;        /* NUEVO: evita saltos de línea */
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 800;
      font-size: 10px;
      color: #ffffff;
      background: linear-gradient(90deg, #2563eb, #0ea5e9);
      box-shadow: 0 4px 10px rgba(0,0,0,.25);
      pointer-events: none; /* no bloquear clics */
    }
    .ribbon-three::before,
    .ribbon-three::after {
      content: "";
      position: absolute;
      bottom: -6px;
      width: 6px;
      height: 6px;
      background: #1e40af;
      box-shadow: 0 2px 4px rgba(0,0,0,.15);
    }
    .ribbon-three::before { left: 0; }
    .ribbon-three::after { right: 0; }

    /* Ajuste fino del texto dentro del ribbon */
    .ribbon-three > span {
      display: inline-block;
      transform: translateY(1px); /* nudge visual tras la rotación */
      padding: 0 8px;             /* evita que el texto toque los bordes */
      letter-spacing: .06em;      /* ligera reducción para mejor balance */
    }

    /* Modo oscuro: ajustar contraste del ribbon */
    .dark .ribbon-three {
      color: #eaf6ff;
      background: linear-gradient(90deg, #1d4ed8, #0891b2);
      box-shadow: 0 6px 14px rgba(0,0,0,.45);
    }
    .dark .ribbon-three::before,
    .dark .ribbon-three::after {
      background: #1e3a8a;
    }

    /* NUEVO: Ribbon gris para eventos pasados */
    .raffle-events-list article[data-event-type="past"] .ribbon-three {
      background: linear-gradient(90deg, #9ca3af, #6b7280); /* gray-400 → gray-500 */
      color: #f9fafb; /* gray-50 */
    }
    .raffle-events-list article[data-event-type="past"] .ribbon-three::before,
    .raffle-events-list article[data-event-type="past"] .ribbon-three::after {
      background: #6b7280; /* gray-500 */
    }

    /* Modo oscuro: tonos más profundos */
    .dark .raffle-events-list article[data-event-type="past"] .ribbon-three {
      background: linear-gradient(90deg, #4b5563, #374151); /* gray-600 → gray-700 */
      color: #e5e7eb; /* gray-200 */
    }
    .dark .raffle-events-list article[data-event-type="past"] .ribbon-three::before,
    .dark .raffle-events-list article[data-event-type="past"] .ribbon-three::after {
      background: #374151; /* gray-700 */
    }

    /* Participantes: badges de lugar (sin cambios) */
    #section-participants .rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 1.5rem;
      min-width: 2.25rem;
      padding: 0 .5rem;
      border-radius: .375rem;
      font-weight: 700;
      font-size: 11px;
      line-height: 1;
      border: 1px solid;
    }
    #section-participants .rank-1 {
      background: #fef3c7;          /* amber-100 */
      color: #b45309;               /* amber-700 */
      border-color: #fcd34d;        /* amber-300 */
    }
    #section-participants .rank-2 {
      background: #f3f4f6;          /* gray-100 */
      color: #374151;               /* gray-700 */
      border-color: #d1d5db;        /* gray-300 */
    }
    #section-participants .rank-3 {
      background: #ffedd5;          /* orange-100 */
      color: #9a3412;               /* orange-700 */
      border-color: #fdba74;        /* orange-300 */
    }
    #section-participants .rank-n {
      background: #f9fafb;          /* gray-50 */
      color: #4b5563;               /* gray-600 */
      border-color: #e5e7eb;        /* gray-200 */
    }

    /* REEMPLAZO: Top 1–3 por clases en vez de nth-child */
    #section-participants tbody tr.is-top-1 [data-avatar] {
      background-color: #fef3c7 !important;
      color: #b45309 !important;
    }
    #section-participants tbody tr.is-top-2 [data-avatar] {
      background-color: #f3f4f6 !important;
      color: #374151 !important;
    }
    #section-participants tbody tr.is-top-3 [data-avatar] {
      background-color: #ffedd5 !important;
      color: #9a3412 !important;
    }

    /* 4º en adelante: tamaño y espaciados reducidos */
    #section-participants tbody tr.is-4plus { font-size: 0.875rem; }
    #section-participants tbody tr.is-4plus td { padding-top: .25rem !important; padding-bottom: .25rem !important; }

    /* Avatar (siglas) más pequeño SOLO en ≥640px para 4+ (se ajusta con 4–10 y 11+) */
    @media (min-width: 640px) {
      #section-participants tbody tr.is-4plus [data-avatar] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: .625rem !important;
      }
    }

    /* Avatar gris para 4–10 (modo claro) */
    #section-participants tbody tr.is-4-10 [data-avatar] {
      background-color: #e5e7eb !important; /* gray-200 */
      color: #374151 !important;            /* gray-700 */
    }
    /* Avatar gris para 4–10 (modo oscuro) */
    .dark #section-participants tbody tr.is-4-10 [data-avatar] {
      background-color: #374151 !important; /* gray-700 */
      color: #e5e7eb !important;            /* gray-200 */
    }

    /* Reducir el gap entre avatar y texto solo 4+ */
    #section-participants tbody tr.is-4plus .flex.items-center { gap: .5rem !important; }
    /* Reducir badges de lugar para 4+ */
    #section-participants tbody tr.is-4plus .rank-badge {
      height: 1.25rem;
      min-width: 1.75rem;
      padding: 0 .375rem;
      font-size: 10px;
    }
    /* Forzar que cualquier text-sm dentro de 4º+ sea aún más pequeño */
    #section-participants tbody tr.is-4plus .text-sm { font-size: 0.75rem !important; }

    /* 4º+: forzar texto gris (incluye siglas, nombre, estado, ciudad y números) */
    #section-participants tbody tr.is-4plus td,
    #section-participants tbody tr.is-4plus td * {
      color: #6b7280 !important; /* gray-600 */
    }
    .dark #section-participants tbody tr.is-4plus td,
    .dark #section-participants tbody tr.is-4plus td * {
      color: #9ca3af !important; /* gray-400 */
    }

    /* 4º+: nombre, estado y ciudad un poco más pequeños */
    #section-participants tbody tr.is-4plus td:nth-child(2) .font-semibold { font-size: 0.6875rem !important; }
    #section-participants tbody tr.is-4plus td:nth-child(3),
    #section-participants tbody tr.is-4plus td:nth-child(4) { font-size: 0.6875rem !important; }

    /* Móvil: conservar tamaño base para todos los participantes */
    @media (max-width: 640px) {
      #section-participants [data-avatar] {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        flex: 0 0 2rem !important;
        line-height: 2rem !important;
        font-size: .75rem !important;
        border-radius: 9999px !important;
      }
    }

    /* Desktop: 4–10 más pequeños; 11+ tamaño base */
    @media (min-width: 640px) {
      #section-participants tbody tr.is-4-10 [data-avatar] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: .625rem !important;
        line-height: 1.5rem !important;
      }
      #section-participants tbody tr.is-11plus [data-avatar] {
        width: 2rem !important;
        height: 2rem !important;
        font-size: .75rem !important;
        line-height: 2rem !important;
      }
    }

    /* Móvil: 4–10 más pequeño (override) */
    @media (max-width: 640px) {
      #section-participants tbody tr.is-4-10 [data-avatar] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        flex: 0 0 1.5rem !important;
        line-height: 1.5rem !important;
        font-size: .625rem !important;
      }
    }

    #mini-prizes-track::-webkit-scrollbar { display: none; }

    /* NUEVO: scroll-padding para el carrusel de premios */
    #mini-prizes-track {
      scroll-padding-left: .75rem;  /* = px-3 */
      scroll-padding-right: .75rem; /* = px-3 */
    }

    /* NUEVO: animaciones para carrusel de eventos */
    @keyframes eventSlideInLeft {
      from { opacity: 0; transform: translateX(-24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes eventSlideInRight {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .event-slide-in-left { animation: eventSlideInLeft .28s ease-out both; }
    .event-slide-in-right { animation: eventSlideInRight .28s ease-out both; }

    /* Alertify custom width */
    .alertify .ajs-message {
      max-width: 400px;
      min-width: 300px;
    }

    .alertify-notifier .ajs-message {
      max-width: 400px;
      min-width: 300px;
    }

    /* Dark mode support for alertify */
    .dark .alertify .ajs-message {
      background-color: #1f2937;
      color: #f3f4f6;
      border-color: #374151;
    }

    .dark .alertify-notifier .ajs-message.ajs-success {
      background-color: #065f46;
      color: #d1fae5;
    }

    .dark .alertify-notifier .ajs-message.ajs-error {
      background-color: #991b1b;
      color: #fecaca;
    }

    .dark .alertify-notifier .ajs-message.ajs-warning {
      background-color: #92400e;
      color: #fef3c7;
    }

    /* Contenedor Select2 con ancho en función del contenido y sin encogerse en flex */
    #series-select-container .select2-container {
      display: inline-block;
      width: auto !important;
      min-width: max-content;
      flex: 0 0 auto;
      flex-shrink: 0;
    }

    /* Apariencia del campo (light) */
    #series-select-container .select2-selection--single {
      height: auto;
      padding: .375rem .625rem; /* ~6px 10px */
      border: 1px solid #D1D5DB; /* gray-300 */
      border-radius: .5rem;       /* rounded-md */
      background: #fff;
      color: #6B7280;             /* gray-700 */
      transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    #series-select-container .select2-container--open .select2-selection--single,
    #series-select-container .select2-selection--single:focus {
      border-color: #137fec;
      box-shadow: 0 0 0 3px rgba(19,127,236,0.25);
      outline: none;
    }
    #series-select-container .select2-selection__rendered {
      padding-left: .125rem;
      margin: 0;
      line-height: 1.25rem;
      font-size: .875rem;   /* text-sm */
      font-weight: 600;
      white-space: nowrap;  /* evita "..." */
      color: #6B7280; /* Light mode color */
    }

    .dark #series-select-container .select2-selection__rendered {
      color: #c5c5c5; /* Dark mode color (gray-200) */
    }

    #series-select-container .select2-selection__placeholder {
      color: #6B7280;       /* gray-500 */
    }
    #series-select-container .select2-selection__arrow {
      top: 50%;
      right: .5rem;
      transform: translateY(-50%);
    }
    #series-select-container .select2-selection__arrow b {
      border-color: #6B7280 transparent transparent transparent;
    }

    /* Dropdown (light) - MEJORADO */
    #series-select-container .select2-dropdown {
      border: 1px solid #D1D5DB;  /* gray-300 */
      border-radius: .5rem;
      overflow: hidden;
      background: #fff;
      min-width: max-content;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      z-index: 9999;
      margin-top: .25rem;
    }
    #series-select-container .select2-results {
      max-height: 240px;
      overflow-y: auto;
    }
    #series-select-container .select2-results__option {
      font-size: .875rem;
      padding: .625rem .875rem;
      white-space: nowrap;
      transition: background-color .15s, color .15s;
      cursor: pointer;
      background: #fff; /* NUEVO: forzar fondo blanco en light */
    }
    #series-select-container .select2-results__option--highlighted {
      background: #EBF5FF;
      color: #137fec;
    }
    #series-select-container .select2-results__option--selected {
      background: #DBEAFE;
      color: #1E3A8A;
      font-weight: 600;
    }

    /* Modo oscuro */
    .dark #series-select-container .select2-selection--single {
      background: #1F2937;  /* gray-800 */
      border-color: #374151; /* gray-700 */
      color: #E5E7EB;       /* gray-200 */
    }
    .dark #series-select-container .select2-selection__placeholder {
      color: #9CA3AF;       /* gray-400 */
    }
    .dark #series-select-container .select2-container--open .select2-selection--single,
    .dark #series-select-container .select2-selection--single:focus {
      border-color: #137fec;
      box-shadow: 0 0 0 3px rgba(19,127,236,0.35);
    }
    .dark #series-select-container .select2-dropdown {
      background: #1F2937;  /* gray-800 */
      border-color: #4B5563; /* gray-600 */
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }
    .dark #series-select-container .select2-results__option {
      color: #E5E7EB;
      background: #1F2937; /* NUEVO: forzar fondo oscuro */
    }
    .dark #series-select-container .select2-results__option--highlighted {
      background: #1E3A8A;
      color: #BFDBFE;
    }
    .dark #series-select-container .select2-results__option--selected {
      background: #1E40AF;
      color: #DBEAFE;
      font-weight: 600;
    }
    .dark #series-select-container .select2-selection__arrow b {
      border-color: #D1D5DB transparent transparent transparent;
    }

    /* NUEVO: Forzar estilos para el contenedor del dropdown cuando se abre */
    .dark .select2-container--open .select2-dropdown {
      background: #1F2937 !important;
    }
    .dark .select2-container--open .select2-results__option {
      background: #1F2937 !important;
      color: #E5E7EB !important;
    }
    .dark .select2-container--open .select2-results__option--highlighted {
      background: #1E3A8A !important;
      color: #BFDBFE !important;
    }
    .dark .select2-container--open .select2-results__option--selected {
      background: #1E40AF !important;
      color: #DBEAFE !important;
    }

    /* Botón flotante "Comprar números" SOLO en la página de números,
       pegado a la esquina inferior derecha */
    /* ELIMINADO: dejamos que Tailwind controle la posición del botón
    #section-number-selection .float-to-pyn {
      position: fixed;
      right: 1.25rem;
      bottom: 1.25rem;
      z-index: 60;
    }

    @media (max-width: 640px) {
      #section-number-selection .float-to-pyn {
        right: 1rem;
        bottom: 1rem;
      }
    }
    */

    /* Highlight temporal de la sección de selección de números */
    @keyframes sectionHighlightPulse {
      0% {
        outline: 2px solid rgba(5,150,105,0.85);
        outline-offset: 2px;
        box-shadow: 0 0 0 0 rgba(5,150,105,0.45);
      }
      50% {
        outline: 2px solid rgba(5,150,105,0.0);
        outline-offset: 4px;
        box-shadow: 0 0 0 10px rgba(5,150,105,0.0);
      }
      100% {
        outline: 0 solid rgba(5,150,105,0.0);
        outline-offset: 6px;
        box-shadow: 0 0 0 0 rgba(5,150,105,0.0);
      }
    }

    #section-number-selection.section-highlight {
      position: relative;
      z-index: 30;
      /* Duración 1.2s * 2 = 2.4s totales */
      animation: sectionHighlightPulse 1.2s ease-out 2;
      /* Ya tiene borde redondeado desde Tailwind; solo reforzamos el color */
      border-color: rgba(5,150,105,0.7) !important;
    }