/* ═══ Configuración → Mi plan (suscripción SaaS) ═══ */
.cfg-plan-card { grid-column: 1 / -1; }

.cfg-plan-estado {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 20px 22px; margin-top: 16px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.cfg-plan-estado-info { flex: 1; min-width: 0; }
.cfg-plan-nombre { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
.cfg-plan-sub { font-size: .82rem; color: #64748b; margin-top: 3px; }
.cfg-plan-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    border-radius: 99px; font-size: .78rem; font-weight: 600; border: 1px solid transparent;
}
.cfg-plan-badge--activo { color: #34d399; background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.2); }
.cfg-plan-badge--trial { color: #fbbf24; background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.2); }
.cfg-plan-badge--vencido { color: #f87171; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.2); }
.cfg-plan-badge--cortesia { color: #a78bfa; background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); }

.cfg-plan-uso {
    display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px;
    padding: 12px 22px;
    background: rgba(59,130,246,.05); border: 1px solid rgba(59,130,246,.14);
    border-radius: 10px;
}
.cfg-plan-uso-item { display: flex; gap: 8px; align-items: baseline; }
.cfg-plan-uso-item .lbl { font-size: .8rem; color: #94a3b8; }
.cfg-plan-uso-item .val { font-size: .9rem; font-weight: 700; color: #e2e8f0; }
.cfg-plan-uso-item .val.limite { color: #f87171; }

.cfg-plan-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px; margin-top: 18px;
}
.cfg-plan-tier {
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 22px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.cfg-plan-tier--destacado { border-color: rgba(59,130,246,.4); }
.cfg-plan-tier--actual { border-color: rgba(52,211,153,.4); }
.cfg-plan-tier .tier-nombre { font-size: .95rem; font-weight: 700; color: #e2e8f0; }
.cfg-plan-tier .tier-precio { font-size: 1.5rem; font-weight: 800; color: #e2e8f0; }
.cfg-plan-tier .tier-precio span { font-size: .8rem; font-weight: 500; color: #64748b; }
.cfg-plan-tier .tier-features { list-style: none; margin: 0; padding: 0; flex: 1; }
.cfg-plan-tier .tier-features li {
    font-size: .8rem; color: #94a3b8; padding: 4px 0 4px 18px; position: relative;
}
.cfg-plan-tier .tier-features li::before { content: '✓'; position: absolute; left: 0; color: #34d399; }
.cfg-plan-tier .btn-plan-elegir[disabled] { opacity: .5; cursor: default; }

html[data-theme="light"] .cfg-plan-estado,
html[data-theme="light"] .cfg-plan-tier { background: #f8f9fa !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] .cfg-plan-tier--destacado { border-color: rgba(59,130,246,.45) !important; }
html[data-theme="light"] .cfg-plan-tier--actual { border-color: rgba(16,185,129,.45) !important; }
html[data-theme="light"] .cfg-plan-nombre,
html[data-theme="light"] .cfg-plan-tier .tier-nombre,
html[data-theme="light"] .cfg-plan-tier .tier-precio,
html[data-theme="light"] .cfg-plan-uso-item .val { color: #111827 !important; }
html[data-theme="light"] .cfg-plan-sub,
html[data-theme="light"] .cfg-plan-tier .tier-features li { color: #6b7280 !important; }