/* =====================================================================
   RANGO — área «pro»: candados de funciones Pro, pantalla Pro y bloque
   «Tu plan» de Cuenta. Solo tokens (design/tokens.css + rd-global.css);
   color-mix() solo para tintes. Se carga antes de rd-responsivo.css.
   ===================================================================== */

/* ---------- 1. Candado en opciones Pro (RdPro.lock) ---------- */
.rdpro-locked { position: relative; }
.rdpro-locked .rdpro-lock-ic {
  position: absolute; top: -7px; right: -7px; z-index: 1; /* en la esquina, donde iría la marca de «elegido» (una opción con candado no se puede elegir) */
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  color: var(--performance-blue-text);
  background: color-mix(in srgb, var(--performance-blue) 16%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 32%, transparent);
  pointer-events: none;
}
.rdpro-locked .rdpro-lock-ic svg { width: 11px; height: 11px; }
/* chips en línea: el candado va dentro del flujo, no encima del texto */
.chip.rdpro-locked .rdpro-lock-ic { position: static; margin-left: var(--sp-2); width: 18px; height: 18px; flex: none; }
.rdpro-locked:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }

/* ---------- 2. Pantalla Pro: una columna ---------- */
#screen-pro .rdpro-pad { max-width: 620px; margin-inline: auto; }
#screen-pro .rdpro-title { text-wrap: balance; outline: none; }
#screen-pro .rdpro-lead { margin-bottom: var(--sp-5); color: var(--text-2); }

#screen-pro .rdpro-benefits { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
#screen-pro .rdpro-benefit {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--inner-glow);
}
#screen-pro .rdpro-benefit-ic {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--performance-blue-text);
  background: color-mix(in srgb, var(--performance-blue) 14%, transparent);
}
#screen-pro .rdpro-benefit-ic.is-teal { color: var(--teal-text); background: color-mix(in srgb, var(--recovery-teal) 14%, transparent); }
#screen-pro .rdpro-benefit h2 {
  margin: 2px 0 var(--sp-1);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3;
  color: var(--text-1);
}
#screen-pro .rdpro-benefit p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }

/* precio / próximamente */
#screen-pro .rdpro-price {
  margin: 0 0 var(--sp-5); padding: var(--sp-5) var(--sp-4);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--performance-blue) 30%, transparent);
  border-radius: var(--r-md);
}
#screen-pro .rdpro-price-cap { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
#screen-pro .rdpro-price-val { margin: 0; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); }
#screen-pro .rdpro-price-note { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
#screen-pro .rdpro-price.is-owned { border-color: color-mix(in srgb, var(--recovery-teal) 40%, transparent); }
#screen-pro .rdpro-price.is-owned .rdpro-price-val { color: var(--teal-text); }
#screen-pro .rdpro-soon {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--performance-blue-text);
  background: color-mix(in srgb, var(--performance-blue) 16%, transparent);
}
#screen-pro .rdpro-cta { margin-top: var(--sp-4); }
#screen-pro .rdpro-price-alt { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
#screen-pro .rdpro-pay-btns { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
#screen-pro .rdpro-pay-btns .rdpro-cta { margin-top: 0; width: 100%; }
.rdpro-pay-msg { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.rdpro-pay-msg.is-err { color: var(--coral-text); }
#screen-pro .rdpro-store-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-sm); }
#screen-pro .rdpro-store-links .rd-link { display: inline-flex; align-items: center; width: auto; min-height: 44px; margin: 0; padding: 0 var(--sp-1); }
.rd-billing { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.rd-billing .rd-sub-cancel { align-self: flex-start; }
.rd-sub-confirm { display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-sub-confirm-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rd-billing[hidden], .rd-sub-confirm[hidden], .rdpro-pay-msg[hidden] { display: none; }

/* tabla Gratis vs Pro, plegable */
#screen-pro .rdpro-cmp { margin: 0 0 var(--sp-4); padding: 0; overflow: hidden; }
#screen-pro .rdpro-cmp > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600;
  color: var(--text-1);
  cursor: pointer; list-style: none;
}
#screen-pro .rdpro-cmp > summary::-webkit-details-marker { display: none; }
#screen-pro .rdpro-cmp > summary::after {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out-strong);
}
#screen-pro .rdpro-cmp[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
#screen-pro .rdpro-cmp > summary:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: -2px; border-radius: var(--r-md); }
#screen-pro .rdpro-cmp .pro-cmp col.c-base { width: 29%; }
#screen-pro .rdpro-cmp .pro-cmp col.c-pro { width: 27%; }
#screen-pro .rdpro-cmp .pro-cmp td { font-size: var(--fs-sm); }
#screen-pro .rdpro-safe { margin: 0 0 var(--sp-6); text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }

/* ---------- 3. Cuenta: bloque «Tu plan» ---------- */
#screen-account .rdpro-plan-card .rdpro-plan-lead { margin: 0 0 var(--sp-2); font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); }
#screen-account .rdpro-plan-card .acc-note { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  #screen-pro .rdpro-cmp > summary::after { transition: none; }
}