/*
 * Tarjetas de planes (plugin Suscripciones): widget `<x-subscriptions.plan-cards>` y piezas sueltas.
 *
 * Cualquier tema le da su estilo con variables, sin tocar el plugin, en cualquier nivel (`:root`, el body o el
 * widget), p. ej. `.iw-subscription-plans { --iw-plan-accent: #b91c1c; --iw-plan-radius: 0; }`. Cada var() lleva el
 * valor neutro del plugin; el acento toma `--brand-primary` del tema si existe. Variables: --iw-plan-font, surface,
 * text, muted, border, border-hover, radius, shadow, accent, accent-contrast, badge-bg, badge-text, featured-border,
 * button-bg, button-text, button-radius, check, price-size, offer-bg, offer-text, soon-bg, soon-text, control-bg,
 * control-radius, switch-bg, switch-border, switch-text, switch-active-bg, switch-active-text, divider y gap.
 * Para cambiar la estructura, el tema puede reemplazar la vista: ver `storefront/subscriptions/*` en CAPABILITIES.md.
 */

/* Widget: cabecera, selector de periodo, tarjetas y add-ons. */
.iw-subscription-plans { font-family: var(--iw-plan-font, inherit); color: var(--iw-plan-text, #0a0a0a); }
.iw-subscription-plans__header { margin: 0 auto 2rem; max-width: 46rem; text-align: center; }
.iw-subscription-plans__title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.iw-subscription-plans__subtitle { margin: 0.6rem 0 0; color: var(--iw-plan-muted, #525252); font-size: 1rem; line-height: 1.6; }
.iw-subscription-plans__grid { display: grid; gap: var(--iw-plan-gap, 1.5rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 768px) {
  .iw-subscription-plans__grid[data-columns="2"],
  .iw-subscription-plans__grid[data-columns="3"],
  .iw-subscription-plans__grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .iw-subscription-plans__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iw-subscription-plans__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Un solo plan: una tarjeta de ancho cómodo, centrada. */
.iw-subscription-plans__grid[data-columns="1"] { max-width: 28rem; margin-inline: auto; }
.iw-subscription-plans__empty { margin: 0; color: var(--iw-plan-muted, #525252); text-align: center; }
.iw-subscription-plans__addons { margin-top: 3rem; }
.iw-subscription-plans__addons-title { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.iw-subscription-plans__addons-subtitle { margin: 0 0 1.25rem; color: var(--iw-plan-muted, #525252); font-size: 0.9rem; line-height: 1.6; }
.iw-subscription-plans__addons-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

.iw-subscription-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--iw-plan-border, color-mix(in srgb, #171717 20%, transparent));
  border-radius: var(--iw-plan-radius, 1rem);
  background: var(--iw-plan-surface, #fff);
  box-shadow: var(--iw-plan-shadow, none);
  color: var(--iw-plan-text, #0a0a0a);
  transition: border-color 0.2s ease;
}
.iw-subscription-plan-card:hover { border-color: var(--iw-plan-border-hover, #171717); }
.iw-subscription-plan-card--featured { border-color: var(--iw-plan-featured-border, var(--iw-plan-accent, var(--brand-primary, #171717))); border-width: 2px; }
.iw-subscription-plan-card--soon { opacity: 0.92; }

.iw-subscription-plan-card__badge {
  position: absolute;
  left: 50%;
  top: -1px;
  z-index: 2;
  transform: translateX(-50%);
  width: fit-content;
  padding: 0.35rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background: var(--iw-plan-badge-bg, var(--iw-plan-accent, var(--brand-primary, #171717)));
  color: var(--iw-plan-badge-text, var(--iw-plan-accent-contrast, #fff));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.iw-subscription-plan-card__badge--soon { background: var(--iw-plan-soon-bg, #fef3c7); color: var(--iw-plan-soon-text, #92400e); }

.iw-subscription-plan-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.35rem;
  min-width: 0;
}
.iw-subscription-plan-card:has(.iw-subscription-plan-card__badge) .iw-subscription-plan-card__body { padding-top: 2rem; }

.iw-subscription-plan-card__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iw-plan-muted, #525252);
}
.iw-subscription-plan-card__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--iw-plan-text, #0a0a0a); }
.iw-subscription-plan-card__desc { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--iw-plan-muted, #525252); }

.iw-subscription-plan-card__features { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; flex: 0; }
.iw-subscription-plan-card__features li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; color: var(--iw-plan-text, #0a0a0a); }
.iw-subscription-plan-card__features svg { width: 1rem; height: 1rem; margin-top: 0.15rem; flex-shrink: 0; color: var(--iw-plan-check, #059669); }
.iw-subscription-plan-card__features-title { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--iw-plan-divider, #e1e7e3); font-size: 15px; font-weight: 600; }

.iw-subscription-plan-card__form { display: grid; gap: 0.85rem; margin-top: 1rem; }
.iw-subscription-plan-card__notice { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--iw-plan-muted, #525252); }
.iw-subscription-plan-card__terms { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: 0.8rem; line-height: 1.45; color: var(--iw-plan-muted, #525252); }
.iw-subscription-plan-card__foot { margin-top: 0.25rem; }
.iw-subscription-plan-card__foot :is(button, a) { width: 100%; justify-content: center; }
.iw-subscription-plan-card__links { display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.iw-subscription-plan-card__links a { font-size: 0.8rem; font-weight: 600; color: var(--iw-plan-text, #0a0a0a); text-decoration: underline; text-underline-offset: 3px; }
.iw-subscription-plan-card__button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px; border: 0;
  border-radius: var(--iw-plan-button-radius, 999px); background: var(--iw-plan-button-bg, var(--iw-plan-accent, var(--brand-primary, #171717))); color: var(--iw-plan-button-text, var(--iw-plan-accent-contrast, #fff));
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.iw-subscription-plan-card__button:focus-visible { outline: 2px solid var(--iw-plan-accent, var(--brand-primary, #171717)); outline-offset: 2px; }
.iw-subscription-plan-card__button[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* Add-on: tarjeta compacta (nombre, precio del periodo y descripción). */
.iw-subscription-plan-card--compact .iw-subscription-plan-card__body { padding: 1rem 1.1rem 1.1rem; }
.iw-subscription-plan-card--compact:has(.iw-subscription-plan-card__badge) .iw-subscription-plan-card__body { padding-top: 1.85rem; }
.iw-subscription-plan-card--compact .iw-subscription-plan-card__title { font-size: 1rem; }
.iw-subscription-plan-card__compact-price { margin: 0.5rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.iw-subscription-plan-card__compact-price span { color: var(--iw-plan-muted, #525252); font-size: 0.8rem; font-weight: 500; }
.iw-subscription-plan-card__compact-alternative { display: block; margin-top: 2px; }

.iw-subscription-selector { display: grid; gap: 0.85rem; }
.iw-subscription-selector > .grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iw-subscription-selector label { display: grid; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--iw-plan-text, #0a0a0a); }
/* Lo que el selector de periodo oculta queda oculto aunque el tema no traiga el reset de `[hidden]`. */
.iw-subscription-selector label[hidden],
.iw-subscription-plan-card[hidden] { display: none; }
.iw-subscription-selector select,
.iw-subscription-selector input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--iw-plan-border, color-mix(in srgb, #171717 20%, transparent));
  border-radius: var(--iw-plan-control-radius, 0.75rem);
  background: var(--iw-plan-control-bg, #fff);
  color: var(--iw-plan-text, #0a0a0a);
  font: inherit;
  font-weight: 500;
}
.iw-subscription-selector :is(select, input):focus-visible { outline: 2px solid var(--iw-plan-accent, var(--brand-primary, #171717)); outline-offset: 2px; }

/* Panel de importe (confirmación de contratar). */
.iw-subscription-summary {
  border: 1px solid color-mix(in srgb, var(--iw-plan-offer-text, #14674f) 22%, transparent);
  border-radius: var(--iw-plan-control-radius, 0.75rem);
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--iw-plan-offer-bg, #e2f3eb) 55%, var(--iw-plan-surface, #fff));
  text-align: center;
}
.iw-subscription-summary p { margin: 0.25rem 0; line-height: 1.45; color: var(--iw-plan-text, #0a0a0a); }
.iw-subscription-summary [data-subscription-total] { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.iw-subscription-summary [data-subscription-renewal],
.iw-subscription-summary [data-subscription-equivalent],
.iw-subscription-summary__alternative { font-size: 0.8rem; color: var(--iw-plan-muted, #525252); }

@media (max-width: 480px) {
  .iw-subscription-selector > .grid { grid-template-columns: minmax(0, 1fr); }
}

.iw-subscription-period-switch {
  display: flex; flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 2rem; padding: 5px;
  border: 1px solid var(--iw-plan-switch-border, #cbd5d1); border-radius: 999px; background: var(--iw-plan-switch-bg, #edf2ef); gap: 4px;
}
.iw-subscription-period-switch[hidden] { display: none; }
.iw-subscription-period-switch button {
  border: 0; border-radius: 999px; padding: 12px 28px; background: transparent;
  font: inherit; font-weight: 600; cursor: pointer; color: var(--iw-plan-switch-text, #42534c);
}
.iw-subscription-period-switch button[aria-pressed="true"] { background: var(--iw-plan-switch-active-bg, #fff); color: var(--iw-plan-switch-active-text, #10251d); box-shadow: 0 2px 7px #10251d15; }
.iw-subscription-period-switch button:focus-visible { outline: 2px solid var(--iw-plan-accent, var(--brand-primary, #171717)); outline-offset: 2px; }
.iw-subscription-period-switch button:disabled { opacity: .45; cursor: default; }
@media (max-width: 480px) {
  .iw-subscription-period-switch button { padding: 10px 16px; }
}

/* Jerarquía de la tarjeta: precio, cantidad, acción, renovación, beneficios. */
.iw-subscription-selector--catalog { gap: 16px; }
.iw-subscription-showcase { margin: 4px 0 8px; }
.iw-subscription-showcase__offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 25px; font-size: 12px; }
.iw-subscription-showcase__offer[hidden] { display: none; }
.iw-subscription-showcase__offer s { color: var(--iw-plan-muted, #525252); }
.iw-subscription-showcase__offer span { border-radius: 5px; padding: 4px 7px; background: var(--iw-plan-offer-bg, #e2f3eb); color: var(--iw-plan-offer-text, #14674f); font-weight: 600; }
.iw-subscription-showcase__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 12px 0 5px; color: var(--iw-plan-text, #0a0a0a); }
.iw-subscription-showcase__price strong { font-size: var(--iw-plan-price-size, 2.25rem); line-height: 1.15; letter-spacing: -.04em; }
.iw-subscription-showcase__price > span { font-size: 15px; }
.iw-subscription-showcase__unit { font-size: 13px; color: var(--iw-plan-muted, #525252); margin: 0; line-height: 1.5; }
/* Precio en las otras monedas de Pagos: referencia, más discreto que el precio. */
.iw-subscription-showcase__alternative { font-size: 13px; color: var(--iw-plan-muted, #525252); margin: 0 0 4px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.iw-subscription-price-alternatives { color: var(--iw-plan-muted, #525252); font-size: .85em; font-weight: 400; font-variant-numeric: tabular-nums; }
.iw-subscription-selector--catalog .iw-subscription-summary { border: 0; padding: 0; background: none; text-align: left; }
.iw-subscription-selector--catalog .iw-subscription-summary [data-subscription-total] { font-size: 14px; font-weight: 600; }
.iw-subscription-summary--catalog .iw-subscription-summary__eligibility { font-size: 11px; }