/* =========================================
   SIMULADORES (Microcrédito + Factoraje)
   - Un solo CSS para ambos
========================================= */

/* Layout */
.grid{
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0 4rem;
}
@media (min-width: 980px){
  .grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .full{ grid-column: 1 / -1; }
}

/* Headers en cards */
.cardHeader h2{ margin: 0; }
.cardHeader p{
  margin: .35rem 0 0;
  color: var(--muted);
}

/* Form base */
.form{
  display: grid;
  gap: 1.1rem;
  margin-top: 1.25rem;
}

.field{
  display: grid;
  gap: 0.4rem;
}

.moneyInput{
  display:flex;
  align-items:center;
  gap:.6rem;
  border:1px solid var(--border);
  border-radius:16px;
  padding:.75rem .9rem;
  background: rgba(255,255,255,.85);
}

.moneyInput .prefix{
  color: rgba(30,30,30,.55);
  font-weight: 700;
  font-size: .9rem;
}

.moneyInput input{
  border:0;
  outline:0;
  width:100%;
  font-size: 1rem;
  background: transparent;
  color: var(--brand-gray);
}

.inline{
  display:flex;
  gap:.6rem;
  align-items:center;
}
.inline input{
  width: 110px;
  padding:.75rem .9rem;
  border:1px solid var(--border);
  border-radius:16px;
  outline:0;
}
.suffix{
  color: rgba(30,30,30,.55);
  font-weight: 600;
}

.hint{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color: rgba(30,30,30,.55);
  font-size:.9rem;
}

.quick{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.chip{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:.55rem .9rem;
  cursor:pointer;
  font-weight: 600;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}

.field2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.readonlyBox{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: .9rem;
  background: rgba(255,255,255,.75);
}
.readonlyBox span{
  display:block;
  color: rgba(30,30,30,.55);
  font-size: .9rem;
  font-weight: 600;
}
.readonlyBox strong{
  display:block;
  margin-top:.25rem;
  color: var(--brand-gray);
  font-size: 1.05rem;
}

.actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.btn.secondary{
  background:#fff;
  border:1px solid var(--border);
  color: var(--brand-gray);
}

/* Gate: disabled */
button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* Results */
.results{
  display:grid;
  gap: 1rem;
  margin-top: 1.25rem;
}
.big span{
  display:block;
  color: rgba(30,30,30,.55);
  font-weight: 700;
  font-size: .95rem;
}
.big strong{
  display:block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--brand-green);
}
.rows{
  display:grid;
  gap:.7rem;
}
.row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem .85rem;
  border:1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
}
.row span{
  color: rgba(30,30,30,.65);
  font-weight: 600;
}
.row strong{
  color: var(--brand-gray);
}
.note{
  color: rgba(30,30,30,.6);
  font-size: .95rem;
  line-height:1.6;
}
.ctaBlock{
  margin-top: .35rem;
}

/* Tables */
.tableWrap{ overflow:auto; }
.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  text-align:left;
  padding:.85rem .75rem;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}

/* Lead form */
.leadForm{ margin-top: 1.25rem; }

.leadGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 820px){
  .leadGrid{ grid-template-columns: 1fr 1fr; }
  .field--full{ grid-column: 1 / -1; }
}

.textarea{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:16px;
  outline:0;
  background: rgba(255,255,255,.85);
  color: var(--brand-gray);
}

.check{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  color: rgba(30,30,30,.65);
  font-weight: 600;
  font-size: .95rem;
}

/* Messages */
.msg{
  margin-top:.5rem;
  font-weight: 700;
  color: rgba(30,30,30,.7);
}

/* Footer */
.footer{
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--border);
}

/* WhatsApp FAB */
.waFab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-green), #6fa10b);
  color: #fff;
  box-shadow: 0 18px 38px rgba(90,137,6,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.waFab:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 24px 48px rgba(90,137,6,.5);
}
.waFab:active{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 28px rgba(90,137,6,.35);
}
.waFab__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.waFab__text{ font-weight: 800; }
@media (max-width: 420px){
  .waFab__text{ display:none; }
  .waFab{ padding:.85rem; }
}

/* =========================
   RANGE – centrado + fill correcto
========================= */

input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--brand-green) 0%,
    var(--brand-green) var(--fill, 0%),
    rgba(90,137,6,.18) var(--fill, 0%),
    rgba(90,137,6,.18) 100%
  );
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-green);
  box-shadow:
    0 0 0 3px #fff,
    0 10px 22px rgba(90,137,6,.25);
  margin-top: -7px;
}

/* Firefox */
input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(90,137,6,.18);
}

input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: var(--brand-green);
}

input[type="range"]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-green);
  box-shadow:
    0 0 0 3px #fff,
    0 10px 22px rgba(90,137,6,.25);
  border: none;
}