/* =============================================================================
   Dafep — sitio público.
   Identidad propia: nada de Bootstrap ni de las clases .ph-* de Admon360.
   El plano es el protagonista; el resto del cromo se quita del camino.
   ========================================================================== */

:root{
  /* Marca: dorado y negro de Dafep, tomados del sitio real (dafep.com).
     Su dorado primario (#F4D03F) es muy claro para usarlo como color de
     TEXTO —falla el contraste sobre papel—; el propio Dafep nunca lo usa
     así, solo como relleno de superficies (el cuadrado del ícono), con
     negro o blanco encima. Por eso `--marca` —el que este sistema usa
     como color de texto, enlace e ícono— es su dorado OSCURO, y el
     primario vivo queda en `--marca-clara`, para rellenos y botones
     sólidos. Mismo criterio que ya documentaba `sitio.css` sobre el
     dorado y el contraste, solo que ahora con los tonos reales de Dafep. */
  --marca:#A68500;
  --marca-oscura:#7A6300;
  --marca-suave:#FFF5C2;

  /* Neutros NEUTROS: Dafep es blanco y negro, sin ningún sesgo de color en
     sus grises —a diferencia de la paleta anterior, que sesgaba verde a
     propósito para que el verde se leyera como la marca—. Aquí el gris
     puro es correcto: es exactamente lo que Dafep usa. */
  --tinta:#1A1A1A;
  --tinta-2:#4D4D4D;
  /* #7A7A7A daba ~4.3:1 sobre papel/blanco: al límite de lo legible para
     texto normal y claramente insuficiente para las etiquetas de
     `--fs-micro`/`--fs-meta` (11-12.5px) que lo usan por todo el panel —
     fechas, notas, rótulos de KPI—, exactamente lo que el usuario señaló
     como "los textos más pequeños no se alcanzan a notar" (2026-09-25).
     #5C5C5C sube a ~6.7:1, por encima del mínimo AA incluso en texto chico. */
  --tinta-3:#5C5C5C;
  --papel:#F7F7F5;
  --lienzo:#FFFFFF;
  --linea:#E0E0E0;
  --linea-suave:#EDEDED;

  /* Cartografía del proyecto. El mapa no muestra el plano CAD: se dibuja con
     estos colores, planos y saturados, sobre el suelo. Es un sistema APARTE del
     de la marca — verde = libre, como siempre lo manejan — y el dorado de marca
     nunca rellena un lote, para que no se confunda con "congelado". */
  /* Mismo valor que `PortadaService::COLORES['suelo'|'borde']`: la portada
     estática y el mapa interactivo son la misma cartografía en dos formatos,
     y deben verse como una sola marca. Si se ajusta uno, se ajusta el otro. */
  --suelo:#EFEAE1;          /* vías y espacio urbanizado */
  --suelo-borde:#DCD4C6;
  /* El parque va MÁS OSCURO que un lote disponible: si tienen el mismo verde,
     una zona común se lee como inventario a la venta. */
  --verde:#7FA96B;
  --verde-borde:#688F55;

  --disponible:#7CB069;
  --disponible-fill:#AEDA9B;
  --reservado:#D89B2C;
  --reservado-fill:#EEC167;
  --vendido:#B85C61;
  --vendido-fill:#D08A8E;
  --nodisp:#A9A294;
  --nodisp-fill:#C4BEB2;

  /* ── Segundo color de marca: negro/carbón ────────────────────────────────
     Dafep no tiene verde en su identidad: es blanco, negro y dorado, sin
     más. El nombre de la variable se queda (`--bosque-*` sigue siendo "la
     rampa de superficies profundas" en todo el CSS que la consume), pero
     el tono pasa de verde bosque a negro/carbón —pie, barra lateral y la
     mesa donde se apoya el plano—, para que el dorado se sostenga sobre
     negro tal como lo hace en dafep.com.

     OJO, no confundir con el verde del MAPA (`--disponible`): ese sigue
     siendo verde, es un sistema aparte y universal (verde = libre). */
  --bosque-1:#0A0A0A;   /* lo más profundo: pie, barra lateral */
  --bosque-2:#141414;   /* fondo base */
  --bosque-3:#1F1F1F;   /* superficie levantada */
  --bosque-4:#2E2E2E;   /* realce del degradado, hover */
  --bosque-5:#454545;   /* bordes visibles sobre negro */
  --bosque-claro:var(--marca-clara);  /* el dorado primario como acento sobre negro: dorado y negro es la marca de Dafep */
  --bosque-rgb:20,20,20;

  /* Texto sobre las superficies profundas: tres niveles y ya. Antes había siete
     grises distintos haciendo el mismo trabajo. */
  --claro-1:#F5F5F0;
  --claro-2:#B8B8B0;
  /* Mismo problema que `--tinta-3` pero sobre negro: ~4.3:1 contra
     `--bosque-1`, y es el color de los rótulos de sección del riel
     lateral —"VIENDO", "EL DÍA"—, visibles en TODA pantalla del panel.
     Subido a un gris más claro y con algo de calidez (2026-09-25). */
  --claro-3:#96968C;

  /* El dorado PRIMARIO de Dafep —el vivo, el de su ícono— vive aquí: en
     rellenos y botones sólidos, y sobre fondo oscuro, donde necesita ser
     el más claro de los tres para no apagarse.

     Ajustado (2026-09-25, a pedido del usuario: "no sé si le damos en vez
     de amarillo un toque como de oro"): el valor original (#F4D03F) es el
     amarillo literal del ícono de dafep.com, pero a esta escala —rellenos
     grandes, botones, insignias— se lee como amarillo de señal, no como
     metal. Se le bajó la saturación y se le subió el rojo frente al verde
     —mismo tono, más cálido, menos limón— para que lea "oro" y no
     "amarillo": la familia de la marca no cambia, solo dónde cae dentro de
     ella. */
  --marca-clara:#D9AE3E;
  --marca-viva:#E9C46A;    /* el dorado al pasar el cursor, sobre relleno */
  --marca-borde:#E0C583;   /* borde de la pildora dorada palida, mismo ajuste */

  /* Componentes en tripleta para poder usarlos con opacidad. */
  --claro-rgb:245,245,240;
  --marca-rgb:166,133,0;
  --tinta-rgb:26,26,26;

  /* ── Tintes de superficie ───────────────────────────────────────────────
     Ojo: los `--*-fill` de arriba son rellenos DEL PLANO, saturados para leerse
     entre 560 lotes. Detrás de un texto gritan. Estos son sus equivalentes
     pálidos, para paneles, píldoras y avisos. */
  --t-aviso:#FDF4E0;  --t-aviso-b:#E9CE93;  --t-aviso-x:#7A560A;
  --t-mal:#FBEDEE;    --t-mal-b:#E4BABD;    --t-mal-x:#8E3F43;
  --t-bien:#EDF6E9;   --t-bien-b:#BFDDB2;   --t-bien-x:#3B6B47;
  --t-neutro:#EDEBE6; --t-neutro-b:#D9D4C9; --t-neutro-x:#5C5849;
  /* Azul informativo (2026-09-25, a pedido del usuario): un quinto tono,
     aparte de dorado/verde/ámbar/rojo, para la cifra que no es buena ni
     mala —solo un conteo en curso, "Tomados", "En revisión"—. Hasta ahora
     esas caían en negro/carbón, el neutro de marca: correcto como fondo,
     pero dos de cuatro números oscuros al lado de dos de colores vivos es
     ménos variedad de la que tienen los tableros que el usuario puso como
     referencia (Admon360, geoactivos), que sí reservan un azul aparte para
     "esto es información, no una alerta". No reemplaza el dorado/negro de
     Dafep —sigue siendo el fondo, el acento principal, el 90% de la
     interfaz—: es un quinto semáforo, no una repintada. */
  --info:#3E7CB1;      --info-oscuro:#2B5A85;
  --t-info:#EAF1F7;    --t-info-b:#B9D2E5;    --t-info-x:#2B5A85;

  /* ── Forma ──────────────────────────────────────────────────────────────
     Tres radios y tres sombras para todo el producto. */
  --r-control:9px;    /* botones y campos */
  --r-caja:12px;      /* tarjetas y fichas */
  --r-grande:16px;    /* superficies grandes */
  --r-pastilla:24px;  /* pildoras de estado */
  --r-chip:3px;       /* cuadritos de leyenda */

  /* ── Elevación ───────────────────────────────────────────────────────────
     Había UNA sombra, y al 5 %: prácticamente invisible. Sobre papel claro eso
     deja todo plano, porque nada se separa del fondo. Ahora hay una rampa de
     tres, cada una con dos capas —una corta que define el borde y otra larga y
     difusa que da la distancia— y un realce blanco arriba que simula la luz
     dando en el canto de la tarjeta. Es lo que separa una caja dibujada de un
     objeto apoyado.

     La cuarta es de COLOR: el dorado no proyecta gris, y un botón de marca con
     sombra neutra se ve pegado. */
  --sombra-1:
    0 1px 2px rgba(26,26,26,.06),
    0 1px 1px rgba(26,26,26,.04);
  --sombra-2:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 1px rgba(166,133,0,.045),
    0 2px 4px rgba(26,26,26,.05),
    0 12px 28px -14px rgba(26,26,26,.28);
  --sombra-3:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(166,133,0,.06),
    0 4px 10px rgba(26,26,26,.07),
    0 24px 56px -22px rgba(26,26,26,.38);
  --brillo-marca:0 4px 16px -4px rgba(166,133,0,.45);
  --brillo-marca-fuerte:0 8px 26px -6px rgba(166,133,0,.55);
  /* Borde de tarjeta con el dorado presente en reposo, no solo al pasar el
     cursor: la costura que separaba "objeto de marca" de "caja genérica
     gris" en las tarjetas del panel — timbre de marca a baja intensidad,
     mismo criterio que ya usa `--sombra-2`/`--sombra-3` de arriba. */
  --borde-marca:1px solid rgba(166,133,0,.12);

  /* ── Escala tipográfica ─────────────────────────────────────────────────
     Antes cada pantalla se fue inventando su propio tamaño —.76rem por acá,
     .79rem por allá, 8px, 8.5px, 9px para tres etiquetas distintas que hacían
     lo mismo—: setenta valores casi iguales, ninguno igual. Esto pasa lo que
     quedó a seis tamaños con trabajo claro, y sube el piso: la etiqueta más
     chica del sistema pasa de 8px a 11px, que ya se lee sin entrecerrar los
     ojos. Nada de esto reduce texto, solo lo ordena y lo sube. */
  --fs-micro:11px;   /* antes 8–9.5px: etiquetas mayúsculas, mono, muy cortas */
  --fs-meta:12.5px;  /* antes 10–12.5px: dato secundario en mono (fechas, ids) */
  --fs-chip:13.5px;  /* antes .76–.8rem: texto de píldora o insignia */
  --fs-small:14px;   /* antes .82–.87rem: texto denso de tabla o lista */
  --fs-base:15px;    /* antes .88–.98rem: texto estándar de botón, campo, ficha */
  --fs-body:16px;    /* antes 1–1.04rem: texto corrido */

  /* ── Tipografía de Dafep ───────────────────────────────────────────────
     Plus Jakarta Sans es el cuerpo —reemplaza a Archivo—; Outfit es su
     geométrica gruesa de titulares, solo para los tres títulos grandes
     del sistema (`.heroe-tit`, `.barra-tit`, `.acceso-titulo h1`). El
     resto del texto no cambia de familia por esto. JetBrains Mono se
     queda igual: es un rol tipográfico distinto —dato, tabla, etiqueta—,
     no de marca. */
  --font-display:"Outfit","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit;text-decoration:none}
main{flex:1}
/* Un solo anillo de foco para todo el sistema, con el dorado de marca en
   vez de un contorno genérico —el detalle que separa "funciona" de "se
   siente cuidado"—. */
:focus-visible{
  outline:2px solid var(--marca);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 5px rgba(var(--marca-rgb),.16);
  transition:box-shadow .15s ease;
}

/* ── Barra superior ───────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 24px;background:var(--lienzo);
  border-bottom:1px solid var(--linea);
}
/* Bloque horizontal: el logo original apila ícono sobre texto, y a la altura de
   una barra el texto queda ilegible. Se usan las dos piezas lado a lado. */
.marca{display:flex;align-items:center;gap:10px}
.marca img{display:block;width:auto}
.marca-icono{height:34px}
.marca-texto{height:19px}
@media (max-width:560px){ .marca-texto{display:none} }
.topnav{display:flex;align-items:center;gap:20px;font-size:var(--fs-base)}
.topnav a{color:var(--tinta-2)}
.topnav a:hover{color:var(--marca)}
.btn-linea{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linea);border-radius:var(--r-control);
  padding:10px 18px;font-weight:600;font-size:var(--fs-base);background:var(--lienzo);
  transition:border-color .18s cubic-bezier(.2,.8,.25,1), color .18s cubic-bezier(.2,.8,.25,1),
             box-shadow .18s cubic-bezier(.2,.8,.25,1), transform .18s cubic-bezier(.2,.8,.25,1);
}
.btn-linea:hover{border-color:var(--marca);color:var(--marca-oscura);box-shadow:var(--sombra-2);transform:translateY(-1px)}
.btn-linea:active{transform:translateY(0);box-shadow:var(--sombra-1)}

.pie{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 24px;border-top:1px solid var(--linea);
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;
  font-size:var(--fs-meta);letter-spacing:.02em;color:var(--tinta-3);background:var(--lienzo);
}

/* ── Vitrina de proyectos ─────────────────────────────────────────────────── */
.contenedor{max-width:1180px;margin:0 auto;padding:36px 24px 64px}
.encabezado h1{
  font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;letter-spacing:-.025em;
  margin:0 0 .25em;text-wrap:balance;
}
.encabezado p{margin:0;color:var(--tinta-2);max-width:60ch}

.rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px;margin-top:30px;
}
.tarjeta{
  background:var(--lienzo);border:var(--borde-marca);border-radius:var(--r-caja);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra-2);
  transition:border-color .2s cubic-bezier(.2,.8,.25,1), transform .2s cubic-bezier(.2,.8,.25,1),
             box-shadow .2s cubic-bezier(.2,.8,.25,1);
}
.tarjeta:hover{border-color:var(--marca);transform:translateY(-3px);box-shadow:var(--sombra-3),var(--brillo-marca)}
.tarjeta-portada{aspect-ratio:16/9;background:var(--linea-suave);object-fit:cover;width:100%;display:block}
.tarjeta-cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.tarjeta h2{font-size:1.12rem;font-weight:700;margin:0;letter-spacing:-.012em}
.tarjeta .lugar{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);
}
.tarjeta .datos{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--linea-suave);
}
.dato b{display:block;font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.dato span{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);
}

/* ── Cabecera del proyecto ────────────────────────────────────────────────── */
.proy-cab{
  background:var(--lienzo);border-bottom:1px solid var(--linea);
  padding:22px 24px;
}
.proy-cab .adentro{
  max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;gap:20px;
}
.proy-cab h1{font-size:1.7rem;font-weight:700;letter-spacing:-.022em;margin:0}
.proy-cab .lugar{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);margin-top:3px;
}
.kpis{display:flex;gap:1px;background:var(--linea-suave);border:var(--borde-marca);border-radius:var(--r-control);overflow:hidden;box-shadow:var(--sombra-1)}
.kpi{background:var(--lienzo);padding:9px 16px;min-width:92px}
.kpi b{display:block;font-size:1.22rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi span{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);
}
.kpi.v b{color:var(--disponible)}
.kpi.r b{color:var(--reservado)}
.kpi.x b{color:var(--vendido)}

/* ── Zona del mapa ────────────────────────────────────────────────────────── */
.mapa-zona{
  max-width:1400px;margin:0 auto;padding:20px 24px 48px;
  display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:20px;align-items:start;
}
@media (max-width:980px){ .mapa-zona{grid-template-columns:1fr} }

.mapa-caja{
  position:relative;background:var(--lienzo);
  border:var(--borde-marca);border-radius:var(--r-grande);
  box-shadow:var(--sombra-3);overflow:hidden;
  /* Un predio angosto dentro de un lienzo ancho siempre deja aire a los
     lados: es su forma real, no un defecto de encuadre. Una trama de
     puntos finísima hace que ese aire se lea como la mesa de trabajo del
     plano, no como una pantalla que no cargó. */
  background-image:radial-gradient(circle at 1px 1px, rgba(26,26,26,.05) 1px, transparent 0);
  background-size:18px 18px;
  background-position:0 0;
}
#mapa{display:block;width:100%;height:min(72vh,680px);touch-action:none;cursor:grab}
#mapa.arrastrando{cursor:grabbing}

.lote{cursor:pointer;stroke-linejoin:round;transition:fill-opacity .12s ease}
.lote-disponible{fill:var(--disponible-fill);stroke:var(--disponible);stroke-width:.6}
.lote-reservado {fill:var(--reservado-fill); stroke:var(--reservado); stroke-width:.6}
.lote-vendido   {fill:var(--vendido-fill);   stroke:var(--vendido);   stroke-width:.6}
.lote-no_disponible{fill:var(--nodisp-fill); stroke:var(--nodisp);    stroke-width:.5}
.lote:hover{fill-opacity:.85}
.lote.activo{stroke-width:1.6;stroke:var(--tinta)}
.lote.apagado{opacity:.18}

/* ── Mapa dibujado (cartografía propia, sin imagen de fondo) ──────────────── */

/* El suelo urbanizado. Las vías no se dibujan: SON este suelo, visible en el
   espacio que queda entre los lotes. */
.capa-suelo polygon{fill:var(--suelo);stroke:var(--suelo-borde);stroke-width:1.4px;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.capa-verde polygon{fill:var(--verde);stroke:var(--verde-borde);stroke-width:1px;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* Sobre el mapa dibujado el lote es una superficie plena, no una transparencia.
   El trazo es de color por familia de estado, no un blanco plano: un borde
   blanco uniforme sobre 550 lotes angostos se lee como papel cuadriculado.
   El relleno es el mismo degradado diagonal —`g-disponible`, `g-reservado`,
   `g-vendido`, `g-nodisp`— que inyecta `mapa.js` al cargar el plano, con los
   mismos pares claro/base que `PortadaService::DEGRADADOS`: es la misma
   lámina, solo que interactiva en vez de una foto. */
.con-capas .lote{
  stroke-width:1px;stroke-opacity:.6;vector-effect:non-scaling-stroke;
  fill-opacity:1;
}
.con-capas .lote-disponible   {fill:url(#g-disponible);stroke:var(--disponible)}
.con-capas .lote-reservado    {fill:url(#g-reservado); stroke:var(--reservado)}
.con-capas .lote-vendido      {fill:url(#g-vendido);   stroke:var(--vendido)}
.con-capas .lote-no_disponible{fill:url(#g-nodisp);    stroke:var(--nodisp)}
.con-capas .lote-disponible:hover   {fill:var(--disponible)}
.con-capas .lote-reservado:hover    {fill:var(--reservado)}
.con-capas .lote-vendido:hover      {fill:var(--vendido)}
.con-capas .lote-no_disponible:hover{fill:var(--nodisp)}
/* Sombra suave bajo la capa de lotes — el mismo `feDropShadow` que ya usa
   `PortadaService::dibujar()` — para que el parcelario se sienta apoyado
   sobre el suelo en vez de pintado al mismo nivel. */
.capa-lotes{filter:url(#relieve)}

/* Lote seleccionado. El navegador dibuja su propio anillo de foco sobre el
   polígono —un recuadro negro redondeado que no sigue la forma del lote y se ve
   pésimo—: se apaga y se pone el nuestro. Esquinas en punta (miter), no
   redondeadas, para que el resalte calce con el trazado del lote. */
.lote:focus{outline:none}
.con-capas .lote.activo,
.con-capas .lote:focus-visible{
  stroke:var(--tinta);stroke-width:2.2px;stroke-linejoin:miter;
}

/* Respaldo: cuando se muestra la imagen del plano en vez del mapa dibujado. */
.con-fondo .lote{stroke:none}
.con-fondo .lote-no_disponible{fill:transparent}
.con-fondo .lote:hover{fill-opacity:.95}
.con-fondo .lote-disponible{fill:rgba(61,125,83,.13)}
.con-fondo .lote-reservado {fill:rgba(212,160,23,.42)}
.con-fondo .lote-vendido   {fill:rgba(154,63,63,.34)}
.con-fondo .lote.activo{
  stroke:var(--tinta);stroke-width:2px;vector-effect:non-scaling-stroke;
}

.etiqueta{
  font-family:"JetBrains Mono",monospace;font-weight:600;
  fill:var(--tinta);pointer-events:none;user-select:none;
  /* Halo blanco para que el número se lea sobre el relleno del lote.
     non-scaling-stroke lo deja del mismo grosor a cualquier zoom. */
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* Controles flotantes sobre el mapa */
.mapa-ctrl{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px}
.mapa-ctrl button{
  width:34px;height:34px;border:var(--borde-marca);background:var(--lienzo);
  color:var(--tinta-2);border-radius:var(--r-control);cursor:pointer;
  font-size:16px;font-weight:600;line-height:1;
  display:grid;place-items:center;box-shadow:var(--sombra-2);
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mapa-ctrl button:hover{
  border-color:var(--marca);color:var(--marca);
  box-shadow:var(--sombra-3),var(--brillo-marca);transform:translateY(-1px);
}

/* Barra bajo el plano. La leyenda va aquí y no flotando encima: sobre el mapa
   tapaba los lotes de la esquina inferior izquierda. */
.mapa-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:9px 12px;border-top:1px solid var(--linea);
  background:var(--papel);
}
.mapa-ayuda{
  margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:var(--fs-meta);
  letter-spacing:.02em;color:var(--tinta-3);
}
.leyenda{display:flex;flex-wrap:wrap;gap:4px}
.leyenda button{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  background:none;border:1px solid transparent;border-radius:3px;padding:4px 8px;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);letter-spacing:.03em;
  text-transform:uppercase;color:var(--tinta-2);
}
.leyenda button:hover{border-color:var(--linea);background:var(--lienzo)}
.leyenda button[aria-pressed="false"]{opacity:.4}
.leyenda i{width:11px;height:11px;border-radius:2px;border:1px solid;display:block}
.leyenda .i-disponible{background:var(--disponible-fill);border-color:var(--disponible)}
.leyenda .i-reservado {background:var(--reservado-fill); border-color:var(--reservado)}
.leyenda .i-vendido   {background:var(--vendido-fill);   border-color:var(--vendido)}
.leyenda .i-no_disponible{background:var(--nodisp-fill); border-color:var(--nodisp)}

/* Globo de datos al pasar el mouse (lo pidió el cliente: hover, no clic) */
.globo{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--tinta);color:#F2F6F4;
  border-radius:var(--r-control);padding:7px 10px;
  font-size:var(--fs-meta);line-height:1.45;white-space:nowrap;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
  opacity:0;transition:opacity .1s ease;
}
.globo.visible{opacity:1}
.globo b{font-size:var(--fs-meta)}
.globo .g-area{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:var(--fs-meta);opacity:.82;display:block}
.globo .g-precio{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);color:#8FD9A8;display:block}

/* ── Panel lateral: ficha del lote ────────────────────────────────────────── */
.panel{
  background:var(--lienzo);border:var(--borde-marca);
  border-radius:var(--r-grande);box-shadow:var(--sombra-3);
  position:sticky;top:20px;overflow:hidden;
}
.panel-vacio{padding:30px 22px;color:var(--tinta-3);text-align:center;font-size:var(--fs-base)}
.panel-vacio .icono{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);letter-spacing:.06em;
  text-transform:uppercase;color:var(--marca);display:block;margin-bottom:8px;
}
.panel-cab{padding:16px 20px 14px;border-bottom:1px solid var(--linea-suave)}
.panel-cab .cab-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panel-cab .num{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
.panel-cab .mz{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);
}
/* Medidas en línea: lo primero que se mira después del número. */
.medidas{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
/* Rótulo en la misma familia que el cuerpo, no en mono (2026-09-25): el
   mono tracked en mayúsculas es una elección técnica de "ficha de
   datos" — el usuario, comparando contra tableros que no la usan para
   etiquetas (solo para cifras/códigos puntuales), la señaló como parte
   de "el estilo de texto no cuadra". El mono se queda donde sí es un dato
   —montos, medidas, fechas— no en el rótulo que los nombra. */
.medidas span{display:flex;flex-direction:column;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.medidas b{font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-body);font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--tinta);margin-bottom:1px}
.medidas .es-esq b{color:var(--marca)}

/* El bloque de precio. La CUOTA va primero y más grande que el total: la gente
   no compra metros ni valor total, compra cuota mensual. */
.precio{padding:16px 20px;background:var(--marca-suave);border-bottom:1px solid var(--linea-suave)}
.precio .cuota span,.precio .total span{
  display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--marca-oscura);opacity:.8;
}
.precio .cuota b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;
  color:var(--marca-oscura);line-height:1.15;font-variant-numeric:tabular-nums}
.precio .total{margin-top:10px;padding-top:10px;border-top:1px solid rgba(142,99,9,.18)}
.precio .total b{display:block;font-size:1.05rem;font-weight:700;color:var(--tinta);
  font-variant-numeric:tabular-nums}

.pastilla{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-meta);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pastilla);
}
.pastilla::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* Los `--*-fill` de arriba son del PLANO, saturados a propósito para leerse
   entre 560 lotes —«detrás de un texto gritan», ver su propio comentario—.
   Estas píldoras usan los tintes pálidos que ya existían para paneles y
   avisos: el texto es la variante OSCURA de la familia, no la del mapa, o
   el texto y el fondo quedan casi del mismo tono y la palabra desaparece
   —era exactamente lo que le pasaba a «Disponible»—. */
.p-disponible{color:var(--t-bien-x);  background:var(--t-bien)}
.p-reservado {color:var(--t-aviso-x); background:var(--t-aviso)}
.p-vendido   {color:var(--t-mal-x);   background:var(--t-mal)}
.p-no_disponible{color:var(--t-neutro-x); background:var(--t-neutro)}

.panel-filas{padding:6px 20px 14px}
.fila{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--linea-suave)}
.fila:last-child{border-bottom:0}
.fila dt{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3);margin:0;
}
.fila dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.fila.destacada dd{color:var(--marca);font-size:1.06rem}
.panel-nota{
  padding:12px 20px 16px;border-top:1px solid var(--linea-suave);
  font-size:var(--fs-meta);color:var(--tinta-3);line-height:1.5;
}
.panel-nota.mt{border-top:0}
.panel dl{margin:0}
.descuento-mes-nota{
  margin:0 0 14px;padding:9px 13px;border-radius:var(--r-control);
  background:var(--t-bien);color:var(--t-bien-x);font-size:var(--fs-chip);line-height:1.5;
}

/* El simulador de plan — mapa.js, bloquePlan()/calcularPlan(). Un cambio de
   plazo recalcula y vuelve a pintar SOLO .ficha-plan, no la ficha entera:
   el <select> nunca se destruye a mitad de un clic. */
.simulador{padding:12px 20px 16px;border-top:1px solid var(--linea-suave)}
.simulador label{
  display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:7px;
}
.simulador select{
  width:100%;padding:10px 34px 10px 12px;border:1px solid var(--linea);border-radius:var(--r-control);
  background-color:var(--lienzo);font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--tinta);
  cursor:pointer;
  /* La flecha propia, no la del sistema operativo —mismo criterio que el
     `select` global de panel.css (2026-09-24)—: este simulador también lo
     ve cualquier visitante del sitio público, no solo el panel. */
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A7A7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.simulador select:focus-visible{border-color:var(--marca)}

/* ── Ingreso ──────────────────────────────────────────────────────────────── */
/* Antes era la única pantalla que se veía en un lienzo liso, sin la
   retícula dorada ni el resplandor que ya tiene el resto del sistema
   —la primera pantalla que cualquiera ve, la más plana de todas
   (2026-09-25, "mejora la pantalla de login")—. Mismo recurso que ya usa
   `.marco::before` del panel: una retícula casi invisible más un
   resplandor dorado difuso detrás de la tarjeta, para que no flote sobre
   blanco puro. */
body.centrado{
  display:grid;place-items:center;padding:32px 20px;position:relative;overflow:hidden;
  background:
    radial-gradient(640px 420px at 50% 8%, rgba(var(--marca-rgb),.10), transparent 65%),
    var(--papel);
}
/* La vitrina de perfiles (7 tarjetas) necesita menos aire arriba/abajo que
   el formulario de un solo perfil para no obligar a desplazar. */
body.centrado.amplio{padding:18px 20px}
body.centrado::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--marca-rgb),.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--marca-rgb),.028) 1px,transparent 1px);
  background-size:56px 56px;
}
body.centrado main{width:100%;max-width:420px;position:relative;z-index:1}
/* Ancho para que los perfiles quepan en una fila. Con `auto-fit` la rejilla se
   acomoda sola cuando entre un rol nuevo. */
body.centrado.amplio main{max-width:960px}
.acceso{display:flex;flex-direction:column;align-items:center;gap:22px}
.acceso-marca{display:flex;flex-direction:column;align-items:center;gap:10px}
.acceso-marca img:first-child{height:52px;width:auto}
.acceso-marca img:last-child{height:22px;width:auto}
/* Mismo nombre que `panel.css` (la entrada breve de una tarjeta al
   cargar) — se define también aquí porque el login usa el layout
   `limpio.php`, que nunca carga panel.css. */
@keyframes tarjeta-entra{from{opacity:0;transform:translateY(8px)}}
.acceso-caja{
  position:relative;overflow:hidden;
  width:100%;background:var(--lienzo);border:var(--borde-marca);
  border-radius:var(--r-grande);box-shadow:var(--sombra-3);padding:28px 26px 30px;
  animation:tarjeta-entra .45s cubic-bezier(.16,1,.3,1) both;
}
/* La misma firma dorada de 3px que ya lleva toda ficha del panel: la
   tarjeta más importante del sitio —la que decide si alguien entra o
   no— no tenía ninguna. */
.acceso-caja::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--marca-clara) 25%,var(--marca) 50%,var(--marca-clara) 75%,transparent);
  opacity:.7;
}
@media (prefers-reduced-motion:reduce){ .acceso-caja{animation:none} }
.acceso-caja h1{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .2em}
.acceso-sub{margin:0 0 20px;color:var(--tinta-3);font-size:var(--fs-base)}
.acceso-caja label{
  display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-meta);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);
  margin:14px 0 5px;
}
.acceso-caja input{
  width:100%;padding:11px 13px;font:inherit;font-size:var(--fs-base);
  border:1px solid var(--linea);border-radius:var(--r-control);
  background:var(--papel);color:var(--tinta);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.acceso-caja input:focus{
  outline:none;border-color:var(--marca);background:var(--lienzo);
  box-shadow:0 0 0 4px rgba(var(--marca-rgb),.14);
}
.acceso-pie{margin:0;font-size:var(--fs-small);color:var(--tinta-3);text-align:center}
.acceso-pie a{color:var(--marca-oscura);font-weight:600}

/* ── Vitrina de perfiles ──────────────────────────────────────────────────
   El acceso arranca por aquí: cada quien reconoce su tarjeta antes de escribir
   nada. Las tarjetas salen de config/roles.php, así que agregar un rol —el
   propietario, cuando entre propiedad horizontal— agrega la suya sin tocar la
   vista. */
body.centrado main.ancho-perfiles,
.acceso-ancho{width:100%}
/* La vitrina tiene 7 tarjetas -a diferencia del formulario de un solo perfil,
   que usa el mismo `.acceso` pero le sobra aire-: todo este bloque aprieta
   el espaciado para que quepan sin desplazar en una pantalla típica
   (2026-09-28, a pedido del usuario -"debes ajustar el zoom", viendo las
   tarjetas de abajo cortadas-). */
.acceso-ancho{gap:14px}
.acceso-ancho .acceso-marca{gap:6px}
.acceso-ancho .acceso-marca img:first-child{height:40px}
.acceso-ancho .acceso-marca img:last-child{height:17px}
.acceso-titulo{text-align:center}
.acceso-titulo h1{margin:0 0 .2em;font-size:1.6rem;font-weight:700;letter-spacing:-.028em;font-family:var(--font-display)}
.acceso-ancho .acceso-titulo h1{font-size:1.3rem}
.acceso-titulo .acceso-sub{margin:0}
.acceso-aviso{width:100%}

.perfiles{
  width:100%;display:grid;gap:10px;
  /* auto-fill, no auto-fit: con auto-fit, la última fila incompleta -aquí,
     hoy, Cliente e Inmobiliaria solos- ESTIRA sus tarjetas para llenar todo
     el ancho, mucho más anchas que las de la fila de arriba. auto-fill deja
     las columnas vacías en blanco en vez de repartirles ese espacio a las
     tarjetas que sí hay -mismo tamaño en cualquier fila, sobre cualquier
     cantidad de perfiles-. */
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.perfil{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--lienzo);border:var(--borde-marca);border-radius:var(--r-caja);
  padding:14px 16px 12px;color:inherit;box-shadow:var(--sombra-2);
  transition:transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .2s cubic-bezier(.2,.8,.25,1), border-color .2s ease;
  animation:tarjeta-entra .4s cubic-bezier(.16,1,.3,1) both;
}
.perfil:nth-child(2){animation-delay:.05s}
.perfil:nth-child(3){animation-delay:.1s}
.perfil:nth-child(4){animation-delay:.15s}
.perfil:nth-child(5){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){ .perfil{animation:none} }
.perfil:hover{transform:translateY(-4px);box-shadow:var(--sombra-3),var(--brillo-marca);border-color:var(--marca)}
.perfil-ic{
  width:34px;height:34px;border-radius:var(--r-control);display:grid;place-items:center;
  margin-bottom:8px;background:var(--marca-suave);color:var(--marca-oscura);
  transition:background .18s ease, color .18s ease;
}
.perfil:hover .perfil-ic{background:var(--bosque-1);color:var(--bosque-claro)}
/* El administrador se distingue: no es un perfil más de la fila. */
.perfil-admin .perfil-ic{background:var(--marca);color:#fff}
.perfil-admin:hover .perfil-ic{background:var(--bosque-1);color:var(--bosque-claro)}
.perfil h2{margin:0 0 3px;font-size:1rem;font-weight:700;letter-spacing:-.018em}
.perfil p{margin:0 0 8px;color:var(--tinta-2);font-size:var(--fs-small);line-height:1.4}
.perfil-ir{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  color:var(--marca-oscura);font-weight:600;font-size:var(--fs-base);
}
.perfil-ir .ic{transform:rotate(180deg);transition:transform .18s ease}
.perfil:hover .perfil-ir .ic{transform:rotate(180deg) translateX(-3px)}

/* Recordatorio de con qué perfil se está entrando, arriba del formulario. */
.acceso-perfil{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  padding-bottom:18px;border-bottom:1px solid var(--linea-suave);
}
.acceso-perfil .perfil-ic{width:38px;height:38px;margin:0}
.acceso-perfil .n{display:block;font-weight:700;font-size:var(--fs-base);line-height:1.2}
.acceso-perfil .e{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--marca-oscura);font-weight:600}
.acceso-perfil .e:hover{color:var(--marca)}

.btn-solido{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;margin-top:22px;padding:13px 18px;font:inherit;font-weight:600;font-size:var(--fs-base);
  color:#fff;border:0;border-radius:var(--r-control);cursor:pointer;
  /* Un degradado de 135° sobre el propio dorado: no cambia el color, le da
     volumen. Plano, el botón se lee como un rectángulo pintado. */
  background:linear-gradient(135deg,var(--marca-viva),var(--marca-oscura));
  box-shadow:var(--brillo-marca);
  transition:box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.btn-solido:hover{box-shadow:var(--brillo-marca-fuerte);transform:translateY(-1px);filter:brightness(1.05)}
.btn-solido:active{transform:translateY(0);box-shadow:var(--brillo-marca)}
/* Barrido de luz diagonal al pasar el cursor: el botón ya tenía volumen
   (degradado + sombra de color); esto le suma el brillo de metal que un
   relleno estático no puede dar (2026-09-25). */
.btn-solido::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:220% auto;background-position:150% 0;
}
.btn-solido:hover::after{animation:btn-brillo .65s ease}
@keyframes btn-brillo{from{background-position:150% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){ .btn-solido:hover::after{animation:none} }

.aviso{
  padding:15px 18px;border-radius:var(--r-control);font-size:var(--fs-base);line-height:1.55;
  margin-bottom:4px;border-left-width:4px;
}
.aviso-mal{background:var(--t-mal);color:var(--t-mal-x);border:1px solid var(--t-mal-b)}
.aviso-bien{background:var(--t-bien);color:var(--t-bien-x);border:1px solid var(--t-bien-b)}