/* ============================================================================
   greenhouse_demos.css — AGRICULTURA PROTEGIDA: sistemas, inversión, retorno
   y aliados.

   Encargo de Daniel, 2026-08-27 (PARTE M): «sistemas con área, inversión
   inicial y ROI, conectados con los aliados que los construyen».

   ─── POR QUE ESTA HOJA SE REESCRIBIO ENTERA ─────────────────────────────────
   Las clases que había aquí (`.nv-greenhouse-card`, `.nv-gh-card-image`,
   `.nv-gh-costs`…) vestían una pantalla que NO SE PODIA ABRIR: su módulo se
   registraba en `window.NVModules` —un cajón que no usa nadie—, llamaba a un
   `window.api` que no existe y pedía una ruta que responde 404. Se reescribió
   el módulo, así que sus clases viejas ya no las usa nadie: dejarlas aquí sería
   CSS muerto vistiendo a un muerto.

   Todo cuelga de `.nv-gh`, así que no puede pisar ningún otro módulo. Se usan
   los tokens que ya existen: una tarjeta con paleta propia se ve como si fuera
   de otra aplicación.
   ========================================================================== */

.nv-gh { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }

/* ── La barra del área ─────────────────────────────────────────────────────
   El campo va a 16px y NO es un capricho de tamaño: por debajo de 16px, Safari
   de iOS hace ZOOM al tocarlo y descuadra la pantalla entera. Es la misma
   lección que ya está escrita para el buscador de intereses de la portada. */
.nv-gh-barra { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-gh-barra .nv-field { flex: 1 1 220px; min-width: 0; font-size: 16px; }

.nv-gh-lista { display: flex; flex-direction: column; gap: 12px; }

.nv-gh-card {
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-md, 12px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* EL QUE NO CABE SE ATENUA, NO SE ESCONDE. Quien tiene 30 m² merece ver que
   con 100 podría poner un invernadero — y una lista que encoge sin decir por
   qué hace pensar que la aplicación perdió opciones. */
.nv-gh-card.is-nocabe { opacity: .72; border-style: dashed; }

.nv-gh-cab { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.nv-gh-ic { display: inline-flex; flex: 0 0 auto; color: var(--nv-savia, var(--nv-acento)); }
.nv-gh-titw { min-width: 0; }
.nv-gh-t { margin: 0 0 4px; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.nv-gh-res { margin: 0; font-size: 13px; line-height: 1.5; color: var(--nv-tenue); }

/* ── Los datos: área e inversión ───────────────────────────────────────────
   `tabular-nums` en los valores porque la gracia de esta pantalla es COMPARAR
   sistemas: con cifras de ancho variable las columnas no alinean y la
   comparación cuesta el doble. */
.nv-gh-datos { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.nv-gh-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-gh-dk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--nv-fantasma); }
.nv-gh-dv { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nv-gh-dato.is-fuerte .nv-gh-dv { font-size: 16px; color: var(--nv-savia, var(--nv-acento)); }
/* SIN PRECIO SE VE COMO «SIN DATO», NO COMO UN NUMERO APAGADO. La diferencia
   entre «no lo sabemos» y «$0» es la diferencia entre un hueco honesto y una
   mentira que dice que sale gratis. */
.nv-gh-dato.is-sindato .nv-gh-dv { color: var(--nv-tenue); font-style: italic; font-size: 13px; }

.nv-gh-nocabe {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nv-tenue);
  border-left: 2px solid var(--nv-linea);
  padding-left: 10px;
}

.nv-gh-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-gh-acc .nv-btn { flex: 1 1 auto; }

.nv-gh-det, .nv-gh-aliados, .nv-gh-roi { display: flex; flex-direction: column; gap: 6px; }
.nv-gh-det:empty, .nv-gh-aliados:empty, .nv-gh-roi:empty { display: none; }

.nv-gh-ul { margin: 0 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.nv-gh-ul li { overflow-wrap: anywhere; }
.nv-gh-ul.is-ok li { color: var(--nv-savia, var(--nv-ok)); }
/* LOS CUIDADOS EN AMBAR Y SIN ESCONDER. Son el aviso que evita que alguien
   monte un NFT sin planta eléctrica y pierda el cultivo la primera vez que se
   va la luz. Si se pintaran igual que el resto, se leerían como relleno. */
.nv-gh-ul.is-ojo li { color: var(--nv-cosecha, var(--nv-dorado)); }

.nv-gh-msg, .nv-gh-nota, .nv-gh-porque {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
}
.nv-gh-aviso {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--nv-cosecha, var(--nv-dorado));
  border-left: 2px solid currentColor;
  padding-left: 10px;
}

/* ── Aliados ───────────────────────────────────────────────────────────────
   `minmax(0,1fr)` en el título para que un nombre largo se recorte en vez de
   empujar el botón fuera de la tarjeta. */
.nv-gh-ali {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px;
  border: 1px solid var(--nv-linea);
  border-radius: 10px;
}
.nv-gh-alit { font-size: 13.5px; overflow-wrap: anywhere; }
.nv-gh-alim {
  grid-column: 1;
  font-size: 12px;
  color: var(--nv-tenue);
  font-variant-numeric: tabular-nums;
}

/* ── El retorno ────────────────────────────────────────────────────────────*/
.nv-gh-campo { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.nv-gh-clab { font-size: 12.5px; color: var(--nv-tenue); }
.nv-gh-campo .nv-field { font-size: 16px; }
.nv-gh-roiout { margin-top: 10px; }
.nv-gh-roibig { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.nv-gh-roin {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--nv-savia, var(--nv-acento));
  line-height: 1.1;
}
.nv-gh-roim { font-size: 12.5px; color: var(--nv-tenue); }

.nv-gh-pie { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.nv-gh-fuente { margin: 0; font-size: 12px; color: var(--nv-tenue); }
.nv-gh-fuente a { color: var(--nv-acento); overflow-wrap: anywhere; }

/* ── A 360 px ──────────────────────────────────────────────────────────────
   Tres botones con texto no caben en una fila en la pantalla más estrecha que
   usa este proyecto: se apilan. Sin esto, «Calcular retorno» —el botón por el
   que se abre esta pantalla— se sale de la tarjeta. */
@media (max-width: 420px) {
  .nv-gh-acc .nv-btn { flex: 1 1 100%; }
  .nv-gh-barra .nv-field, .nv-gh-barra .nv-btn { flex: 1 1 100%; }
  .nv-gh-ali { grid-template-columns: minmax(0, 1fr); }
  .nv-gh-ali .nv-btn { width: 100%; }
}