@charset "UTF-8";

/* =========================================================
   CSS REGISTRO
   ========================================================= */

.registro-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.registro-modal.activo {
    display: flex;
}

.registro-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 40, .75);
    backdrop-filter: blur(8px);
}
.registro-container {
    position:relative;
    width:90%;
    max-width:600px;
    max-height:90vh;
    overflow-y:auto;
    padding:40px;
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,245,255,.88));
    border-radius:25px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    box-sizing:border-box;
}

.registro-close {
    position: absolute;
    right: 20px;
    top: 15px;
    border: none;
    background: none;
    font-size: 32px;
    cursor: pointer;
}

.registro-header {
    text-align: center;
}


/* =========================================================
   PASOS
   ========================================================= */

.registro-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 25px 0;
}

.step {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d1d5db;
    color: #6b7280;
    font-weight: 700;
    font-size: 16px;
    transition: .3s;
}

.step-line {
    width: 45px;
    height: 2px;
    background: #d1d5db;
    transition: .3s;
}

.step-line.active {
    background: #16a34a;
}

.step-1.active span {
    background: #e31837;
    color: white;
}

.step-2.active span {
    background: #00a4e4;
    color: white;
}

.step-3.active span {
    background: #6558b1;
    color: white;
}

.step-4.active span {
    background: #16a34a;
    color: white;
}


/* =========================================================
   DATOS DEL REGISTRO
   ========================================================= */

.datos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.dato-card {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,164,228,.15);
    border-radius: 12px;
    padding: 15px;
}

.dato-card label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 5px;
}

.dato-card strong {
    color: #1d2d5c;
    font-size: 16px;
}

.dato-card:first-child {
    grid-column: 2;
}


/* =========================================================
   GAFETE
   ========================================================= */

#registroModal #registroContenido .gafete {

    width: 100%;
    max-width: 500px;

    margin: 20px auto;

    padding: 0;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

    border: 1px solid #e1e5ed;

    color: #172554;

    box-sizing: border-box;

}


/* =========================================================
   HEADER DEL GAFETE
   ========================================================= */

#registroModal #registroContenido .gafete-header {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #1d2d5c 0%,
            #263d7a 100%
        );

    color: #ffffff;

    text-align: center;

    padding: 25px 20px;

    margin: 0;

    box-sizing: border-box;

}

#registroModal #registroContenido .gafete-header span {

    display: block;

    margin: 0;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 2px;

    color: #ffffff;

}

#registroModal #registroContenido .gafete-header small {

    display: block;

    margin-top: 7px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: 3px;

    color: rgba(255,255,255,.85);

}


/* =========================================================
   CONTENIDO DEL GAFETE
   ========================================================= */

#registroModal #registroContenido .gafete-contenido {

    width: 100%;

    padding: 10px 40px 25px;

    background: #ffffff;

    box-sizing: border-box;

}


/* =========================================================
   NOMBRE
   ========================================================= */

#registroModal #registroContenido .gafete-datos {

    width: 100%;

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

#registroModal #registroContenido .gafete-datos h2 {

    margin: 10px 0 25px;

    padding: 0;

    text-align: center;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 800;

    color: #1e3266;

}


/* =========================================================
   DATOS DEL GAFETE
   ========================================================= */

#registroModal #registroContenido .dato-gafete {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding: 14px 20px;

    margin: 0;

    border-bottom: 1px solid #edf0f5;

    box-sizing: border-box;

}

#registroModal #registroContenido .dato-gafete span {

    display: block;

    font-size: 14px;

    line-height: 1.3;

    color: #6b7280;

}

#registroModal #registroContenido .dato-gafete strong {

    display: block;

    font-size: 14px;

    line-height: 1.3;

    text-align: right;

    color: #1e3266;

}


/* =========================================================
   QR
   ========================================================= */

#registroModal #registroContenido .qr-box {

    width: 220px;

    height: 220px;

    margin: 25px auto;

    padding: 10px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    box-sizing: border-box;

}

#registroModal #registroContenido .qr-box img {

    display: block;

    width: 200px;

    height: 200px;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}


/* =========================================================
   ESTADO PENDIENTE DE PAGO
   ========================================================= */

#registroModal #registroContenido .qr-pendiente {

    width: 220px;

    height: 220px;

    margin: 25px auto;

    padding: 20px;

    background: #fff8ed;

    border: 2px dashed #f59e0b;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #b45309;

    box-sizing: border-box;

}

#registroModal #registroContenido .qr-pendiente-icon {

    font-size: 48px;

    line-height: 1;

    margin-bottom: 12px;

    color: #f59e0b;

}

#registroModal #registroContenido .qr-pendiente strong {

    display: block;

    font-size: 20px;

    line-height: 1.2;

    color: #b45309;

}

#registroModal #registroContenido .qr-pendiente span {

    display: block;

    margin-top: 6px;

    font-size: 13px;

    line-height: 1.4;

    color: #b45309;

}


/* =========================================================
   ESTADO
   ========================================================= */

#registroModal #registroContenido .estado-gafete {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 20px;

    padding: 13px 15px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

    box-sizing: border-box;

}

#registroModal #registroContenido
.estado-gafete.pendiente {

    background: #fff7ed;

    color: #b45309;

    border: 1px solid #fed7aa;

}

#registroModal #registroContenido
.estado-gafete.confirmado {

    background: #ecfdf5;

    color: #15803d;

    border: 1px solid #bbf7d0;

}


/* =========================================================
   FOOTER DEL GAFETE
   ========================================================= */

#registroModal #registroContenido .gafete-footer {

    width: 100%;

    background: #f5f7fb;

    padding: 18px 25px;

    text-align: center;

    margin: 0;

    box-sizing: border-box;

}

#registroModal #registroContenido .gafete-footer span {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    line-height: 1.3;

    color: #6b7280;

}

#registroModal #registroContenido .gafete-footer strong {

    display: block;

    font-size: 13px;

    line-height: 1.4;

    color: #263b70;

    word-break: break-all;

}


/* =========================================================
   MENSAJE DE PAGO
   ========================================================= */

#registroModal #registroContenido .mensaje-pago {

    width: 100%;

    max-width: 500px;

    margin: 18px auto;

    padding: 16px 20px;

    box-sizing: border-box;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    border-radius: 14px;

    color: #1e3a8a;

    text-align: left;

}

#registroModal #registroContenido .mensaje-pago p {

    margin: 5px 0;

    padding: 0;

    line-height: 1.5;

}

#registroModal #registroContenido .mensaje-pago i {

    margin-right: 7px;

}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-register {

    display: inline-block;

    background: #6558b1;

    padding: 14px 28px;

    color: #fff;

    border: none;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.btn-register:hover {
    background: #5649a3;
}

.btn-register:active {
    transform: scale(.98);
}

.btn-register:disabled {

    background: #d1d5db;

    color: #9ca3af;

    cursor: not-allowed;

}

.btn-secondary {

    padding: 14px 28px;

    border: 2px solid #6558b1;

    background: #fff;

    color: #6558b1;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 600;

    transition: .3s;

}

.btn-secondary:hover {

    background: #6558b1;

    color: #fff;

}

.acciones-registro {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

}

#registroModal #registroContenido .btn-finalizar {

    display: block;

    margin: 20px auto;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .registro-container {

        width: 94%;

        padding: 25px 18px;

        border-radius: 20px;

    }

    .datos-grid {

        grid-template-columns: 1fr;

    }

    .dato-card:first-child {

        grid-column: auto;

    }

    #registroModal #registroContenido .gafete {

        width: 100%;

        max-width: 100%;

        border-radius: 18px;

    }

    #registroModal #registroContenido .gafete-contenido {

        padding-left: 20px;

        padding-right: 20px;

    }

    #registroModal #registroContenido .dato-gafete {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }

    #registroModal #registroContenido
    .dato-gafete strong {

        text-align: left;

    }

    #registroModal #registroContenido .qr-box,
    #registroModal #registroContenido .qr-pendiente {

        width: 200px;

        height: 200px;

    }

    #registroModal #registroContenido .qr-box img {

        width: 180px;

        height: 180px;

    }

}