/* Contenedor general de la rifa */
.rw-raffle{
    border:1px solid #e5e7eb;
    padding:16px;
    border-radius:12px;
    background:#f9fafb;
    max-width:100%;
    margin:16px 0;
}

/* Header: título + rango */
.rw-raffle-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}

.rw-raffle-header h3{
    margin:0;
    font-size:1rem;
    font-weight:800;
    color:#111827;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* Rango de números (cantidad) */
.rw-range{
    font-size:.9rem;
    color:#111827;
    text-align:right;
    min-width:110px;
}

/* Etiqueta arriba del rango (Cantidad de números) */
.rw-range::before{
    content:"NÚMEROS";
    display:block;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#9ca3af;
    margin-bottom:2px;
}

/* Contador (texto) */
.rw-countdown{
    margin:4px 0 12px;
    font-size:.85rem;
    font-weight:700;
    color:#111827;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.12em;
}

/* Banner de ganador */
.rw-winner-banner{
    margin:4px 0 8px;
    padding:6px 10px;
    border-radius:999px;
    background:#fef3c7;
    color:#92400e;
    font-size:.9rem;
    display:inline-block;
}

/* GRID de números */
.rw-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(65px,1fr));
    gap:10px;
    margin:8px 0 12px;
}

/* Número base (chip redondo) */
.rw-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#ffffff;
    border:2px solid #e5e7eb;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
    transition:all .2s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* Hover solo si está disponible */
.rw-num:not(.taken):hover{
    transform:scale(1.08);
    border-color:#00b4d8;
    box-shadow:0 4px 12px rgba(0,180,216,0.45);
}

/* Seleccionado */
.rw-num.selected{
    background:linear-gradient(135deg,#00b4d8,#0077b6);
    color:#fff;
    border-color:#0077b6;
    box-shadow:0 4px 14px rgba(0,119,182,0.5);
}

/* Vendido (no se puede hacer clic) */
.rw-num.taken{
    background:#d1d5db;
    color:#6b7280;
    border-color:#9ca3af;
    text-decoration:line-through;
    cursor:not-allowed;
    pointer-events:none;
    opacity:.85;
}

/* Ganador (para cuando marques winner) */
.rw-num.winner{
    background:linear-gradient(45deg,#ffd700,#ffb300);
    color:#4a3600;
    border-color:#f59e0b;
    font-weight:700;
    animation:rw-winner-pulse 1s infinite;
}

@keyframes rw-winner-pulse{
    0%{transform:scale(1);box-shadow:0 0 10px #fbbf24;}
    50%{transform:scale(1.1);box-shadow:0 0 20px #fde68a;}
    100%{transform:scale(1);box-shadow:0 0 10px #fbbf24;}
}

/* Botones debajo del grid */
.rw-actions{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:4px;
}

.rw-actions button{
    flex:1;
    padding:8px 10px;
    border-radius:999px;
    border:none;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

/* Iconos en los botones (usando pseudo-elementos, sin tocar PHP) */
.rw-refresh::before{
    content:"⟳";
    font-size:1rem;
}

.rw-add-to-cart::before{
    content:"🛒";
    font-size:1rem;
}

/* Botón refrescar */
.rw-refresh{
    background:#e5e7eb;
    color:#111827;
}

.rw-refresh:hover{
    background:#d1d5db;
}

/* Botón añadir al carrito */
.rw-add-to-cart{
    background:#16a34a;
    color:#ffffff;
    box-shadow:0 2px 6px rgba(22,163,74,0.4);
}

.rw-add-to-cart:hover{
    background:#15803d;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(22,163,74,0.5);
}

/* Cuando la rifa está cerrada (por tiempo o por venta total) */
.rw-raffle.rw-closed .rw-add-to-cart{
    opacity:.4;
    cursor:not-allowed;
    pointer-events:none;
    box-shadow:none;
}

/* Mensajes de feedback */
.rw-feedback{
    margin-top:6px;
    font-size:.9rem;
}

.rw-feedback.ok{
    color:#15803d;
}

.rw-feedback.err{
    color:#b91c1c;
}