/* inquilinos-modal.css — extraído de V._inq2Css() en web/views/nf-inquilinos.js
 * FIX (2026-08-16): el CSS del modal iba inyectado vía <style> dentro del
 * HTML de la modal, lo que causaba que el browser no lo aplicara en
 * algunos casos (cards Contacto/Alquiler apiladas en vez de grid 1fr 1fr).
 * Ahora vive en un .css real, cargado vía <link> en <head>, y se aplica
 * siempre independientemente del re-render.
 *
 * Mantener sincronizado con V._inq2Css() en web/views/nf-inquilinos.js
 * (si se modifica el CSS del modal desde JS, reflejarlo acá).
 */

.inq2-row:hover { background: #FBFCFE; }
.inq2-wa svg, .inq2-tel svg { width: 15px; height: 15px; }
.inq2-secico svg { width: 14px; height: 14px; }
.inq2-priv svg { width: 14px; height: 14px; flex: none; }
.inq2-mini svg { width: 12px; height: 12px; }
.inq2-chev svg { width: 13px; height: 13px; }

.inq2-2col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
}

/* FIX (2026-08-14): en modo edit/create, la card de Contacto ocupa
   grid-column:1/-1 (fila completa) dentro de la MISMA grid de 3
   columnas auto-fit que usa el modo view — con solo 2 cards en la
   fila siguiente (Alquileres/Cómo paga), auto-fit seguía reservando
   una 3ra columna vacía cuando el modal era ancho, dejando esas 2
   cards angostas y pegadas a la izquierda. En edit/create usamos
   una grid explícita de 2 columnas (colapsa a 1 en mobile) para que
   Alquileres y Cómo paga se repartan el ancho completo 50/50. */
.inq2-tarjetas-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.inq2-tarjetas-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .inq2-tarjetas-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .inq2-col-extra {
    display: none !important;
  }
}

@media (max-width: 920px) {
  .inq2-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .inq2-tel {
    display: none !important;
  }
}

/* Formulario de contacto (edit/create): filas de 2 columnas que
   colapsan a 1 columna en mobile para que nunca se desborden ni
   achiquen inputs de forma ilegible. */
.inq2-phone-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}

.inq2-2c-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inq2-unidad-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .inq2-phone-grid,
  .inq2-2c-grid,
  .inq2-unidad-grid {
    grid-template-columns: 1fr;
  }
}

/* Pagos iniciales: fila con grid responsive. Desktop: 6 columnas
   (fecha, monto, metodo, tipo, descripción, botón). Tablet/mobile:
   se comprime en 2 columnas con grid-areas para mejor usabilidad. */
.inq2-pago-row {
  display: grid;
  grid-template-columns: 120px 100px 110px 100px 1fr 36px;
  gap: 6px;
  align-items: center;
}

@media (max-width: 1000px) {
  .inq2-pago-row {
    grid-template-columns: 110px 90px 100px 90px 1fr 32px;
  }
}

@media (max-width: 760px) {
  .inq2-pago-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "fecha fecha" "monto metodo" "tipo tipo" "desc desc" "quitar quitar";
    gap: 8px;
  }
  .inq2-pago-row > *:nth-child(1) { grid-area: fecha; }
  .inq2-pago-row > *:nth-child(2) { grid-area: monto; }
  .inq2-pago-row > *:nth-child(3) { grid-area: metodo; }
  .inq2-pago-row > *:nth-child(4) { grid-area: tipo; }
  .inq2-pago-row > *:nth-child(5) { grid-area: desc; }
  .inq2-pago-row > *:nth-child(6) { grid-area: quitar; justify-self: end; }
}

.ins-content { overflow-x: hidden; }
