/* mapa.css — LAS CASAS, DIBUJADAS.
   ⭐ La regla de esta pantalla: lo que se ve tiene que decir algo antes de leerse. El tejado
      dice «esto es una casa», la ventana encendida dice «ha pagado», la ventana oscura dice
      «aquí no vive nadie» y las llaves de la cabecera dicen cuántas están llenas. Todo lo
      demás —los números— va debajo, para el que quiera comprobar.
   ⚠️ Y NADA DE ESTO SE INVENTA UN COLOR: el de cada ventana es el del estado que ya usa la
      pantalla de Cobros (gestion.estado_config). Dos verdes distintos para lo mismo harían
      dudar de cuál es el bueno. */

.mapa{display:grid;gap:24px;margin:0 0 24px}

/* ── LA CASA ─────────────────────────────────────────────────────────────────────────── */
/* El caballete. Estrecho y con pendiente: a lo ancho de la tarjeta entera saldría un triángulo
   de 650 px por 26 de alto, que no se lee como un tejado sino como una arruga. */
.tejado{display:block;height:30px;width:min(34%,210px);margin:0 auto -1px;background:var(--ink);
        clip-path:polygon(50% 0,100% 100%,0 100%)}
.casa-cab{width:100%;border:0;background:var(--ink);color:#fff;border-radius:18px 18px 0 0;
          padding:15px 18px;display:grid;grid-template-columns:1.5fr 1.1fr auto auto;gap:18px;
          align-items:center;text-align:left}
.casa-quien b{display:block;font:700 20px Georgia}
.casa-quien em{display:block;font-style:normal;color:#bad0c8;font-size:13px;margin-top:3px;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.casa-llaves{display:flex;flex-wrap:wrap;gap:4px}
.casa-llaves i{width:10px;height:10px;border-radius:3px;background:#ffffff26}
.casa-llaves i.on{background:var(--amber)}
.casa-llaves i.gris{background:#ffffff73}
.casa-llaves small{flex-basis:100%;color:#bad0c8;font-size:12px;margin-top:2px}
.casa-dinero{text-align:right}
.casa-dinero b{display:block;font:700 20px Georgia}
.casa-dinero small{color:#bad0c8;font-size:12px}
.casa .chevron{font-size:20px;color:#bad0c8;transition:transform .15s ease}
.casa.cerrada .casa-cab{border-radius:18px}
.casa.cerrada .fachada,.casa.cerrada .cimientos,.casa.cerrada .casa-cuentas{display:none}
.casa.cerrada .casa-cab .chevron{transform:rotate(-90deg)}

/* La fachada: el muro con las ventanas. El degradado es lo que hace que las ventanas se lean
   como huecos en una pared y no como una lista de tarjetas más. */
.fachada{background:linear-gradient(#fdfaf3,#f0ebde);border:1px solid var(--line);border-top:0;
         padding:15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
.fachada-nota{grid-column:1/-1;color:var(--muted);font-size:12px;text-align:center;padding:4px}

/* ── LA VENTANA = UNA HABITACION ─────────────────────────────────────────────────────── */
.ventana{position:relative;display:grid;gap:2px;align-content:start;text-align:left;color:var(--ink);
  background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--c) 15%,#fff));
  border:0;border-bottom:7px solid #d8d1c1;border-radius:12px 12px 5px 5px;padding:11px 12px 12px;
  box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--c) 55%,#fff),0 6px 14px #173f3a14;
  transition:transform .12s ease,box-shadow .12s ease}
.ventana:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2.5px var(--c),0 11px 22px #173f3a24}
/* El reflejo del cristal: una franja de luz en diagonal. Es lo que hace que el rectángulo se
   lea como una ventana y no como otra tarjeta más. No tapa nada: va por debajo del texto. */
.ventana::after{content:'';position:absolute;inset:2px;border-radius:10px 10px 4px 4px;pointer-events:none;
  background:linear-gradient(118deg,#ffffff00 38%,#ffffff6e 46%,#ffffff00 55%)}
.ventana>*{position:relative;z-index:1}
.v-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.v-hab{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-luz{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);
       box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
/* La luz encendida: la habitación que ya ha pagado este mes. */
.ventana.encendida .v-luz{box-shadow:0 0 10px 2px var(--c),0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)}
.v-quien{font-size:17px;font-weight:800;line-height:1.15;margin:7px 0 3px;overflow-wrap:anywhere}
.v-renta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.v-renta b{font:800 19px Georgia}
.v-renta small{color:var(--muted);font-size:11px}
.v-barra{display:block;height:5px;border-radius:99px;background:#0000000f;overflow:hidden;margin-top:7px}
.v-barra i{display:block;height:100%;background:var(--c);border-radius:99px}
.v-falta{color:var(--muted);font-size:11px;margin-top:3px}
.v-debe{margin-top:7px;background:#fdeceb;color:#8f2d24;border-radius:9px;padding:5px 7px;
        font-size:11px;font-weight:800}
.v-etiqueta{margin-top:6px;background:#0000000a;border-radius:9px;padding:4px 7px;font-size:11px;
            font-weight:700;color:var(--muted)}
.ventana.sin-datos{background:repeating-linear-gradient(135deg,#fff,#fff 7px,#f2efe8 7px,#f2efe8 14px)}

/* ⭐ LA VENTANA APAGADA. Una habitación vacía no es «una tarjeta que pone Libre»: es un hueco
      oscuro en la fachada. Se ve desde el otro lado de la mesa, que es justo lo que hace falta
      cuando la pregunta es «¿qué me queda por alquilar?». */
.ventana.libre{background:linear-gradient(165deg,#2b3b37,#1a2623);color:#c9dbd4;
               box-shadow:inset 0 0 0 2.5px #3d5049,0 6px 14px #173f3a1f;border-bottom-color:#6f6a5e}
.ventana.libre .v-hab{color:#8fa7a0}
.ventana.libre .v-quien{color:var(--amber)}
.ventana.libre .v-luz{background:#3d5049;box-shadow:none}
.ventana.libre:hover{box-shadow:inset 0 0 0 2.5px var(--amber),0 11px 22px #173f3a2e}
.v-meter{font-size:12px;font-weight:700;color:#9dc7bb;margin-top:2px}
.ventana.libre .v-renta b{color:#f2ece0}
.ventana.libre .v-renta small{color:#8fa7a0}

/* ── LOS CIMIENTOS: lo que deja la casa ──────────────────────────────────────────────── */
.cimientos{width:100%;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;
           background:#fff;padding:12px 16px;display:grid;
           grid-template-columns:repeat(3,minmax(78px,auto)) 1fr auto;gap:14px;align-items:center;
           text-align:left;color:var(--ink)}
.cimientos.on{border-radius:0}
.cimientos.on .chevron{transform:rotate(180deg)}
.cimientos .chevron{color:var(--muted)}
.c-num small{display:block;color:var(--muted);font-size:11px;letter-spacing:.05em}
.c-num b{font:800 17px Georgia}

/* Seis meses de lo que entró (verde) y lo que salió (rojo). Sin ejes ni cifras: aquí sólo se
   pregunta «¿va a mejor o a peor?»; el mes a mes con números está a un toque, debajo. */
.mini-historia{display:flex;gap:9px;align-items:flex-end;justify-content:flex-end}
.mini-historia i{display:grid;grid-template-columns:6px 6px;grid-template-rows:30px auto;gap:0 2px;
                 align-items:end}
.mini-historia i b{grid-area:1/1;width:6px;min-height:2px;background:var(--green);border-radius:2px 2px 0 0}
.mini-historia i u{grid-area:1/2;width:6px;min-height:2px;background:#c98d84;border-radius:2px 2px 0 0}
.mini-historia i em{grid-area:2/1/3/3;font-style:normal;font-size:9px;color:var(--muted);
                    text-align:center;margin-top:4px}

.casa-cuentas{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;
              padding:2px 16px 14px}
.casa-cuentas .summary{margin:12px 0}
.casa-cuentas .cabecera span,.casa-cuentas .cabecera b{font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.casa-cuentas em{font-style:normal;font-weight:800}
.casa-cuentas p{font-size:13px;line-height:1.5}

#m-espera .section-title{margin-top:6px}

@media(max-width:700px){
  .casa-cab{grid-template-columns:1fr auto auto;gap:12px;padding:13px 14px}
  .casa-llaves{grid-column:1/-1;order:3}
  .casa-quien b{font-size:18px}
  .fachada{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding:12px}
  .v-quien{font-size:16px}
  .cimientos{grid-template-columns:repeat(3,1fr) auto;gap:10px;padding:12px}
  .mini-historia{grid-column:1/-1;justify-content:flex-start}
}

/* ── LAS FIANZAS ─────────────────────────────────────────────────────────────────────────
   Una línea por habitación: quién, cuánto tienes suyo, en qué estado está. El color del chip
   es el del estado, y «sin ICAVI» o «menos de un mes de renta» van en rojo porque son las dos
   cosas que hay que arreglar, no adornos. */
.fz-hero{padding:18px}
.fz-hero .metrics{margin:0}
.fz-hero .metrics + .metrics{margin-top:10px}
.fz-hero .metric small:last-child{display:block;margin-top:3px;color:#bad0c8;font-size:11px}
.fianza-card{width:100%;border:1px solid var(--line);border-left:5px solid var(--c);background:white;
             border-radius:16px;padding:14px;display:grid;
             grid-template-columns:minmax(0,1.5fr) minmax(110px,auto) minmax(120px,auto) auto;
             gap:14px;align-items:center;text-align:left;color:var(--ink)}
.fianza-card span{min-width:0}
.fz-quien b{display:block;font-size:16px}
.fz-quien small{display:block;color:var(--muted);margin-top:3px;font-size:12px}
.fz-cifras{text-align:right}
.fz-cifras b{display:block;font:800 19px Georgia}
.fz-cifras small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.fz-falta{color:var(--red);font-weight:700}
.fz-estado{display:grid;gap:4px;justify-items:start}
.fz-estado .chip{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
                 border-radius:99px;padding:4px 9px}
.fz-estado small{font-size:11px;color:var(--muted)}
.fz-botones{display:flex;gap:6px;flex-wrap:wrap}
.fz-botones .ghost{padding:9px 11px;font-size:12px;font-weight:700}
/* El bloque dentro de la ficha de la habitación */
.fianza-bloque{margin:18px 0}
.fianza-bloque h3{font:600 19px Georgia;margin:0 0 8px}
.fianza-bloque .summary{margin:8px 0}
.fianza-bloque .acciones-col{margin-top:10px}
.fianza-bloque p.muted{font-size:13px;line-height:1.5;margin-top:10px}
.drawer.fianza .notice span{line-height:1.45}
@media(max-width:700px){
  .fianza-card{grid-template-columns:1fr auto;gap:10px}
  .fz-estado{grid-column:1;justify-items:start}
  .fz-botones{grid-column:1/-1}
  .fz-botones .ghost{flex:1}
}
/* Lo pactado y no cobrado se enseña APAGADO: no es dinero que tengas, es dinero que falta. */
.fz-cifras .fz-pendiente{color:var(--muted)}

/* ── COBROS USA ESTE MISMO DIBUJO (16/09) ────────────────────────────────────────────────
   Dos añadidos, y los dos por lo mismo que pidió el cliente: que lo PAGADO se vea. Antes,
   al cobrar, la habitación se volvía verde y ahí se acababa la información: para saber
   cuánto había entrado había que abrir la ficha o irse al Archivo. */
.v-pagado{margin-top:5px;background:#e3f3ea;color:#1d6b46;border-radius:9px;padding:4px 7px;
  font-size:11px;font-weight:750;align-self:flex-start}
.ventana.encendida{background:linear-gradient(180deg,#f2fbf6,#e7f5ee)}
/* En Cobros los cimientos no se abren: no hay cuenta que desplegar, son las tres cifras del
   mes y ya está. Sin el `chevron` no deben parecer pulsables. */
.cimientos.fijo{display:flex;cursor:default;gap:26px;align-items:center;flex-wrap:wrap}
/* Llamar o escribir, sin salir de la ventana: son las dos cosas que se hacen con quien debe.
   ⛔ ESTO SE SALIA DE LA VENTANA (visto el 27/09, roto desde el 16/09). Los hijos de una
   rejilla NO encogen por debajo de su contenido (`min-width:auto` es el valor por defecto),
   asi que «☎ +34664459486 · WhatsApp» ensanchaba la fila y se derramaba encima de la ventana
   de al lado. Dos cosas lo arreglan: que los hijos puedan encoger, y que el par se PARTA en
   dos renglones cuando no caben —el numero entero vale mas que los dos en una linea rota—. */
.ventana>*{min-width:0}
.v-contacto{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:stretch;min-width:0}
.v-tel,.v-wa{background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px 7px;
  font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.v-tel{margin-top:0;flex:1 1 110px;min-width:0}
.v-wa{flex:0 0 auto;background:#e3f3ea;border-color:#bfe3d0;color:#1d6b46}
/* Quien ha pagado de más: no es una deuda al revés, es un anticipo, y se dice en verde.
   ⚠️ SIN `align-self:flex-start`: con eso la etiqueta se dimensiona por su contenido y se sale
   de la ventana por los lados. Ocupa el ancho, como `.v-debe`, y se corta sola. */
.v-favor{margin-top:5px;background:#e3f3ea;color:#1d6b46;border-radius:9px;padding:4px 7px;
  font-size:11px;font-weight:800;max-width:100%}