/*
 * Nexora — quote.css
 * Ventana emergente "Cotizar".
 *
 * Toma los colores del tema: en las vistas de Tienda usa el azul del mockup
 * (#2563EB / #3B82F6) y en el resto del sitio el color primario del
 * Customizer, para que encaje en las dos partes sin duplicar diseño.
 * Radios, sombras y tipografía copiados del hero de la Tienda.
 */

.nx-quote {
  --nx-q:        var(--nx-primary, #5B5CFF);
  --nx-q-2:      var(--nx-primary-h, #4a4bef);
  --nx-q-ink:    #0F172A;
  --nx-q-sub:    #64748B;
  --nx-q-border: #E2E8F0;
  --nx-q-field:  #F8FAFC;

  position: fixed;
  inset: 0;
  z-index: 100000;             /* por encima del header fijo (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.nx-tienda-page .nx-quote,
.nx-quote.is-tienda { --nx-q: #2563EB; --nx-q-2: #3B82F6; }

.nx-quote[hidden] { display: none; }

.nx-quote-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s ease;
}
.nx-quote.is-open .nx-quote-backdrop { opacity: 1; }

.nx-quote-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,.35);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;
}
.nx-quote.is-open .nx-quote-dialog { transform: none; opacity: 1; }

/* ── Cabecera ── */
.nx-quote-head {
  position: relative;
  background: linear-gradient(135deg, var(--nx-q) 0%, var(--nx-q-2) 100%);
  color: #fff;
  padding: 26px 26px 24px;
  flex-shrink: 0;
}
.nx-quote-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  font-size: 12px; font-weight: 600; line-height: 1.33;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.nx-quote-title  { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 6px; color: #fff; }
.nx-quote-sub    { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; padding-right: 28px; }
.nx-quote-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.nx-quote-close:hover { background: rgba(255,255,255,.32); }
.nx-quote-close svg { width: 16px; height: 16px; }

/* ── Cuerpo ── */
.nx-quote-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.nx-quote-body { padding: 22px 26px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nx-quote-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nx-quote-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.nx-quote-field label { font-size: 13px; font-weight: 600; color: var(--nx-q-ink); }
.nx-quote-field label span { color: var(--nx-q); }

.nx-quote-field input,
.nx-quote-field textarea,
.nx-quote-select select {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--nx-q-ink);
  background: var(--nx-q-field);
  border: 1px solid var(--nx-q-border);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.nx-quote-field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.nx-quote-field input::placeholder,
.nx-quote-field textarea::placeholder { color: #94A3B8; }
.nx-quote-field input:focus,
.nx-quote-field textarea:focus,
.nx-quote-select select:focus {
  outline: none;
  background: #fff;
  border-color: var(--nx-q);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-q) 18%, transparent);
}
.nx-quote-field input.is-invalid,
.nx-quote-field textarea.is-invalid { border-color: #EF4444; background: #FEF2F2; }

/* Select con flecha propia (los nativos se ven distintos en cada sistema) */
.nx-quote-select { position: relative; }
.nx-quote-select select { padding-right: 40px; cursor: pointer; }
.nx-quote-select svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--nx-q-sub); pointer-events: none;
}

.nx-quote-feedback { font-size: 13.5px; line-height: 1.5; min-height: 20px; margin-bottom: 6px; }
.nx-quote-feedback.is-ok  { color: #059669; font-weight: 600; }
.nx-quote-feedback.is-err { color: #DC2626; font-weight: 600; }

/* ── Pie ── */
.nx-quote-foot {
  padding: 14px 26px 22px;
  border-top: 1px solid #F1F5F9;
  background: #fff;
  flex-shrink: 0;
}
.nx-quote-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--nx-q) 0%, var(--nx-q-2) 100%);
  border: 0; border-radius: 16px; padding: 14px 20px; cursor: pointer;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--nx-q) 30%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.nx-quote-submit:hover  { transform: translateY(-1px); box-shadow: 0 14px 22px -6px color-mix(in srgb, var(--nx-q) 40%, transparent); }
.nx-quote-submit:active { transform: none; }
.nx-quote-submit[disabled] { opacity: .65; cursor: wait; transform: none; }

.nx-quote-spinner { display: none; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: nx-quote-spin .7s linear infinite; }
.nx-quote-submit.is-loading .nx-quote-spinner { display: block; }
@keyframes nx-quote-spin { to { transform: rotate(360deg); } }

.nx-quote-wa {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; font-size: 13.5px; font-weight: 600; color: #16A34A;
  text-decoration: none;
}
.nx-quote-wa:hover { color: #15803D; text-decoration: underline; }
.nx-quote-wa svg { width: 17px; height: 17px; flex-shrink: 0; }

body.nx-quote-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nx-quote-dialog, .nx-quote-backdrop, .nx-quote-submit { transition: none !important; }
  .nx-quote-spinner { animation: none !important; }
}

/* ── Móvil: hoja que sube desde abajo ── */
@media (max-width: 560px) {
  .nx-quote { padding: 0; align-items: flex-end; }
  .nx-quote-dialog {
    max-width: none;
    max-height: 92dvh;
    border-radius: 26px 26px 0 0;
    transform: translateY(100%);
  }
  .nx-quote.is-open .nx-quote-dialog { transform: none; }
  .nx-quote-head { padding: 22px 20px 20px; }
  .nx-quote-title { font-size: 20px; }
  .nx-quote-body { padding: 20px 20px 4px; }
  .nx-quote-row  { grid-template-columns: 1fr; gap: 0; }
  .nx-quote-foot { padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); }
  /* iOS hace zoom si la fuente del campo baja de 16px */
  .nx-quote-field input,
  .nx-quote-field textarea,
  .nx-quote-select select { font-size: 16px; }
}