/*!
 * caucion-cupo.css — Solicitud de cupo de caución de alquiler
 * © 2026 Marcos Farello · Farello Asesores de Seguros · Matrícula SSN N° 71141
 * Obra original protegida por la Ley 11.723 de Propiedad Intelectual (Argentina).
 * Se permite usar, citar y enlazar la herramienta publicada en farello.com.ar;
 * NO se permite reproducirla ni replicar su lógica, su código o su presentación.
 * Condiciones: https://farello.com.ar/terminos/#propiedad-intelectual
 *
 * POR QUÉ ES UN ARCHIVO PROPIO Y NO REGLAS EN styles.css: styles.css lo cargan
 * las ~40 páginas del sitio, así que tocarlo obliga a bumpear su ?v= en todas
 * (ver la memoria farello-web-cache-busting). Este CSS lo usa UNA página, así
 * que su versión se bumpea sola. Las variables (--magenta, --ink-900, --r-md…)
 * y el marco (nav, footer, .btn, .field, .section) siguen saliendo de
 * styles.css: acá va sólo lo que es del wizard.
 */

/* ── El marco del wizard ─────────────────────────────────────────────────── */
.cup {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.cup__head {
  padding: clamp(1.1rem, 3.5vw, 1.5rem) clamp(1.1rem, 4vw, 1.8rem);
  background: var(--purple-50);
  border-bottom: 1px solid var(--border-1);
}
.cup__head h2 {
  font-size: clamp(1.1rem, 3.6vw, 1.3rem);
  font-weight: 900;
  color: var(--ink-900);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.cup__head p { margin: 0; font-size: .86rem; color: var(--fg-2); line-height: 1.5; }

/* Barra de progreso. Se lee como «paso 3 de 7» además de verse, porque en un
   celular la barra sola no dice cuánto falta. */
.cup__prog { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }
.cup__prog-txt {
  flex: none; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.cup__prog-rail { flex: 1; height: 6px; border-radius: 999px; background: var(--ink-200); overflow: hidden; }
.cup__prog-fill {
  height: 100%; border-radius: 999px; background: var(--grad-brand-soft);
  width: 0; transition: width .35s var(--ease-soft, ease);
}

.cup__body { padding: clamp(1.2rem, 4vw, 1.9rem); }

/* Los pasos. Sólo uno visible por vez: es un trámite en el celular, no un
   formulario largo para completar en una computadora. */
.cup__paso { display: none; }
.cup__paso.is-on { display: block; animation: cupIn .28s ease both; }
@keyframes cupIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cup__paso.is-on { animation: none; }
  .cup__prog-fill { transition: none; }
}

.cup__paso > h3 {
  font-size: clamp(1.15rem, 4vw, 1.4rem); font-weight: 900; color: var(--ink-900);
  margin: 0 0 .4rem; letter-spacing: -.015em;
}
.cup__paso > p.cup__intro { color: var(--fg-2); font-size: .93rem; line-height: 1.6; margin: 0 0 1.2rem; }

/* ── La cotización retomada ──────────────────────────────────────────────── */
.cup__cot {
  border: 1px solid var(--border-brand); background: var(--magenta-50);
  border-radius: var(--r-md); padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.cup__cot h4 {
  margin: 0 0 .7rem; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--magenta-700);
}
.cup__cot dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; margin: 0; }
.cup__cot dt { font-size: .86rem; color: var(--fg-2); }
.cup__cot dd { margin: 0; font-size: .9rem; font-weight: 800; color: var(--ink-900); text-align: right; font-variant-numeric: tabular-nums; }
.cup__cot dd.is-big { font-size: 1.05rem; }
.cup__cot-nota { margin: .8rem 0 0; font-size: .78rem; color: var(--fg-3); line-height: 1.5; }

/* ── Opciones tipo tarjeta (el perfil de ingresos) ───────────────────────── */
.cup__opts { display: grid; gap: .6rem; margin: 0 0 1.1rem; }
.cup__opt {
  display: flex; gap: .7rem; align-items: flex-start; text-align: left;
  width: 100%; font: inherit; cursor: pointer;
  padding: .9rem 1rem; border: 1.5px solid var(--border-1); background: #fff;
  border-radius: var(--r-md); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cup__opt:hover { border-color: var(--magenta); }
.cup__opt.is-active { border-color: var(--magenta); background: var(--magenta-100); box-shadow: 0 0 0 3px var(--magenta-100); }
.cup__opt-ico { flex: none; font-size: 1.3rem; line-height: 1.2; }
.cup__opt b { display: block; font-size: .96rem; font-weight: 800; color: var(--ink-900); }
.cup__opt span { display: block; font-size: .8rem; color: var(--fg-2); margin-top: .15rem; line-height: 1.45; }

/* ── Pills sí/no ─────────────────────────────────────────────────────────── */
.cup__pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.cup__pill {
  flex: 1 1 auto; min-width: 92px; font: inherit; font-weight: 700; font-size: .9rem;
  padding: .7rem .6rem; cursor: pointer; text-align: center;
  border: 1.5px solid var(--border-1); background: #fff; border-radius: var(--r-md);
  color: var(--fg-2); transition: all .18s ease;
}
.cup__pill:hover { border-color: var(--magenta); color: var(--magenta-700); }
.cup__pill.is-active { background: var(--grad-brand-soft); border-color: transparent; color: #fff; }

/* ── El veredicto del cupo ───────────────────────────────────────────────── */
.cup__ver {
  border-radius: var(--r-md); padding: 1rem 1.1rem; margin: 1.1rem 0 0;
  border: 1.5px solid var(--border-1); background: var(--purple-50);
}
.cup__ver.is-ok { border-color: #128C4A; background: #ECFAF1; }
.cup__ver.is-medio { border-color: #B26A00; background: #FFF6E8; }
.cup__ver.is-no { border-color: var(--magenta-700); background: var(--magenta-100); }
.cup__ver h4 { margin: 0 0 .45rem; font-size: 1rem; font-weight: 900; color: var(--ink-900); }
.cup__ver ul { margin: 0; padding-left: 1.1rem; }
.cup__ver li { font-size: .87rem; color: var(--fg-2); line-height: 1.6; }
.cup__ver b { color: var(--ink-900); }

/* ── La documentación ────────────────────────────────────────────────────── */
.cup__docs { display: grid; gap: .7rem; margin: 0 0 1rem; }
.cup__doc {
  border: 1.5px dashed var(--border-2); border-radius: var(--r-md);
  padding: .85rem 1rem; background: #fff; transition: border-color .18s ease, background .18s ease;
}
.cup__doc.is-listo { border-style: solid; border-color: #128C4A; background: #F5FCF8; }
.cup__doc-top { display: flex; gap: .7rem; align-items: baseline; justify-content: space-between; }
.cup__doc-tit { font-size: .93rem; font-weight: 800; color: var(--ink-900); }
.cup__doc-req { flex: none; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); }
.cup__doc-ay { font-size: .8rem; color: var(--fg-2); line-height: 1.5; margin: .25rem 0 .7rem; }
.cup__doc-ay a { color: var(--magenta-700); font-weight: 700; }

/* El botón de subir. Alto de dedo: esta gente carga fotos desde el celular. */
.cup__up {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 700;
  font-size: .88rem; padding: .7rem 1rem; cursor: pointer; color: var(--purple-700);
  background: #fff; border: 1.5px solid var(--border-2); border-radius: var(--r-md);
  transition: all .18s ease; min-height: 44px;
}
.cup__up:hover { border-color: var(--magenta); color: var(--magenta-700); }
.cup__up.is-subiendo { opacity: .65; pointer-events: none; }
.cup__up input[type=file] { display: none; }

.cup__files { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.cup__file {
  display: flex; align-items: center; gap: .5rem; font-size: .83rem; color: var(--fg-2);
  background: var(--purple-50); border-radius: var(--r-sm); padding: .4rem .6rem;
}
.cup__file b { color: var(--ink-900); font-weight: 700; overflow-wrap: anywhere; }
.cup__file-x {
  margin-left: auto; flex: none; font: inherit; font-size: .8rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--fg-3); padding: .3rem .4rem;
}
.cup__file-x:hover { color: var(--magenta-700); }

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.cup__msg { margin: .6rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--fg-2); }
.cup__msg.is-malo { color: var(--magenta-700); font-weight: 600; }
.cup__err {
  margin: 1rem 0 0; padding: .7rem .9rem; border-radius: var(--r-md);
  background: var(--magenta-100); color: var(--magenta-700); font-size: .87rem; font-weight: 700;
}

/* ── Navegación entre pasos ──────────────────────────────────────────────── */
.cup__nav { display: flex; gap: .6rem; align-items: center; margin-top: 1.4rem; }
.cup__nav .btn { min-height: 48px; }
.cup__next { flex: 1; justify-content: center; }
.cup__back {
  flex: none; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  background: none; border: 0; color: var(--fg-3); padding: .6rem .4rem;
}
.cup__back:hover { color: var(--magenta-700); }

/* ── La pantalla de cierre ───────────────────────────────────────────────── */
.cup__fin { text-align: center; }
.cup__fin-ico {
  width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.9rem; color: #fff;
  background: var(--grad-brand-soft);
}
.cup__pre {
  text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.6; color: var(--fg-2);
  background: var(--purple-50); border: 1px solid var(--border-1);
  border-radius: var(--r-md); padding: .9rem 1rem; margin: 0 0 .8rem;
  max-height: 46vh; overflow: auto;
}
.cup__fin .cup__nav { flex-direction: column; }
.cup__fin .cup__nav .btn { width: 100%; justify-content: center; }

/* ── Notas al pie del wizard ─────────────────────────────────────────────── */
.cup__nota {
  margin: 1rem 0 0; font-size: .78rem; color: var(--fg-3); line-height: 1.6;
}
.cup__nota .chev { color: var(--magenta); font-weight: 900; }

/* El aviso de «no firmás nada». Va arriba del wizard y repetido al enviar:
   es la objeción número uno de alguien que todavía no alquiló. */
.cup__libre {
  display: flex; gap: .7rem; align-items: flex-start; max-width: 720px; margin: 0 auto 1.2rem;
  padding: .85rem 1rem; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--border-brand);
}
.cup__libre-ico { flex: none; font-size: 1.1rem; }
.cup__libre p { margin: 0; font-size: .85rem; color: var(--fg-2); line-height: 1.55; }
.cup__libre strong { color: var(--ink-900); font-weight: 800; }

@media (min-width: 620px) {
  .cup__docs { gap: .8rem; }
  .cup__fin .cup__nav { flex-direction: row; }
}