/* =============================================================
   Royal Luck — Tema Visual para RaffleCore
   Paleta: Fuego #E63920 · Oro #C59B4B · Negro #1A1A1A
           Blanco #FFFFFF · Carmesí #9B1C10
   Secundaria:
     Humo      #F5F3EF  – fondos muy suaves
     Carbón    #2D2D2D  – texto secundario
     Oro Tenue #F9F2E1  – highlight suave
     Ceniza    #E8E5E0  – bordes y separadores
     Éxito     #2E7D32  – boleto disponible
   ============================================================= */

/* ── Variables ────────────────────────────────────────────── */
.rc-raffle {
    --rl-fire       : #E63920;
    --rl-fire-hover : #9B1C10;
    --rl-gold       : #C59B4B;
    --rl-gold-light : #F9F2E1;
    --rl-black      : #1A1A1A;
    --rl-carbon     : #2D2D2D;
    --rl-smoke      : #F5F3EF;
    --rl-ash        : #E8E5E0;
    --rl-white      : #FFFFFF;
    --rl-available  : #1E6B35;
    --rl-sold       : #9B1C10;
    --rl-selected   : #E63920;
    --rl-radius     : 12px;
    --rl-shadow     : 0 4px 20px rgba(26,26,26,.08);
    --rl-transition : all .22s ease;
}

/* ── Contenedor principal ─────────────────────────────────── */
.rc-raffle {
    font-family : 'Nunito', 'Fredoka', sans-serif;
    color       : var(--rl-black);
    background  : var(--rl-smoke);
}

/* ═══════════════════════════════════════════════════════════
   TARJETA DE RIFA — Hero y layout
   ═══════════════════════════════════════════════════════════ */
.rc-main,
.rc-sidebar {
    background    : var(--rl-white);
    border-radius : var(--rl-radius);
    box-shadow    : var(--rl-shadow);
    transition    : var(--rl-transition);
}

/* Efecto hover en la tarjeta — transmite emoción */
.rc-main:hover,
.rc-sidebar:hover {
    box-shadow : 0 8px 32px rgba(197,155,75,.20), 0 2px 8px rgba(197,155,75,.12);
    transform  : translateY(-2px);
}

/* Gradiente hero con tonos cálidos del logo */
.rc-hero-gradient {
    background : linear-gradient(
        180deg,
        transparent 0%,
        rgba(26,26,26,.55) 60%,
        rgba(26,26,26,.85) 100%
    );
}

/* Título de la rifa */
.rc-hero-title {
    color       : var(--rl-white);
    text-shadow : 0 2px 8px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════════════════════
   BARRA DE PROGRESO
   ═══════════════════════════════════════════════════════════ */
.rc-progress-bar-container {
    background    : var(--rl-ash);
    border-radius : 99px;
    overflow      : hidden;
    height        : 10px;
}

.rc-progress-bar-fill {
    background    : linear-gradient(90deg, var(--rl-gold) 0%, var(--rl-fire) 100%);
    border-radius : 99px;
    height        : 100%;
    transition    : width .6s cubic-bezier(.4,0,.2,1);
    box-shadow    : 0 0 8px rgba(197,155,75,.4);
}

/* Porcentaje destacado */
.rc-progress-big-percent {
    color       : var(--rl-fire);
    font-weight : 800;
}

/* Tarjetas de detalle (vendidos / disponibles) */
.rc-progress-detail {
    background    : var(--rl-smoke);
    border        : 1px solid var(--rl-ash);
    border-radius : 8px;
}

.rc-progress-detail-number {
    color       : var(--rl-black);
    font-weight : 800;
}

.rc-progress-detail--remaining .rc-progress-detail-number {
    color : var(--rl-available);
}

/* ═══════════════════════════════════════════════════════════
   ESTADOS DE BOLETOS — Selector
   ═══════════════════════════════════════════════════════════ */
.rc-ticket-box {
    border        : 2px solid var(--rl-ash);
    border-radius : 6px;
    background    : var(--rl-white);
    color         : var(--rl-carbon);
    font-weight   : 700;
    font-size     : .82rem;
    transition    : var(--rl-transition);
    cursor        : pointer;
}

/* Disponible */
.rc-ticket--available {
    border-color : var(--rl-ash);
    background   : var(--rl-white);
    color        : var(--rl-carbon);
}

.rc-ticket--available:hover {
    border-color : var(--rl-gold);
    background   : var(--rl-gold-light);
    color        : var(--rl-black);
    transform    : scale(1.08);
    box-shadow   : 0 2px 10px rgba(197,155,75,.25);
}

/* Seleccionado — Fuego Royal Luck */
.rc-ticket--selected {
    background   : var(--rl-fire) !important;
    border-color : var(--rl-fire) !important;
    color        : var(--rl-white) !important;
    transform    : scale(1.08);
    box-shadow   : 0 4px 14px rgba(230,57,32,.35);
    font-weight  : 800;
}

.rc-ticket--selected:hover {
    background   : var(--rl-fire-hover) !important;
    border-color : var(--rl-fire-hover) !important;
}

/* Agotado — Carmesí apagado */
.rc-ticket--sold {
    background     : #F3EDEC !important;
    border-color   : #D4B8B5 !important;
    color          : #B07070 !important;
    cursor         : not-allowed;
    pointer-events : none;
    opacity        : .6;
    text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════════════
   PAQUETES DE BOLETOS
   ═══════════════════════════════════════════════════════════ */
.rc-package-card {
    border        : 2px solid var(--rl-ash);
    border-radius : var(--rl-radius);
    background    : var(--rl-white);
    transition    : var(--rl-transition);
    text-align    : center;
}

.rc-package-card:hover {
    border-color : var(--rl-gold);
    box-shadow   : 0 6px 20px rgba(197,155,75,.2);
    transform    : translateY(-3px);
}

/* Mejor opción — Destacada */
.rc-package-card--best {
    border-color : var(--rl-fire) !important;
    background   : linear-gradient(160deg, #FFF8F7 0%, var(--rl-white) 100%);
    box-shadow   : 0 4px 18px rgba(230,57,32,.15);
}

.rc-package-ribbon {
    background : var(--rl-fire);
    color      : var(--rl-white);
    font-size  : .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rc-package-qty {
    color       : var(--rl-black);
    font-weight : 800;
    font-size   : 1.6rem;
}

.rc-package-price {
    color       : var(--rl-fire);
    font-weight : 800;
}

.rc-package-per {
    color     : var(--rl-carbon);
    font-size : .78rem;
}

/* ═══════════════════════════════════════════════════════════
   BOTONES CTA
   ═══════════════════════════════════════════════════════════ */
.rc-btn-buy,
.rc-btn-package,
.rc-btn-custom-buy,
.rc-btn-submit {
    background    : linear-gradient(135deg, var(--rl-fire) 0%, var(--rl-fire-hover) 100%);
    color         : var(--rl-white) !important;
    border        : none;
    border-radius : 8px;
    font-weight   : 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition    : var(--rl-transition);
    box-shadow    : 0 4px 14px rgba(230,57,32,.3);
}

.rc-btn-buy:hover,
.rc-btn-package:hover,
.rc-btn-custom-buy:hover,
.rc-btn-submit:hover {
    transform  : translateY(-2px);
    box-shadow : 0 8px 24px rgba(230,57,32,.45);
    background : linear-gradient(135deg, #f04533 0%, var(--rl-fire-hover) 100%);
}

.rc-btn-buy:active,
.rc-btn-package:active,
.rc-btn-submit:active {
    transform  : translateY(0);
    box-shadow : 0 2px 8px rgba(230,57,32,.2);
}

/* ═══════════════════════════════════════════════════════════
   BARRA DE SELECCIONADOS
   ═══════════════════════════════════════════════════════════ */
.rc-selected-bar {
    background    : var(--rl-gold-light);
    border        : 1px solid rgba(197,155,75,.35);
    border-radius : 8px;
}

.rc-selected-count {
    color       : var(--rl-fire);
    font-weight : 800;
}

.rc-selected-price,
.rc-selected-total {
    color       : var(--rl-black);
    font-weight : 700;
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.rc-modal {
    background : rgba(26,26,26,.75);
    backdrop-filter: blur(4px);
}

.rc-modal-content {
    background    : var(--rl-white);
    border-radius : var(--rl-radius);
    box-shadow    : 0 20px 60px rgba(0,0,0,.25);
}

.rc-modal-header {
    background    : linear-gradient(135deg, var(--rl-fire) 0%, var(--rl-fire-hover) 100%);
    color         : var(--rl-white);
    border-radius : var(--rl-radius) var(--rl-radius) 0 0;
}

/* ═══════════════════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════════════════ */
.rc-cd-num {
    color       : var(--rl-fire);
    font-weight : 800;
}

.rc-cd-label {
    color     : var(--rl-carbon);
    font-size : .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ═══════════════════════════════════════════════════════════
   NÚMEROS DE LA SUERTE
   ═══════════════════════════════════════════════════════════ */
.rc-lucky-number {
    background    : var(--rl-gold-light);
    border        : 1.5px solid rgba(197,155,75,.4);
    border-radius : 6px;
    color         : var(--rl-black);
    font-weight   : 800;
    transition    : var(--rl-transition);
}

.rc-lucky-number:hover {
    background   : var(--rl-gold);
    border-color : var(--rl-gold);
    color        : var(--rl-white);
    transform    : scale(1.1);
}

/* ═══════════════════════════════════════════════════════════
   BANNERS DE ESTADO
   ═══════════════════════════════════════════════════════════ */
.rc-banner--finished {
    background : linear-gradient(135deg, var(--rl-carbon) 0%, var(--rl-black) 100%);
    color      : var(--rl-gold);
}

.rc-banner--soldout {
    background : linear-gradient(135deg, var(--rl-fire) 0%, var(--rl-fire-hover) 100%);
    color      : var(--rl-white);
}

/* ═══════════════════════════════════════════════════════════
   THEME 2 — Misma paleta mapeada
   ═══════════════════════════════════════════════════════════ */
.rc-theme2 .rc-t2-progress-bar-wrap .rc-progress-bar-fill {
    background : linear-gradient(90deg, var(--rl-gold) 0%, var(--rl-fire) 100%);
}

.rc-theme2 .rc-t2-card {
    border     : 2px solid var(--rl-ash);
    background : var(--rl-white);
    transition : var(--rl-transition);
}

.rc-theme2 .rc-t2-card:hover {
    border-color : var(--rl-gold);
    box-shadow   : 0 6px 20px rgba(197,155,75,.2);
    transform    : translateY(-3px);
}

.rc-theme2 .rc-t2-card--best {
    border-color : var(--rl-fire) !important;
}

.rc-theme2 .rc-t2-ribbon {
    background : var(--rl-fire);
    color      : var(--rl-white);
}

.rc-theme2 .rc-t2-buy-btn,
.rc-theme2 .rc-t2-submit-btn {
    background : linear-gradient(135deg, var(--rl-fire) 0%, var(--rl-fire-hover) 100%);
    color      : var(--rl-white) !important;
    box-shadow : 0 4px 14px rgba(230,57,32,.3);
    transition : var(--rl-transition);
}

.rc-theme2 .rc-t2-buy-btn:hover,
.rc-theme2 .rc-t2-submit-btn:hover {
    transform  : translateY(-2px);
    box-shadow : 0 8px 24px rgba(230,57,32,.45);
}

.rc-theme2 .rc-t2-stat-number {
    color       : var(--rl-fire);
    font-weight : 800;
}

.rc-theme2 .rc-t2-banner--soldout {
    background : linear-gradient(135deg, var(--rl-fire) 0%, var(--rl-fire-hover) 100%);
}

.rc-theme2 .rc-t2-banner--finished {
    background : linear-gradient(135deg, var(--rl-carbon) 0%, var(--rl-black) 100%);
    color      : var(--rl-gold);
}