/* ============================================================
   TERRENOS DE LA REGIÓN — Sistema visual v3
   ------------------------------------------------------------
   Concepto: "documento catastral vivo".
   Una escritura de propiedad tiene autoridad porque es precisa:
   medidas exactas, colindancias, sellos. Esta interfaz toma esa
   seriedad documental y la vuelve navegable.

   Decisiones:
   · Fraunces (display) — serif de contraste alto con "soft" y
     "wonk" activados: se lee formal como un título de escritura,
     pero sin la frialdad de una serif de periódico.
   · Inter (texto) — neutral, alta legibilidad en pantallas malas
     y conexiones lentas, que es como se ve esta plataforma en el
     campo.
   · Space Mono (datos) — TODO dato medible va en monoespaciada:
     precios, m², coordenadas, folios. Es la regla que amarra la
     identidad: si es un número que alguien podría verificar en un
     documento, se ve como si viniera de uno.
   · Paleta de tierra alta veracruzana: verde monte profundo,
     tinta casi negra, papel hueso cálido y un solo acento —
     ámbar maíz— reservado para lo que exige acción o atención.
   · Firma visual: la "cinta de folio", una banda monoespaciada
     con el número de folio que cruza las tarjetas y fichas, como
     el sello de un expediente.
   ============================================================ */

:root {
  /* --- Superficies --- */
  --papel:      #ffffff;   /* blanco: fondo de tarjetas */
  --hueso:      #f5f7fa;   /* gris claro: fondo de secciones */
  --hueso-2:    #eaeef4;   /* superficies hundidas */
  --linea:      #dce2ea;   /* reglas y bordes */
  --linea-2:    #c2ccd8;

  /* --- Tinta: texto --- */
  --tinta:      #4a4a4a;   /* gris oscuro: texto principal */
  --tinta-2:    #5f6b7a;   /* secundario */
  --tinta-3:    #7a8698;   /* terciario, metadatos (WCAG AA) */

  /* --- Marca: azul marino --- */
  --monte:      #12355b;   /* azul marino: header, botones principales */
  --monte-2:    #2f80ed;   /* azul medio: hover, enlaces */
  --monte-3:    #e7eef8;   /* fondo tenue de marca */

  /* --- Acento: dorado premium --- */
  --maiz:       #a8862a;   /* dorado oscurecido para texto (WCAG AA) */
  --maiz-solido:#d4af37;   /* dorado puro para detalles/bordes premium */
  --maiz-2:     #faf3dd;   /* fondo tenue del acento */

  /* --- Estados del lote ---
     Punto único de verdad: el mapa, el catálogo, la ficha y el panel
     leen estas variables. Antes cada archivo definía su propio tono y
     el mismo estado salía de distinto color según la página.

     Dos versiones de cada uno:
       --*-vivo   para el mapa (sobre foto aérea, muy saturado)
       --*        para la interfaz (texto encima, contraste legible) */
  --disponible-vivo: #00e5ff;   /* cian eléctrico */
  --apartado-vivo:   #ffb800;   /* naranja brillante */
  --vendido-vivo:    #c04dff;   /* violeta brillante */

  --disponible: #0095b3;   /* cian oscuro: legible con texto blanco */
  --apartado:   #b87d15;   /* ámbar oscuro */
  --vendido:    #8f34c9;   /* violeta oscuro */
  --alerta:     #a32b28;   /* errores y acciones destructivas */
  --alerta-2:   #fbeceb;
  --whatsapp:   #1f7a53;

  /* --- Tipografía --- */
  --display: 'Fraunces', Georgia, serif;
  --texto:   'Inter', system-ui, -apple-system, sans-serif;
  --dato:    'Space Mono', ui-monospace, 'Courier New', monospace;

  /* --- Escala de espacio (base 4) --- */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;
  --e4: 1rem;     --e5: 1.5rem;   --e6: 2rem;
  --e7: 3rem;     --e8: 4rem;

  /* --- Radios y sombras --- */
  --radio:   10px;
  --radio-s: 6px;
  --radio-l: 16px;
  --sombra:    0 1px 2px rgba(26, 33, 24, .06), 0 4px 12px rgba(26, 33, 24, .05);
  --sombra-2:  0 2px 6px rgba(26, 33, 24, .08), 0 12px 28px rgba(26, 33, 24, .10);

  /* --- Medidas --- */
  --ancho:      1720px;
  --ancho-texto: 68ch;
  --cabecera:   64px;
  --cabecera-fondo: rgba(247, 246, 241, .92);
}


/* ---------------- Reinicio ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------------- Tipografía ---------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 40;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 0 0 var(--e3);
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
h3 { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }
h4 { font-size: 1rem; font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 20; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--monte); text-underline-offset: 3px; }
a:hover { color: var(--monte-2); }

:focus-visible {
  outline: 3px solid var(--maiz);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Todo dato medible va en monoespaciada: es la regla de la identidad. */
.dato-mono, .dato, .mono {
  font-family: var(--dato);
  font-size: 0.94em;
  letter-spacing: -0.02em;
  font-feature-settings: 'zero' 1;
}

/* Antetítulo: etiqueta breve en versalitas sobre un bloque */
.eyebrow {
  font-family: var(--dato);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta-3);
  margin: 0 0 var(--e2);
  display: block;
}

.intro {
  color: var(--tinta-2);
  font-size: 1.03rem;
  max-width: var(--ancho-texto);
}

/* ---------------- Estructura ---------------- */
.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e6) clamp(var(--e4), 3vw, var(--e6)) var(--e8);
}

.seccion-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.seccion-titulo h1, .seccion-titulo h2 { margin-bottom: 0; }
.seccion-nota { color: var(--tinta-3); font-size: 0.92rem; margin: 0; }

/* ---------------- Botones ---------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.boton:hover { border-color: var(--monte); color: var(--monte); }
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--monte);
  border-color: var(--monte);
  color: var(--papel);
  font-weight: 600;
}
.boton--primario:hover { background: var(--monte-2); border-color: var(--monte-2); color: var(--papel); }

.boton--grande { padding: 0.8rem 1.5rem; font-size: 1rem; width: 100%; }
.boton--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--papel);
  font-weight: 600;
  width: 100%;
}
.boton--whatsapp:hover { background: #196343; border-color: #196343; color: var(--papel); }

/* ---------------- Formularios ---------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-s);
  background: var(--papel);
  font-family: var(--texto);
  font-size: 0.95rem;
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--monte);
  outline: 2px solid var(--monte-3);
  outline-offset: 0;
}
input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--dato);
}
label { display: block; font-weight: 500; margin-bottom: var(--e3); }
label > input, label > select, label > textarea { margin-top: var(--e1); }
label small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 0.84rem; margin-top: var(--e1); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--e5); }
legend { font-family: var(--display); font-weight: 600; font-size: 1.05rem; padding: 0; margin-bottom: var(--e3); }
legend small { font-family: var(--texto); font-weight: 400; color: var(--tinta-3); font-size: 0.84rem; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.fila-checks { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-bottom: var(--e3); }

.formulario {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5);
  box-shadow: var(--sombra);
}

/* ---------------- Avisos ---------------- */
.errores, .exito, .aviso {
  border-radius: var(--radio-s);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  font-size: 0.94rem;
  border-left: 3px solid;
}
.errores { background: var(--alerta-2); border-color: var(--alerta); color: #7d211f; }
.errores ul { margin: var(--e2) 0 0; padding-left: 1.1rem; }
.exito { background: #e7f2ed; border-color: var(--disponible); color: #14523d; }
.aviso { background: var(--maiz-2); border-color: var(--maiz); color: #7d4d1c; }

.vacio {
  text-align: center;
  color: var(--tinta-3);
  padding: var(--e7) var(--e4);
  background: var(--papel);
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio);
}

/* ---------------- Estados del lote ---------------- */
.estado, .sello, .leyenda {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--dato);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.estado--disponible, .leyenda--disponible { background: var(--disponible); color: var(--papel); }
.estado--apartado,   .leyenda--apartado   { background: var(--apartado); color: var(--papel); }
.estado--vendido,    .leyenda--vendido    { background: var(--vendido); color: var(--papel); }
.leyenda--proyecto { background: var(--maiz-2); color: #7d4d1c; border: 1px solid var(--maiz); }
.sello {
  background: transparent;
  border: 1px solid var(--maiz-solido);
  color: var(--maiz);
  text-transform: none;
  letter-spacing: 0;
}

/* Utilidades */
.oculto-visualmente {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Botón en estado "enviando": spinner + atenuado (wizard de publicar) --- */
.boton--enviando {
  cursor: progress;
  opacity: 0.85;
}
.boton--enviando::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: boton-girar 0.6s linear infinite;
  flex: 0 0 auto;
}
@keyframes boton-girar {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .boton--enviando::before { animation-duration: 1.4s; }
}

/* Muestra el icono opuesto al tema actual: en claro se ve la luna
   (para ir a oscuro); en oscuro se ve el sol (para ir a claro). */












/* ===== PWA: ventanita de instrucciones de instalar (pega al final de base.css) ===== */
.pwa-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: pwa-aparecer .2s ease;
}
@keyframes pwa-aparecer { from { opacity: 0; } to { opacity: 1; } }
.pwa-modal-caja {
  background: #fff; color: #24503a;
  border-radius: 16px; padding: 1.75rem 1.5rem;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.pwa-modal-caja img { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 1rem; }
.pwa-modal-caja h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.pwa-modal-caja p { margin: 0 0 1.4rem; color: #556; line-height: 1.5; font-size: .95rem; }
.pwa-modal-ok {
  background: #24503a; color: #fff; border: 0; border-radius: 10px;
  padding: .75rem 1.8rem; font-size: 1rem; cursor: pointer; width: 100%;
}
.pwa-modal-ok:hover { opacity: .92; }

/* El botón "Instalar app" del menú reutiliza la clase .nav-publicar que ya
   tenías, así que se ve igual que el botón destacado de antes. Como ahora es
   un <button> y no un <a>, estas reglas aseguran que se vea idéntico. */
button.nav-publicar {
  font: inherit; cursor: pointer; border: 0;
}