/* Demo 14 · Gestión de inquilinos · prefijo dq- · colocación .dm-std (móvil izquierda + app derecha). */

/* WhatsApp: dos chats en el mismo móvil (el del inquilino se va y entra el de la property manager) */
.d-inq .dq-hilo{ display:flex; flex-direction:column; gap:5px; }
.d-inq .dq-hilo.fuera{ display:none; }
.d-inq .dq-nom span:has(~ span:not(.oculto)){ display:none; }
.d-inq .dq-av{ background:var(--verde-agua); color:var(--verde-osc); font-size:12px; font-weight:600; }
.d-inq .dq-av b:has(~ b:not(.oculto)){ display:none; }
.d-inq .dq-nuevo{ display:inline-flex; align-items:center; gap:6px; background:#0a0a0a; color:#fff; font-weight:500; }
.d-inq .dq-nuevo .ico{ width:13px; height:13px; color:var(--verde); }
/* Foto del aparato (dibujada) */
.dq-foto{ width:226px; padding:4px 4px 6px; }
.dq-foto p{ display:block; padding:5px 4px 0; }
.dq-img{ position:relative; display:block; height:132px; border-radius:6px; overflow:hidden; background:linear-gradient(170deg, #ece6dc 0%, #d9d0c3 100%); }
.dq-split{ position:absolute; left:22px; right:22px; top:22px; height:42px; border-radius:9px; background:linear-gradient(#fdfdfd, #e6e6e6); box-shadow:0 8px 14px -8px rgba(0,0,0,.45); }
.dq-split::after{ content:''; position:absolute; left:12px; right:12px; bottom:7px; height:4px; border-radius:2px; background:#cdcdcd; }
.dq-led{ position:absolute; right:34px; top:52px; width:5px; height:5px; border-radius:50%; background:#f0a020; box-shadow:0 0 6px #f0a020; }
.dq-mando{ position:absolute; left:40px; bottom:10px; width:30px; height:54px; border-radius:7px; background:#f6f6f6; transform:rotate(-14deg); box-shadow:0 6px 12px -6px rgba(0,0,0,.45); }
.dq-mando::before{ content:''; position:absolute; left:5px; right:5px; top:6px; height:14px; border-radius:3px; background:#bfe3f2; }
.dq-mando::after{ content:''; position:absolute; left:11px; top:28px; width:8px; height:8px; border-radius:50%; background:#d64545; }

/* La app: tres vistas que se suceden */
.d-inq .dq-cuerpo{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.d-inq .dq-vista{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:14px 18px 16px; }
.d-inq .dq-v2-sale{ padding:0; }
.d-inq .dq-vista.fuera{ display:none; }
.d-inq .dq-v2:not(.oculto), .d-inq .dq-v3:not(.oculto){ animation:entra .45s var(--ease) both; }
.d-inq .dq-miga span:has(~ span:not(.oculto)){ display:none; }
.dq-cab{ display:flex; align-items:center; gap:12px; }
.dq-cab .fi-avatar{ width:40px; height:40px; font-size:13px; }
.dq-quien{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dq-quien b{ font-size:15px; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dq-quien em{ font-style:normal; font-size:12px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dq-chip{ flex:none; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px; font-size:11.2px; font-weight:600; white-space:nowrap; background:var(--nieve-2); color:var(--tinta-80); }
.dq-chip .ico{ width:12px; height:12px; stroke-width:2.6; }
.dq-chip.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dq-chip.verde{ background:var(--verde); color:#0a0a0a; }
.dq-chip.rojo{ background:#fdecec; color:#c23a3a; }
.dq-chip.ambar{ background:#fdf3e1; color:#8a5a12; }
.dq-pol-ico{ width:40px; height:40px; border-radius:10px; background:#e8eefb; color:#2f5fbf; display:grid; place-items:center; flex:none; }
.dq-pol-ico.rojo{ background:#fdecec; color:#c23a3a; }
.dq-pol-ico .ico{ width:19px; height:19px; }

/* 1) ficha del inquilino */
.dq-datos{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:0; padding:10px 12px; border-radius:8px; background:var(--nieve); }
.dq-datos dt{ font-size:11px; color:var(--tinta-45); margin-bottom:1px; }
.dq-datos dd{ margin:0; font-size:12.4px; font-weight:500; line-height:1.35; }
.dq-incs{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.dq-vacia{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta-45); padding:10px 12px; border:1px dashed var(--linea-fuerte, rgba(10,10,10,.18)); border-radius:8px; }
.dq-vacia .ico{ width:14px; height:14px; color:var(--verde-osc); }
.dq-incs:has(.dq-inc:not(.off)) .dq-vacia{ display:none; }
.dq-inc{ border:1px solid rgba(194,58,58,.35); border-radius:10px; background:#fffafa; padding:11px 13px 6px; box-shadow:0 10px 26px -18px rgba(194,58,58,.5); }
.dq-inc-cab{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.dq-inc-cab b{ flex:1; min-width:0; font-size:13.4px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dq-inc-datos{ display:flex; flex-direction:column; margin:0; }
.dq-inc-datos > div{ display:grid; grid-template-columns:96px 1fr; gap:10px; padding:6px 0; border-top:1px dashed var(--linea); }
.dq-inc-datos dt{ font-size:11.5px; color:var(--tinta-45); padding-top:1px; }
.dq-inc-datos dd{ margin:0; font-size:12.6px; line-height:1.4; font-weight:500; display:flex; align-items:center; gap:8px; border-radius:4px; }
.dq-thumb{ position:relative; flex:none; width:44px; height:32px; border-radius:4px; overflow:hidden; background:linear-gradient(170deg, #ece6dc, #d9d0c3); }
.dq-thumb .dq-split{ left:6px; right:6px; top:7px; height:12px; border-radius:3px; }
.dq-thumb .dq-split::after{ left:4px; right:4px; bottom:2px; height:2px; }
.dq-thumb .dq-led{ right:9px; top:15px; width:3px; height:3px; }

/* 2) póliza del seguro */
.dq-busca{ display:flex; align-items:center; gap:9px; height:40px; padding:0 12px; border:1px solid var(--linea-fuerte, rgba(10,10,10,.18)); border-radius:8px; font-size:13px; font-weight:500; }
.dq-busca > .ico{ width:16px; height:16px; color:var(--tinta-45); flex:none; }
.dq-busca span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dq-busca em{ font-style:normal; font-size:11.5px; color:var(--verde-osc); font-weight:600; white-space:nowrap; }
.dq-doc{ flex:1; min-height:0; overflow:hidden; position:relative; display:flex; flex-direction:column; gap:8px; padding:4px 2px 70px; }
.dq-art{ padding:10px 12px; border-radius:8px; border:1px solid var(--linea); background:#fff; opacity:.5; transition:opacity .5s, background .5s, border-color .5s, box-shadow .5s; }
.dq-art b{ display:block; font-size:12.8px; font-weight:600; margin-bottom:3px; }
.dq-art p{ margin:0; font-size:12px; line-height:1.5; color:var(--tinta-80); }
.dq-art mark{ background:transparent; color:inherit; border-radius:3px; transition:background .6s; }
.dq-art .dq-chip{ margin-top:8px; }
.dq-art.marca{ opacity:1; background:#f4fbf8; border-color:rgba(47,163,135,.5); box-shadow:0 0 0 3px rgba(60,193,160,.12); }
.dq-art.marca mark{ background:#ffe79a; }

/* 3) la incidencia y su línea de tiempo */
.dq-resumen{ display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 12px; border-radius:8px; background:var(--verde-agua); font-size:12.2px; color:var(--tinta-80); }
.dq-resumen span{ display:inline-flex; align-items:center; gap:6px; }
.dq-resumen .ico{ width:14px; height:14px; color:var(--verde-osc); }
.dq-resumen b{ font-weight:600; }
.dq-tl{ flex:1; min-height:0; overflow:hidden; position:relative; margin-top:-4px; }
.dq-tiempo{ position:relative; margin:0; padding:0 0 76px; list-style:none; display:flex; flex-direction:column; }
.dq-tiempo li{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:start; padding:5px 0 7px; }
.dq-tiempo li::before{ content:''; position:absolute; left:10px; top:24px; bottom:-4px; width:2px; background:var(--linea); }
.dq-tiempo li:last-child::before{ display:none; }
.dq-tiempo li > i{ width:22px; height:22px; border-radius:50%; border:2px solid var(--linea-fuerte, rgba(10,10,10,.18)); background:#fff; display:grid; place-items:center; color:#0a0a0a; transition:all .35s; }
.dq-tiempo li > i .ico{ width:12px; height:12px; stroke-width:3; opacity:0; }
.dq-tiempo li.hecho > i{ background:var(--verde); border-color:var(--verde); }
.dq-tiempo li.hecho > i .ico{ opacity:1; }
.dq-tiempo li.hecho{ animation:entra .4s var(--ease) both; }
.dq-tiempo li span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dq-tiempo li b{ font-size:12.8px; font-weight:600; }
.dq-tiempo li em{ font-style:normal; font-size:11.4px; color:var(--tinta-60); }
.dq-tiempo li time{ font-size:11.5px; font-weight:600; color:var(--tinta-60); font-variant-numeric:tabular-nums; padding-top:3px; }
.dq-tiempo li:not(.hecho):not(.pend) b{ color:var(--tinta-45); }
.dq-tiempo li.pend > i{ border-style:dashed; }
.dq-tiempo li.pend b{ color:#8a5a12; }
.dq-tiempo li.pend time{ color:#8a5a12; }

/* aviso final: centrado sobre la app, abajo */
.d-inq .toast{ left:386px; right:26px; margin:0 auto; width:fit-content; bottom:30px; }