/* ===========================================================================
   /tasacion — LA CALCULADORA
   ===========================================================================
   Solo lo carga esta página. Usa los tokens de estilos.css (tinta, papel,
   verde, líneas, tipografías) y no redefine ninguno: la marca es la de siempre.

   LA TARJETA DEL FORMULARIO ES BLANCA, Y ES LA ÚNICA DEL SITIO. El sistema
   reserva el marfil para lo que se lee y el blanco para lo que se USA
   (ver la cabecera de estilos.css): esto es una herramienta, no una página
   que se lee. Es lo que la distingue de un formulario de contacto.
   =========================================================================== */

.calc {
  --error: #b3261e;
  --blanco: #ffffff;
  background: var(--papel);
  padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 88px);
}

/* [hidden] GANA SIEMPRE AQUÍ DENTRO. .campo, .contador y otros componentes llevan
   display propio, y una clase pisa la regla del navegador para [hidden]: sin
   esto, esconder los dormitorios de un terreno no escondería nada. */
.calc [hidden] { display: none !important; }

.calc-cabecera { padding-bottom: clamp(28px, 4vw, 48px); }
.calc-sellos {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}

/* Formulario y resultado: uno debajo del otro en móvil, lado a lado desde 1000. */
.calc__disposicion { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) {
  .calc__disposicion { grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: 36px; }
  .calc__lado { position: sticky; top: 104px; }
}

/* ── La tarjeta de la calculadora ─────────────────────────────────────────── */
.calc__form {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
}

/* min-width: 0 NO ES DECORATIVO. Un fieldset tiene min-width: min-content por
   defecto y rompe cualquier rejilla que lleve dentro en pantallas estrechas. */
.calc__bloque {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(16px, 2.6vw, 26px);
  border-bottom: 1px solid var(--linea-suave);
}

/* La leyenda flota para comportarse como un bloque normal: sin esto se
   encaja en el borde del fieldset y no respeta el relleno. */
.calc__rotulo {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
}
.calc__rotulo span { color: var(--verde-700); margin-right: 8px; }
/* Se piden características que no mueven el número. Decirlo cuesta una línea
   y evita que el resultado parezca ajustado a algo que no lo está. */
.calc__nota {
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 2px solid var(--linea);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--humo);
}
.calc__bloque > .calc__rotulo + * { clear: both; }

.calc__etiqueta {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 8px;
}
.calc__opcional { text-transform: none; letter-spacing: 0; }

.calc__ubicacion {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 560px) { .calc__ubicacion { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

/* La zona ocupa su propia fila para que departamento y distrito conserven
   EXACTAMENTE el reparto que ya tenían: un campo nuevo no debería recolocar
   los que llevan meses en su sitio. Y la línea de ayuda necesita el ancho. */
.calc__ubicacion .campo--ancho { grid-column: 1 / -1; }
.campo__ayuda {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--humo);
}
.campo__ayuda:empty { display: none; }
/* NO HAY REGLA PARA EL SELECTOR DESHABILITADO, y es a propósito. Distrito ya
   arrancaba deshabilitado y lo atenúa el navegador; darle a la zona un estilo
   propio sólo conseguía que los dos campos se vieran distintos. */

/* ── Opciones: botones que se eligen, no radios que se marcan ───────────── */
.opciones { display: grid; gap: 8px; }
.opciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones--tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .opciones--tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .opciones--tipos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.opcion { position: relative; display: block; cursor: pointer; }
/* El radio sigue ahí —se enfoca, se elige con el teclado y lo lee un lector de
   pantalla—; solo se deja de ver. Lo que se ve es su etiqueta. */
.opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.opcion span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--tinta);
  background: var(--blanco);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.opcion:hover span { border-color: var(--tinta); }
.opcion input:checked + span {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  box-shadow: inset 0 -3px 0 var(--verde);
}
.opcion input:focus-visible + span { outline: 2px solid var(--verde-600); outline-offset: 2px; }
.opcion--grande span { min-height: 60px; font-size: 1rem; }
.opciones--compactas .opcion span { min-height: 44px; }

/* ── Características ─────────────────────────────────────────────────────── */
.calc__rejilla { display: grid; gap: 18px; }
@media (min-width: 560px) {
  .calc__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__rejilla > .contadores { grid-column: 1 / -1; }
}

/* El área es el dato que más pesa en el cálculo: su número se escribe grande. */
.calc__sufijo { position: relative; }
.calc__sufijo input {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  padding-right: 48px;
  background: var(--blanco);
}
.calc__sufijo span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--humo);
  pointer-events: none;
}
.calc .campo select { background-color: var(--blanco); }

/* Contadores: en móvil, una fila por dato (etiqueta a la izquierda, control a
   la derecha); desde 560, tres columnas con la etiqueta encima. */
.contadores { display: grid; gap: 10px; }
@media (min-width: 560px) { .contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 560px) { .contador { flex-direction: column; align-items: stretch; gap: 7px; } }
.contador label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
}
.contador__control {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
  background: var(--blanco);
}
.contador__control button {
  width: 44px;
  min-height: 44px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--tinta);
  transition: background-color .15s ease;
}
.contador__control button:hover { background: var(--papel-2); }
.contador__control button:disabled { color: var(--humo); opacity: .4; cursor: default; background: none; }
.contador__control input {
  width: 52px;
  flex: 1;
  border: 0;
  border-inline: 1px solid var(--linea-suave);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.contador__control input::-webkit-inner-spin-button,
.contador__control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.contador__control input:focus { outline: 2px solid var(--verde-600); outline-offset: -2px; }

.calc__antiguedad input[type="range"] {
  width: 100%;
  min-height: 32px;
  accent-color: var(--verde-700);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.calc__valor-rango {
  float: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
.calc__extremos {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: .06em;
  color: var(--humo);
}

/* ── Validación ──────────────────────────────────────────────────────────── */
.calc__error { font-size: 0.8125rem; color: var(--error); margin-top: 6px; min-height: 0; }
.calc__error:empty { display: none; }
.con-error .opcion span,
.con-error select,
.con-error input { border-color: var(--error); }

/* ── Botón de calcular ───────────────────────────────────────────────────── */
.calc__accion { padding: clamp(16px, 2.6vw, 24px) clamp(16px, 2.6vw, 26px); }
.calc__calcular { width: 100%; min-height: 58px; font-size: 0.875rem; }

/* ===========================================================================
   EL RESULTADO
   =========================================================================== */
#resultado { scroll-margin-top: 96px; outline: none; }

/* El hueco reservado: solo en escritorio, donde el resultado cae al lado y
   conviene que se vea dónde va a aparecer. En móvil sería altura sin nada. */
.resultado-vacio {
  display: none;
  border: 1px dashed var(--linea);
  border-radius: 4px;
  padding: 26px;
  color: var(--humo);
}
@media (min-width: 1000px) { .resultado-vacio { display: block; } }
.resultado-vacio[hidden] { display: none; }
.resultado-vacio__marca { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; }
.resultado-vacio__valor { font-family: var(--display); font-weight: 900; font-size: 2.6rem; letter-spacing: -0.03em; color: var(--papel-3); margin-top: 26px; line-height: 1; }
.resultado-vacio__texto { font-size: 0.875rem; margin-top: 14px; }

/* LA TARJETA. Está compuesta para poder convertirse un día en la pieza que se
   comparte por WhatsApp o Instagram: marca, valor, rango, m², ficha y fecha. */
.tarjeta-valor {
  background: var(--tinta);
  color: var(--papel);
  border-radius: 4px;
  padding: clamp(22px, 3vw, 28px);
}
.tarjeta-valor__marca {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea-oscura);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo-claro);
}
.tarjeta-valor__titulo {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
/* ── EL RANGO ES EL TITULAR ────────────────────────────────────────────────
   Antes el titular era un número solo, a 3,3rem. Ahora lo son los dos
   extremos del rango observado, y el valor central va debajo como ancla sobre
   la barra. No es una preferencia estética: un punto sugiere una precisión que
   la estimación no tiene (±8 % acertaría el 29 % de las veces), y el rango
   dice lo que de verdad sabemos. En móvil los dos importes envuelven a dos
   líneas antes que encogerse hasta no leerse. */
.rango-hero {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 7.4vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rango-hero span { color: var(--verde); font-weight: 500; }
.rango-hero strong { font-weight: inherit; }

.rango-barra { margin-top: 16px; }
.rango-barra__pista {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--linea-oscura) 0%, var(--verde) 50%, var(--linea-oscura) 100%);
}
.rango-barra__ancla {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--papel);
  transform: translateY(-50%);
  transition: left .25s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .rango-barra__ancla { transition: none; } }

.rango-ancla {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.rango-ancla span { font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--humo-claro); align-self: center; }
.rango-ancla strong { font-weight: 500; }

/* LA FRASE QUE IMPIDE LEER EL RANGO COMO UNA GARANTÍA. Va en cuerpo normal y
   no en letra chica, a propósito: el P25-P75 cubre el 48 % de los casos, así
   que sin esta línea el bloque afirma algo falso una de cada dos veces. */
.tarjeta-valor__mitad {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--papel);
}
.tarjeta-valor__mitad strong { font-weight: 600; color: var(--verde); }

/* El sello de extrapolado va junto al título y no al pie: si el número no es
   una lectura directa del dato, eso se sabe ANTES de leer la cifra. */
.tarjeta-valor__sello {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--verde);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.tarjeta-valor__nota-extrapolada {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--humo-claro);
  background: rgba(255, 255, 255, .05);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--humo-claro);
}

.tarjeta-valor__nota-ancha {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--verde);
  background: rgba(255, 255, 255, .05);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--humo-claro);
}

.tarjeta-valor__datos {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linea-oscura-suave);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px) { .tarjeta-valor__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta-valor__datos dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo-claro); }
.tarjeta-valor__datos dd { margin-top: 4px; font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* <details> nativo: abrir y cerrar ya existe en HTML y no necesita guion. */
.rango-completo { margin-top: 14px; }
.rango-completo summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
  padding: 6px 0;
}
.rango-completo summary:focus-visible { outline: 2px solid var(--verde-600); outline-offset: 2px; }
.rango-completo__cifra { margin-top: 6px; font-family: var(--mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rango-completo .pie { color: var(--humo-claro); margin-top: 4px; }

.tarjeta-valor__soles { margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; color: var(--humo-claro); font-variant-numeric: tabular-nums; line-height: 1.5; }
.tarjeta-valor__soles:empty { display: none; }

/* Una celda muy dispersa no se maquilla. El borde verde en la barra dice que
   la horquilla es ancha porque el mercado de ese distrito lo es, y ahí la
   revisión con un broker deja de ser un extra y pasa a ser el paso obvio. */
.tarjeta-valor--ancha .rango-barra__pista { background: linear-gradient(90deg, var(--linea-oscura) 0%, var(--verde) 22%, var(--verde) 78%, var(--linea-oscura) 100%); }

.tarjeta-valor__ficha {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--linea-oscura-suave);
  font-size: 0.875rem;
}
.tarjeta-valor__pie { margin-top: 6px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo-claro); }

/* La entrada: breve y una sola vez por cálculo. Nada cuenta hacia arriba ni
   da vueltas; el efecto es que el número aparece, no que se anuncia. */
.resultado--entra { animation: resultado-entra .36s cubic-bezier(.16, 1, .3, 1); }
@keyframes resultado-entra {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
/* Si se cambia algo y el nuevo cálculo aún no es válido, el anterior se apaga
   en vez de desaparecer: se ve que ya no corresponde. */
.resultado--viejo .tarjeta-valor { opacity: .4; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .resultado--entra { animation: none; } }

.resultado__compartir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.resultado__compartir .boton { flex: 1 1 160px; }
.resultado__aviso:empty { display: none; }
.resultado__aviso { margin-top: 8px; }

.resultado__metodo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 0.875rem;
  color: var(--humo);
  display: grid;
  gap: 8px;
}
.resultado__metodo-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta);
}

.resultado-sin {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: clamp(22px, 3vw, 28px);
}
/* Los cinco titulares posibles están en el HTML y el guion enseña uno. El
   motivo concreto es la diferencia entre parecer una avería y parecer rigor. */
.resultado-sin__titulo { margin-top: 14px; }
.resultado-sin__titulo[hidden] { display: none; }
.resultado-sin__texto { margin-top: 14px; }
.resultado-sin__texto:empty { display: none; }

/* ===========================================================================
   DESPUÉS DEL RESULTADO
   =========================================================================== */
.calc__despues { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: clamp(28px, 4vw, 44px); }
.calc__despues[hidden], .afinar[hidden], .siguiente[hidden] { display: none; }

.afinar {
  display: grid;
  gap: 24px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: clamp(22px, 3.4vw, 36px);
}
@media (min-width: 980px) { .afinar { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 44px; align-items: start; } }
.afinar .campo input { background: var(--blanco); }

.siguiente__opciones { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 640px) { .siguiente__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.siguiente__opcion {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 22px;
  background: var(--papel);
  transition: border-color .2s ease;
}
.siguiente__opcion .enlace-flecha { justify-self: start; margin-top: 4px; }
/* La que coincide con lo que la persona eligió arriba se marca: ya contestó esa
   pregunta, así que la opción que le corresponde va primero para la vista. */
.siguiente__opcion--elegida { border-color: var(--tinta); box-shadow: inset 0 3px 0 var(--verde); }
.siguiente__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ── V1.1 · ubicación opcional y sin referencia ───────────────────────────── */

/* No hay mapa y no es una carencia: meter una librería de mosaicos en un sitio
   sin build, para un dato que hoy no entra en el cálculo, no se sostiene.
   `navigator.geolocation` viene en el navegador y pesa cero. */
.calc__ubicacion-fina { margin-top: 14px; display: grid; gap: 8px; justify-items: start; }
.calc__nota-geo {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--humo);
}
.calc__nota-geo:empty { display: none; }

/* LA ESTIMACIÓN INDICATIVA SE PARECE AL «SIN REFERENCIA», NO AL RESULTADO.
   Es deliberado: si se pareciera a la tarjeta de valor, el rango se leería
   como una tasación, que es exactamente lo que no es. El rango se ve, pero
   sin la jerarquía tipográfica del número que sí está medido. */
.resultado-ind__que { margin-top: 16px; }
.resultado-ind__rango {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.resultado-ind__guion { color: var(--humo); }
.resultado-ind__aviso {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--verde);
}
.resultado-ind__soles:empty { display: none; }
.resultado-ind__soles, .resultado-ind__texto { margin-top: 14px; }
.resultado-ind__ficha { margin-top: 18px; font-size: 0.8125rem; }
.resultado-ind__ficha:empty { display: none; }

/* UN SOLO TITULAR Y UNA SOLA SALIDA. Cuando no hay número, el bloque no puede
   parecer una avería: el motivo explica y el botón resuelve. */
.resultado-sin__motivo {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--verde);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.resultado-sin__motivo:empty { display: none; }
.resultado-sin__cta { margin-top: 22px; }
.resultado-sin__cta .boton { width: 100%; justify-content: center; }
@media (min-width: 480px) { .resultado-sin__cta .boton { width: auto; } }