/* Lo que solo existe en «vender mi casa». Todo lo demás —el papel, el talón,
   el formulario, la tirilla, la rejilla de escritorio— sale de estilo.css, que
   se carga antes: esta página es la misma casa, no otra web.
 *
 * Cuatro piezas nuevas, y las cuatro están aquí por la misma razón: el
 * resultado de una venta NO es un número, son cuatro cosas que la gente mezcla
 * y que esta pantalla tiene que mantener separadas.
 *   .netos     — los dos netos (el del cierre y el de después de declarar)
 *   .renglones — cada gasto del cierre con su marca de «tarifa» o «estimado»
 *   .reparto   — lo seguro, lo negociable y lo del comprador
 *   .escalera  — del precio a la ganancia, paso por paso
 */

/* ── Campos propios de esta página ───────────────────────────────────────── */

.ayuda--suelta { margin: -2px 0 4px; }

.casilla {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; font-weight: 500; cursor: pointer;
}

.casilla input {
  width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  accent-color: var(--verde); cursor: pointer;
}

.campo--casilla { gap: 5px; }

/* El cajón de «si la rentaste, la heredaste…». Cerrado por defecto: son cuatro
   preguntas que a la mayoría no le tocan, y verlas todas de entrada hace que
   la página parezca un formulario de impuestos. */
.mas {
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 0 14px;
}

.mas > summary {
  cursor: pointer;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--verde);
  list-style-position: inside;
}

.mas > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.mas[open] > summary { border-bottom: 1px solid var(--papel-linea); margin-bottom: 14px; }
.mas > .campo, .mas > .fila-doble, .mas > .ayuda { margin-bottom: 14px; }

/* El sello va absoluto arriba a la derecha del talón (estilo.css). La etiqueta
   de esta página lleva el precio dentro, así que sin este hueco se le mete
   debajo — pasó, y se leía «DE LOS $420,000 TE QUEDAN» con el sello encima. */
.talon__etiqueta { padding-right: 122px; letter-spacing: .1em; }

/* ── Los bloques del resultado ───────────────────────────────────────────── */

.bloque {
  background: var(--papel-alto);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  padding: 20px 20px 16px;
  box-shadow: var(--sombra);
}

.bloque__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
}

.bloque__pista {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--tinta-suave);
  line-height: 1.55;
}

/* Lo que va APARTE va visiblemente aparte: no es una nota al pie, es una cifra
   que no se puede sumar porque no hay tabla que la respalde. */
.bloque__aparte {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--estatal) 55%, transparent);
  background: color-mix(in srgb, var(--estatal) 8%, transparent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinta);
}

/* ── Listas de renglones ─────────────────────────────────────────────────── */

.renglones, .reparto, .escalera, .netos__lista, .avisos {
  list-style: none; margin: 0; padding: 0;
}

.renglones li, .reparto li, .escalera li, .netos__lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 11px 0;
  border-top: 1px solid var(--papel-linea);
}

.renglones li:first-child, .escalera li:first-child,
.reparto li:first-child, .netos__lista li:first-child { border-top: 0; }

.renglones .nombre, .reparto .nombre, .escalera .nombre, .netos__lista .nombre {
  display: block;
  font-size: 15px;
}

.renglones .pista-fila, .reparto .pista-fila,
.escalera .pista-fila, .netos__lista .pista-fila {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.renglones .cifra, .reparto .cifra, .escalera .cifra, .netos__lista .cifra {
  font-family: var(--mono);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Lo que no sale de tu bolsillo se ve que no sale de tu bolsillo. */
.renglones li.es-ajeno .nombre, .renglones li.es-ajeno .cifra { opacity: .58; }

/* ── Las marcas: tarifa, estimado, se negocia ────────────────────────────── */
/* Media página está aquí. «Esto no es un estimado» solo aparece donde el
   precio lo fija el estado; donde lo pone cada compañía, dice estimado y ya. */

.marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.marca {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
}

.marca--ley {
  color: var(--verde);
  border-color: var(--verde-borde);
  background: var(--verde-tenue);
}

.marca--estimado {
  color: var(--tinta-suave);
  border-color: var(--papel-linea);
}

.marca--negocia {
  color: var(--estatal);
  border-color: color-mix(in srgb, var(--estatal) 40%, transparent);
  background: color-mix(in srgb, var(--estatal) 9%, transparent);
}

.marca--ajeno {
  color: var(--ss);
  border-color: color-mix(in srgb, var(--ss) 40%, transparent);
}

/* ── El reparto: seguro / negociable / del comprador ─────────────────────── */

.reparto {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 2px solid var(--papel-linea);
}

/* ── La escalera del precio a la ganancia ────────────────────────────────── */

.escalera li.es-suma {
  border-top: 2px solid var(--tinta-suave);
}

.escalera li.es-suma .nombre { font-weight: 600; }
.escalera li.es-suma .cifra  { font-weight: 600; }

.escalera li.es-libre .nombre, .escalera li.es-libre .cifra { color: var(--verde); }
.escalera li.es-paga  .nombre, .escalera li.es-paga  .cifra { color: var(--federal); }

.renglones--impuesto { margin-top: 12px; }

/* ── Los dos netos ───────────────────────────────────────────────────────── */
/* No es un adorno: la retención del cierre NO es impuesto. Quien no lo sabe
   cree que perdió ese dinero, y quien no sabe que se la van a quitar cuenta
   con dinero que ese día no va a ver. */

.netos {
  background: color-mix(in srgb, var(--ss) 8%, var(--papel-alto));
  border: 1px solid color-mix(in srgb, var(--ss) 34%, transparent);
  border-radius: var(--radio);
  padding: 18px 20px 16px;
}

.netos__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
}

.netos__lista li { border-top-color: color-mix(in srgb, var(--ss) 24%, transparent); }
.netos__lista li.es-fuerte .nombre { font-weight: 600; }
.netos__lista li.es-fuerte .cifra  { font-weight: 600; font-size: 17px; }

.netos__nota {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ss) 24%, transparent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ── Los avisos ──────────────────────────────────────────────────────────── */
/* Van al final y en letra chica a propósito: son de leer una vez, no de mirar
   en cada tecla. Pero van EN la pantalla del resultado, no escondidos en un
   desplegable, porque varios cambian lo que firmas. */

.bloque--avisos { background: none; box-shadow: none; }

.avisos li {
  position: relative;
  padding: 0 0 0 18px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}

.avisos li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--verde-borde);
}

.avisos li:last-child { margin-bottom: 0; }

/* ── Escritorio ──────────────────────────────────────────────────────────── */

@media (min-width: 1040px) {
  /* En la columna de 396 px estos bloques respiran menos. */
  .bloque, .netos { padding-left: 18px; padding-right: 18px; }
}