/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================= */
:root {
    --pink-main: #d63384;
    --pink-light: #ff85c2;
    --pink-border: #f8d7e8;
    --lavender-row: #f4f0ff; 
    --pink-row: #fff0f6;     
    --white: #ffffff;
    --shadow-premium: 0 25px 60px -10px rgba(214, 51, 132, 0.45);
}

body { 
    background-color: #fefeff; 
    font-family: 'Inter', sans-serif; 
    color: #555;
    -webkit-font-smoothing: antialiased;
}

.text-pink { color: var(--pink-main) !important; }

/* =========================================
   2. CONTENEDOR Y TICK SUPERIOR
   ========================================= */
.ruleta-wrap {
    position: relative; 
    display: inline-block; 
    padding: 20px;
    background: var(--white); 
    border-radius: 50%;
    box-shadow: var(--shadow-premium);
}

#canvasRuleta { display: block; max-width: 100%; height: auto; }

.indicador {
    position: absolute; 
    top: -15px; left: 50%; transform: translateX(-50%); z-index: 10;
    width: 38px; height: 48px; 
    background: linear-gradient(180deg, #ffeb3b, #fbc02d);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    filter: drop-shadow(0 0 10px rgba(251, 192, 45, 0.8));
    border: 2px solid #fff;
}

/* =========================================
   3. TABLA (ESTILO ORIGINAL RESTAURADO)
   ========================================= */
.fashion-card { 
    border-radius: 35px; border: 2px solid var(--pink-border); 
    background: var(--white); overflow: hidden; box-shadow: var(--shadow-premium);
    margin-top: 2rem;
}

.custom-table th { 
    font-weight: 600; color: var(--pink-main); padding: 18px 15px; 
    text-transform: uppercase; font-size: 0.85rem; border-bottom: 1px solid var(--pink-border); 
}

.custom-table td { 
    padding: 15px; border-bottom: 1px solid var(--pink-border); 
    font-weight: 400 !important; color: #666; font-size: 0.95rem;
}

.striped-pink tbody tr:nth-child(odd) { background-color: var(--pink-row) !important; }
.striped-pink tbody tr:nth-child(even) { background-color: var(--lavender-row) !important; }

/* =========================================
   4. BOTONES Y AJUSTES MÓVILES
   ========================================= */
.btn-main { 
    background: linear-gradient(135deg, var(--pink-light), var(--pink-main)); 
    color: white !important; border-radius: 18px; padding: 16px 40px; 
    border: none; font-weight: 600; 
}

@media (max-width: 576px) {
    .custom-table td, .custom-table th { padding: 12px 8px; font-size: 0.8rem; }
    .btn-main { width: 100%; }
}