/* ═══════════════════════════════════════════════════════════════════════════
   Planes y suscripción
   Aviso de prueba/vencimiento (barra bajo la cabecera) + ventana de planes.
   Reusa tokens del resto de la app; los tres colores de urgencia del aviso
   son los semánticos ya definidos (--ok/--warn/--dan), no hex nuevos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Envoltorio de icono inline (mezclado con texto en botones/chips). */
.inline-ico { display: inline-flex; align-items: center; vertical-align: -2px; }

/* ── Aviso de prueba/vencimiento ─────────────────────────────────────────── */
.trial-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) var(--s-6) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--tb-border, var(--border));
  background: var(--tb-bg, var(--bg-subtle));
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease);
  text-align: left;
}
.trial-banner:hover { filter: brightness(1.03); }
.trial-banner.ok    { --tb-bg: var(--ok-soft);   --tb-border: color-mix(in srgb, var(--ok) 35%, transparent);   --tb-fg: var(--ok); }
.trial-banner.warn  { --tb-bg: var(--warn-soft); --tb-border: color-mix(in srgb, var(--warn) 35%, transparent); --tb-fg: var(--warn); }
.trial-banner.dan   { --tb-bg: var(--dan-soft);  --tb-border: color-mix(in srgb, var(--dan) 35%, transparent);  --tb-fg: var(--dan); }
.trial-banner .tb-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tb-fg) 18%, transparent);
  color: var(--tb-fg);
}
.trial-banner .tb-txt { flex: 1; min-width: 0; }
.trial-banner .tb-title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg); }
.trial-banner .tb-sub { display: block; font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 1px; }
.trial-banner .tb-cta {
  display: flex; align-items: center; gap: 4px; flex: none;
  padding: 6px 10px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--tb-fg) 16%, transparent);
  color: var(--tb-fg); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  white-space: nowrap;
}

/* ── Modal de planes: aviso de prueba ─────────────────────────────────────── */
.plan-progress {
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-2);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.plan-progress .pp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg); margin-bottom: 8px; }
.plan-progress .pp-head span { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-muted); }
.plan-progress .pp-track { height: 6px; border-radius: var(--r-full); background: color-mix(in srgb, var(--brand) 18%, transparent); overflow: hidden; }
.plan-progress .pp-fill { height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width var(--t-slow) var(--ease-out); }

/* ── Selector mensual/anual ──────────────────────────────────────────────── */
.plan-toggle-row { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-6) 0; flex-wrap: wrap; }
.plan-toggle-save { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ok); background: var(--ok-soft); padding: 5px 10px; border-radius: var(--r-full); }

/* ── Tarjetas de plan ─────────────────────────────────────────────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); align-items: start; }
.plan-card {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.plan-card.is-destacado { border: 2px solid var(--pc-color, var(--brand)); box-shadow: var(--shadow-lg); }
.plan-card .pc-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; color: #fff; text-transform: uppercase;
  background: linear-gradient(90deg, #ff9a2e, #ff6b00);
}
.plan-card .pc-body { padding: var(--s-5); }
.plan-card .pc-head { display: flex; align-items: center; gap: var(--s-3); }
.plan-card .pc-ico {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--pc-color, var(--brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-color, var(--brand)) 30%, transparent);
  color: var(--pc-color, var(--brand));
}
.plan-card .pc-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); }
.plan-card .pc-desc { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; line-height: 1.35; }
.plan-card .pc-activo {
  display: flex; align-items: center; gap: 4px; flex: none;
  background: var(--ok-soft); color: var(--ok); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  padding: 5px 9px; border-radius: var(--r-full);
}

.plan-card .pc-price { margin-top: var(--s-4); display: flex; align-items: flex-end; gap: 4px; }
.plan-card .pc-price .cur { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--pc-color, var(--brand)); margin-bottom: 6px; }
.plan-card .pc-price .num { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--fg); letter-spacing: -0.02em; line-height: 1; }
.plan-card .pc-price .per { font-size: var(--fs-sm); color: var(--fg-muted); font-weight: var(--fw-medium); margin-bottom: 6px; }
.plan-card .pc-billing { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-card .pc-billing b { color: var(--fg-subtle); }
.plan-card .pc-save { background: var(--ok-soft); color: var(--ok); font-weight: var(--fw-bold); padding: 3px 8px; border-radius: var(--r-full); }

.plan-card .pc-cta {
  margin-top: var(--s-4); width: 100%; justify-content: center;
  padding: 12px; font-size: var(--fs-md); font-weight: var(--fw-bold); border-radius: var(--r-lg);
}
.plan-card .pc-cta.pc-cta-destacado { background: linear-gradient(120deg, #ff9a2e, #ff6b00); color: #fff; border: none; }
.plan-card .pc-cta.pc-cta-normal { background: color-mix(in srgb, var(--pc-color, var(--brand)) 14%, transparent); color: var(--pc-color, var(--brand)); border: 1.5px solid color-mix(in srgb, var(--pc-color, var(--brand)) 40%, transparent); }
.plan-card .pc-cta.pc-cta-actual { background: transparent; color: var(--fg-muted); border: 1.5px solid var(--border); cursor: default; }

.plan-card .pc-div { height: 1px; background: var(--divider); margin: var(--s-4) 0; }
.plan-card .pc-incluye-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.plan-card .pc-feat { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--fg-subtle); padding: 4px 0; }
.plan-card .pc-feat.heredado { color: var(--fg-muted); font-weight: var(--fw-medium); }
.plan-card .pc-feat .pc-dot {
  display: grid; place-items: center; width: 19px; height: 19px; flex: none; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--pc-color, var(--brand)) 18%, transparent);
  color: var(--pc-color, var(--brand));
}

.plan-limits { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.plan-limits .pl-item {
  flex: 1; text-align: center; padding: var(--s-3) var(--s-2); border-radius: var(--r-lg);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  color: var(--fg-muted);
}
.plan-limits .pl-item b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg); margin-top: 4px; }
.plan-limits .pl-item span { font-size: var(--fs-2xs); }

/* ── Pie de confianza ─────────────────────────────────────────────────────── */
.trust-row { display: flex; gap: var(--s-4); margin-top: var(--s-8); flex-wrap: wrap; justify-content: center; }
.trust-item { flex: 1; min-width: 140px; text-align: center; }
.trust-item .ti-ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 7px;
  border-radius: var(--r-lg); background: var(--accentBg, var(--brand-soft)); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.trust-item b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg); }
.trust-item span { font-size: var(--fs-xs); color: var(--fg-muted); }

@media (max-width: 640px) {
  .plan-hero { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0; padding: var(--s-4); }
}