/* =========================================================================
   Vivienda Ideal — sistema de diseño
   Paleta: neutros cálidos (tierra del Ariari) + verde profundo de acento.
   Modo oscuro por atributo data-theme, igual que en mipresupuesto.
   ========================================================================= */

:root {
  /* Marca */
  --vi-verde: #0f766e;
  --vi-verde-claro: #14b8a6;
  --vi-verde-oscuro: #115e59;
  --vi-tierra: #b45309;
  --vi-arena: #fef3c7;

  /* Superficies (claro) */
  --vi-fondo: #fbfaf8;
  --vi-superficie: #ffffff;
  --vi-superficie-2: #f4f2ee;
  --vi-borde: #e3e0d9;
  --vi-borde-fuerte: #cfcabf;

  /* Texto */
  --vi-texto: #1c1917;
  --vi-texto-suave: #57534e;
  --vi-texto-tenue: #8a8378;

  /* Semánticos */
  --vi-exito: #15803d;
  --vi-alerta: #b45309;
  --vi-peligro: #b91c1c;

  --vi-sombra: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .06);
  --vi-sombra-alta: 0 2px 4px rgba(28, 25, 23, .06), 0 16px 40px rgba(28, 25, 23, .10);
  --vi-radio: 14px;
  --vi-radio-sm: 9px;
}

[data-theme="dark"] {
  --vi-verde: #2dd4bf;
  --vi-verde-claro: #5eead4;
  --vi-verde-oscuro: #0f766e;
  --vi-tierra: #f59e0b;
  --vi-arena: #422006;

  --vi-fondo: #14120f;
  --vi-superficie: #1e1b17;
  --vi-superficie-2: #292420;
  --vi-borde: #3a332c;
  --vi-borde-fuerte: #4d443a;

  --vi-texto: #f5f2ed;
  --vi-texto-suave: #b8b0a4;
  --vi-texto-tenue: #8a8075;

  --vi-exito: #4ade80;
  --vi-alerta: #fbbf24;
  --vi-peligro: #f87171;

  --vi-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --vi-sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
}

/* --- Base --------------------------------------------------------------- */
body {
  background: var(--vi-fondo);
  color: var(--vi-texto);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fuente-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vi-texto);
  line-height: 1.2;
}

h4, h5, h6 { font-weight: 600; color: var(--vi-texto); }

a { color: var(--vi-verde); text-decoration-color: color-mix(in srgb, var(--vi-verde) 35%, transparent); }
a:hover { color: var(--vi-verde-oscuro); }
[data-theme="dark"] a:hover { color: var(--vi-verde-claro); }

.text-suave { color: var(--vi-texto-suave); }
.text-tenue { color: var(--vi-texto-tenue); }
.text-marca { color: var(--vi-verde); }

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: var(--vi-superficie); padding: .5rem 1rem; border-radius: var(--vi-radio-sm);
}

/* --- Navbar ------------------------------------------------------------- */
.vi-navbar {
  background: color-mix(in srgb, var(--vi-fondo) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--vi-borde);
  position: sticky; top: 0; z-index: 1030;
}
.vi-navbar .navbar-brand {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: 1.3rem; color: var(--vi-texto); letter-spacing: -.03em;
}
.vi-navbar .nav-link {
  color: var(--vi-texto-suave); font-weight: 500; font-size: .95rem;
  padding: .5rem .85rem; border-radius: var(--vi-radio-sm);
}
.vi-navbar .nav-link:hover { color: var(--vi-texto); background: var(--vi-superficie-2); }
.vi-navbar .nav-link.activo { color: var(--vi-verde); background: color-mix(in srgb, var(--vi-verde) 10%, transparent); }

/* --- Botones ------------------------------------------------------------ */
.btn-marca {
  background: var(--vi-verde); color: #fff; border: 1px solid var(--vi-verde);
  border-radius: var(--vi-radio-sm); font-weight: 600; padding: .65rem 1.4rem;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-marca:hover {
  background: var(--vi-verde-oscuro); border-color: var(--vi-verde-oscuro);
  color: #fff; transform: translateY(-1px); box-shadow: var(--vi-sombra);
}
[data-theme="dark"] .btn-marca { color: #06201d; }
[data-theme="dark"] .btn-marca:hover { color: #06201d; background: var(--vi-verde-claro); }

.btn-marca-borde {
  background: transparent; color: var(--vi-texto); border: 1px solid var(--vi-borde-fuerte);
  border-radius: var(--vi-radio-sm); font-weight: 600; padding: .65rem 1.4rem;
}
.btn-marca-borde:hover { border-color: var(--vi-verde); color: var(--vi-verde); background: var(--vi-superficie-2); }

/* --- Tarjetas ----------------------------------------------------------- */
.vi-card {
  background: var(--vi-superficie);
  border: 1px solid var(--vi-borde);
  border-radius: var(--vi-radio);
  box-shadow: var(--vi-sombra);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Para igualar alturas dentro de una grilla usa la utilidad h-100 de Bootstrap.
   No lo ponemos por defecto: rompe las tarjetas apiladas de una sola columna. */
.vi-card-hover:hover {
  transform: translateY(-3px); box-shadow: var(--vi-sombra-alta);
  border-color: color-mix(in srgb, var(--vi-verde) 40%, var(--vi-borde));
}
.vi-card-plana { box-shadow: none; }

.vi-etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--vi-superficie-2); color: var(--vi-texto-suave);
  border: 1px solid var(--vi-borde);
}
.vi-etiqueta-marca {
  background: color-mix(in srgb, var(--vi-verde) 12%, transparent);
  color: var(--vi-verde); border-color: color-mix(in srgb, var(--vi-verde) 25%, transparent);
}

/* --- Hero --------------------------------------------------------------- */
.vi-hero {
  background:
    radial-gradient(1100px 500px at 82% -10%, color-mix(in srgb, var(--vi-verde) 14%, transparent), transparent 65%),
    radial-gradient(800px 400px at 8% 110%, color-mix(in srgb, var(--vi-tierra) 10%, transparent), transparent 60%),
    var(--vi-fondo);
  border-bottom: 1px solid var(--vi-borde);
  padding: 4.5rem 0 4rem;
}
.vi-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
.vi-hero .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--vi-texto-suave); max-width: 46ch; }

/* --- Formularios -------------------------------------------------------- */
.form-control, .form-select {
  background: var(--vi-superficie); border: 1px solid var(--vi-borde-fuerte);
  color: var(--vi-texto); border-radius: var(--vi-radio-sm); padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--vi-superficie); color: var(--vi-texto);
  border-color: var(--vi-verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vi-verde) 18%, transparent);
}
.form-control::placeholder { color: var(--vi-texto-tenue); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--vi-texto); margin-bottom: .35rem; }
.form-text { color: var(--vi-texto-tenue); font-size: .82rem; }

/* Selector tipo tarjeta (sistemas constructivos, acabados) */
.vi-opcion input[type="radio"] { position: absolute; opacity: 0; }
.vi-opcion label {
  display: block; cursor: pointer; height: 100%;
  border: 1.5px solid var(--vi-borde); border-radius: var(--vi-radio);
  padding: 1rem; background: var(--vi-superficie); transition: all .14s ease;
}
.vi-opcion label:hover { border-color: var(--vi-borde-fuerte); background: var(--vi-superficie-2); }
.vi-opcion input:checked + label {
  border-color: var(--vi-verde); background: color-mix(in srgb, var(--vi-verde) 8%, var(--vi-superficie));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vi-verde) 14%, transparent);
}
.vi-opcion input:focus-visible + label { outline: 2px solid var(--vi-verde); outline-offset: 2px; }

/* --- Resultado / veredicto --------------------------------------------- */
.vi-veredicto { border-radius: var(--vi-radio); padding: 1.75rem; border: 1.5px solid; }
.vi-veredicto-success { background: color-mix(in srgb, var(--vi-exito) 10%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-exito) 45%, transparent); }
.vi-veredicto-warning { background: color-mix(in srgb, var(--vi-alerta) 10%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-alerta) 45%, transparent); }
.vi-veredicto-danger  { background: color-mix(in srgb, var(--vi-peligro) 10%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-peligro) 45%, transparent); }
.vi-veredicto .icono-veredicto { font-size: 2.5rem; line-height: 1; }
.color-success { color: var(--vi-exito); }
.color-warning { color: var(--vi-alerta); }
.color-danger  { color: var(--vi-peligro); }

.vi-cifra {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1;
}
.vi-cifra-sm { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.vi-etiqueta-cifra { font-size: .8rem; color: var(--vi-texto-tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Barra de proporción cuota/ingresos */
.vi-barra { height: 10px; background: var(--vi-superficie-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--vi-borde); }
.vi-barra > span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }

/* --- Tablas ------------------------------------------------------------- */
.table { --bs-table-bg: transparent; color: var(--vi-texto); border-color: var(--vi-borde); }
.table > :not(caption) > * > * { background: transparent; color: var(--vi-texto); border-bottom-color: var(--vi-borde); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--vi-superficie-2); color: var(--vi-texto); }
.table thead th { color: var(--vi-texto-suave); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* --- Artículo ----------------------------------------------------------- */
.vi-articulo { font-size: 1.06rem; line-height: 1.78; max-width: 68ch; }
.vi-articulo h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: .9rem; }
.vi-articulo h3 { font-size: 1.22rem; margin-top: 1.8rem; margin-bottom: .6rem; font-family: 'Inter', sans-serif; font-weight: 600; }
.vi-articulo p, .vi-articulo li { color: var(--vi-texto-suave); }
.vi-articulo .lead { font-size: 1.2rem; color: var(--vi-texto); font-weight: 500; border-left: 3px solid var(--vi-verde); padding-left: 1.1rem; }
.vi-articulo strong { color: var(--vi-texto); font-weight: 600; }
.vi-articulo ul, .vi-articulo ol { padding-left: 1.3rem; }
.vi-articulo li { margin-bottom: .45rem; }
.vi-articulo table { font-size: .95rem; }

/* --- Alertas Bootstrap adaptadas --------------------------------------- */
.alert { border-radius: var(--vi-radio-sm); border-width: 1px; }
.alert-success { background: color-mix(in srgb, var(--vi-exito) 12%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-exito) 35%, transparent); color: var(--vi-texto); }
.alert-danger  { background: color-mix(in srgb, var(--vi-peligro) 12%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-peligro) 35%, transparent); color: var(--vi-texto); }
.alert-warning { background: color-mix(in srgb, var(--vi-alerta) 12%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-alerta) 35%, transparent); color: var(--vi-texto); }
.alert-info    { background: var(--vi-superficie-2); border-color: var(--vi-borde); color: var(--vi-texto-suave); }

/* --- Footer ------------------------------------------------------------- */
.vi-footer {
  background: var(--vi-superficie); border-top: 1px solid var(--vi-borde);
  margin-top: 5rem; padding: 3.5rem 0 2rem; color: var(--vi-texto-suave); font-size: .93rem;
}
.vi-footer h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--vi-texto-tenue); margin-bottom: 1rem; }
.vi-footer a { color: var(--vi-texto-suave); text-decoration: none; }
.vi-footer a:hover { color: var(--vi-verde); }

/* --- Utilidades --------------------------------------------------------- */
.seccion { padding: 4rem 0; }
.seccion-alt { background: var(--vi-superficie-2); border-block: 1px solid var(--vi-borde); }
.borde-marca { border-left: 3px solid var(--vi-verde); }
.vi-divisor { height: 1px; background: var(--vi-borde); border: 0; margin: 2rem 0; }

#btn-tema {
  background: transparent; border: 1px solid var(--vi-borde);
  color: var(--vi-texto-suave); border-radius: var(--vi-radio-sm);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
}
#btn-tema:hover { border-color: var(--vi-verde); color: var(--vi-verde); }

@media (max-width: 767.98px) {
  .vi-hero { padding: 3rem 0 2.5rem; }
  .seccion { padding: 2.75rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Fila resaltada en tablas comparativas */
.table > tbody > tr.fila-elegida > * {
  background: color-mix(in srgb, var(--vi-verde) 9%, transparent) !important;
}

/* Impresión: el resultado del simulador debe salir limpio en PDF */
@media print {
  .vi-navbar, .vi-footer, #bloque-lead, .btn, #btn-tema { display: none !important; }
  body { background: #fff; color: #000; }
  .vi-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .position-sticky { position: static !important; }
  a[href]:after { content: ""; }
}

/* --- Estados de una publicación de lote --------------------------------- */
.lote-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vi-superficie-2); }
.lote-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lote-sello {
  position: absolute; top: .75rem; right: .75rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.lote-sello-vendido   { background: var(--vi-peligro); }
.lote-sello-reservado { background: var(--vi-alerta); }
.lote-sello-borrador  { background: var(--vi-texto-tenue); }
[data-theme="dark"] .lote-sello { color: #14120f; }

/* Un lote vendido sigue visible, pero atenuado: es prueba social, no oferta. */
.lote-vendido .lote-foto img { filter: saturate(.35) opacity(.75); }
.lote-vendido:hover .lote-foto img { filter: saturate(.6) opacity(.9); }
.precio-tachado { text-decoration: line-through; text-decoration-thickness: 2px; }

.vi-etiqueta-vendido {
  background: color-mix(in srgb, var(--vi-peligro) 12%, transparent);
  color: var(--vi-peligro); border-color: color-mix(in srgb, var(--vi-peligro) 30%, transparent);
}
.vi-etiqueta-reservado {
  background: color-mix(in srgb, var(--vi-alerta) 14%, transparent);
  color: var(--vi-alerta); border-color: color-mix(in srgb, var(--vi-alerta) 30%, transparent);
}
.vi-etiqueta-borrador {
  background: var(--vi-superficie-2); color: var(--vi-texto-tenue);
}

/* Banda de estado en la ficha del lote */
.lote-banda {
  border-radius: var(--vi-radio); padding: 1rem 1.25rem; border: 1.5px solid;
  display: flex; align-items: center; gap: .85rem;
}
.lote-banda-vendido   { background: color-mix(in srgb, var(--vi-peligro) 9%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-peligro) 40%, transparent); }
.lote-banda-reservado { background: color-mix(in srgb, var(--vi-alerta) 10%, var(--vi-superficie)); border-color: color-mix(in srgb, var(--vi-alerta) 40%, transparent); }

/* Galería de la ficha */
.lote-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.lote-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vi-radio-sm); }
.lote-galeria a:first-child { grid-column: 1 / -1; }
.lote-galeria a:first-child img { aspect-ratio: 16 / 9; }