/* /subscription — vista de la suscripción actual del cliente. Alineada al diseño de la app
   (mockup-FD: Space Grotesk/Sora, tarjeta blanca redondeada, primario #155EEF). Prefijo sub-, scoped .sub-root. */

.sub-root{
  --sub-ink:#0f172a; --sub-ink-soft:#64748b; --sub-line:#e6e9f2;
  --sub-primary:#155eef; --sub-primary-hover:#1147c4; --sub-primary-soft:#e9f0ff;
  --sub-green:#17a35a; --sub-green-soft:#e6f6ee; --sub-green-ink:#0f7a42;
  --sub-amber:#b45309; --sub-amber-soft:#fef3c7;
  --sub-red:#dc2626; --sub-red-soft:#fee2e2;
  --sub-display:'Space Grotesk',system-ui,sans-serif;
  --sub-body:'Sora',system-ui,sans-serif;
  font-family:var(--sub-body); color:var(--sub-ink);
  max-width:640px; margin:8px auto 0; display:block;
}
.sub-root *{box-sizing:border-box}

.sub-card{background:#fff;border:1px solid var(--sub-line);border-radius:22px;
  box-shadow:0 14px 40px rgba(15,23,42,.07);padding:28px 26px}

/* Header */
.sub-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sub-head-icon{width:46px;height:46px;border-radius:13px;background:var(--sub-primary-soft);
  color:var(--sub-primary);display:grid;place-items:center;font-size:22px;flex:none}
.sub-head-titles{flex:1;min-width:0}
.sub-head-title{font-family:var(--sub-display);font-weight:700;font-size:19px;line-height:1.2}
.sub-head-sub{color:var(--sub-ink-soft);font-size:13px;margin-top:2px}

/* Badge de estado */
.sub-badge{font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;white-space:nowrap;flex:none}
.sub-badge-ok{background:var(--sub-green-soft);color:var(--sub-green-ink)}
.sub-badge-info{background:var(--sub-primary-soft);color:var(--sub-primary)}
.sub-badge-warn{background:var(--sub-amber-soft);color:var(--sub-amber)}
.sub-badge-danger{background:var(--sub-red-soft);color:var(--sub-red)}
.sub-badge-muted{background:#f1f5f9;color:var(--sub-ink-soft)}

/* Plan + precio */
.sub-plan{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 20px;border-radius:16px;background:#f8fafc;border:1px solid var(--sub-line)}
.sub-plan-name{font-family:var(--sub-display);font-weight:700;font-size:22px;color:var(--sub-ink)}
.sub-plan-price{font-family:var(--sub-display);font-weight:800;font-size:26px;color:var(--sub-primary);white-space:nowrap}
.sub-plan-price span{font-size:14px;color:var(--sub-ink-soft);font-weight:600}

/* Grid de detalles */
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(max-width:520px){.sub-grid{grid-template-columns:1fr}}
.sub-cell{padding:14px 16px;border:1px solid var(--sub-line);border-radius:14px}
.sub-cell-label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--sub-ink-soft);margin-bottom:5px}
.sub-cell-value{display:block;font-size:15px;font-weight:600;color:var(--sub-ink)}

/* Acciones */
.sub-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.sub-btn{width:100%;padding:13px;border-radius:13px;font-weight:600;font-size:14.5px;
  cursor:pointer;border:1.5px solid transparent;transition:.16s;font-family:var(--sub-body)}
.sub-btn-primary{background:var(--sub-primary);color:#fff}
.sub-btn-primary:hover{background:var(--sub-primary-hover)}
.sub-btn-ghost{background:#fff;border-color:var(--sub-line);color:var(--sub-ink)}
.sub-btn-ghost:hover{border-color:var(--sub-primary);color:var(--sub-primary)}
.sub-btn-warn{background:var(--sub-amber-soft);color:var(--sub-amber);border-color:transparent}
.sub-btn-warn:hover{filter:brightness(.97)}
.sub-note{color:var(--sub-ink-soft);font-size:12.5px;line-height:1.55;text-align:center;margin-top:14px}

/* Estado vacío */
.sub-empty{background:#fff;border:1px solid var(--sub-line);border-radius:22px;
  box-shadow:0 14px 40px rgba(15,23,42,.07);padding:44px 26px;text-align:center}
.sub-empty-icon{width:60px;height:60px;border-radius:50%;background:var(--sub-primary-soft);
  color:var(--sub-primary);display:grid;place-items:center;font-size:28px;margin:0 auto 16px}
.sub-empty-title{font-family:var(--sub-display);font-weight:700;font-size:20px}
.sub-empty-text{color:var(--sub-ink-soft);font-size:14px;margin:8px auto 22px;max-width:360px}
.sub-empty .sub-btn{max-width:280px;margin:0 auto}

.sub-loading{display:flex;justify-content:center;padding:80px 0}