/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
    display:flex;
    flex-direction:column;
    font-family:'Segoe UI',Arial,sans-serif;
    background:radial-gradient(circle at top,#1a1a1a,#3c0620);
    color:#333;
}

.main{flex:1}

/* GENERALES */
.container{
    width:90%;
    max-width:1100px;              
    margin:40px auto;
    color:#fff;
}

h1,h2,h3,h4{
    margin-bottom:15px;
    font-weight:600;
}

/* WELCOME */
.welcome{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#121212;
    padding:20px;
    border-radius:12px;
    margin-bottom:30px;
}

.welcome-left{
    display:flex;
    align-items:center;
    gap:15px;
}

.welcome-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}

.welcome p{
    font-size:13px;
    color:#aaa;
}

/* BOTÓN CONTINUAR (usa .btn) */
.welcome .btn{
    padding:10px 18px;
    font-size:14px;
}

/* PAGINACIÓN */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

/* BASE */
.pagination a,
.pagination strong {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}
/* ACTIVO = PRIMARY */
.pagination a.active {
    background: rgba(234,76,137,.15);
    color: #ff6aa3;
    border: 1px solid rgba(234,76,137,.3);
}

/* NORMAL = NEGRO (como btn-soft) */
.pagination a {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #ccc;
}

/* HOVER = TU PRIMARY REAL */
.pagination a:hover {
    background: rgba(234,76,137,.15);
    color: #ff6aa3;
    border: 1px solid rgba(234,76,137,.3);
}

/* ACTIVO = PRIMARY */
.pagination strong {
    background: rgba(234,76,137,.15);
    color: #ff6aa3;
    border: 1px solid rgba(234,76,137,.3);
}
/* EXTRA */
.progress-text{
    font-size:12px;
    color:#aaa;
    margin-bottom:6px;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#aaa;
    text-decoration:none;
    font-size:13px;
    margin-bottom:15px;
    transition:.2s;
}

.back-link:hover{
    color:#ea4c89;
    transform:translateX(-3px);
}