/*
 * Identidad visual Dicard: Monocromo elegante con acento Azul Proximitty (#0071e3).
 *
 * Los botones de acción principales conservan el negro obsidiana (#1d1d1f)
 * con tipografía blanca (#ffffff) para mantener el acabado sobrio y de alta gama.
 *
 * El Azul Proximitty / Apple (#0071e3) se utiliza como acento unificador:
 * 1. Badge promocional del plan anual ("2 meses gratis").
 * 2. Barras de progreso de avance (wizard y editor móvil).
 * 3. Indicador de foco y selección en el editor (sincronizado con inputs y botones del sistema).
 */
:root {
  --brand: #0071e3;
  --brand-hover: #0077ed;
  --brand-gradient: linear-gradient(135deg, #0077ed 0%, #0071e3 100%);
  --brand-glow: rgba(0, 113, 227, 0.28);
  --ce-focus: var(--brand);
}

/* ── Botones principales: Negro obsidiana puro con texto blanco ── */
.hero-btn-primary,
#checkout-btn,
.wizard-next,
.ce-btn:not(.ce-btn-ghost) {
  background: var(--text) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(29, 29, 31, 0.16);
}

.hero-btn-primary:hover,
#checkout-btn:hover,
.wizard-next:hover,
.ce-btn:not(.ce-btn-ghost):hover {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(29, 29, 31, 0.24);
}

/* ── Acentos: Azul Proximitty (#0071e3) ── */

/* 1. Badge "2 meses gratis" del plan anual */
.plan-badge {
  background: var(--brand-gradient);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--brand-glow);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 2. Barras de progreso (Desktop wizard y Mobile card-editor) */
.wstep-bar i,
.ce-bar span {
  background: var(--brand-gradient);
}

/* 3. Selección y foco activo en zonas del editor */
body.ce-active .card-preview [data-ce-section]:focus-visible,
body.ce-active .card-preview [data-ce-field]:focus-visible,
body.ce-active .card-preview .ce-zone-active {
  outline-color: var(--brand);
}

body.ce-active .ce-sheet input:focus,
body.ce-active .ce-sheet select:focus,
body.ce-active .ce-sheet textarea:focus,
.field-highlight {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
}