/* PASO 1: ELEGIR SORTEO */
.step-section-modal{margin-bottom:28px;}
.step-label-modal{font-size:13px;font-weight:700;color:rgba(59, 29, 141, 0.6);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.step-num-modal{width:24px;height:24px;background:var(--am);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;}
.sorteo-selector-grid-modal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.sorteo-sel-card-modal{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;cursor:pointer;transition:all .3s;text-align:center;}
.sorteo-sel-card-modal:hover{border-color:rgba(245,158,11,.5);background:rgba(255,255,255,.12);}
.sorteo-sel-card-modal.sel{border-color:var(--am);background:rgba(245,158,11,.12);box-shadow:0 0 20px rgba(245,158,11,.2);}
.ssc-emoji-modal{font-size:32px;margin-bottom:6px;}
.ssc-name-modal{font-size:13px;font-weight:700;color:#fff;}
.ssc-prog-modal{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;}
.ssc-prog-bar-modal{height:3px;background:rgba(255,255,255,.15);border-radius:100px;overflow:hidden;margin-top:6px;}
.ssc-prog-fill-modal{height:100%;background:var(--am);border-radius:100px;}



/* PASO 2: PAQUETES TICKETS */
.pk-tickets-grid-modal{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px;}
.pk-ticket-modal{background:rgba(21, 20, 110, 0.616);backdrop-filter:blur(10px);border:2px solid rgba(136, 8, 115, 0.541);border-radius:18px;padding:20px;text-align:center;cursor:pointer;transition:all .3s;position:relative;}
.pk-ticket-modal:hover{border-color:rgba(245,158,11,.5);transform:translateY(-4px);background:rgba(5, 4, 51, 0.87)}
.pk-ticket-modal.selected{border-color:var(--am);background:rgba(245,158,11,.12);box-shadow:0 0 24px rgba(245,158,11,.2);}
.pk-ticket-modal .popular{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--am);color:#000;font-size:10px;font-weight:800;padding:3px 12px;border-radius:100px;white-space:nowrap;}
.pkt-num-modal{font-size:34px;font-weight:900;color:#fff;margin-bottom:3px;}
.pkt-label-modal{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:10px;}
.pkt-price-modal{font-size:20px;font-weight:900;color:var(--am);}
.pkt-unit-modal{font-size:10px;color:rgba(255,255,255,.4);margin-top:3px;}


/* NUMS */
.nums-section{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;margin-bottom:20px;}
.nums-toggle{display:flex;gap:10px;margin-bottom:14px;}
.nmode-btn-modal{flex:1;padding:10px;border-radius:10px;border:1.5px solid rgba(139, 30, 85, 0.555);background:transparent;color:rgba(87, 16, 66, 0.842);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.nmode-btn-modal.on{background:rgba(245,158,11,.15);border-color:var(--am);color:var(--am);}
.nums-grid-modal{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-height:200px;overflow-y:auto;}
@media(max-width:480px){.nums-grid{grid-template-columns:repeat(6,1fr);}}
.num-btn-modal{aspect-ratio:1;border-radius:7px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.num-btn-modal:hover:not(.taken){border-color:var(--am);color:var(--am);}
.num-btn-modal.sel{background:var(--am);border-color:var(--am);color:#000;}
.num-btn-modal.taken{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:rgba(239,68,68,.6);cursor:not-allowed;}

/* Nodo de número individual */
.num-node-modal {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 10, 90, 0.562); /* Púrpura muy suave */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
}

.num-node-modal:hover {
    background: rgba(15, 4, 43, 0.74);
    transform: scale(1.05);
}

/* Estado SELECCIONADO (Color guinda/vino de tu captura) */
.num-node-modal.active {
    background: #831616 !important; /* El color exacto de la imagen */
    border-color: #ff4d7d;
    color: #ececec;
    box-shadow: 0 0 15px rgba(122, 45, 66, 0.5);
}

/* Estado OCUPADO */
.num-node-modal.ocupado {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    text-decoration: line-through;
    border: none;
}

.pk-ticket { cursor: pointer; border: 2px solid #eee; transition: 0.3s; position: relative; }
.pk-ticket.selected { border-color: #2563eb; background: #f8faff; }
.pk-ticket .popular { 
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: #ffbe0b; font-size: 10px; padding: 2px 10px; border-radius: 20px; font-weight: bold;
}

.sorteo-sel-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 15px;
}

.sorteo-sel-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.selected-card {
    border-color: #ffbe0b !important;
    background: rgba(255, 190, 11, 0.1) !important;
    box-shadow: 0 0 20px rgba(255, 190, 11, 0.2);
}


/* Contenedor principal de la matriz (Paso 3) */
.matriz-container {
    background: rgba(255, 255, 255, 0.03); /* Fondo oscuro translúcido */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
}

/* Área con scroll */
.matriz-scroll-area {
    max-height: 350px;
    overflow-y: auto;
    padding-right: 15px;
}

/* Scrollbar blanco y elegante como la captura */
.matriz-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.matriz-scroll-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.matriz-scroll-area::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
}

/* Grid de números */
.nums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 12px;
}


/* FORM REGISTRO */
.tk-form{background:rgba(215, 235, 230, 0.993);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:26px;}
.tk-form h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:5px;}
.tk-form p{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px;}
.reg-inp{width:100%;border:1.5px solid rgba(255,255,255,.18);border-radius:11px;padding:12px 15px;font-size:15px;color:#fff;outline:none;background:rgba(255,255,255,.07);margin-bottom:11px;transition:border-color .2s;}
.reg-inp::placeholder{color:rgba(255,255,255,.3);}
.reg-inp:focus{border-color:rgba(245,158,11,.6);}