/* Demo 13 · Ficha del inmueble en segundos · escenario 1000 × 620. Prefijo dfi-.
   Izquierda: «Nuevo inmueble» (fotos que se suben + datos) · derecha: la ficha que se crea en la app · al final, WhatsApp encima de la izquierda. */

/* ---------- Colocación ---------- */
.d-fic .dfi-nuevo{ position:absolute; z-index:2; left:30px; top:18px; width:362px; height:560px; }   /* abajo deja sitio a la etiqueta «Ejemplo» */
.d-fic .app{ left:410px; top:18px; width:566px; height:584px; }
.d-fic .dfi-wa{ position:absolute; z-index:5; left:30px; top:250px; width:362px; height:328px; }
.d-fic .dfi-logo-wa{ left:14px; top:234px; width:42px; height:42px; border-radius:12px; z-index:7; }
.d-fic .dfi-logo-wa .ico{ width:24px; height:24px; }
.d-fic .toast{ left:430px; right:24px; margin:0 auto; width:fit-content; bottom:30px; top:auto; }

/* ---------- Nuevo inmueble: fotos y datos ---------- */
.dfi-nuevo{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--linea);
  box-shadow:0 2px 4px rgba(10,10,10,.05), 0 30px 70px -30px rgba(10,10,10,.4); }
.dfi-nuevo-cab{ flex:none; display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--linea); }
.dfi-nuevo-ico{ width:34px; height:34px; border-radius:9px; background:var(--verde-agua); color:var(--verde-osc); display:grid; place-items:center; flex:none; }
.dfi-nuevo-ico .ico{ width:17px; height:17px; }
.dfi-nuevo-cab b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.dfi-nuevo-cab em{ display:block; font-style:normal; font-size:11.5px; color:var(--tinta-60); margin-top:2px; }
.dfi-sec{ padding:10px 16px 2px; display:flex; flex-direction:column; gap:8px; }
.dfi-ups{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.dfi-up{ position:relative; height:72px; border-radius:8px; overflow:hidden; background:var(--nieve); }
.dfi-up .dfi-ph{ transition:opacity .5s, filter .5s; }
.dfi-up:not(.subida) .dfi-ph{ opacity:.12; filter:blur(3px); }
.dfi-carga{ position:absolute; left:10px; right:10px; top:50%; height:5px; margin-top:-2px; border-radius:3px; background:rgba(10,10,10,.1); overflow:hidden; transition:opacity .3s; }
.dfi-carga i{ display:block; height:100%; width:45%; border-radius:3px; background:var(--verde); animation:dfi-carga 1.1s ease-in-out infinite; }
@keyframes dfi-carga{ from{ transform:translateX(-100%); } to{ transform:translateX(230%); } }
.dfi-up.subida .dfi-carga{ opacity:0; }
.dfi-tag{ position:absolute; left:5px; right:5px; bottom:5px; padding:3px 6px; border-radius:5px; background:rgba(10,10,10,.72); color:#fff; font-style:normal; font-size:9.5px; font-weight:500; line-height:1.25;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.dfi-datos{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:0; }
.dfi-datos div{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:7px 9px; border-radius:7px; background:var(--nieve); }
.dfi-datos dt{ font-size:10.5px; color:var(--tinta-45); }
.dfi-datos dd{ margin:0; font-size:12.4px; font-weight:500; line-height:1.3; color:var(--tinta); border-radius:4px; }

/* ---------- La ficha en la app ---------- */
.dfi-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dfi-barra{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px 8px; }
.dfi-ref{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--tinta-60); min-width:0; }
.dfi-ref b{ font-weight:500; color:var(--tinta-80); white-space:nowrap; }
.dfi-ref .ico{ width:14px; height:14px; color:var(--tinta-45); }
.dfi-estados{ display:flex; }
.dfi-estado{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:500; white-space:nowrap; }
.dfi-estado:has(~ .dfi-estado:not(.off)){ display:none; }
.dfi-estado.off{ display:none; }
.dfi-estado.espera{ background:var(--nieve); color:var(--tinta-45); }
.dfi-estado.crea{ background:#fdf3e1; color:#8a5a12; }
.dfi-estado.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dfi-estado.env{ background:var(--tinta); color:#fff; }
.dfi-estado .ico{ width:12px; height:12px; stroke-width:2.6; }
.dfi-estado.env .ico{ color:var(--verde); }
.dfi-gira{ width:11px; height:11px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:dfi-gira .8s linear infinite; }
@keyframes dfi-gira{ to{ transform:rotate(360deg); } }
.dfi-pasos{ flex:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0; padding:0 18px 10px; list-style:none; border-bottom:1px solid var(--linea); }
.dfi-pasos li{ display:flex; align-items:center; justify-content:center; gap:5px; height:26px; border-radius:6px; background:var(--nieve); font-size:11.5px; font-weight:500; color:var(--tinta-30); transition:background .4s, color .4s; }
.dfi-pasos li .ico{ width:12px; height:12px; stroke-width:2.6; opacity:0; transition:opacity .4s; }
.dfi-pasos li.hecho{ background:var(--verde-agua); color:var(--verde-osc); }
.dfi-pasos li.hecho .ico{ opacity:1; }

.dfi-hoja{ flex:1; min-height:0; overflow:hidden; position:relative; padding:14px 18px 40px; display:flex; flex-direction:column; gap:14px; }
.dfi-hoja > *{ flex:none; }
.dfi-fwrap{ position:relative; }
.dfi-sk{ position:absolute; left:0; right:0; top:0; height:248px; border:1.5px dashed var(--linea-fuerte, rgba(10,10,10,.18)); border-radius:10px; background:var(--nieve);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--tinta-45); }
.dfi-sk .ico{ width:22px; height:22px; }
.dfi-sk:has(+ .dfi-fotos:not(.off)){ display:none; }
.dfi-fotos{ display:flex; flex-direction:column; gap:6px; }
.dfi-portada{ position:relative; display:block; height:188px; border-radius:10px; overflow:hidden; }
.dfi-portada em{ position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); font-style:normal; font-size:11px; font-weight:600; color:var(--tinta); }
.dfi-portada em .ico{ width:11px; height:11px; color:#e0a400; }
.dfi-galeria{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; position:relative; }
.dfi-g{ display:block; height:54px; border-radius:6px; overflow:hidden; }
.dfi-mas{ position:absolute; right:6px; bottom:6px; padding:2px 7px; border-radius:5px; background:rgba(10,10,10,.7); color:#fff; font-size:10.5px; font-weight:600; }
.dfi-cabecera{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:start; }
.dfi-cabecera h4{ margin:0; font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.015em; border-radius:4px; }
.dfi-donde{ grid-column:1; display:flex; align-items:center; gap:5px; margin:0; font-size:12px; color:var(--tinta-60); border-radius:4px; }
.dfi-donde .ico{ width:12px; height:12px; }
.dfi-precio{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:22px; font-weight:600; letter-spacing:-.025em; color:var(--tinta); border-radius:4px; white-space:nowrap; }
.dfi-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.dfi-chips li{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; background:var(--nieve); font-size:11.8px; font-weight:500; color:var(--tinta-80); }
.dfi-chips .ico{ width:12px; height:12px; color:var(--verde-osc); }
.dfi-bloque{ display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--linea); }
.dfi-desc{ margin:0; font-size:12.6px; line-height:1.55; color:var(--tinta-80); border-radius:4px; }
.dfi-carac{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:0; padding:0; list-style:none; }
.dfi-carac li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--tinta-80); }
.dfi-carac .ico{ width:13px; height:13px; color:var(--verde-osc); flex:none; }
.dfi-cee{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; }
.dfi-cee-t{ font-size:12px; font-weight:500; }
.dfi-letras{ display:flex; gap:3px; }
.dfi-letras i{ flex:1; height:20px; border-radius:3px; display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:700; color:#fff; opacity:.35; }
.dfi-letras i.act{ opacity:1; transform:scaleY(1.2); box-shadow:0 4px 10px -4px rgba(0,0,0,.5); }
.dfi-l-a{ background:#1a9850; } .dfi-l-b{ background:#66bd63; } .dfi-l-c{ background:#a6d96a; } .dfi-l-d{ background:#d9c43a; }
.dfi-l-e{ background:#f39c34; } .dfi-l-f{ background:#e8613a; } .dfi-l-g{ background:#d7301f; }
.dfi-cee em{ grid-column:1 / -1; font-style:normal; font-size:11px; color:var(--tinta-60); }
.dfi-dl{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:0; }
.dfi-dl div{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; padding:5px 0; border-bottom:1px dashed var(--linea); }
.dfi-dl dt{ color:var(--tinta-45); }
.dfi-dl dd{ margin:0; font-weight:500; color:var(--tinta); text-align:right; }
.dfi-vers{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; padding:0; list-style:none; }
.dfi-vers li{ position:relative; display:flex; flex-direction:column; gap:2px; padding:8px 30px 8px 10px; border-radius:8px; border:1px solid var(--linea); background:#fff; transition:border-color .4s, background .4s; }
.dfi-vers b{ font-size:12.4px; font-weight:600; }
.dfi-vers em{ font-style:normal; font-size:10.8px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dfi-vers .ico{ position:absolute; right:9px; top:50%; margin-top:-8px; width:16px; height:16px; padding:3px; border-radius:50%; background:var(--verde); color:var(--tinta); stroke-width:3; opacity:0; transition:opacity .4s; box-sizing:border-box; }
.dfi-vers li.lista{ border-color:var(--verde); background:var(--verde-agua); }
.dfi-vers li.lista .ico{ opacity:1; }

/* ---------- WhatsApp con la agente (aparece al final) ---------- */
.dfi-wa{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 4px rgba(10,10,10,.05), 0 30px 70px -24px rgba(10,10,10,.5), 0 0 0 1px rgba(10,10,10,.06); }
.dfi-wa .wa-cab{ height:52px; padding-left:44px; }
.dfi-wa .wa-cab > .ico{ width:18px; height:18px; }
.dfi-av{ background:var(--tinta) !important; color:var(--verde) !important; }
.dfi-av .ico{ width:17px !important; height:17px !important; }
.dfi-wa .wa-msg{ font-size:12.6px; max-width:88%; }

/* ---------- Fotos dibujadas (sin imágenes) ---------- */
.dfi-ph{ position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--pared, #eee); }
.dfi-ph i{ position:absolute; display:block; }
.dfi-s{ left:0; right:0; bottom:0; height:30%; background:var(--suelo, #ccc); }
.dfi-v{ top:12%; left:58%; width:28%; height:48%; background:linear-gradient(180deg, #9fd0ee, #e6f4fc); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 0 26px 8px rgba(255,246,214,.45); }
.dfi-m{ bottom:22%; left:8%; width:44%; height:22%; background:var(--mueble, #999); border-radius:4px 4px 2px 2px; }
.dfi-x{ display:none !important; }
/* salón: pared cálida, parqué, sofá gris y una planta */
.dfi-salon{ --pared:#efe6da; --suelo:repeating-linear-gradient(90deg, #c99d6f 0 16%, #bd9063 16% 16.6%); --mueble:linear-gradient(#97a2ab 0 45%, #7f8a93 45%); }
.dfi-salon .dfi-x{ display:block !important; right:6%; bottom:26%; width:11%; height:34%; background:radial-gradient(circle at 50% 30%, #5d9c64 0 34%, transparent 35%), linear-gradient(transparent 60%, #b0784e 60%); }
/* cocina: muebles oscuros y encimera clara */
.dfi-cocina{ --pared:#f4f3f0; --suelo:repeating-linear-gradient(90deg, #d9d6d0 0 20%, #cfccc5 20% 20.6%); --mueble:linear-gradient(#ece6dc 0 16%, #3b4047 16%); }
.dfi-cocina .dfi-m{ left:0; width:54%; height:30%; bottom:20%; border-radius:0; }
.dfi-cocina .dfi-x{ display:block !important; left:4%; top:12%; width:40%; height:18%; background:#3b4047; border-radius:2px; }
/* dormitorio: cama blanca con cabecero */
.dfi-dorm{ --pared:#e5edf0; --suelo:repeating-linear-gradient(90deg, #d6b48e 0 16%, #cba882 16% 16.6%); --mueble:linear-gradient(#fff 0 38%, #cfd9de 38%); }
.dfi-dorm .dfi-m{ width:50%; height:20%; }
.dfi-dorm .dfi-x{ display:block !important; left:8%; bottom:42%; width:50%; height:14%; background:#9fb2bb; border-radius:4px 4px 0 0; }
/* baño: azulejo, espejo y lavabo */
.dfi-bano{ --pared:#eaf0f2; --suelo:#c9cfd2; --mueble:linear-gradient(#fff 0 30%, #d6dde0 30%);
  background-image:linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px); background-size:10px 10px; }
.dfi-bano .dfi-v{ display:none; }
.dfi-bano .dfi-m{ left:30%; width:40%; height:22%; bottom:30%; border:1px solid #c5ced2; }
.dfi-bano .dfi-x{ display:block !important; left:33%; top:12%; width:34%; height:30%; background:linear-gradient(135deg, #d6e4ea, #fff 60%, #e3edf1); border:2px solid #b8c4c9; border-radius:3px; }
/* terraza: cielo, barandilla y suelo de barro */
.dfi-terraza{ --pared:linear-gradient(180deg, #a9d8f2, #e9f6fc); --suelo:repeating-linear-gradient(90deg, #c77850 0 14%, #b86b45 14% 14.6%); --mueble:transparent; }
.dfi-terraza .dfi-v{ top:34%; left:50%; width:44%; height:36%; background:#ddd3c6; border:0; box-shadow:none;
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(90,110,125,.45) 6px 12px); }
.dfi-terraza .dfi-m{ left:0; width:100%; bottom:30%; height:24%; border-radius:0; border-top:3px solid #4a4f55; background:repeating-linear-gradient(90deg, #4a4f55 0 2px, transparent 2px 11px); }
.dfi-terraza .dfi-x{ display:block !important; left:8%; bottom:26%; width:14%; height:38%; background:radial-gradient(circle at 50% 30%, #4e9a5a 0 36%, transparent 37%), linear-gradient(transparent 62%, #b0784e 62%); }
/* fachada: edificio con ventanas */
.dfi-fachada{ --pared:linear-gradient(180deg, #9fd2f0, #e7f4fb); --suelo:#b8bcbf; }
.dfi-fachada .dfi-s{ height:8%; }
.dfi-fachada .dfi-v{ display:none; }
.dfi-fachada .dfi-m{ left:18%; width:64%; bottom:8%; height:82%; border-radius:2px 2px 0 0;
  background:repeating-linear-gradient(0deg, #e2d3bd 0 7px, transparent 7px 17px), repeating-linear-gradient(90deg, #e2d3bd 0 7px, #627d8f 7px 15px); }