.already-page {
    min-height: calc(100vh - 70px);
    /* Mismo fondo que /enroll: blanco plano del body (sin degradados ni destellos) */
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    position: relative;
}

.already-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(26,46,40,0.08), 0 2px 8px rgba(26,46,40,0.04);
    max-width: 640px;
    width: 100%;
    overflow: hidden;
}

/* Franja superior de color según estado */
.already-card-stripe {
    height: 4px;
}
.stripe-waitlisted { background: linear-gradient(90deg, #c49a1e, #e1b43c); }
.stripe-enrolled   { background: var(--edu-base); }
.stripe-rejected   { background: linear-gradient(90deg, #9b2f20, #c04030); }
.stripe-cancelled  { background: linear-gradient(90deg, #64748b, #94a3b8); }

.already-card-body { padding: 2.5rem 2.5rem 2rem; }

/* Icono + estado */
.already-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.already-icon-wrap {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.icon-waitlisted { background: #fdf6e0; color: var(--gold); }
.icon-enrolled   { background: var(--green-light); color: var(--green-dark); }
.icon-rejected   { background: #fef2f2; color: #c04030; }
.icon-cancelled  { background: var(--gray-100); color: var(--gray-500); }

.already-header-text {}
.already-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;            /* igual que la etiqueta/hero-tag de /enroll */
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);      /* gris de apoyo de /enroll (accesible, ≥4.5:1) */
    margin: 0 0 0.35rem 0;
}
.already-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;            /* mismo peso de titular que hero-title de /enroll */
    color: var(--ink);
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.already-course-name {
    font-size: 0.82rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* Badge estado */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;            /* mismo peso que los badges de /enroll */
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.status-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-waitlisted { background: #fdf6e0; color: #92700a; border: 1px solid #f0d87a; }
.badge-waitlisted .status-badge-dot { background: #c49a1e; }
.badge-enrolled   { background: var(--green-light); color: var(--edu-base-dark); border: 1px solid var(--green-mid); }
.badge-enrolled   .status-badge-dot { background: var(--green-dark); }
.badge-rejected   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-rejected   .status-badge-dot { background: #ef4444; }
.badge-cancelled  { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }
.badge-cancelled  .status-badge-dot { background: var(--gray-400); }

/* Info box */
.already-info {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.already-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.7;
}
.already-info p + p { margin-top: 0.6rem; }

/* Actions */
.already-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.already-actions .btn {
    font-size: 0.82rem;
    padding: 0.6rem 1.1rem;
    gap: 0.4rem;
}
.already-actions .btn svg {
    width: 14px; height: 14px; flex-shrink: 0;
}

/* Card footer */
.already-card-footer {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    padding: 0.85rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.already-card-footer svg { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; }
.already-card-footer span { font-size: 0.75rem; color: var(--gray-500); }

@media (max-width: 520px) {
    .already-card-body { padding: 1.75rem 1.25rem 1.5rem; }
    .already-card-footer { padding: 0.75rem 1.25rem; }
    .already-actions { flex-direction: column; }
    .already-actions .btn { width: 100%; justify-content: center; }
}