/* Helix · panel v5 · planes: la sección Cuenta de Ajustes (planes, oferta anual y baja) con la piel v5.
   Plan: docs/plans/panel-planes-y-baja/PLAN.md. La maqueta y la lógica son de helix-config.js (las ve todo el mundo);
   aquí solo cambia el aspecto y todo cuelga de html.hx-v5: con el flag apagado no aplica a nada. */

html.hx-v5 .helix-app #helix-cuenta-panel {
  --pl-sub: rgba(255, 255, 255, .04); --pl-linea: rgba(255, 255, 255, .08); --pl-ok: #30D158;
  --pl-okbg: rgba(48, 209, 88, .14); --pl-aviso: rgba(255, 159, 10, .12); --pl-sug: rgba(255, 94, 87, .10);
}
html.hx-v5:not([data-theme="dark"]) .helix-app #helix-cuenta-panel {
  --pl-sub: #F5F5F7; --pl-linea: rgba(0, 0, 0, .07); --pl-ok: #1E8E3E; --pl-okbg: rgba(30, 142, 62, .10);
  --pl-aviso: rgba(255, 149, 0, .12); --pl-sug: rgba(242, 73, 63, .08);
}

/* ── Tu plan ── */
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-plan {
  padding: 16px 18px; border: 0; border-radius: 18px; background: var(--pl-sub); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-plan .helix-setting-label { font-size: 15px; color: var(--v5-t1); }

/* ── Tarjetas de planes ── */
/* Ajustes v5 pone Cuenta en media columna: las tarjetas se apilan si no caben tres de ~290 px. */
html.hx-v5 .helix-app #helix-cuenta-panel .hx-planes {
  gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan {
  gap: 9px; padding: 18px; border: 0; border-radius: 20px; background: var(--pl-sub);
  box-shadow: inset 0 0 0 1px var(--pl-linea); transition: transform .2s var(--v5-eo), box-shadow .2s var(--v5-eo); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan:hover { transform: translateY(-1px); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan.es-recomendado {
  background: linear-gradient(180deg, color-mix(in srgb, var(--v5-acc) 12%, transparent), var(--pl-sub) 55%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v5-acc) 70%, transparent), var(--v5-sh1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan.es-actual { box-shadow: inset 0 0 0 1.5px var(--pl-ok); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-nombre { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--v5-t1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-marca {
  padding: 3px 9px; border: 0; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: var(--v5-acc); box-shadow: none; }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan.es-actual .hx-plan-marca { background: var(--pl-ok); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-precio b { font-size: 28px; letter-spacing: -.03em; color: var(--v5-t1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-precio span { color: var(--v5-t3); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-ahorro { color: var(--pl-ok); background: var(--pl-okbg); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-intro { color: var(--v5-t3); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-lista { color: var(--v5-t2); font-size: 13.5px; }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-lista b { color: var(--v5-t1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-lista li::before { border-color: var(--v5-acc); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-plan-accion .helix-btn { height: 38px; border-radius: 999px; }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-planes-comun { color: var(--v5-t3) !important; }

/* ── Avisos, sugerencia, oferta anual y confirmaciones ── */
html.hx-v5 .helix-app #helix-cuenta-panel :is(.hx-cuenta-aviso, .hx-cuenta-sugerencia, .hx-cuenta-anual) {
  padding: 14px 16px; border: 0; border-radius: 16px; color: var(--v5-t1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-aviso { background: var(--pl-aviso); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-sugerencia { background: var(--pl-sug); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-anual { background: var(--pl-sub); box-shadow: inset 0 0 0 1px var(--pl-linea); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-anual .t-caption { color: var(--v5-t2) !important; }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-confirma {
  padding: 16px 18px; border: 0; border-radius: 16px; background: var(--pl-sub); box-shadow: inset 0 0 0 1px var(--pl-linea); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-confirma-t { font-size: 15px; color: var(--v5-t1); }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-confirma :is(select, textarea) { border-radius: 12px; }
html.hx-v5 .helix-app #helix-cuenta-panel .hx-cuenta-baja-link { color: var(--v5-t3); }

@media (max-width: 1023.98px) {
  html.hx-v5 .helix-app #helix-cuenta-panel :is(.hx-cuenta-aviso, .hx-cuenta-sugerencia, .hx-cuenta-anual) { align-items: stretch; }
  html.hx-v5 .helix-app #helix-cuenta-panel :is(.hx-cuenta-aviso, .hx-cuenta-sugerencia, .hx-cuenta-anual) .helix-btn { width: 100%; justify-content: center; }
}

/* ── Candado «Disponible en Pro/Agency» en cualquier sección de Ajustes (fase B) ── */
html.hx-v5 .helix-app .hx-candado-plan-fila {
  border: 0; border-radius: 16px; background: color-mix(in srgb, var(--v5-acc) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-acc) 28%, transparent); }
html.hx-v5 .helix-app .hx-candado-plan-ico { color: var(--v5-acc); }
html.hx-v5 .helix-app .hx-candado-plan-t { color: var(--v5-t1); }
html.hx-v5 .helix-app .hx-candado-plan-fila .helix-btn { border-radius: 999px; }