/* Calculadora de inversión inmobiliaria (/calculadora-inversion-inmobiliaria,
   la arma la función real-estate-investment). Se apoya en el sistema visual del
   cascarón de netlify/lib/paginas/plantilla.mjs y repite la estructura del
   simulador de abonos (abonos-capital.css): formulario a la izquierda,
   resultado fijo a la derecha.

   Series: el inmueble en el violeta del sitio #5a4bda (línea, y su valor como
   área) y el CDT en gris #9aa1b2 punteado. Se distinguen también por el trazo,
   no solo por el color, y siempre van con leyenda. */

.ii-cab { max-width: 780px; }
/* Anclas del índice y del resultado por debajo del menú fijo. */
.lp h2[id], .ii-res, .ii-h2, .ii-zona { scroll-margin-top: 96px; }
/* En esta página el texto corrido usa todo el ancho, como las tablas y las
   tarjetas; el cascarón limita los subtítulos a 68ch. */
.lp .lp-sub { max-width: none; }

/* ---- Calculadora ---- */
.ii {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start; margin: 28px 0 0;
}
.ii-form, .ii-panel {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
}
.ii-form { padding: 24px; display: grid; gap: 22px; }
.ii-panel { position: sticky; top: 96px; overflow: hidden; border-color: #d9d3fb; }

/* Los tres pasos de la plantilla: el inmueble, el arriendo y los gastos. */
.ii-paso {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ii-paso > span { display: inline-flex; align-items: center; gap: 8px; }
.ii-paso b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento); color: #fff; font-size: 12px; letter-spacing: 0;
}
.ii-paso small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tenue); }
.ii-paso--sep { border-top: 1px solid var(--linea); padding-top: 20px; }

.ii-campo > label, .ii-seg legend {
  display: block; font-weight: 650; font-size: 14.5px; color: var(--tinta); margin: 0 0 8px; border: 0; padding: 0;
}
.ii-input {
  display: flex; align-items: center; border: 1px solid #d5d9e3; border-radius: 10px; background: #fff;
  transition: border-color .15s;
}
.ii-input:hover { border-color: #b9bfcd; }
.ii-input:focus-within { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
.ii-input span { color: var(--gris); font-weight: 600; font-size: 16px; padding: 0 14px; flex: none; }
.ii-input span:first-child { padding-right: 2px; }
.ii-input .ii-suf { font-size: 13.5px; font-weight: 500; color: var(--tenue); padding-left: 0; }
.ii-input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  padding: 12px 14px; height: auto; font-size: 19px; font-weight: 650; color: var(--tinta);
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.ii-input span:first-child + input { padding-left: 6px; }
.ii-input--corto { max-width: 220px; }
.ii-input input[type="number"] { -moz-appearance: textfield; }
.ii-input input::-webkit-outer-spin-button, .ii-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ii-ayuda { font-size: 13px; color: var(--tenue); margin: 8px 0 0; line-height: 1.55; }
.ii-ayuda a { color: var(--acento); font-weight: 600; }

/* Gastos en dos columnas: son cifras cortas y así el formulario no se alarga. */
.ii-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ii-dos .ii-input input { font-size: 17px; padding: 11px 10px 11px 4px; }
.ii-dos .ii-input span { padding: 0 10px; }

.ii-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.ii-chips button {
  border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 6px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--gris); cursor: pointer;
}
.ii-chips button:hover { border-color: var(--acento); color: var(--acento); }
.ii-chips button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }

.ii-mas { border-top: 1px solid var(--linea); padding-top: 18px; }
.ii-mas > summary {
  cursor: pointer; list-style: none; font-weight: 650; font-size: 14.5px; color: var(--acento);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
.ii-mas > summary::-webkit-details-marker { display: none; }
.ii-mas > summary::before { content: '+'; font-size: 18px; line-height: 1; width: 12px; }
.ii-mas[open] > summary::before { content: '−'; }
.ii-mas > summary small { color: var(--tenue); font-weight: 500; font-size: 13px; }
@media (max-width: 640px) { .ii-mas > summary small { flex-basis: 100%; padding-left: 20px; } }
.ii-mas-cuerpo { display: grid; gap: 18px; margin: 18px 0 0; }

.ii-seg { border: 0; padding: 0; margin: -6px 0 0; min-width: 0; }
.ii-seg-ops {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px;
  background: var(--fondo); border-radius: 11px;
}
.ii-seg label { margin: 0; position: relative; font-weight: 400; }
.ii-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ii-seg span {
  display: block; text-align: center; padding: 8px 6px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--gris);
}
.ii-seg input:checked + span { background: #fff; color: var(--acento-fuerte); box-shadow: 0 1px 3px rgba(20,20,43,.14); }
.ii-seg input:focus-visible + span { outline: 2px solid var(--acento); }

/* ---- Resultado ---- */
.ii-res { padding: 24px 24px 20px; }
.iir-etq { margin: 0; font-size: 14px; font-weight: 650; color: var(--gris); }
.iir-cifra {
  margin: 6px 0 0; font-size: 44px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1;
  color: var(--acento-fuerte); font-variant-numeric: tabular-nums;
}
.iir-cifra small { font-size: 18px; font-weight: 650; letter-spacing: 0; color: var(--gris); }
.iir-cifra-etq { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.iir-vacio { margin: 0; color: var(--gris); }

/* El veredicto frente al CDT: verde, ámbar o gris, siempre con texto. */
.iir-veredicto { margin: 14px 0 0; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.iir-veredicto strong { display: block; font-size: 15.5px; }
.iir-veredicto--gana { background: #e8f5f2; color: #1b574f; }
.iir-veredicto--gana strong { color: #0f3f39; }
.iir-veredicto--empata { background: var(--oro-of); color: #5c4a00; }
.iir-veredicto--pierde { background: #f1f2f6; color: var(--gris); }
.iir-veredicto--pierde strong { color: var(--tinta); }

.iir-comp { margin: 16px 0 0; padding: 14px 16px 16px; background: var(--fondo); border-radius: 12px; }
.iir-comp-t { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.iir-fila { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 5px 0 0; font-size: 13.5px; }
.iir-fila-etq { color: var(--gris); }
.iir-fila b { font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iir-barra { display: block; height: 10px; border-radius: 5px; background: #e4e6ee; overflow: hidden; }
.iir-barra i { display: block; height: 100%; border-radius: 5px; background: #9aa1b2; }
.iir-fila.con .iir-barra i { background: var(--acento); }
.iir-fila.con b { color: var(--acento-fuerte); }

.iir-desglose { display: grid; gap: 8px; margin: 16px 0 0; font-size: 15px; }
.iir-desglose div, .iir-anio1 dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.iir-desglose dt, .iir-anio1 dt { color: var(--gris); font-weight: 500; }
.iir-desglose dt small { display: block; font-size: 12.5px; color: var(--tenue); }
.iir-desglose dd, .iir-anio1 dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iir-desglose .neto { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 2px; }
.iir-desglose .neto dt, .iir-desglose .neto dd { color: var(--tinta); font-weight: 750; }

.iir-anio1 { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; }
.iir-anio1 dl { display: grid; gap: 6px; margin: 0; font-size: 14.5px; }

.iir-nota, .iir-pista { margin: 14px 0 0; border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.55; }
.iir-nota { background: var(--acento-of); color: #3a2f9e; }
.iir-nota strong { color: var(--acento-fuerte); }
.iir-pista { background: var(--oro-of); color: #5c4a00; }

.ii-acciones {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px;
  background: #fbfbfe; border-top: 1px solid var(--linea);
}
.ii-btn {
  display: inline-flex; align-items: center; border: 1px solid var(--linea); background: #fff; border-radius: 999px;
  padding: 8px 15px; font-family: inherit; font-size: 13.5px; font-weight: 650; line-height: 1.3;
  color: var(--acento-fuerte); cursor: pointer; text-decoration: none;
}
.ii-btn:hover, .ii-btn:focus { border-color: var(--acento); color: var(--acento-fuerte); text-decoration: none; }

/* Resultado flotante en móvil (ver iniciarCalculadoraInmobiliaria). */
.ii-flota {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: none;
  justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--tinta); color: #fff; border-radius: 14px; padding: 13px 18px;
  box-shadow: 0 14px 34px -10px rgba(20,20,43,.5); font-size: 14px;
}
.ii-flota strong { font-size: 20px; letter-spacing: -.02em; }
.ii-flota:hover, .ii-flota:focus { color: #fff; text-decoration: none; }

/* ---- Índice ---- */
.ii-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.ii-indice a {
  border: 1px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--gris); text-decoration: none;
}
.ii-indice a:hover { border-color: var(--acento); color: var(--acento); }

/* ---- Lo que deja el arriendo: de lo cobrado a lo que queda ---- */
.ii-cascada {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px 22px; display: grid; gap: 10px;
}
.ii-cascada-fila {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 15px;
}
.ii-cascada-etq { color: var(--tinta); font-weight: 600; }
.ii-cascada-etq small { display: block; font-weight: 500; font-size: 12.5px; color: var(--tenue); }
.ii-cascada-barra { display: block; height: 12px; border-radius: 6px; background: #f1f2f6; overflow: hidden; }
.ii-cascada-barra i { display: block; height: 100%; border-radius: 6px; background: #5a4bda; }
.ii-cascada-fila.menos .ii-cascada-barra i { background: #e8913a; }
.ii-cascada-fila.menos b { color: #9a4f0b; }
.ii-cascada-fila b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; text-align: right; min-width: 118px; }
.ii-cascada-fila.total { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 2px; }
.ii-cascada-fila.total .ii-cascada-barra i { background: #2a9d8f; }
.ii-cascada-fila.total b { color: #0f3f39; font-size: 17px; font-weight: 750; }
.ii-cascada-fila.total.negativo b { color: #b3261e; }
.lp .ii-cascada-pie { margin: 14px 0 0; font-size: 15px; color: var(--gris); }
.ii-cascada-pie strong { color: var(--tinta); }

/* ---- Gráfico ---- */
.ii-graf { position: relative; }
.ii-leyenda { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 6px 4px; font-size: 13.5px; color: var(--gris); }
.ii-leyenda span { display: inline-flex; align-items: center; }
.ii-sw { display: inline-block; width: 18px; height: 0; margin-right: 8px; flex: none; border-top: 3px solid #5a4bda; }
.ii-sw-base { border-top: 2px dashed #9aa1b2; }
.ii-area { display: inline-block; width: 14px; height: 12px; margin-right: 8px; border-radius: 3px; background: rgba(90,75,218,.16); }
.ii-graf .ii-franja { cursor: crosshair; }
.ii-graf .ii-franja:hover { fill: rgba(90,75,218,.06); }
.ii-tip {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 3px; min-width: 220px;
  background: var(--tinta); color: #fff; border-radius: 10px; padding: 10px 13px; font-size: 13px;
  box-shadow: 0 10px 26px -8px rgba(20,20,43,.45); font-variant-numeric: tabular-nums;
}
.ii-tip[hidden] { display: none; }
.ii-tip span { display: flex; align-items: center; color: #d9dbe5; }
.ii-tip .ii-tip-det { padding-left: 26px; font-size: 12px; color: #a9adbd; margin-top: -2px; }
.ii-tip .ii-sw-con { border-top-color: #a99ff0; }
.ii-tip strong { font-size: 13.5px; margin-bottom: 2px; }

/* ---- Tablas ---- */
table.lp-tabla.ii-tabla th, table.lp-tabla.ii-tabla td { padding: 11px 14px; font-size: 14.5px; }
/* La hoja global del sitio le pone fondo gris a todo th; aquí los th de fila son
   la primera columna de la tabla, no una cabecera. */
table.lp-tabla.ii-tabla tbody th { font-weight: 650; white-space: nowrap; background: var(--blanco); color: var(--tinta); }
table.lp-tabla.ii-tabla tbody tr:nth-child(even) > * { background: #fbfbfe; }
table.lp-tabla.ii-tabla tbody tr.fila-activa > * { background: var(--acento-of); }
.ii-anios td:first-child { white-space: nowrap; }
.ii-h2 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.ii-h2 .ii-btn { margin: 0 0 4px; }

.ii-sello { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ii-sello--gana { background: #e8f5f2; color: #1b574f; }
.ii-sello--empata { background: var(--oro-of); color: #5c4a00; }
.ii-sello--pierde { background: #f1f2f6; color: var(--gris); }

/* ---- Escenarios: zona destacada ---- */
.ii-zona {
  margin: 56px 0 0; padding: 34px 32px 30px; border-radius: 20px;
  background: linear-gradient(180deg, #f1effe 0%, #f8f7ff 100%); border: 1px solid #e2ddfb;
}
.ii-zona-eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--blanco); color: var(--acento-fuerte); font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(90,75,218,.12);
}
.lp .ii-zona h2 { margin-top: 0; }
.ii-zona .lp-sub { margin-bottom: 20px; }
.ii-zona .lp-scroll { background: var(--blanco); border-radius: var(--radio); }
.lp .ii-zona-pie {
  display: flex; gap: 10px; align-items: baseline; margin: 18px 0 0; font-size: 14.5px; color: var(--gris);
}
.ii-zona-pie strong { color: var(--tinta); }

/* ---- Fórmulas ---- */
.ii-pasos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 16px 0 0; padding: 0; list-style: none; counter-reset: paso;
}
.ii-pasos li {
  counter-increment: paso; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra); padding: 16px 16px 18px; font-size: 14.5px; line-height: 1.55; color: var(--gris);
}
.ii-pasos li::before {
  content: counter(paso); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.ii-pasos strong { color: var(--tinta); }
.ii-pasos li > strong:first-child { display: block; margin-bottom: 3px; }
.ii-formula {
  display: block; margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--fondo);
  font-size: 13px; font-weight: 650; color: var(--acento-fuerte);
}

.ii-callout {
  border-left: 3px solid var(--acento); background: var(--blanco); border-radius: 0 12px 12px 0;
  box-shadow: var(--sombra); padding: 18px 22px; margin: 24px 0 0;
}
.ii-callout--ley { border-left-color: #2a9d8f; margin-top: 8px; }
.ii-callout h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; }
.ii-callout p { margin: 0 0 10px; font-size: 15px; color: var(--gris); }
.ii-callout p:last-child { margin-bottom: 0; }
.ii-callout strong { color: var(--tinta); }
.ii-callout a, .lp p:not(.lp-migas) a, .ii-tiles a { color: var(--acento); font-weight: 600; }

.ii-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ii-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .ii-tiles, .ii-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ii { grid-template-columns: minmax(0, 1fr); }
  .ii-panel { position: static; }
  .ii-flota.visible { display: flex; }
  .ii-pasos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Las fichas de la cabecera empujan la calculadora fuera de la primera pantalla. */
  .ii-cab .lp-dato { display: none; }
  .ii-cab .lp-lede { font-size: 16px; }
  .ii { margin-top: 20px; }
  .ii-form { padding: 18px; gap: 18px; }
  .ii-res { padding: 20px 18px 18px; }
  .ii-acciones { padding: 12px 18px; }
  .iir-cifra { font-size: 38px; }
  .ii-dos { grid-template-columns: minmax(0, 1fr); }
  .ii-tiles, .ii-tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .ii-cascada { padding: 16px; }
  .ii-cascada-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
  .ii-cascada-barra { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .ii-cascada-fila b { min-width: 0; }
  .ii-zona { margin-top: 44px; padding: 24px 16px 20px; border-radius: 16px; }
  table.lp-tabla.ii-tabla th, table.lp-tabla.ii-tabla td,
  .ii-anios th, .ii-anios td { padding: 10px 9px; font-size: 13.5px; }
  /* En un celular la tabla de escenarios queda en valorización, ganancia, TIR y
     veredicto: lo que vale al final se deduce de la ganancia. */
  .ii-valor { display: none; }
  table.lp-tabla.ii-tabla thead th, table.lp-tabla.ii-tabla td.num { white-space: normal; }
  table.lp-tabla.ii-tabla tbody th { white-space: normal; }
  .ii-sello { white-space: normal; font-size: 12px; padding: 3px 8px; line-height: 1.35; border-radius: 8px; }
  table.lp-tabla.ii-tabla th, table.lp-tabla.ii-tabla td { padding-left: 7px; padding-right: 7px; }
  .ii-graf { padding-left: 8px; padding-right: 8px; }
}