/* =============================================================
   Calculadora de suelo — invalue
   Hereda tokens de styles.css y los componentes de formulario.css
   ============================================================= */

/* El resultado va seguido, no es un paso de un asistente */
.fm-form .calc-res { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--hair); }

/* "(opcional)" al lado de la etiqueta, no debajo: si no, descuadra la rejilla */
.fm-opt { font-weight: 500; color: var(--tx-mute); }

/* ---- Campo con unidad ---- */
.calc-input { position: relative; }
.calc-input input { padding-right: 3.4rem !important; }
.calc-unidad {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: .82rem; font-weight: 700; color: var(--tx-mute); pointer-events: none;
}

/* ---- Precio: zona + importe ---- */
.calc-precio { display: grid; gap: .7rem; }
@media (min-width: 660px) { .calc-precio { grid-template-columns: 1.35fr 1fr; } }
.calc-precio select {
  width: 100%; padding: .85rem 2.6rem .85rem 1rem;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: rgba(8,15,28,.45); color: var(--tx);
  font-family: var(--sans); font-size: .96rem;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23DAAB5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px;
  transition: border-color .3s, background-color .3s;
}
.calc-precio select:focus { outline: none; border-color: var(--gold); background-color: rgba(8,15,28,.7); }
.calc-precio optgroup { background: var(--navy-850); color: var(--gold); font-weight: 700; }
.calc-precio option { background: var(--navy-850); color: var(--tx); font-weight: 500; }

/* ---- Hipótesis del cálculo ---- */
.calc-hip {
  margin-top: 1.6rem; padding: 1.2rem 1.3rem;
  border-radius: var(--r-md);
  background: rgba(185,154,92,.07); border: 1px solid rgba(185,154,92,.22);
}
.calc-hip-t {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.calc-hip-list { display: grid; gap: .8rem; }
@media (min-width: 620px) { .calc-hip-list { grid-template-columns: repeat(4, 1fr); } }
.calc-hip-list li { display: flex; flex-direction: column; gap: .1rem; font-size: .76rem; color: var(--tx-mute); line-height: 1.35; }
.calc-hip-list b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--gold-bright); }

/* ---- Resultado ---- */
.calc-big {
  text-align: center; padding: 1.8rem 1.2rem;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(185,154,92,.16), rgba(244,242,237,.03));
  border: 1px solid rgba(185,154,92,.34);
}
.calc-big-k {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.calc-big-v {
  display: block; margin-top: .6rem;
  font-size: clamp(2.1rem, 5.4vw, 3.2rem); font-weight: 800; letter-spacing: -.045em;
  line-height: 1; color: var(--tx);
}
.calc-big-u { display: block; margin-top: .6rem; font-size: .85rem; color: var(--tx-mute); }

.calc-aviso {
  margin-top: 1rem; padding: .85rem 1.05rem; border-radius: var(--r-sm);
  background: rgba(224,138,115,.1); border: 1px solid rgba(224,138,115,.34); color: #E08A73;
}

/* ---- Desglose ---- */
.calc-desglose, .calc-notas {
  margin-top: 1.6rem; padding: 1.3rem 1.4rem;
  border-radius: var(--r-md); background: rgba(8,15,28,.4); border: 1px solid var(--hair);
}
.calc-lin { display: grid; gap: .1rem; }
.calc-lin > div {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--hair);
}
.calc-lin > div:last-child { border-bottom: 0; }
.calc-lin dt { flex: 1 1 auto; font-size: .88rem; color: var(--tx-soft); }
.calc-lin dd { flex: none; font-size: .95rem; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.calc-lin .is-plus dd { color: #8FCB96; }
.calc-lin .is-minus dd { color: var(--tx-mute); }
.calc-lin .is-total { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid rgba(185,154,92,.4); border-bottom: 0; }
.calc-lin .is-total dt { font-weight: 700; color: var(--tx); }
.calc-lin .is-total dd { font-size: 1.15rem; color: var(--gold-bright); }

/* ---- Notas ---- */
.calc-notas-list { display: grid; gap: 1.1rem; counter-reset: nota; list-style: none; }
.calc-notas-list li {
  position: relative; padding-left: 2.1rem;
  font-size: .87rem; color: var(--tx-mute); line-height: 1.55;
}
.calc-notas-list li::before {
  counter-increment: nota; content: counter(nota);
  position: absolute; left: 0; top: .05em;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 800;
  background: rgba(185,154,92,.14); border: 1px solid rgba(185,154,92,.3); color: var(--gold-bright);
}
.calc-notas-list b { display: block; margin-bottom: .2rem; font-size: .9rem; font-weight: 700; color: var(--tx); }

.calc-res .res-cta { margin-top: 1.8rem; }
.calc-res .res-legal { margin-top: 1.2rem; }

/* ---- Filas remarcadas del resumen ---- */
.calc-lin .is-mark {
  margin: .35rem -.7rem; padding: .75rem .7rem;
  border-radius: var(--r-sm); border-bottom: 0;
}
.calc-lin .is-mark dt { font-weight: 700; color: var(--tx); }
.calc-lin .is-mark dd { font-size: 1.05rem; }
.calc-lin .is-mark.is-plus { background: rgba(143,203,150,.12); border: 1px solid rgba(143,203,150,.32); }
.calc-lin .is-mark.is-plus dt { color: #8FCB96; }
.calc-lin .is-mark.is-plus dd { color: #8FCB96; }
.calc-lin .is-mark.is-neg { background: rgba(224,138,115,.1); border: 1px solid rgba(224,138,115,.3); }
.calc-lin .is-mark.is-neg dt { color: #E08A73; }
.calc-lin .is-mark.is-neg dd { color: #E08A73; }
.calc-lin dt small { display: block; margin-top: .15rem; font-size: .74rem; color: var(--tx-mute); }

/* ---- "¿No lo sabes?" y enlaces dentro de las ayudas ---- */
.fm-field > label em a, .fm-q em a {
  color: var(--gold-bright); font-weight: 700;
  border-bottom: 1px solid rgba(218,171,94,.4);
  transition: color .3s, border-color .3s;
}
.fm-field > label em a:hover { color: var(--tx); border-color: var(--tx); }

/* ---- Bloque de dudas ---- */
.calc-dudas {
  margin-top: 1.8rem; padding: 1.4rem 1.5rem;
  border-radius: var(--r-md);
  background: rgba(185,154,92,.07); border: 1px solid rgba(185,154,92,.24);
}
.calc-dudas-t { font-size: 1.05rem; font-weight: 800; letter-spacing: -.025em; color: var(--tx); }
.calc-dudas-d { margin-top: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--tx-soft); }
.calc-dudas .fm-field { margin-bottom: 1rem; }
.u-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }