/* ==========================================================================
   Estimador Express de Presupuesto — widget embebible
   Depende de tokens.css (variables --tripsy-*). Sin build step.
   Todo va namespaced bajo .iris-est para poder embeberlo en cualquier
   página (home, guías del bucket, tripsy-web) sin colisionar estilos.
   ========================================================================== */

.iris-est {
  --est-gap: var(--sp-4, 16px);
  font-family: var(--font-body, 'Montserrat', sans-serif);
  color: var(--tripsy-text, #1d1d1f);
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-8, 32px) var(--sp-5, 20px);
  box-sizing: border-box;
}

.iris-est *,
.iris-est *::before,
.iris-est *::after { box-sizing: border-box; }

/* ---------- Encabezado ---------- */

.iris-est__head { text-align: center; margin-bottom: var(--sp-6, 24px); }

.iris-est__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  font-size: var(--fs-caption, 13px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--tripsy-teal-deep, #3E8B89);
  margin-bottom: var(--sp-3, 12px);
}

.iris-est__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tripsy-teal, #59BDB9);
}

.iris-est__title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-display, clamp(32px, 4.2vw, 56px));
  font-weight: var(--fw-regular, 400);
  line-height: var(--lh-tight, 1.08);
  letter-spacing: var(--ls-display, -0.01em);
  margin: 0 0 var(--sp-3, 12px);
}

.iris-est__title em {
  font-style: italic;
  color: var(--tripsy-teal-deep, #3E8B89);
}

.iris-est__sub {
  font-size: var(--fs-body, 16px);
  line-height: var(--lh-normal, 1.5);
  color: var(--tripsy-text-muted, #6e6e73);
  margin: 0 auto;
  max-width: 54ch;
}

/* ---------- Formulario ---------- */

.iris-est__form {
  display: grid;
  /* 5 columnas = origen · destino · mes · noches · botón (una sola fila). */
  grid-template-columns: 1.3fr 1.3fr 1fr 88px auto;
  gap: var(--est-gap);
  align-items: end;
  background: var(--tripsy-surface, #fff);
  border: 1px solid var(--tripsy-border, rgba(0,0,0,0.08));
  border-radius: var(--r-xl, 28px);
  padding: var(--sp-5, 20px);
  box-shadow: var(--sh-md, 0 6px 16px rgba(0,0,0,0.08));
}

.iris-est__field { display: flex; flex-direction: column; gap: var(--sp-2, 8px); min-width: 0; }

.iris-est__label {
  font-size: var(--fs-caption, 13px);
  font-weight: var(--fw-semibold, 600);
  color: var(--tripsy-text-muted, #6e6e73);
  padding-left: var(--sp-3, 12px);
}

.iris-est__input,
.iris-est__select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body, 16px);
  color: var(--tripsy-text, #1d1d1f);
  background: var(--tripsy-bg, #F7F3F0);
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  padding: 13px var(--sp-4, 16px);
  transition: border-color .18s var(--ease-out, ease), background .18s;
  -webkit-appearance: none;
  appearance: none;
}

.iris-est__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
  cursor: pointer;
}

.iris-est__input:focus,
.iris-est__select:focus {
  outline: none;
  background: var(--tripsy-white, #fff);
  border-color: var(--tripsy-teal, #59BDB9);
  box-shadow: 0 0 0 3px rgba(89,189,185,0.18);
}

.iris-est__input::placeholder { color: var(--tripsy-text-subtle, #9a9aa0); }

.iris-est__submit {
  font-family: inherit;
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-semibold, 600);
  color: var(--tripsy-text-onTeal, #fff);
  background: var(--tripsy-teal, #59BDB9);
  border: none;
  border-radius: var(--r-pill, 999px);
  padding: 14px var(--sp-8, 32px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease-out, ease), transform .18s var(--ease-out, ease);
}

.iris-est__submit:hover:not(:disabled) {
  background: var(--tripsy-teal-dark, #4AA3A0);
  transform: translateY(-1px);
}

.iris-est__submit:disabled { opacity: .55; cursor: default; }

/* ---------- Estados ---------- */

.iris-est__status {
  margin-top: var(--sp-5, 20px);
  text-align: center;
  font-size: var(--fs-body-sm, 14px);
  color: var(--tripsy-text-muted, #6e6e73);
  line-height: var(--lh-normal, 1.5);
}

.iris-est__status[hidden] { display: none; }

.iris-est__spinner {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: var(--sp-2, 8px);
  vertical-align: -3px;
  border: 2px solid rgba(89,189,185,0.25);
  border-top-color: var(--tripsy-teal, #59BDB9);
  border-radius: 50%;
  animation: iris-est-spin .8s linear infinite;
}

@keyframes iris-est-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .iris-est__spinner { animation-duration: 2.4s; }
  .iris-est__submit:hover:not(:disabled) { transform: none; }
  .iris-est__dock { animation: none; }
}

.iris-est__status--error { color: var(--tripsy-danger, #C64545); }

/* Sugerencias de desambiguación */
.iris-est__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  justify-content: center;
  margin-top: var(--sp-3, 12px);
}

.iris-est__chip {
  font-family: inherit;
  font-size: var(--fs-body-sm, 14px);
  font-weight: var(--fw-medium, 500);
  color: var(--tripsy-teal-deep, #3E8B89);
  background: var(--tripsy-teal-soft, #EAF7F6);
  border: 1px solid rgba(89,189,185,0.35);
  border-radius: var(--r-pill, 999px);
  padding: 8px var(--sp-4, 16px);
  cursor: pointer;
  transition: background .18s;
}

.iris-est__chip:hover { background: #d8f0ee; }

/* ---------- Resultado ---------- */

.iris-est__result { margin-top: var(--sp-8, 32px); }
.iris-est__result[hidden] { display: none; }

.iris-est__assumptions {
  text-align: center;
  font-size: var(--fs-body-sm, 14px);
  color: var(--tripsy-text-muted, #6e6e73);
  margin-bottom: var(--sp-5, 20px);
}

.iris-est__assumptions strong { color: var(--tripsy-text, #1d1d1f); font-weight: var(--fw-semibold, 600); }

.iris-est__note {
  display: block;
  margin-top: var(--sp-2, 8px);
  font-size: var(--fs-caption, 13px);
  font-style: italic;
  color: var(--tripsy-text-subtle, #9a9aa0);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.iris-est__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--est-gap);
}

.iris-est__card {
  background: var(--tripsy-surface, #fff);
  border: 1px solid var(--tripsy-border, rgba(0,0,0,0.08));
  border-radius: var(--r-xl, 28px);
  padding: var(--sp-6, 24px);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s var(--ease-out, ease), transform .2s var(--ease-out, ease);
}

.iris-est__card:hover { box-shadow: var(--sh-lg, 0 12px 32px rgba(0,0,0,0.10)); }

/* El nivel medio es el ancla de lectura — el spec lo trata como el caso
   típico, así que se destaca sin ser un "recomendado" comercial. */
.iris-est__card--mid {
  border-color: rgba(89,189,185,0.45);
  box-shadow: var(--sh-md, 0 6px 16px rgba(0,0,0,0.08));
}

.iris-est__tier {
  font-size: var(--fs-caption, 13px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--tripsy-text-muted, #6e6e73);
  margin-bottom: var(--sp-2, 8px);
}

.iris-est__card--mid .iris-est__tier { color: var(--tripsy-teal-deep, #3E8B89); }

.iris-est__total {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 30px;
  line-height: 1.15;
  font-weight: var(--fw-medium, 500);
  margin-bottom: var(--sp-1, 4px);
}

.iris-est__total-cap {
  font-size: var(--fs-caption, 13px);
  color: var(--tripsy-text-subtle, #9a9aa0);
  margin-bottom: var(--sp-5, 20px);
}

.iris-est__lines {
  list-style: none;
  margin: 0 0 var(--sp-5, 20px);
  padding: 0;
  border-top: 1px solid var(--tripsy-hairline, rgba(0,0,0,0.08));
}

.iris-est__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3, 12px);
  padding: 11px 0;
  border-bottom: 1px solid var(--tripsy-hairline, rgba(0,0,0,0.08));
  font-size: var(--fs-body-sm, 14px);
}

.iris-est__line-k { color: var(--tripsy-text-muted, #6e6e73); }
.iris-est__line-v { font-weight: var(--fw-semibold, 600); white-space: nowrap; }

.iris-est__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  margin-top: auto;
}

.iris-est__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: var(--fs-body-sm, 14px);
  font-weight: var(--fw-semibold, 600);
  border-radius: var(--r-pill, 999px);
  padding: 11px var(--sp-4, 16px);
  transition: background .18s, border-color .18s;
}

.iris-est__cta--primary {
  color: var(--tripsy-text-onTeal, #fff);
  background: var(--tripsy-teal, #59BDB9);
}

.iris-est__cta--primary:hover { background: var(--tripsy-teal-dark, #4AA3A0); }

.iris-est__cta--ghost {
  color: var(--tripsy-teal-deep, #3E8B89);
  background: transparent;
  border: 1px solid rgba(89,189,185,0.4);
}

.iris-est__cta--ghost:hover { background: var(--tripsy-teal-soft, #EAF7F6); }

/* "Ver vuelos"/"Ver hoteles" son <button> cuando despliegan el buscador
   embebido (los links externos siguen siendo <a>). */
button.iris-est__cta {
  font-family: inherit;
  border: none;
  cursor: pointer;
  width: 100%;
}

button.iris-est__cta--ghost { border: 1px solid rgba(89,189,185,0.4); }

.iris-est__cta.is-open { box-shadow: inset 0 0 0 2px rgba(62,139,137,0.35); }

/* ---------- Buscador embebido (Kiwi / Expedia) ---------- */

.iris-est__dock {
  grid-column: 1 / -1;
  background: var(--tripsy-surface, #fff);
  border: 1px solid rgba(89,189,185,0.45);
  border-radius: var(--r-xl, 28px);
  padding: var(--sp-5, 20px);
  animation: iris-est-dock-in .28s var(--ease-out, ease);
}

.iris-est__dock[hidden] { display: none; }

@keyframes iris-est-dock-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.iris-est__dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}

.iris-est__dock-title {
  font-size: var(--fs-caption, 13px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--tripsy-teal-deep, #3E8B89);
}

.iris-est__dock-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--tripsy-text-muted, #6e6e73);
  background: var(--tripsy-bg, #F7F3F0);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.iris-est__dock-close:hover {
  background: var(--tripsy-teal-soft, #EAF7F6);
  color: var(--tripsy-teal-deep, #3E8B89);
}

.iris-est__dock-pane[hidden] { display: none; }
.iris-est__dock-pane iframe { max-width: 100%; }

/* Iframe del widget de Expedia. Altura fija: deja aire para el datepicker
   del widget (que abre dentro de su viewport) y hay scroll interno si no
   alcanza. Si Expedia revive su protocolo de resize, el JS la ajusta. */
.iris-est__dock-frame {
  display: block;
  width: 100%;
  height: 480px;
  border: none;
  transition: height .2s var(--ease-out, ease);
}

.iris-est__dock-fallback {
  margin: var(--sp-3, 12px) 0 0;
  font-size: var(--fs-body-sm, 14px);
  color: var(--tripsy-text-muted, #6e6e73);
}

.iris-est__dock-fallback a {
  color: var(--tripsy-teal-deep, #3E8B89);
  font-weight: var(--fw-semibold, 600);
}

/* ---------- Pie: confianza + planificar con Iris ---------- */

.iris-est__foot {
  margin-top: var(--sp-6, 24px);
  text-align: center;
}

.iris-est__plan {
  display: inline-block;
  text-decoration: none;
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-semibold, 600);
  color: var(--tripsy-text-onTeal, #fff);
  background: var(--grad-iris-chip, linear-gradient(135deg, #59BDB9 0%, #4AA3A0 100%));
  border-radius: var(--r-pill, 999px);
  padding: 14px var(--sp-8, 32px);
  box-shadow: var(--sh-float, 0 12px 28px rgba(0,0,0,0.10));
  transition: transform .18s var(--ease-out, ease);
}

.iris-est__plan:hover { transform: translateY(-2px); }

.iris-est__disclaimer {
  margin-top: var(--sp-4, 16px);
  font-size: var(--fs-caption, 13px);
  color: var(--tripsy-text-subtle, #9a9aa0);
  line-height: var(--lh-normal, 1.5);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  /* Dos filas: origen+destino arriba, mes+noches abajo, botón a lo ancho. */
  .iris-est__form { grid-template-columns: 1fr 1fr 88px; }
  .iris-est__form > .iris-est__field:nth-child(1),
  .iris-est__form > .iris-est__field:nth-child(2) { grid-column: span 3; }
  .iris-est__submit { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .iris-est__cards { grid-template-columns: 1fr; }
  .iris-est__card--mid { order: -1; }
}

@media (max-width: 560px) {
  .iris-est { padding: var(--sp-6, 24px) var(--sp-4, 16px); }
  .iris-est__form {
    grid-template-columns: 1fr 1fr;
    border-radius: var(--r-lg, 20px);
    padding: var(--sp-4, 16px);
  }
  .iris-est__form > .iris-est__field:nth-child(1),
  .iris-est__form > .iris-est__field:nth-child(2) { grid-column: span 2; }
  .iris-est__total { font-size: 26px; }
}