/*
 * markmelo-cotizador — cotizador.css
 * Estilos del cotizador (cargados solo cuando el shortcode está presente).
 * Complementa los estilos del child theme (main.css).
 */

/* Los estilos del cotizador están centralizados en el child theme (main.css).
   Este archivo es el punto de entrada del plugin, aquí van overrides
   específicos si el plugin se usa en un tema diferente a markmelo-child.
*/

.markmelo-cotizador *,
.markmelo-cotizador *::before,
.markmelo-cotizador *::after {
  box-sizing: border-box;
}

/* Asegurar que el cotizador se vea bien aunque el tema padre no sea markmelo-child */
.markmelo-cotizador {
  --color-primary-500: #6401B5;
  --color-primary-100: #e8ccf9;
  --color-primary-50:  #f7effe;
  --color-accent-500:  #f05215;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-md: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  font-family: var(--font-body);
}

/* Lista de productos del cotizador */
.cotizador-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0edf8;
}

.cotizador-item__thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid #eee;
  background: #f5f5f5;
}

.cotizador-item__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cotizador-item__nombre {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
  font-weight: 600;
  color: #1f2937;
}

.cotizador-item__meta {
  font-size: .73rem;
  color: #888;
}

.cotizador-item__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cotizador-item__cantidad {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cotizador-item__cantidad input {
  width: 60px;
  text-align: center;
}

.cotizador-item__precio {
  font-weight: 700;
  color: #6401B5;
  white-space: nowrap;
  min-width: 64px;
  text-align: right;
}

/* Mobile: controles debajo del nombre */
@media (max-width: 640px) {
  .cotizador-item {
    flex-wrap: wrap;
  }
  .cotizador-item__thumb {
    width: 48px;
    height: 48px;
    align-self: flex-start;
  }
  .cotizador-item__info {
    /* Ocupa el ancho disponible junto al thumb en la primera fila */
    flex-basis: calc(100% - 60px);
  }
  .cotizador-item__controls {
    /* Segunda fila: se alinea bajo el info (deja espacio del thumb) */
    margin-left: 54px;
    flex: 1;
    justify-content: space-between;
  }
  .cotizador-item__cantidad input {
    width: 48px;
  }
}

/* Mensaje paso 2 (inyectado por JS) */
.cotizador-marcacion-msg {
  background: #f5f3ff;
  border-left: 4px solid #6B21A8;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: .92rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.cotizador-marcacion-msg.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── BARRA DE PROGRESO ─────────────────────────────────────────── */
.mm-cot-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 1.75rem;
  padding: 0.5rem 0;
}

.mm-cot-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 1;
  max-width: 80px;
}

.mm-cot-step__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  flex-shrink: 0;
}

.mm-cot-step--active .mm-cot-step__dot {
  background: #6401B5;
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px #e8ccf9;
}

.mm-cot-step--done .mm-cot-step__dot {
  background: #16a34a;
  color: #fff;
}

.mm-cot-step__label {
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.mm-cot-step--active .mm-cot-step__label {
  color: #6401B5;
  font-weight: 700;
}

.mm-cot-step--done .mm-cot-step__label {
  color: #16a34a;
}

.mm-cot-step__line {
  position: absolute;
  top: 15px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}

.mm-cot-step--done .mm-cot-step__line {
  background: #16a34a;
}

/* ─── INTRO DE PASO ─────────────────────────────────────────────── */
.mm-cot-paso-intro {
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* ─── TARJETAS DE TÉCNICA ───────────────────────────────────────── */
.mm-tecnica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0;
}

.mm-tecnica-card {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.9rem 0.6rem 0.75rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.mm-tecnica-card:hover {
  border-color: #6401B5;
  background: #f7effe;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100,1,181,.12);
}

.mm-tecnica-card.selected {
  border-color: #6401B5;
  background: #f7effe;
  box-shadow: 0 0 0 3px #d8b4fe;
}

.mm-tecnica-card--skip {
  border-style: dashed;
  order: -1;
}

.mm-tecnica-card__icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.mm-tecnica-card__nombre {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f2937;
  display: block;
  line-height: 1.3;
}

.mm-tecnica-card__desc {
  font-size: 0.65rem;
  color: #6b7280;
  line-height: 1.35;
  display: block;
}

/* ─── CAMPOS DE FORMULARIO ──────────────────────────────────────── */
.form-field--full {
  grid-column: 1 / -1;
}

.mm-field-tip {
  font-size: 0.68rem;
  font-weight: 400;
  color: #16a34a;
  margin-left: 0.4rem;
}

.mm-cot-privacy {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.75rem;
  text-align: center;
}

/* ─── PASO 4 — RESUMEN ──────────────────────────────────────────── */
.mm-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  color: #854d0e;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mm-resumen-header {
  margin-bottom: 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
}

.mm-resumen-header p { margin: 0.15rem 0; }

.mm-cot-disclaimer {
  font-size: 0.72rem;
  color: #9ca3af;
  margin: 0.4rem 0 1.25rem;
}

.mm-next-steps {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.mm-next-steps__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #15803d;
  margin: 0 0 0.65rem;
}

.mm-next-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mm-next-steps__list li {
  font-size: 0.82rem;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

.mm-next-steps__list li > span:first-child {
  flex-shrink: 0;
}

.mm-social-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.75rem;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: #6b7280;
}

.mm-social-proof span:first-child {
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* ─── PASO 2 — ASESOR DECIDE ────────────────────────────────────── */
.mm-paso2-asesor {
  text-align: center;
  padding: 1.5rem 1rem 1rem;
}

.mm-paso2-asesor__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.mm-paso2-asesor__titulo {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.75rem;
}

.mm-paso2-asesor__desc {
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.mm-paso2-asesor__puntos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  max-width: 360px;
  margin: 0 auto;
  background: #f7effe;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.mm-paso2-punto {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.87rem;
  color: #374151;
  line-height: 1.4;
}

.mm-paso2-punto > span:first-child {
  flex-shrink: 0;
  font-size: 1rem;
}

/* Forzar ocultamiento de botones de navegación cuando hidden — evita override por .btn { display:flex } */
.cotizador-nav [hidden] {
  display: none !important;
}

/* ─── BOTÓN SUBMIT GRANDE ───────────────────────────────────────── */
.btn--lg {
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  max-width: 400px;
}

/* ─── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mm-tecnica-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mm-tecnica-card {
    padding: 0.7rem 0.4rem 0.6rem;
  }
  .mm-tecnica-card__icon  { font-size: 1.35rem; }
  .mm-tecnica-card__nombre { font-size: 0.68rem; }
  .mm-tecnica-card__desc  { display: none; }
  .mm-cot-step__label     { font-size: 0.6rem; }
}