/* ============================================================
   ERP Intelligent Quote — style.css
   Design System: Teal SaaS — Alineado a prototipos de referencia
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --erpiq-primary:       #0d9488;
  --erpiq-primary-dark:  #0f766e;
  --erpiq-primary-light: #14b8a6;
  --erpiq-primary-bg:    #f0fdfa;
  --erpiq-primary-muted: #ccfbf1;

  --erpiq-success:  #0d9488;
  --erpiq-warning:  #f59e0b;
  --erpiq-danger:   #ef4444;

  --erpiq-gray-50:  #f9fafb;
  --erpiq-gray-100: #f3f4f6;
  --erpiq-gray-200: #e5e7eb;
  --erpiq-gray-300: #d1d5db;
  --erpiq-gray-400: #9ca3af;
  --erpiq-gray-500: #6b7280;
  --erpiq-gray-600: #4b5563;
  --erpiq-gray-700: #374151;
  --erpiq-gray-800: #1f2937;
  --erpiq-gray-900: #111827;
  --erpiq-white:    #ffffff;

  --erpiq-radius-sm: 8px;
  --erpiq-radius:    12px;
  --erpiq-radius-lg: 16px;
  --erpiq-radius-xl: 20px;

  --erpiq-shadow:    0 2px 12px rgba(0,0,0,.08);
  --erpiq-shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --erpiq-shadow-xl: 0 20px 60px rgba(0,0,0,.18);

  --erpiq-transition: 180ms ease;
  --erpiq-font: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  --erpiq-z-modal: 99999;
  --erpiq-z-toast: 100001;
}

/* ── Reset ──────────────────────────────────────────────────── */
.erpiq-wrap *,
.erpiq-modal * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.erpiq-wrap,
.erpiq-modal {
  font-family: var(--akpager-secondary-font);
  -webkit-font-smoothing: antialiased;
  color: var(--erpiq-gray-800);
  line-height: 1.5;
}

/* ── Buttons ────────────────────────────────────────────────── */
.erpiq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--erpiq-radius);
  font-family: var(--akpager-secondary-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: var(--erpiq-transition);
  white-space: nowrap;
  user-select: none;
  outline: none;
}
.erpiq-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(13,148,136,.3);
}
.erpiq-btn--primary {
  background: var(--erpiq-primary);
  color: var(--erpiq-white);
  padding: 12px 28px;
  border-radius: var(--erpiq-radius-lg);
}
.erpiq-btn--primary:hover:not(:disabled) {
  background: var(--erpiq-primary-dark);
  box-shadow: 0 4px 14px rgba(13,148,136,.35);
}
.erpiq-btn--ghost {
  background: transparent;
  color: var(--erpiq-primary);
  border: none;
  padding: 12px 8px;
  font-size: 14px;
}
.erpiq-btn--ghost:hover:not(:disabled) {
  color: var(--erpiq-primary-dark);
}
.erpiq-btn--cta {
  background: var(--erpiq-primary);
  color: var(--erpiq-white);
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--erpiq-radius);
  width: 100%;
}
.erpiq-btn--cta:hover:not(:disabled) {
  background: var(--erpiq-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13,148,136,.4);
}
.erpiq-btn--submit {
  background: var(--erpiq-primary);
  color: var(--erpiq-white);
  padding: 13px 20px;
  font-size: 14px;
  border-radius: var(--erpiq-radius-lg);
}
.erpiq-btn--submit:hover:not(:disabled) {
  background: var(--erpiq-primary-dark);
  box-shadow: 0 6px 20px rgba(13,148,136,.4);
}
.erpiq-btn:disabled,
.erpiq-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Plans Section ──────────────────────────────────────────── */
.erpiq-plans {
  padding: 60px 20px;
}
.erpiq-plans__header {
  text-align: center;
  margin-bottom: 48px;
}
.erpiq-plans__title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  color: var(--erpiq-gray-900);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.erpiq-plans__subtitle {
  font-size: 16px;
  color: var(--erpiq-gray-500); 
  margin: 0 auto;
}
.erpiq-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

/* ── Plan Card ──────────────────────────────────────────────── */
.erpiq-plan-card {
  background: var(--erpiq-white);
  border-radius: var(--erpiq-radius-xl);
  padding: 32px 28px;
  border: 1.5px solid var(--erpiq-gray-200);
  box-shadow: var(--erpiq-shadow);
  position: relative;
  transition: 250ms ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.erpiq-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--erpiq-shadow-xl);
  border-color: var(--erpiq-primary-light);
}
.erpiq-plan-card--featured {
  border-color: var(--erpiq-primary);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12), var(--erpiq-shadow-lg);
}
.erpiq-plan-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--erpiq-primary);
  color: var(--erpiq-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-enterprise .erpiq-plan-card__badge {
  background: #1a1a2e;
}
.erpiq-plan-card__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--erpiq-gray-900);
}
.erpiq-plan-card__desc {
  font-size: 14px;
  color: var(--erpiq-gray-500);
  line-height: 1.6;
}
.erpiq-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.erpiq-plan-card__price-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--erpiq-gray-900);
}
.plan-pro .erpiq-plan-card__price-amount { color: var(--erpiq-primary); }
.erpiq-plan-card__price-period {
  font-size: 13px;
  color: var(--erpiq-gray-400);
}
.erpiq-plan-card__users {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--erpiq-gray-500);
  background: var(--erpiq-gray-50);
  padding: 8px 12px;
  border-radius: var(--erpiq-radius-sm);
}
.erpiq-plan-card__modules {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.erpiq-plan-card__modules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--erpiq-gray-600);
}
.erpiq-plan-card__modules li svg { color: var(--erpiq-primary); flex-shrink: 0; }

/* ── Modal ──────────────────────────────────────────────────── */
.erpiq-modal {
  position: fixed;
  inset: 0;
  z-index: var(--erpiq-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms ease, visibility 300ms ease;
  padding: 16px;
}
.erpiq-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.erpiq-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.erpiq-modal__container {
  position: relative;
  z-index: 1;
  background: var(--erpiq-white);
  border-radius: var(--erpiq-radius-xl);
  box-shadow: var(--erpiq-shadow-xl);
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.96) translateY(16px);
  transition: transform 300ms ease;
}
.erpiq-modal.is-open .erpiq-modal__container {
  transform: scale(1) translateY(0);
}

/* ── Modal Header — teal sólido como en el prototipo ─────────── */
.erpiq-modal__header {
  background: var(--erpiq-primary);
  padding: 22px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}
.erpiq-modal__header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.erpiq-modal__logo { display: none; } /* logo oculto — solo texto */
.erpiq-modal__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--erpiq-white);
  letter-spacing: -0.02em;
}
.erpiq-modal__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,.78);
  font-weight: 400;
}
.erpiq-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--erpiq-white);
  transition: var(--erpiq-transition);
  flex-shrink: 0;
  opacity: .8;
}
.erpiq-modal__close:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* ── Progress ────────────────────────────────────────────────── */
.erpiq-progress {
  padding: 20px 28px 0;
  flex-shrink: 0;
  background: var(--erpiq-white);
}

/* Steps row con líneas conectoras — idéntico al prototipo */
.erpiq-progress__steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 0;
}

.erpiq-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

/* Línea conectora entre steps */
.erpiq-progress__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 19px);
  right: calc(-50% + 19px);
  height: 2px;
  background: var(--erpiq-gray-200);
  z-index: 0;
  transition: background 400ms ease;
}
.erpiq-progress__step.is-done:not(:last-child)::after {
  background: var(--erpiq-primary);
}

.erpiq-progress__step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--erpiq-gray-200);
  background: var(--erpiq-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease;
  position: relative;
  z-index: 1;
}
.erpiq-progress__step-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--erpiq-gray-400);
}
.erpiq-progress__step-check { display: none; }

/* Active */
.erpiq-progress__step.is-active .erpiq-progress__step-dot {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary);
  box-shadow: 0 0 0 4px rgba(13,148,136,.15);
}
.erpiq-progress__step.is-active .erpiq-progress__step-num {
  color: var(--erpiq-white);
}

/* Done — checkmark teal */
.erpiq-progress__step.is-done .erpiq-progress__step-dot {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary);
}
.erpiq-progress__step.is-done .erpiq-progress__step-num { display: none; }
.erpiq-progress__step.is-done .erpiq-progress__step-check {
  display: block;
  color: var(--erpiq-white);
}

/* Step label — "Paso X de 5: Nombre" centrado */
.erpiq-progress__label {
  text-align: center;
  font-size: 13px;
  color: var(--erpiq-gray-500);
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--erpiq-gray-100);
}

/* Ocultar barra lineal y labels del step */
.erpiq-progress__bar { display: none; }
.erpiq-progress__step-label { display: none; }

/* ── Modal Body ──────────────────────────────────────────────── */
.erpiq-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  scroll-behavior: smooth;
}
.erpiq-modal__body::-webkit-scrollbar { width: 5px; }
.erpiq-modal__body::-webkit-scrollbar-track { background: transparent; }
.erpiq-modal__body::-webkit-scrollbar-thumb { background: var(--erpiq-gray-200); border-radius: 3px; }

/* ── Modal Footer ────────────────────────────────────────────── */
.erpiq-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-top: 1px solid var(--erpiq-gray-100);
  background: var(--erpiq-white);
  gap: 16px;
  flex-shrink: 0;
}
.erpiq-modal__footer-total {
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.erpiq-modal__footer-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1px;
}
.erpiq-modal__footer-label {
  font-size: 12px;
  color: var(--erpiq-gray-400);
  font-weight: 400;
}
.erpiq-modal__footer-amount {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--erpiq-primary);
  letter-spacing: -0.02em;
  transition: var(--erpiq-transition);
}
.erpiq-modal__footer-amount--secondary {
  font-size: 24px;
  color: var(--erpiq-gray-800);
}
.erpiq-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Step content ────────────────────────────────────────────── */
.erpiq-step {
  animation: erpiqFadeIn .2s ease;
}
@keyframes erpiqFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.erpiq-step__header { margin-bottom: 20px; }
.erpiq-step__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--erpiq-gray-900);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.erpiq-step__subtitle {
  font-size: 13px;
  color: var(--erpiq-gray-500);
}

/* ══════════════════════════════════════════════════════════════
   STEP 1 — Módulos ERP
   Cards 2 columnas: nombre, descripción, precio a la izquierda
   Radio circle a la derecha (igual al prototipo)
══════════════════════════════════════════════════════════════ */
.erpiq-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.erpiq-module-card {
  border: 1.5px solid var(--erpiq-gray-200);
  border-radius: var(--erpiq-radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color var(--erpiq-transition), background var(--erpiq-transition), box-shadow var(--erpiq-transition);
  background: var(--erpiq-white);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  user-select: none;
}
.erpiq-module-card:hover {
  border-color: var(--erpiq-primary-light);
  background: var(--erpiq-primary-bg);
}
.erpiq-module-card.is-selected {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary-bg);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}

/* Ocultar ícono emoji en paso 1 (no aparece en prototipo) */
.erpiq-module-card__icon { display: none; }

/* Contenido principal del card */
.erpiq-module-card__body {
  flex: 1;
  min-width: 0;
}
.erpiq-module-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--erpiq-gray-800);
  margin-bottom: 3px;
}
.erpiq-module-card__desc {
  font-size: 12px;
  color: var(--erpiq-gray-500);
  line-height: 1.4;
  margin-bottom: 8px;
}
.erpiq-module-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--erpiq-primary);
}
.erpiq-module-card__price small {
  font-weight: 400;
  font-size: 12px;
  color: var(--erpiq-gray-400);
}

/* Radio circle a la derecha — igual al prototipo */
.erpiq-module-card__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--erpiq-gray-300);
  background: var(--erpiq-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--erpiq-transition);
}
.erpiq-module-card.is-selected .erpiq-module-card__radio {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary);
}
.erpiq-module-card.is-selected .erpiq-module-card__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erpiq-white);
}
/* Checkmark dentro del radio en estado seleccionado */
.erpiq-module-card.is-selected .erpiq-module-card__check {
  display: flex !important;
  color: var(--erpiq-white);
}
.erpiq-module-card__check { display: none; }

/* ══════════════════════════════════════════════════════════════
   STEP 2 — Usuarios
   Display central con ícono + número + texto
   Slider de rango
   Tier cards 4 col (botones tipo pills)
══════════════════════════════════════════════════════════════ */
.erpiq-users-display {
  text-align: center;
  margin-bottom: 24px;
  padding: 8px 0;
}
.erpiq-users-display__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--erpiq-primary);
  margin-bottom: 0;
}
.erpiq-users-display__icon svg {
  flex-shrink: 0;
}
.erpiq-users-display__num {
  font-size: 42px;
  font-weight: 900;
  color: var(--erpiq-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}
.erpiq-users-display__label {
  font-size: 20px;
  color: var(--erpiq-gray-600);
  font-weight: 400;
  line-height: 1;
}

/* Slider */
.erpiq-slider-wrap {
  margin-bottom: 4px;
}
.erpiq-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--erpiq-primary) 0%,
    var(--erpiq-primary) var(--slider-pct, 4%),
    var(--erpiq-gray-200) var(--slider-pct, 4%),
    var(--erpiq-gray-200) 100%
  );
}
.erpiq-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--erpiq-primary);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(13,148,136,.2), 0 1px 4px rgba(0,0,0,.15);
  transition: box-shadow var(--erpiq-transition);
}
.erpiq-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(13,148,136,.25), 0 1px 4px rgba(0,0,0,.15);
}
.erpiq-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--erpiq-primary);
  cursor: pointer;
  border: none;
}
.erpiq-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--erpiq-gray-400);
  margin-top: 8px;
  padding: 0 2px;
}

/* Tier pills — botones rectangulares con borde */
.erpiq-user-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.erpiq-tier-card {
  border: 1.5px solid var(--erpiq-gray-200);
  border-radius: var(--erpiq-radius);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: all var(--erpiq-transition);
  background: var(--erpiq-white);
  user-select: none;
}
.erpiq-tier-card:hover {
  border-color: var(--erpiq-primary);
  color: var(--erpiq-primary);
}
.erpiq-tier-card.is-selected {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-white);
  color: var(--erpiq-primary);
  box-shadow: 0 0 0 2px rgba(13,148,136,.15);
}
.erpiq-tier-card__range {
  font-size: 16px;
  font-weight: 700;
  color: var(--erpiq-gray-700);
}
.erpiq-tier-card.is-selected .erpiq-tier-card__range {
  color: var(--erpiq-primary);
}
.erpiq-tier-card__label {
  font-size: 11px;
  color: var(--erpiq-gray-400);
  margin-top: 2px;
}
.erpiq-tier-card__mult { display: none; }

/* ══════════════════════════════════════════════════════════════
   STEP 3 — Tipo de Empresa
   Grid 2×2, ícono SVG edificio arriba, nombre, badge descuento
   Radio a la derecha arriba
══════════════════════════════════════════════════════════════ */
.erpiq-company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.erpiq-company-card {
  border: 1.5px solid var(--erpiq-gray-200);
  border-radius: var(--erpiq-radius);
  padding: 20px;
  cursor: pointer;
  transition: all var(--erpiq-transition);
  background: var(--erpiq-white);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.erpiq-company-card:hover {
  border-color: var(--erpiq-primary-light);
  background: var(--erpiq-primary-bg);
}
.erpiq-company-card.is-selected {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary-bg);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}

/* Columna izquierda con ícono + nombre + badge */
.erpiq-company-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ícono SVG edificio — estilo prototipo (gris, sin emoji) */
.erpiq-company-card__icon {
  color: var(--erpiq-gray-400);
  display: block;
  font-size: 0; /* ocultar emojis, mostrar solo SVG */
  line-height: 0;
}
.erpiq-company-card.is-selected .erpiq-company-card__icon {
  color: var(--erpiq-primary);
}

.erpiq-company-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--erpiq-gray-800);
}
.erpiq-company-card.is-selected .erpiq-company-card__name {
  color: var(--erpiq-gray-900);
}

/* Badge de descuento — pill teal */
.erpiq-company-card__discount {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--erpiq-primary);
  background: var(--erpiq-primary-muted);
  padding: 3px 10px;
  border-radius: 99px;
  width: fit-content;
}
.erpiq-company-card__discount.no-discount {
  color: var(--erpiq-gray-400);
  background: var(--erpiq-gray-100);
}

/* Radio circle arriba derecha */
.erpiq-company-card__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--erpiq-gray-300);
  background: var(--erpiq-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  transition: all var(--erpiq-transition);
}
.erpiq-company-card.is-selected .erpiq-company-card__radio {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary);
}
.erpiq-company-card.is-selected .erpiq-company-card__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erpiq-white);
}

/* Checkmark override */
.erpiq-company-card__check { display: none; }
.erpiq-company-card.is-selected .erpiq-company-card__radio .checkmark-svg {
  display: block;
  color: var(--erpiq-white);
}

/* ══════════════════════════════════════════════════════════════
   STEP 4 — Servicios Adicionales
   Grid 2×2 horizontal, nombre + descripción a izq, precio, radio derecha
══════════════════════════════════════════════════════════════ */
.erpiq-addons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.erpiq-addon-card {
  border: 1.5px solid var(--erpiq-gray-200);
  border-radius: var(--erpiq-radius);
  padding: 18px;
  cursor: pointer;
  transition: all var(--erpiq-transition);
  background: var(--erpiq-white);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.erpiq-addon-card:hover {
  border-color: var(--erpiq-primary-light);
  background: var(--erpiq-primary-bg);
}
.erpiq-addon-card.is-selected {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary-bg);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}
.erpiq-addon-card__body { flex: 1; }
.erpiq-addon-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--erpiq-gray-800);
  margin-bottom: 4px;
}
.erpiq-addon-card__desc {
  font-size: 12px;
  color: var(--erpiq-gray-500);
  line-height: 1.4;
  margin-bottom: 8px;
}
.erpiq-addon-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--erpiq-primary);
}
.erpiq-addon-card__price span {
  font-weight: 400;
  color: var(--erpiq-gray-400);
}
/* Radio a la derecha */
.erpiq-addon-card__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--erpiq-gray-300);
  background: var(--erpiq-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--erpiq-transition);
}
.erpiq-addon-card.is-selected .erpiq-addon-card__radio {
  border-color: var(--erpiq-primary);
  background: var(--erpiq-primary);
}
.erpiq-addon-card.is-selected .erpiq-addon-card__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erpiq-white);
}
/* Ocultar ícono emoji y checkmark viejo */
.erpiq-addon-card__check { display: none; }
.erpiq-addon-card__icon  { display: none; }

/* ══════════════════════════════════════════════════════════════
   STEP 5 — Resumen y Formulario
   Formulario vertical, caja resumen teal
══════════════════════════════════════════════════════════════ */

/* Caja de resumen — fondo teal claro con borde, igual al prototipo */
.erpiq-summary-box {
  background: var(--erpiq-primary-bg);
  border: 1.5px solid var(--erpiq-primary-muted);
  border-radius: var(--erpiq-radius);
  padding: 20px;
  margin-bottom: 0;
}
.erpiq-summary-box__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--erpiq-gray-800);
}
.erpiq-summary-box__header svg {
  color: var(--erpiq-primary);
  flex-shrink: 0;
}
.erpiq-summary-box__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--erpiq-gray-500);
}
.erpiq-summary-box__row .val {
  font-weight: 600;
  color: var(--erpiq-gray-700);
}
.erpiq-summary-box__row .val.is-discount {
  font-weight: 700;
  color: var(--erpiq-primary);
}
.erpiq-summary-box__divider {
  height: 1px;
  background: var(--erpiq-primary-muted);
  margin: 10px 0;
}
.erpiq-summary-box__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--erpiq-gray-900);
}
.erpiq-summary-box__total-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--erpiq-primary);
}
.erpiq-summary-box__onetime {
  font-size: 13px;
  color: var(--erpiq-primary);
  font-weight: 700;
  margin-top: 2px;
  text-align: right;
}

/* Legacy summary classes — mantenidas para compatibilidad pero ocultas */
.erpiq-summary { display: none; }

/* ── Formulario de contacto vertical ────────────────────────── */
.erpiq-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.erpiq-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.erpiq-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.erpiq-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--erpiq-gray-700);
}
.erpiq-form__label .required { color: var(--erpiq-danger); margin-left: 2px; }
.erpiq-form__input,
.erpiq-form__textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--erpiq-gray-200);
  border-radius: var(--erpiq-radius-sm);
  font-family: var(--akpager-secondary-font);
  font-size: 14px;
  color: var(--erpiq-gray-800);
  background: var(--erpiq-white);
  transition: var(--erpiq-transition);
  outline: none;
  width: 100%;
}
.erpiq-form__input::placeholder,
.erpiq-form__textarea::placeholder { color: var(--erpiq-gray-300); }
.erpiq-form__input:focus,
.erpiq-form__textarea:focus {
  border-color: var(--erpiq-primary);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}
.erpiq-form__input.has-error,
.erpiq-form__textarea.has-error {
  border-color: var(--erpiq-danger);
}
.erpiq-form__textarea { resize: vertical; min-height: 80px; }
.erpiq-form__error { font-size: 12px; color: var(--erpiq-danger); display: none; }
.erpiq-form__error.is-visible { display: block; }

/* ── Loader ─────────────────────────────────────────────────── */
.erpiq-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}
.erpiq-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--erpiq-gray-200);
  border-top-color: var(--erpiq-primary);
  border-radius: 50%;
  animation: erpiqSpin .7s linear infinite;
}
@keyframes erpiqSpin { to { transform: rotate(360deg); } }

/* ── Toast ──────────────────────────────────────────────────── */
.erpiq-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--erpiq-z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.erpiq-toast {
  background: var(--erpiq-white);
  border-radius: var(--erpiq-radius);
  padding: 14px 18px;
  box-shadow: var(--erpiq-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  max-width: 340px;
  pointer-events: auto;
  border-left: 4px solid var(--erpiq-primary);
  animation: erpiqToastIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.erpiq-toast--success { border-color: var(--erpiq-primary); }
.erpiq-toast--error   { border-color: var(--erpiq-danger); }
.erpiq-toast--warning { border-color: var(--erpiq-warning); }
.erpiq-toast.is-hiding { animation: erpiqToastOut .25s ease forwards; }
@keyframes erpiqToastIn {
  from { opacity: 0; transform: translateX(40px) scale(.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes erpiqToastOut { to { opacity: 0; transform: translateX(40px); } }
.erpiq-toast__icon { font-size: 18px; flex-shrink: 0; }

/* ── Success state ──────────────────────────────────────────── */
.erpiq-success-state {
  text-align: center;
  padding: 48px 24px;
  animation: erpiqFadeIn .4s ease;
}
.erpiq-success-state__icon {
  width: 72px;
  height: 72px;
  background: var(--erpiq-primary-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--erpiq-primary);
}
.erpiq-success-state__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--erpiq-gray-900);
  margin-bottom: 10px;
}
.erpiq-success-state__text {
  font-size: 15px;
  color: var(--erpiq-gray-500);
  max-width: 380px;
  margin: 0 auto;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .erpiq-plans__grid { grid-template-columns: 1fr; }
  .erpiq-modal { padding: 0; align-items: flex-end; }
  .erpiq-modal__container {
    max-height: 96vh;
    border-radius: var(--erpiq-radius-xl) var(--erpiq-radius-xl) 0 0;
    max-width: 100%;
  }
  .erpiq-modal__header { padding: 18px 20px; }
  .erpiq-modal__body { padding: 18px 20px; }
  .erpiq-progress { padding: 16px 20px 0; }
  .erpiq-modal__footer { padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
  .erpiq-modal__footer-total { width: 100%; justify-content: space-between; }
  .erpiq-modal__footer-actions { width: 100%; justify-content: space-between; }
  .erpiq-modal__footer-actions .erpiq-btn { flex: 1; }
  .erpiq-modules-grid { grid-template-columns: 1fr; }
  .erpiq-company-grid { grid-template-columns: 1fr; }
  .erpiq-addons-grid { grid-template-columns: 1fr; }
  .erpiq-user-tiers { grid-template-columns: repeat(2, 1fr); }
  .erpiq-form__row { grid-template-columns: 1fr; }
  .erpiq-progress__step-dot { width: 30px; height: 30px; }
}
@media (max-width: 480px) {
  .erpiq-plans { padding: 40px 16px; }
  .erpiq-user-tiers { grid-template-columns: repeat(2, 1fr); }
  .erpiq-modal__footer-amount { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════
   PLAN CARDS — Rediseño completo alineado al prototipo
   ════════════════════════════════════════════════════════════ */

/* Override card base */
.erpiq-plan-card {
  padding: 28px 24px 24px !important;
  gap: 0 !important;
}

/* Badge dark (Enterprise) */
.erpiq-plan-card__badge--dark {
  background: #1a1a2e !important;
}

/* Header */
.erpiq-plan-card__header { margin-bottom: 10px; }
.erpiq-plan-card__name {
  font-size: 24px !important;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.erpiq-plan-card__desc {
  font-size: 13px !important;
  line-height: 1.5;
}

/* Precio con prefijo */
.erpiq-plan-card__price-block { margin-bottom: 12px; }
.erpiq-plan-card__price-prefix {
  display: block;
  font-size: 12px;
  color: var(--erpiq-gray-400);
  margin-bottom: 1px;
}
.erpiq-plan-card__price {
  display: flex !important;
  align-items: baseline;
  gap: 5px;
}
.erpiq-plan-card__price-amount {
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-enterprise .erpiq-plan-card__price-amount { font-size: 26px !important; }
.erpiq-plan-card__price-period {
  align-self: flex-end;
  padding-bottom: 3px;
}

/* Usuarios */
.erpiq-plan-card__users { margin-bottom: 14px; }

/* ── Secciones de la card: Módulos / Servicios ─────────────── */
.erpiq-plan-card__section {
  margin-bottom: 12px;
}
.erpiq-plan-card__section--services {
  border-top: 1px solid var(--erpiq-gray-100);
  padding-top: 12px;
}

/* Título de sección: "MÓDULOS INCLUIDOS:" */
.erpiq-plan-card__section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--erpiq-primary);
  margin-bottom: 8px;
}

/* Lista de ítems con check */
.erpiq-plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.erpiq-plan-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--erpiq-gray-600);
  line-height: 1.4;
  padding-left: 22px;
  position: relative;
}
.erpiq-plan-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}
.erpiq-plan-card__list li svg {
  display: none;
}

/* CTA push al fondo */
.erpiq-btn--cta { margin-top: auto !important; }

/* Plan featured: CTA relleno */
.erpiq-plan-card--featured .erpiq-btn--cta {
  background: var(--erpiq-primary);
  color: var(--erpiq-white);
}
/* Plans no featured: CTA con borde teal, fondo blanco */
.erpiq-plan-card:not(.erpiq-plan-card--featured) .erpiq-btn--cta {
  background: var(--erpiq-white);
  color: var(--erpiq-primary);
  border: 1.5px solid var(--erpiq-primary);
}
.erpiq-plan-card:not(.erpiq-plan-card--featured) .erpiq-btn--cta:hover {
  background: var(--erpiq-primary-bg);
}

/* Grid: 3 columnas fijas en desktop */
.erpiq-plans__grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 1100px !important;
  align-items: stretch !important;
}
.erpiq-plans__grid .erpiq-plan-card {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .erpiq-plans__grid { grid-template-columns: 1fr !important; }
}