/* ==========================================================================
   NOOXIA CRM INMOBILIARIO — LAYOUT & COMPONENT STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── La barra de scroll ────────────────────────────────────────────────────
   La que trae Chrome sobre Linux es ancha, gris y con dos flechas: ocupa más
   que el contenido que acompaña y no se parece a nada del resto del CRM.

   Ésta hace una sola cosa —decir por dónde vas— y no compite con lo que estás
   leyendo: fina, sin flechas, sin riel, y del color del texto apagado. Se
   oscurece al pasar por encima, para que se note que se puede arrastrar.

   Los colores salen de la paleta pero no pueden ir en `tokens.css`, que es
   autogenerado desde brand.json; viven acá, uno por modo. */
:root {
  --nx-scroll: rgba(13, 13, 16, 0.20);
  --nx-scroll-hover: rgba(13, 13, 16, 0.38);
}
:root[data-theme="dark"] {
  --nx-scroll: rgba(255, 255, 255, 0.18);
  --nx-scroll-hover: rgba(255, 255, 255, 0.34);
}

/* Chrome y Edge: acá están las flechas que molestan y el riel gris.
   Ojo con el orden de estas dos partes. Desde Chrome 121, **si un elemento tiene
   `scrollbar-width` o `scrollbar-color`, Chrome ignora del todo los
   `::-webkit-scrollbar`**. Poner los dos "por las dudas" no suma: gana el estándar y
   las flechas vuelven. Medido — con los dos declarados la barra queda igual que sin
   tocar nada, con sus dos flechas. Por eso el estándar va detrás de un `@supports`
   que sólo entra donde no existe el otro, que en la práctica es Firefox. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* Las flechas de los extremos no las usa nadie y ensucian las dos puntas. */
::-webkit-scrollbar-button { display: none; }

/* El borde transparente con `background-clip` deja la barra de 6px a la vista pero
   con 12px para agarrarla: fina de ver, cómoda para el mouse. */
::-webkit-scrollbar-thumb {
  background: var(--nx-scroll);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--nx-scroll-hover);
  background-clip: padding-box;
}

/* Firefox, que no tiene los pseudo-elementos de arriba. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-scroll) transparent;
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Barra Superior Flotante Estilo Cápsula (Floating Capsule Navbar) ── */
.navbar-capsule-wrapper {
  position: sticky;
  top: 12px;
  z-index: var(--z-sticky);
  width: 100%;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}


/* La barra es el bento-topbar del kit. Acá solo queda el layout propio de la app: cuándo
   las siete secciones dejan de entrar y pasan al panel lateral, y qué sobra en el celular
   (el taller ya está en el panel; con la barra entera la página medía 588px a 390). */
#capsuleNavbar { width: 100%; }
#btnMobileNavToggle { display: none; }
#mobileActiveSectionLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Con ocho secciones la barra mide unos 1.500px. Por debajo de eso, «Subir diseño» queda
   solo con su ícono; y cuando tampoco así entra, las secciones pasan al panel lateral. Antes
   el corte estaba en 1080 y entre 1080 y 1520 la barra se salía de la pantalla: la campana y
   el avatar quedaban afuera, y el isotipo se aplastaba hasta desaparecer. */
@media (max-width: 1600px) {
  #textoTallerDiseno { display: none; }
}
@media (max-width: 1420px) {
  #capsuleNavItems { display: none; }
  #btnMobileNavToggle { display: inline-flex; min-width: 0; }
}
@media (max-width: 600px) {
  #btnNavTallerDiseno { display: none; }
  /* Las notificaciones todavía no hacen nada: en el celular dejan el lugar al rótulo. */
  #btnCapsuleNotify { display: none; }
}


/* ── Main Content Layout (Full Screen Width) ── */
.main-content-layout {
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* ~1cm de aire entre el navbar y el contenido. Todas las secciones se dibujan
     dentro de este contenedor, así que el valor vale para todas de una vez. */
  padding: 48px 24px 32px;
  box-sizing: border-box;
}


/* ── Cuando una propiedad no tiene fotos ────────────────────────────────
   Antes se mostraba un departamento de catálogo, el mismo para todas: quien
   abría la ficha veía un inmueble que no era el suyo y no había forma de
   darse cuenta. Un recuadro que lo dice es más honesto y más útil. */
.sin-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--nx-surface-2);
  border: 1px dashed var(--nx-border);
  border-radius: var(--nx-radius-md);
  color: var(--nx-muted);
}
.sin-foto-icono { font-size: 24px; opacity: .5; }
.sin-foto-texto { font-size: 12px; font-weight: 700; }

/* En un hueco chico sólo entra el ícono, y más chico todavía. El texto ni se dibuja:
   lo decide `sinFoto()` en config.js, no un selector que espíe el atributo style. */
.sin-foto-mini { border-radius: 8px; }
.sin-foto-mini .sin-foto-icono { font-size: 16px; }

/* El equipo no tiene fotos cargadas —el modelo Usuario ni siquiera guarda el campo—,
   así que el lugar del avatar lo ocupan las iniciales. */
/* La cifra de la tasación sugerida. Cuando todavía no hay superficie cargada no hay
   número que mostrar, y el aviso que ocupa su lugar no puede tener cara de precio:
   con el mismo cuerpo y el mismo peso se lee como un dato calculado. */
.wiz-tasacion-cifra {
  /* h3 de la escala: 1.5rem con peso 700. Venía escrita a mano en 18px y peso 900, que
     no es ningún escalón de la marca — el auditor recién lo vio cuando la regla salió
     del atributo `style` y entró acá. */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}
.wiz-tasacion-cifra.sin-dato {
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-muted) !important;
}


.kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.kpi-card-header span {
  font-size: 14px;
  font-weight: 700;
  color: var(--nx-text);
}


/* En pantallas táctiles el ícono crece al mínimo tocable de 44px */
@media (max-width: 768px) {
  

  /* Los controles de zoom de Leaflet vienen de 30px. Hay que igualar la
     especificidad de su propia regla (.leaflet-touch .leaflet-bar a), si no
     gana la hoja de Leaflet aunque la nuestra cargue después. */
  .leaflet-touch .leaflet-bar a,
  .leaflet-touch .leaflet-bar a.leaflet-control-zoom-in,
  .leaflet-touch .leaflet-bar a.leaflet-control-zoom-out {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px;
  }
}

.kpi-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.kpi-big-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--nx-text);
  line-height: 1.1;
}

.kpi-subtext {
  font-size: 12px;
  color: var(--nx-muted);
  margin-top: 4px;
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}

.mini-bar {
  width: 4px;
  background: var(--nx-surface-2);
  border-radius: 2px;
  transition: all 250ms;
}

.mini-bar.highlight {
  background: var(--nx-on-accent);
}


.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chart-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--nx-text);
  margin: 0;
}

.chart-pill-dropdown {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  padding: 4px 8px;
  border-radius: var(--nx-radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.horizontal-bars-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.hbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.hbar-label {
  width: 60px;
  color: var(--nx-muted);
  font-weight: 700;
  font-size: 12px;
}

.hbar-track {
  flex-grow: 1;
  height: 18px;
  background: var(--nx-surface);
  border-radius: var(--nx-radius-pill);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hbar-fill {
  height: 100%;
  background: var(--nx-on-accent);
  border-radius: var(--nx-radius-pill);
}

.hbar-badge {
  position: absolute;
  right: 6px;
  background: var(--nx-on-accent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: var(--nx-radius-pill);
}

.chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding-left: 64px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--nx-muted);
}


/* Barra de Filtros Integrada dentro de la Tarjeta de la Tabla */
.table-card-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-pills-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-pill);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
}

.filter-pill:hover {
  border-color: var(--nx-text);
}

.filter-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input-pill-wrap {
  position: relative;
  display: flex;
  align-items: center;
}


.circle-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nx-text);
  cursor: pointer;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
}

.circle-action-btn:hover {
  background: var(--nx-surface-2);
  border-color: var(--nx-text);
}


.table-prop-thumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-prop-thumb img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

.status-badge-soft {
  padding: 4px 8px;
  border-radius: var(--nx-radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.status-badge-soft.active-status {
  background: rgba(59, 112, 0, 0.12);
  color: var(--nx-accent-text);
}

.status-badge-soft.pending-status {
  background: rgba(245, 158, 11, 0.15);
  color: var(--nx-heat-2);
}


.map-preview-img {
  width: 100%;
  height: 220px;
  border-radius: 16px;
  object-fit: cover;
  position: relative;
  background: var(--nx-surface);
}


.view-panel {
  display: none;
  animation: fadeIn 0.25s ease;
}

.view-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Metrics Grid (KPIs) ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.kpi-card {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}

.kpi-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 700;
}

/* ── Properties Grid & Table ── */
.prop-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.prop-crm-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.prop-thumb-wrap {
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.prop-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prop-crm-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


/* ── Closed Deals / Clientes Cerrados Table ── */
.deals-table-container {
  overflow-x: auto;
  border-radius: var(--radius-xl);
}

.deals-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.deals-table th {
  background: var(--color-bg-card);
  box-shadow: var(--inset-shadow);
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.deals-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  background: var(--color-bg-card);
}

.deals-table tr:hover td {
  background: var(--color-bg-elevated);
}


@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ── Subpestañas Internas en Inmuebles ── */
.prop-subtabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  overflow-x: auto;
}

.prop-subtab-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 250ms ease;
  white-space: nowrap;
}

.prop-subtab-btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

.prop-subtab-btn.active {
  background: var(--color-bg-card);
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: var(--glow-accent);
}

.subtab-pane {
  display: none;
}

.subtab-pane.active {
  display: block;
  animation: fadeIn 250ms ease;
}


/* ── Proyector de Pagos de Alquiler Tabla ── */
.schedule-table-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: 12px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.schedule-table th {
  background: var(--color-bg-elevated);
  padding: 8px 16px;
  text-align: left;
  font-weight: 800;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.schedule-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.schedule-table tr.has-adjustment td {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-weight: 700;
}

/* ── Ficha de Detalle Universal Modal (Centrado al Medio) ── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--nx-text) 72%, transparent);
  /* Sin backdrop-filter a propósito: fuerza una capa compuesta y, en Chrome sobre
     Linux, los <select> de adentro dejan de abrirse con un clic y obligan a mantener
     el mouse apretado. El fondo va más opaco para compensar el contraste. */
  z-index: var(--z-drawer);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.drawer-overlay.active {
  display: flex;
}

.drawer-panel {
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  background: var(--color-bg-card);
  box-shadow: var(--raised-shadow);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: modalPopIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease, box-shadow 0.25s ease;
}

.drawer-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg-elevated);
}

.drawer-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex-grow: 1;
}

.drawer-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--color-bg-elevated);
}

/* ── Submenú Anidado en Sidebar (Nooxia Bold) ── */
.nav-subgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 24px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-left: 2px solid var(--color-border);
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-base);
}

.nav-sublink:hover {
  color: var(--color-text);
  background: var(--color-bg-elevated);
}

.nav-sublink.active {
  color: var(--color-text);
  background: var(--color-bg-elevated);
  font-weight: 700;
  border-left: 2px solid var(--color-primary);
}

.nav-subsubgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  margin: 4px 0 8px 0;
  border-left: 1px dashed var(--color-border);
}

.nav-subsublink {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-base);
}

.nav-subsublink:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-subsublink.active {
  color: var(--color-primary);
  font-weight: 800;
}


/* ── Listado de propiedades: solo el layout de la pantalla ──────────────────
   Lo visual (cards, casillas, chips, campos) es del kit bento. Acá queda dónde va cada
   cosa: filtros a la izquierda, grilla al centro y ficha a la derecha, y cómo se apilan
   cuando no entran. En el celular los filtros se abren con el botón «Filtros». */
/* ── Ficha de una propiedad: solo el layout ────────────────────────────────
   La ficha es una card del kit. Acá queda dónde se ubica (columna derecha, pegada al
   scroll) y cómo se reacomoda «en grande» dentro del modal: la galería sola a la
   izquierda y el resto en la columna derecha. */
.ficha-card { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; gap: 16px; }
.ficha-card > * { flex-shrink: 0; }
.ficha-card #btnExpandirFicha {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--nx-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: var(--nx-text);
  cursor: pointer;
}
.ficha-card #btnExpandirFicha:hover {
  background: #FFFFFF;
  color: var(--nx-accent-text);
  transform: scale(1.06);
}
.ficha-galeria { display: flex; flex-direction: column; gap: 8px; }
.ficha-galeria img#wfGalleryMainImg { cursor: pointer; }
.ficha-miniaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-tabs { width: 100%; }
.ficha-tabs > .ficha-tab { flex: 1; }
.ficha-mapa { min-height: 220px; }

.ficha-card.en-modal {
  position: static;
  width: 100%;
  max-height: none;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-auto-rows: min-content;
  gap: 8px 24px;
  align-content: start;
}
.ficha-card.en-modal > * { grid-column: 2; min-width: 0; }
/* La galería se queda sola en la izquierda y se estira: si no, queda un bloque vacío. */
.ficha-card.en-modal > .ficha-galeria {
  grid-column: 1;
  grid-row: 1 / span 12;
  min-height: 340px;
  align-self: stretch;
}
/* Dentro del modal ya está la ✕ y la ficha no puede agrandarse más. */
.ficha-card.en-modal > #btnExpandirFicha { display: none; }

@media (max-width: 900px) {
  .ficha-card.en-modal { grid-template-columns: 1fr; }
  .ficha-card.en-modal > *,
  .ficha-card.en-modal > .ficha-galeria { grid-column: 1; grid-row: auto; position: static; }
}

/* Vendidas: la fila de una operación (foto, propiedad y partes). Lo visual es del kit. */
.vendidas-fila {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 360px);
  gap: var(--nx-sig-gap);
  align-items: start;
}
.vendidas-foto { width: 140px; }
@media (max-width: 900px) {
  .vendidas-fila { grid-template-columns: 1fr; }
  .vendidas-foto { width: 100%; }
}

/* Taller de diseño: ancho de lectura y la miniatura de cada foto en cola. */
.taller { max-width: 980px; margin: 0 auto; }
.taller-miniatura { width: 160px; }

.listado-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 390px;
  gap: var(--nx-sig-gap);
  width: 100%;
  align-items: start;
}
.listado-sidebar { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
/* La card es una columna flexible con alto máximo: sin esto sus hijos se encogen y el campo
   de búsqueda quedaba de 20px. */
.listado-sidebar > * { flex-shrink: 0; }
.listado-filtro-grupo { margin-top: 24px; }
.listado-filtro-scroll { max-height: 260px; overflow-y: auto; }
.listado-centro { display: flex; flex-direction: column; gap: 16px; }
.listado-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.listado-vacio { grid-column: 1 / -1; }
.listado-filtros-btn { display: none; }

@media (max-width: 1280px) {
  .listado-layout { grid-template-columns: 260px minmax(0, 1fr); }
  
}
@media (max-width: 860px) {
  .listado-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .listado-sidebar { display: none; position: static; max-height: none; }
  .listado-sidebar.show-mobile { display: flex; }
  .listado-filtros-btn { display: inline-flex; }
}


/* Barra de Píldoras de Estado Operativo (Fiel a Captura) */
.prop-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-pill);
  padding: 4px 8px;
  box-shadow: var(--nx-shadow-soft);
}

.prop-status-pill {
  padding: 8px 16px;
  border-radius: var(--nx-radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-text);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
  font-family: var(--nx-font);
}

.prop-status-pill:hover {
  background: var(--nx-surface);
}

.prop-status-pill.active {
  background: var(--nx-surface-2);
  color: var(--nx-accent-text);
  font-weight: 800;
}


/* ══════════════════════════════════════════════════════════════
   PROPIEDADES VENDIDAS (HISTORIAL NOTARIAL & TRANSFERENCIAS)
   Sin Sidebar Izquierdo · Filtro por Propietario / Comprador
   ══════════════════════════════════════════════════════════════ */
.vendidas-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.vendidas-card {
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  padding: 16px 24px;
  box-shadow: var(--nx-shadow-soft);
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
}

.vendidas-card:hover {
  border-color: var(--nx-accent-text);
  box-shadow: var(--nx-shadow-bold-raised);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .vendidas-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


.vendidas-badge-converted {
  background: rgba(181, 251, 5, 0.22);
  color: var(--nx-accent-text);
  border: 1px solid var(--nx-accent-text);
  border-radius: var(--nx-radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   WIZARD DE INMUEBLES EN 5 PESTAÑAS (NOOXIA DESIGN SYSTEM)
   ========================================================================== */
.wizard-modal-box {
  /* La caja es la del kit (bento-modal); el expediente solo pide más ancho y más alto:
     el paso de servicios no entra en 880px sin apretarse. */
  width: min(1180px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* La barra de pasos es el segmentado del kit: en el celular se desliza de costado. */
.wizard-stepper-bar {
  align-self: flex-start;
}

/* Un paso ya recorrido va en el verde legible; el paso actual lleva el relieve del
   segmentado del kit. */
.wizard-step-pill.completed {
  color: var(--nx-accent-text);
}

/* ── Cómo respira el expediente ───────────────────────────────────────────
   El problema no eran los píxeles sueltos: era que TODOS los huecos medían casi lo
   mismo. El título de una sección quedaba tan cerca de sus campos como dos secciones
   distintas entre sí, y sin ese salto no hay punto y aparte: la pantalla se lee como
   un bloque único de cosas, aunque sean cosas distintas.

   Tres escalones, y sólo tres:

      4px   entre una etiqueta y su campo
     16px   entre cosas de la misma sección
     32px   entre una sección y la siguiente        ← el que faltaba

   El aire sale a lo ancho, no en scroll: el modal pasó de 820 a 1040 px. Un paso que
   no entra es peor que uno apretado —hay que buscar el botón de guardar—, así que si
   un paso crece, primero se ensancha el modal. */
.wizard-pane {
  display: none;
  flex-direction: column;
  gap: 32px;
}

@media (max-height: 820px) {
  .wizard-modal-box { gap: 16px; }
  .wizard-pane { gap: 16px; }
}


/* Un campo no tiene por qué ocupar toda su columna. Con el modal ancho, la casilla de
   «Baños» medía 265 px para escribir un «2»: el campo deja de parecer un campo y el ojo
   no sabe cuánto se espera que escriba. El ancho dice qué entra ahí. */
.wizard-pane input[type="number"]:not(.input-copropietario-pct) { max-width: 180px; }
.wizard-pane input[type="date"]   { max-width: 220px; }

/* El porcentaje de cada titular: un número de tres cifras con su signo al lado. */
.wiz-porcentaje { display: inline-flex; align-items: center; gap: 8px; }
.wiz-porcentaje input { width: 96px; text-align: right; }

/* Agregar un comodín propio: el campo crece y el botón queda a su lado. */
.wiz-fila-agregar { display: flex; gap: 8px; margin-top: 16px; }
.wiz-campo-corto { max-width: 220px; }

/* La tasación de alquiler va en el verde legible: es la cifra que se cobra todos los meses. */
.wiz-tasacion-cifra--acento { color: var(--nx-accent-text); }


.wizard-pane.active {
  display: flex;
}


.wizard-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}


.wizard-photo-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}


/* ==========================================================================
   PROPIEDADES ALQUILADAS (#inmuebles/alquiladas)
   ========================================================================== */
.alquiladas-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.alquiladas-card {
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  padding: 16px 24px;
  box-shadow: var(--nx-shadow-soft);
  display: grid;
  grid-template-columns: 1.4fr 1.1fr auto;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
}

.alquiladas-card:hover {
  border-color: var(--nx-accent-text);
  box-shadow: var(--nx-shadow-bold-raised);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .alquiladas-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ── Foco Visible Global para Accesibilidad (WCAG 2.4.7) ── */
:focus-visible {
  outline: 2px solid var(--nx-accent-text, #3B7000);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--nx-accent-text, #3B7000);
  outline-offset: 2px;
}

/* ── Mejoras Responsive y Targets Táctiles (WCAG 2.5.5) ── */
@media (pointer: coarse), (max-width: 768px) {
  
  
  .btn-filter-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  
  
  
  .circle-action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Searchable Combobox para Selección Rápida de Barrios Oficiales ── */
.searchable-combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  box-shadow: var(--nx-shadow-bold-raised);
  z-index: var(--z-popover);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.combobox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-text);
  cursor: pointer;
  transition: all var(--nx-dur-fast) var(--nx-ease-standard);
}

.combobox-item:hover,
.combobox-item.active {
  background: var(--nx-surface);
  color: var(--nx-text);
}

.combobox-item.add-new {
  border-top: 1px dashed var(--nx-border);
  color: var(--nx-accent-text);
  font-weight: 800;
  margin-top: 4px;
  padding-top: 8px;
}


.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: var(--nx-shadow-soft) !important;
  font-family: var(--nx-font) !important;
}


/* ── Componentes base Bold (vienen del viejo neu.css, ya aplanados) ──
   El kit neumórfico se retiró: el proyecto es Bold y la marca prohíbe mezclarlos.
   Estas cuatro clases eran las únicas con uso real. */

.nx-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--nx-radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  color: var(--nx-text);
}

.nx-badge-accent {
  background: var(--nx-accent);
  border-color: var(--nx-accent);
  color: var(--nx-on-accent);
}

.nx-card {
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  box-shadow: var(--nx-shadow-soft);
  padding: 24px;
}

.nx-input {
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: 12px 16px;
  color: var(--nx-text);
  font-family: var(--nx-font);
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color var(--nx-dur-fast) var(--nx-ease-standard);
}

.nx-input:focus,
.nx-input:focus-visible {
  /* accent-text, no lime: como borde sobre fondo claro el lime da 1.11:1
     (invisible). WCAG 1.4.11 pide >=3:1 para indicadores de interfaz. */
  border-color: var(--nx-accent-text);
  background: var(--nx-surface-2);
  outline: 2px solid var(--nx-accent-text);
  outline-offset: 2px;
}


.wiz-owner-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.wiz-owner-results:empty {
  margin-top: 0;
}

.wiz-owner-hit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-sm);
  padding: 12px 16px;
  min-height: 44px;
  font-family: var(--nx-font);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--nx-dur-fast) var(--nx-ease-standard);
}

.wiz-owner-hit:hover {
  border-color: var(--nx-accent-text);
}

.wiz-owner-hit-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--nx-text);
}

.wiz-owner-hit-doc {
  font-size: 14px;
  color: var(--nx-muted);
}

.wiz-owner-empty {
  font-size: 12px;
  color: var(--nx-muted);
  line-height: 1.5;
  padding: 12px;
  background: var(--nx-surface);
  border-radius: 8px;
}


.wiz-alta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .wiz-alta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wiz-alta-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}


/* Un <select> nativo al lado de los pills desentona: mismo alto, mismo radio y
   una flecha propia en vez de la del navegador. */
.nx-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-pill);
  color: var(--nx-text);
  font-family: var(--nx-font);
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  padding: 8px 32px 8px 16px;
  cursor: pointer;
  transition: border-color var(--nx-dur-fast) var(--nx-ease-standard);
}

.nx-select:hover {
  border-color: var(--nx-muted);
}

.nx-select:focus,
.nx-select:focus-visible {
  border-color: var(--nx-accent-text);
  outline: 2px solid var(--nx-accent-text);
  outline-offset: 2px;
}


/* La atribución de OpenStreetMap es obligatoria por la licencia de los tiles, así
   que no se saca: se deja discreta. Sin recuadro blanco y en gris, molesta mucho
   menos que la caja por defecto de Leaflet. */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.72);
  color: var(--nx-muted);
  font-family: var(--nx-font);
  font-size: 12px;
  padding: 1px 8px;
  border-radius: var(--nx-radius-sm) 0 0 0;
  box-shadow: none;
}

.leaflet-control-attribution a {
  color: var(--nx-muted);
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline;
}


.wiz-geo-estado {
  display: block;
  margin-top: 4px;
}

.wiz-geo-estado[data-tono="ok"] {
  color: var(--nx-accent-text);
  font-weight: 700;
}

.wiz-geo-estado[data-tono="aviso"] {
  color: var(--nx-heat-2);
  font-weight: 700;
}

.wiz-geo-estado[data-tono="error"] {
  color: var(--nx-error);
  font-weight: 700;
}


/* ── Ficha completa en modal ── */

.ficha-modal-box {
  position: relative;
  width: min(1080px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--nx-bg);
  border-radius: var(--nx-radius-card);
  box-shadow: var(--nx-shadow-strong);
  transition: width var(--nx-transition-normal), max-height var(--nx-transition-normal);
}

.ficha-modal-box--expandido {
  width: min(1560px, 98vw);
  max-height: 97vh;
}

.ficha-modal-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: var(--z-popover);
  display: flex;
  gap: 8px;
}

.ficha-modal-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--nx-radius-circle);
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  color: var(--nx-text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nx-shadow-soft);
}

.ficha-modal-btn:hover {
  background: var(--nx-surface);
}

.ficha-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: var(--z-popover);
  width: 44px;
  height: 44px;
  border-radius: var(--nx-radius-circle);
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  color: var(--nx-text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nx-shadow-soft);
}

.ficha-modal-close:hover {
  background: var(--nx-surface);
}

.ficha-modal-body {
  padding: 16px;
}


/* ── Resultado de la consulta de deuda ── */

.deuda-resultado {
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  margin: -4px 0 2px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
  font-size: 12px;
  line-height: 1.45;
}

.deuda-resultado strong {
  font-size: 12px;
  color: var(--nx-text);
}

.deuda-resultado span {
  color: var(--nx-muted);
}

.deuda-resultado[data-estado="ok"] {
  border-color: var(--nx-accent-text);
}

.deuda-resultado[data-estado="ok"] strong {
  color: var(--nx-accent-text);
}

/* La deuda usa el rojo de error a propósito: es el dato que frena una operación. */
.deuda-resultado[data-estado="deuda"] {
  border-color: var(--nx-error);
}

.deuda-resultado[data-estado="deuda"] strong {
  color: var(--nx-error);
}

.deuda-resultado[data-estado="aviso"] {
  border-color: var(--nx-heat-2);
}

.deuda-resultado[data-estado="aviso"] strong {
  color: var(--nx-heat-2);
}

.deuda-resultado[data-estado="error"] strong {
  color: var(--nx-error);
}


/* ── Resumen de deuda en la ficha ── */

.ficha-deudas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  padding: 16px;
}

.ficha-deudas-titulo {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nx-muted);
}

.ficha-deudas-vacio {
  font-size: 12px;
  color: var(--nx-muted);
  line-height: 1.45;
}

.ficha-deuda-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--nx-border);
}

.ficha-deuda-fila:last-child {
  border-bottom: none;
}

.ficha-deuda-fila strong {
  margin-left: auto;
}

.ficha-deuda-fila[data-tono="ok"] strong {
  color: var(--nx-accent-text);
}

.ficha-deuda-fila[data-tono="aviso"] strong {
  color: var(--nx-heat-2);
}

.ficha-deuda-fila[data-tono="deuda"] strong {
  color: var(--nx-error);
}

.ficha-deuda-fecha {
  font-size: 12px;
  color: var(--nx-muted);
  white-space: nowrap;
}

/* ── Ecogas: navegador remoto embebido ── */

#modalEcogas {
  z-index: var(--z-modal-remoto);
}

.ecogas-box {
  width: min(1040px, 96vw);
  max-height: 94vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: var(--nx-radius-card);
  box-shadow: var(--nx-shadow-strong);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ecogas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ecogas-kicker {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nx-accent-text);
}

.ecogas-head strong {
  font-size: 16px;
  color: var(--nx-text);
}

.ecogas-ayuda {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nx-muted);
  background: var(--nx-surface);
  border-radius: 8px;
  padding: 8px 16px;
}

.ecogas-pantalla-wrap {
  position: relative;
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--nx-surface);
  min-height: 320px;
}

/* La imagen es la pantalla del navegador remoto: los clicks sobre ella se reenvían,
   así que tiene que verse como algo con lo que se interactúa. */
.ecogas-pantalla {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

.ecogas-pantalla:focus-visible {
  outline: 2px solid var(--nx-accent-text);
  outline-offset: -2px;
}

.ecogas-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--nx-muted);
  background: var(--nx-surface);
}

/* ── Fila de servicio en el paso 5 ──
   Los cinco servicios comparten la misma fila. Rentas estaba metido en media
   columna con su botón y su resultado, y se leía apretado contra Municipalidad. */
.servicio-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.servicio-fila > * { min-width: 0; }

@media (max-width: 720px) {
  .servicio-fila {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .servicio-fila > button {
    justify-self: start;
  }
}

/* Titular / domicilio que informa el prestador, bajo cada servicio de la ficha. */
.ficha-deuda-quien {
  font-size: 12px;
  color: var(--nx-muted);
  line-height: 1.4;
  margin: -2px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--nx-border);
}

/* ══ Pantalla de ingreso ══════════════════════════════════════════════════════
   Tapa el CRM entero mientras no haya sesión. Los valores salen de tokens.css:
   nada de colores ni radios escritos a mano. */

body.sin-sesion { overflow: hidden; }

.login-pantalla {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--nx-bg);
}

.login-caja {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  border-radius: var(--nx-radius-bento);
  box-shadow: var(--nx-sig-base-shadow);
}

.login-marca { display: flex; align-items: center; gap: 12px; }

.login-logo {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-circle);
  box-shadow: var(--nx-sig-btn-base-rest);
}

.login-marca strong { display: block; font-size: 16px; font-weight: 800; color: var(--nx-text); }
.login-marca span   { font-size: 12px; color: var(--nx-muted); }

.login-aviso {
  padding: 8px 12px;
  border-radius: var(--nx-radius-sm);
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .28);
  color: var(--nx-error);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.login-campo { display: flex; flex-direction: column; gap: 8px; }

.login-campo span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nx-muted);
}

.login-campo input {
  height: 48px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--nx-text);
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  border-radius: var(--nx-radius-pill);
  box-shadow: var(--nx-sig-field-shadow);
}

.login-campo input:focus-visible,
.login-boton:focus-visible {
  outline: 2px solid var(--nx-accent-text);
  outline-offset: 2px;
}

.login-boton {
  height: 48px;
  border: 1px solid var(--nx-sig-accent-edge);
  border-radius: var(--nx-radius-pill);
  background: var(--nx-sig-accent-fill);
  color: var(--nx-sig-accent-text);
  box-shadow: var(--nx-sig-btn-accent-rest);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard),
              box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}

.login-boton:hover {
  transform: translateY(var(--nx-sig-lift));
  box-shadow: var(--nx-sig-btn-accent-hover);
}
.login-boton:active {
  transform: translateY(var(--nx-sig-press));
  box-shadow: var(--nx-sig-btn-accent-press);
}
.login-boton:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.login-pie {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nx-muted);
  text-align: center;
}

.login-pie code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-border);
  /* El comando se lee entero o no se lee: partido a la mitad se copia mal. */
  white-space: nowrap;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .login-boton { transition: none; }
}

/* Tarjeta sin foto. Una propiedad recién cargada no tiene imagen todavía, y poner
   una de catálogo mostraría el inmueble de otro como si fuera éste. */

/* ══════════════════════════════════════════════════════════════════════════
   DESPLEGABLE DEL CRM
   Copiado del patrón del navbar (.capsule-dropdown-menu / .dropdown-item), que
   es el único que nunca falló, adaptado al tamaño de un campo de formulario.
   La lista vive en #nxDesplegableCapa, sobre <body>, fuera de todo contenedor:
   así no la recorta el scroll de un modal ni la altera una capa compuesta.
   ══════════════════════════════════════════════════════════════════════════ */

.nx-desplegable {
  position: relative;
  display: block;
}

/* El <select> sigue en el DOM y guarda el valor; sólo deja de dibujarse. */
.nx-desplegable-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.nx-desplegable-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.nx-desplegable-boton:focus-visible {
  border-color: var(--nx-text);
  outline: 2px solid var(--nx-accent-text);
  outline-offset: 2px;
}

.nx-desplegable-boton[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.nx-desplegable-texto {
  /* min-width: 0 es lo que hace funcionar el ellipsis: sin eso el hijo de un flex se
     estira con su contenido y el texto desborda el botón en vez de recortarse. */
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-desplegable-flecha {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--nx-muted);
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard);
}

.nx-desplegable-boton.abierto .nx-desplegable-flecha {
  transform: rotate(180deg);
}

#nxDesplegableCapa {
  position: static;
}

.nx-desplegable-lista {
  position: fixed;
  z-index: var(--z-popover);
  overflow-y: auto;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-soft);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dropdownFadeIn var(--nx-dur-fast) var(--nx-ease-entrance);
}

.nx-desplegable-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--nx-radius-md);
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-text);
  cursor: pointer;
  transition: background var(--nx-dur-fast) var(--nx-ease-standard);
}

.nx-desplegable-item:hover,
.nx-desplegable-item.resaltada {
  background: var(--nx-surface-2);
}

.nx-desplegable-item.elegida {
  background: var(--nx-surface-2);
  color: var(--nx-accent-text);
  font-weight: 800;
}

.nx-desplegable-item.deshabilitada {
  opacity: .45;
  cursor: not-allowed;
}

/* En pantallas chicas el dedo necesita blanco: el mismo mínimo que ya usan los
   demás campos del CRM. */
@media (max-width: 768px) {
  .nx-desplegable-item {
    min-height: 44px;
    font-size: 14px;
  }
}