/* ★ 48 — paridad con iOS/Android: «¡Plan activado!» + confeti, confirmar suscripción, cancelar/reactivar en el modal de
   planes, y la cápsula «NUEVO» del perfil. */

/* «¡Plan activado!» a pantalla completa */
.w48-activado { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 10, 14, .92); color: #fff; animation: w48-entra .2s ease-out; }
.w48-confeti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.w48-activado-caja { position: relative; z-index: 1; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.w48-activado-caja h2 { margin: 6px 0 0; font-size: 30px; }
.w48-activado-caja p { margin: 0 0 10px; opacity: .85; font-size: 16px; }
.w48-sello { width: 112px; height: 112px; border-radius: 50%; background: #34c759; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px rgba(52, 199, 89, .22); animation: w48-resorte .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.w48-activado.quieto, .w48-activado.quieto .w48-sello { animation: none; }
.w48-ancho { width: 100%; justify-content: center; }
@keyframes w48-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes w48-resorte { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Confirmar suscripción (dentro del modal de planes) */
.w48-conf { display: flex; flex-direction: column; gap: 14px; }
.w48-conf-cab { display: flex; align-items: center; gap: 12px; }
.w48-conf-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: rgba(175, 82, 222, .16); color: #af52de; display: flex; align-items: center; justify-content: center; }
.w48-conf-cab small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.w48-conf-cab b { display: block; font-size: 22px; }
.w48-tarjeta { border: 1px solid var(--borde); border-radius: 14px; padding: 14px; background: var(--fondo-2); }
.w48-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.w48-precio strong { font-size: 28px; }
.w48-precio span { color: var(--tinta-2); }
.w48-pildora { margin-inline-start: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); color: var(--tinta-2); }
.w48-incluye b { display: block; margin-bottom: 8px; }
.w48-incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w48-incluye li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.w48-incluye li svg { flex: none; color: #34c759; margin-top: 1px; }
.w48-gris { color: var(--tinta-2); font-size: 14px; margin: 0; }
.w48-rojo { color: #ff3b30; font-size: 14px; margin: 0; }
.w48-botones { display: flex; flex-direction: column; gap: 8px; }
.w48-botones .btn { width: 100%; justify-content: center; }

/* Tu plan: cancelar / reactivar */
.w48-gestion { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.w48-btn-rojo { background: transparent; border: 1.5px solid #ff3b30; color: #ff3b30; }
.w48-si-cancelar { background: #ff3b30; color: #fff; }
.w48-confirma { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.w48-confirma p { margin: 0; }
.w48-confirma .fila { display: flex; gap: 8px; flex-wrap: wrap; }

/* Perfil: «NUEVO» bajo el avatar (cuentas de < 30 días) */
.w48-av { position: relative; display: inline-flex; flex: none; }
.w48-nuevo { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 2; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #007aff; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 0 0 2px var(--fondo); }
.w44-con-portada .perfil-cabeza > .w48-av { margin-top: -86px; z-index: 1; }
.w44-con-portada .perfil-cabeza > .w48-av > .avatar { margin-top: 0; box-shadow: 0 0 0 5px var(--fondo); }
@media (max-width: 900px) {
  .w44-con-portada .perfil-cabeza > .w48-av { margin-top: -60px; }
  .w44-con-portada .perfil-cabeza > .w48-av > .avatar { box-shadow: 0 0 0 4px var(--fondo); }
  .w48-nuevo { font-size: 10px; padding: 2px 8px; bottom: -6px; }
}