/* =============================================
   MP Suscripciones — Estilos públicos
   Diseñados para funcionar sobre cualquier tema.
   ============================================= */

.mpsub-plans-wrapper { max-width: 1100px; margin-inline: auto; padding: 2rem 1rem; }

/* Aviso plan actual */
.mpsub-current-plan-notice {
    background: rgba(57,255,100,0.08);
    border: 1px solid rgba(57,255,100,0.3);
    border-radius: 8px;
    padding: .875rem 1.25rem;
    margin-bottom: 2rem;
    font-size: .9rem;
}

/* Grid de planes */
.mpsub-plans-grid {
    display: grid;
    grid-template-columns: repeat(var(--plan-count, 3), 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) { .mpsub-plans-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .mpsub-plans-grid { grid-template-columns: 1fr; } }

/* Card de plan */
.mpsub-plan-card {
    position: relative;
    background: #111118;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 2rem;
    transition: transform .2s, border-color .2s;
}
.mpsub-plan-card:hover { transform: translateY(-4px); border-color: rgba(232,255,71,0.25); }
.mpsub-plan-card--popular { border-color: rgba(232,255,71,0.5); }
.mpsub-plan-card--current { border-color: rgba(57,255,100,0.5); }

/* Badge */
.mpsub-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #e8ff47;
    color: #0a0a0f;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mpsub-plan-badge--current { background: #39ff64; }

/* Header del plan */
.mpsub-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    color: #f0f0f5;
}
.mpsub-plan-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin-bottom: .75rem;
}
.mpsub-plan-currency { font-size: .85rem; color: #7a7a90; }
.mpsub-plan-amount   { font-size: 2.5rem; font-weight: 800; color: #e8ff47; line-height: 1; }
.mpsub-plan-period   { font-size: .85rem; color: #7a7a90; }
.mpsub-plan-desc     { font-size: .875rem; color: #7a7a90; margin: 0 0 1.25rem; }

/* Features */
.mpsub-plan-features { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.mpsub-plan-features li {
    font-size: .875rem;
    color: #c0c0d0;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.mpsub-check { color: #e8ff47; flex-shrink: 0; }

/* Botones */
.mpsub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 600;
    padding: .8rem 1.5rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: #c0c0d0;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    width: 100%;
    text-align: center;
}
.mpsub-btn:hover { border-color: #e8ff47; color: #e8ff47; }
.mpsub-btn--primary { background: #e8ff47; border-color: #e8ff47; color: #0a0a0f; }
.mpsub-btn--primary:hover { background: #fff; border-color: #fff; color: #0a0a0f; }
.mpsub-btn--outline { border-color: rgba(255,255,255,0.2); }
.mpsub-btn--danger  { border-color: rgba(255,80,80,0.4); color: #ff8080; }
.mpsub-btn--danger:hover { background: rgba(255,80,80,0.1); border-color: #ff8080; }

/* Restringido */
.mpsub-restricted {
    background: #111118;
    border: 1px dashed rgba(232,255,71,0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: #7a7a90;
    margin: 1.5rem 0;
}
.mpsub-restricted p { margin-bottom: 1rem; }
.mpsub-restricted a { color: #e8ff47; }

/* Download button */
.mpsub-download-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(232,255,71,0.1);
    border: 1px solid rgba(232,255,71,0.3);
    color: #e8ff47;
    padding: .65rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    transition: background .2s;
}
.mpsub-download-btn:hover { background: rgba(232,255,71,0.2); }

/* Mi suscripción */
.mpsub-account-wrapper { max-width: 700px; margin-inline: auto; padding: 2rem 1rem; }

.mpsub-active-card {
    background: #111118;
    border: 1px solid rgba(57,255,100,0.3);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.mpsub-active-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mpsub-active-header h3 { font-size: 1.35rem; margin: .25rem 0 .5rem; color: #f0f0f5; }
.mpsub-price-line { color: #39ff64; font-weight: 700; font-size: 1.1rem; margin: 0; }
.mpsub-active-dates p { font-size: .85rem; color: #7a7a90; margin: .25rem 0; }
.mpsub-active-dates strong { color: #f0f0f5; }

.mpsub-no-sub {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: #7a7a90;
}
.mpsub-no-sub p { margin-bottom: 1rem; }
.mpsub-no-sub .mpsub-btn { width: auto; }

/* Historial */
.mpsub-history-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mpsub-history-table th { text-align: left; color: #7a7a90; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mpsub-history-table td { padding: .65rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: #c0c0d0; }

/* Badges */
.mpsub-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .65rem;
    border-radius: 999px;
}
.mpsub-badge--authorized { background: rgba(57,255,100,0.12); color: #39ff64; }
.mpsub-badge--pending    { background: rgba(255,200,0,0.12);   color: #ffc800; }
.mpsub-badge--paused     { background: rgba(120,120,255,0.12); color: #8888ff; }
.mpsub-badge--cancelled  { background: rgba(255,80,80,0.1);    color: #ff8080; }
.mpsub-badge--expired    { background: rgba(120,120,120,0.12); color: #888; }

/* Páginas de resultado */
.mpsub-result-page {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 500px;
    margin-inline: auto;
}
.mpsub-result-icon { font-size: 4rem; margin-bottom: 1rem; }
.mpsub-result-page h2 { font-size: 2rem; margin-bottom: 1rem; color: #f0f0f5; }
.mpsub-result-page p { color: #7a7a90; margin-bottom: .75rem; line-height: 1.7; }
.mpsub-result-note { font-size: .85rem; }
.mpsub-result-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.mpsub-result-actions .mpsub-btn { width: auto; }