/* Paquete 20 de Design (11/11/2026): 86a Oferta directa, 87a Catálogo, 88a Configuración de inmuebles.
   Hoja propia del grupo, cargada en base.html después de styles.css.
   Sólo tokens del CRM; cada regla con el prefijo de su pantalla. */

/* ==================================================================
   86a · Cargar oferta directa (página completa). Reusa .crm-dlg-g, .fld,
   .inp, .crm-monto, .crm-check, .crm-mas de la ventana de I1; lo nuevo es
   el reparto en dos columnas, el error por campo, el paso de confirmación
   del repetido y el estado sin unidades. .odi-err/.odi-msg también los usa
   inmuebles/_campos_extra.html cuando recibe errores por campo.
   ================================================================== */
.odi-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.inm .odi-form.crm-form { max-width: none; gap: 16px; }
.odi-bloque { display: flex; flex-direction: column; gap: 12px; }
.odi-bloque + .odi-bloque { padding-top: 16px; border-top: 1px solid var(--line); }
.odi-bloque > .sec { margin: 0; }

/* El error debajo de su campo (como A6 del paquete 19). */
.fld.odi-err .inp { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.odi-msg { display: flex; gap: 6px; align-items: flex-start; margin: 5px 0 0; font: 500 12px/1.35 var(--font-body); color: var(--bad); }
.odi-msg .ic { width: 14px; height: 14px; margin-top: 1px; flex: none; }
.odi-resumen-err { margin: 0; }

/* Comprador repetido: un paso propio, no un chip. */
.odi-rep {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
  padding: 14px 16px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft);
}
.odi-rep > .ic { grid-row: 1 / span 3; color: var(--warn); margin-top: 2px; }
.odi-rep-t { margin: 0; font: 700 14px/1.3 var(--font-body); color: var(--ink); }
.odi-rep-d { margin: 0; font-size: 13px; color: var(--ink); }
.odi-rep-p { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.odi-rep-acc { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Columna derecha: lo que se está por guardar. */
.odi-lado { position: sticky; top: 76px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.odi-lado .sec { margin: 0; }
.odi-datos { margin: 0; display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 8px 12px; font-size: 13px; }
.odi-datos[hidden], .odi-vacio-lado[hidden] { display: none; }
.odi-datos dt { color: var(--ink-muted); }
.odi-datos dd { margin: 0; text-align: right; font-weight: 600; }
.odi-dif { color: var(--warn); }
.odi-pasos { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: p; }
.odi-pasos li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 12.5px; color: var(--ink-muted); counter-increment: p; }
.odi-pasos li::before {
  content: counter(p); width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font: 600 10px var(--font-mono); color: var(--ink);
}
.odi-pasos strong { color: var(--ink); font-weight: 600; }
.odi-vacio-lado { margin: 0; font-size: 12.5px; color: var(--ink-faint); }

/* Sin unidades: decirlo, no un desplegable vacío. */
.odi-vacio { padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 640px; }
.odi-vacio-t { margin: 0; font: 700 17px var(--font-body); }
.odi-vacio p { margin: 0; color: var(--ink-muted); font-size: 13.5px; max-width: 58ch; }
.odi-vacio-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 1100px) {
  .odi-g { grid-template-columns: minmax(0, 1fr); }
  .odi-lado { position: static; order: -1; }
  .odi-pasos { display: none; }
}
@media (max-width: 720px) {
  .inm .odi-form.crm-form { padding: 14px; }
  .odi-rep { grid-template-columns: minmax(0, 1fr); }
  .odi-rep > .ic { display: none; }
  .odi-rep-acc { grid-column: 1; }
  .odi-rep-acc .btn, .odi-form .crm-dlg-acc .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .odi-form .inp { min-height: 44px; }
}

/* ==================================================================
   87a · Catálogo. Reusa la barra apilada de I4 (.sbar + .b-disp/.b-neg/
   .b-res/.b-vend) y la leyenda (.i4-ley/.i4-sw). Lo nuevo: .b-ret (I4 no
   lo dibuja en barra), la columna «Qué falta» y el reflow a tarjetas.
   ================================================================== */
.b-ret { background: repeating-linear-gradient(-45deg, var(--u-ret) 0 2px, transparent 2px 6px), var(--u-ret-soft); }

.cat-cab-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

.cat-tabla td { vertical-align: top; }
.cat-tabla-p { container-type: inline-size; }
.cat-proy { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.cat-proy b { white-space: nowrap; }
.cat-proy .meta a { color: var(--ink-muted); }
.cat-pub { display: flex; gap: 6px; flex-wrap: wrap; }

.cat-est { min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.cat-est .sbar { height: 10px; border-radius: 4px; }
.cat-est .sbar > span { font-size: 0; }
.cat-est-n { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--ink-muted); }
.cat-est-n b { font: 600 11.5px var(--font-mono); color: var(--ink); margin-right: 3px; }

.cat-falta { min-width: 190px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cat-falta li { text-wrap: pretty; display: flex; gap: 6px; align-items: flex-start; color: var(--warn); }
.cat-falta li .ic { width: 14px; height: 14px; margin-top: 1px; flex: none; }
.cat-listo { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--good); }
.cat-listo .ic { width: 14px; height: 14px; }

.cat-pie { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: center; }

/* Por ancho del panel, no de la ventana: el menú abierto se come 18rem. */
@container (max-width: 820px) {
  .cat-tabla, .cat-tabla tbody, .cat-tabla tr, .cat-tabla td { display: block; }
  .cat-tabla thead { display: none; }
  .cat-tabla tr { padding: 14px 15px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .cat-tabla td { padding: 0 !important; border: 0 !important; }
  .cat-tabla td.cat-c-proy { grid-column: 1; }
  .cat-tabla td.cat-c-pub { grid-column: 2; justify-self: end; }
  .cat-tabla td.cat-c-tot { display: none; }
  .cat-tabla td.cat-c-est, .cat-tabla td.cat-c-falta { grid-column: 1 / -1; }
  .cat-est, .cat-falta, .cat-proy { min-width: 0; }
}
@media (max-width: 900px) {
  .cat-cab-acc { width: 100%; }
  .cat-cab-acc .btn-p { margin-left: auto; }
}
@media (max-width: 720px) {
  .cat-sep { display: none; }
  .cat-cab-acc .btn { min-height: 44px; }
  .cat-cab-acc .btn-p { flex-basis: 100%; justify-content: center; }
}

/* ==================================================================
   88a · Configuración de inmuebles. Pasa la pantalla al contenedor .inm.crm
   de sus hermanas, reusa la grilla de I3 (.i3-grilla) y el panel del dólar
   (.crm-cot). Lo nuevo: los grupos de plazos, el campo con unidad, el
   error por campo y la línea de qué alcanza cada cambio (.icf-efecto).
   ================================================================== */
.icf-form { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.icf-grupo { display: flex; flex-direction: column; gap: 12px; }
.icf-grupo + .icf-grupo { padding-top: 18px; border-top: 1px solid var(--line); }
.icf-grupo-cab { display: flex; flex-direction: column; gap: 3px; }
.icf-grupo-cab .sec { margin: 0; }
.icf-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; }

.icf-campos .fld { display: flex; flex-direction: column; gap: 5px; }
.icf-num { display: flex; align-items: center; gap: 8px; }
.icf-num .inp { width: 6.5rem; flex: none; text-align: right; }
.icf-num span { font-size: 12.5px; color: var(--ink-muted); }
.icf-rango { font: 500 10.5px var(--font-mono); color: var(--ink-faint); }
.icf-campos .note { margin: 0; }
.icf-campos .icf-efecto { color: var(--ink-faint); font-size: 11.5px; }

.fld.icf-err .inp { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.icf-msg { display: flex; gap: 6px; align-items: flex-start; margin: 0; font: 500 12px/1.35 var(--font-body); color: var(--bad); }
.icf-msg .ic { width: 14px; height: 14px; margin-top: 1px; flex: none; }

.icf-acc { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.icf-acc .note { margin: 0 auto 0 0; }

.crm-cot .icf-fuente { display: inline-flex; gap: 6px; align-items: center; }
.icf-manual { display: flex; gap: 6px; }
.icf-manual .inp { flex: 1 1 auto; min-width: 0; }
.icf-vincula { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .inm .icf-g.i3-grilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .icf-form { padding: 14px; }
  .icf-acc .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .icf-form .inp, .icf-g .crm-cot .btn { min-height: 44px; }
  .icf-num .inp { width: 7.5rem; }
}