/* =========================================================================
   COMMAND PALETTE (⌘K)
   ========================================================================= */
.cmdk-backdrop { position: fixed; inset: 0; background: rgba(22,26,29,.55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk { width: min(640px, 92vw); background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-1); }
.cmdk-input .icon { width: 16px; height: 16px; stroke: var(--fg-3); stroke-width: 2; fill: none; }
.cmdk-input input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; color: var(--fg-1); flex: 1; }
.cmdk-input input::placeholder { color: var(--fg-3); }
.cmdk-input .kbd { font-family: var(--font-mono); font-size: 10px; background: var(--bg-inset); border: 1px solid var(--border-1); padding: 2px 6px; border-radius: 2px; color: var(--fg-2); }
.cmdk-body { overflow: auto; flex: 1; padding: 6px; }
.cmdk-group { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 8px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 2px; cursor: pointer; font-size: 13px; color: var(--fg-1); }
.cmdk-item:hover, .cmdk-item.sel { background: var(--bg-inset); }
.cmdk-item.sel { box-shadow: inset 2px 0 0 var(--revin-red); }
.cmdk-item .ico { width: 16px; height: 16px; stroke: var(--fg-2); stroke-width: 1.75; fill: none; flex-shrink: 0; }
.cmdk-item .sub { color: var(--fg-3); font-size: 11px; margin-left: auto; font-family: var(--font-mono); letter-spacing: .04em; }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border-1); background: var(--bg-inset); font-size: 11px; color: var(--fg-3); }
.cmdk-foot .kbd { font-family: var(--font-mono); font-size: 9px; background: var(--bg-surface); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 2px; color: var(--fg-2); margin-right: 4px; }

/* Notifications drawer */
.notif-back { position: fixed; inset: 0; background: rgba(22,26,29,.4); z-index: 200; }
.notif { position: fixed; top: 36px; right: 0; bottom: 0; width: min(380px, 90vw); background: var(--bg-surface); border-left: 1px solid var(--border-1); z-index: 201; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.notif-h { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display: flex; justify-content: space-between; align-items: center; }
.notif-h h3 { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-1); }
.notif-h .close { background: transparent; border: none; cursor: pointer; padding: 4px; color: var(--fg-2); display: flex; }
.notif-h .close:hover { color: var(--fg-1); }
.notif-tabs { display: flex; padding: 0 12px; border-bottom: 1px solid var(--border-1); gap: 0; }
.notif-tab { padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.notif-tab.active { color: var(--fg-1); border-bottom-color: var(--revin-red); }
.notif-body { overflow: auto; flex: 1; }
.notif-item { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-3); cursor: pointer; }
.notif-item:hover { background: var(--bg-inset); }
.notif-item.unread { background: var(--red-50); }
.notif-item.unread:hover { background: #FCE6E7; }
.notif-ico { width: 32px; height: 32px; border-radius: 999px; background: var(--bg-inset); border: 1px solid var(--border-1); color: var(--fg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-ico .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.notif-ico.red { background: var(--red-50); border-color: var(--red-200); color: var(--revin-red); }
.notif-ico.green { background: var(--success-bg); color: var(--success-fg); border-color: rgba(31,157,85,.2); }
.notif-ico.info { background: var(--info-bg); color: var(--info-fg); border-color: rgba(37,99,168,.2); }
.notif-body-text { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; color: var(--fg-1); }
.notif-title b { font-weight: 700; }
.notif-time { font-size: 11px; color: var(--fg-3); margin-top: 2px; font-family: var(--font-mono); }
.notif-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--revin-red); margin-top: 6px; flex-shrink: 0; }

/* =========================================================================
   MOBILE
   ========================================================================= */
.m-app { display: flex; justify-content: center; align-items: center; height: 100%; background: linear-gradient(135deg, var(--neutral-800), var(--neutral-900)); padding: 24px; gap: 36px; overflow: auto; }
.m-frame { width: 390px; height: 844px; background: #000; border-radius: 44px; padding: 12px; flex-shrink: 0; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 2px #1a1a1a; position: relative; }
.m-frame::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 32px; background: #000; border-radius: 999px; z-index: 10; }
.m-screen { width: 100%; height: 100%; background: var(--bg-app); border-radius: 36px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.m-status { height: 50px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--fg-1); flex-shrink: 0; background: var(--bg-app); }
.m-status .right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.m-top { padding: 12px 16px 8px; background: var(--bg-app); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-1); flex-shrink: 0; }
.m-top .greet { font-size: 10px; color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; }
.m-top h1 { font-family: var(--font-display); font-size: 18px; margin: 2px 0 0; letter-spacing: .02em; }
.m-top .avas { display: flex; align-items: center; gap: 6px; }
.m-top .ava { width: 32px; height: 32px; border-radius: 999px; background: var(--revin-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.m-top .icon-btn { width: 32px; height: 32px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-1); color: var(--fg-1); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.m-top .icon-btn .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.m-top .icon-btn .badge { position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; background: var(--revin-red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-app); }
.m-body { flex: 1; overflow: auto; padding: 16px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 12px; }
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-kpi { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 4px; padding: 12px; }
.m-kpi.accent { background: var(--revin-black); color: #fff; border-color: var(--revin-black); }
.m-kpi-eye { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.m-kpi.accent .m-kpi-eye { color: var(--neutral-300); }
.m-kpi-val { font-family: var(--font-display); font-size: 22px; line-height: 1; margin-top: 4px; }
.m-kpi.accent .m-kpi-val { color: #fff; }
.m-kpi-sub { font-size: 10px; color: var(--fg-3); margin-top: 2px; }
.m-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 4px; padding: 14px; }
.m-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m-card-h h3 { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.m-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-3); cursor: pointer; }
.m-list-item:last-child { border-bottom: none; }
.m-list-item .time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); width: 50px; flex-shrink: 0; }
.m-list-item .ico { width: 28px; height: 28px; border-radius: 4px; background: var(--bg-inset); border: 1px solid var(--border-1); color: var(--fg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-list-item .ico.red { background: var(--red-50); border-color: var(--red-200); color: var(--revin-red); }
.m-list-item .ico .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.m-list-body { flex: 1; min-width: 0; }
.m-list-title { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.m-list-sub { font-size: 11px; color: var(--fg-2); margin-top: 1px; }

/* Mobile bottom tabs */
.m-tabs { position: absolute; bottom: 12px; left: 12px; right: 12px; height: 64px; background: var(--revin-black); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr 56px 1fr 1fr; align-items: center; padding: 0 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.m-tab { background: transparent; border: none; color: var(--neutral-400); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; height: 100%; justify-content: center; }
.m-tab .icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.m-tab.active { color: #fff; }
.m-tab.active .icon { stroke: var(--revin-red); }
.m-tab span { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.m-tab.fab { background: var(--revin-red); color: #fff; border-radius: 999px; width: 48px; height: 48px; justify-self: center; align-self: center; box-shadow: 0 4px 12px rgba(226,35,44,.4); }
.m-tab.fab .icon { width: 22px; height: 22px; stroke-width: 2.5; }

/* Mobile pipeline (vertical stepper) */
.m-pipe { display: flex; flex-direction: column; gap: 0; padding: 0 4px; }
.m-pipe-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; position: relative; cursor: pointer; }
.m-pipe-num { width: 32px; height: 32px; border-radius: 4px; background: var(--bg-surface); border: 1.5px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-2); position: relative; z-index: 2; }
.m-pipe-row.done .m-pipe-num { background: var(--success); color: #fff; border-color: var(--success); }
.m-pipe-row.active .m-pipe-num { background: var(--revin-red); color: #fff; border-color: var(--revin-red); }
.m-pipe-row::before { content: ""; position: absolute; left: 19.5px; top: 46px; bottom: -14px; width: 1px; background: var(--border-1); }
.m-pipe-row:last-child::before { display: none; }
.m-pipe-row.done::before { background: var(--success); }
.m-pipe-body { padding-top: 4px; }
.m-pipe-title { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.m-pipe-row.done .m-pipe-title { color: var(--fg-3); }
.m-pipe-meta { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

/* Mobile property card */
.m-prop { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.m-prop-photo { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--neutral-700), var(--neutral-800)); position: relative; }
.m-prop-photo .ph-price { position: absolute; bottom: 10px; left: 10px; background: var(--revin-red); color: #fff; padding: 4px 10px; font-family: var(--font-display); font-size: 13px; }
.m-prop-photo .ph-fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.9); border: none; color: var(--fg-1); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-prop-photo .ph-fav .icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.m-prop-photo .pagi { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 4px; }
.m-prop-photo .pagi span { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.5); }
.m-prop-photo .pagi span.on { background: #fff; }
.m-prop-body { padding: 12px 14px; }
.m-prop-addr { font-size: 14px; font-weight: 600; }
.m-prop-loc { font-size: 11px; color: var(--fg-2); margin-top: 2px; }
.m-prop-specs { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-3); }
.m-prop-specs .spec { font-size: 11px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 4px; }
.m-prop-specs .spec .icon { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Mobile cooling alert */
.m-alert { background: var(--bg-surface); border: 1px solid var(--red-200); border-radius: 4px; overflow: hidden; }
.m-alert .h { background: var(--red-50); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--revin-red); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--red-200); }
.m-alert .h .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.m-alert .h .cnt { margin-left: auto; background: var(--revin-red); color: #fff; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); }
.m-cool { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-3); align-items: center; }
.m-cool:last-child { border-bottom: none; }
.m-cool .ava { width: 32px; height: 32px; border-radius: 999px; background: var(--revin-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.m-cool-body { flex: 1; min-width: 0; }
.m-cool-name { font-size: 13px; font-weight: 600; }
.m-cool-meta { font-size: 11px; color: var(--fg-2); margin-top: 1px; }
.m-cool .days { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--revin-red); }

/* =========================================================================
   MAPA MÓVIL — el real. Sustituye al decorado de gradientes que había.
   En móvil manda el pulgar: los objetivos son más grandes que en escritorio
   y la acción principal («¿qué hay donde estoy?») va abajo, al alcance.
   ========================================================================= */

.mm-lienzo { flex: 1; position: relative; overflow: hidden; }
/* Dos clases y no una: la hoja de MapLibre se carga la ULTIMA y su
   `.maplibregl-map { position: relative }` tiene la misma especificidad que un
   `.mm-mapa` suelto, asi que ganaba por orden de cascada y el contenedor se
   quedaba a 0 de alto. En escritorio no se noto porque alli va en linea. */
.mm-lienzo .mm-mapa { position: absolute; inset: 0; }

.mm-capas {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.mm-capas button {
  flex: 1; min-width: 0; padding: 7px 4px;
  background: rgba(255,255,255,.94); border: 1px solid var(--border-1);
  border-radius: 4px; font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--fg-2); cursor: pointer; box-shadow: var(--shadow-sm);
}
.mm-capas button[aria-pressed="true"] { background: var(--revin-black); color: #fff; border-color: var(--revin-black); }

.mm-aviso {
  position: absolute; top: 52px; left: 10px; right: 10px; z-index: 5; margin: 0;
  background: rgba(255,255,255,.96); border: 1px solid var(--border-1);
  border-radius: 4px; padding: 7px 10px; font-size: 11px; color: var(--fg-2);
  box-shadow: var(--shadow-sm);
}

/* La acción de calle. Grande y abajo: se pulsa con una mano, andando. */
.mm-accion {
  position: absolute; left: 12px; right: 12px; bottom: var(--mm-suelo); z-index: 6;
  white-space: nowrap;
  padding: 14px; border: none; border-radius: 6px;
  background: var(--revin-red); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--shadow-lg); cursor: pointer;
}

/* Lista de lo más cercano, encima de la acción. */
.mm-cerca {
  position: absolute; left: 0; right: 0; bottom: calc(var(--mm-suelo) + var(--mm-accion-alto)); z-index: 5;
  display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 4px;
  scrollbar-width: none;
}
.mm-cerca::-webkit-scrollbar { display: none; }
.mm-cerca button {
  flex: none; max-width: 190px; text-align: left; padding: 7px 10px;
  background: rgba(255,255,255,.96); border: 1px solid var(--border-1);
  border-radius: 4px; font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.mm-cerca .mm-d { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--revin-red); font-weight: 700; }
.mm-cerca .mm-a { display: block; font-size: 11px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hoja inferior. Tope de altura para que siempre se vea algo de mapa: si la
   ficha tapa la pantalla entera, se pierde el sitio del que habla. */
.mm-hoja {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  max-height: 62%; overflow: auto;
  background: var(--bg-surface); border-top: 1px solid var(--border-1);
  border-radius: 10px 10px 0 0; box-shadow: var(--shadow-lg);
}
.mm-hoja.baja { max-height: 46%; }
.mm-asa {
  width: 36px; height: 4px; border-radius: 999px; background: var(--border-2);
  margin: 8px auto 4px;
}

.mm-ficha { padding: 4px 14px 16px; }
.mm-sub { font-size: 11px; color: var(--fg-3); margin: 0 0 8px; }
.mm-item { padding: 8px 0; border-bottom: 1px solid var(--border-3); }
.mm-addr { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.mm-meta { font-size: 11px; color: var(--fg-2); margin-top: 2px; }
.mm-rc { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 3px; }
.mm-cerrar {
  width: 100%; margin-top: 12px; padding: 11px; border: 1px solid var(--border-1);
  border-radius: 4px; background: var(--bg-inset); font-family: inherit;
  font-size: 13px; color: var(--fg-2); cursor: pointer;
}

.icon-btn.on { background: var(--revin-red); color: #fff; }

/* Barra de búsqueda del mapa móvil. Se despliega al pulsar la lupa en vez de
   ocupar sitio siempre: en una pantalla de teléfono el mapa vale más que un
   campo que se usa de vez en cuando. */
.mm-buscar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 10px; border-bottom: 1px solid var(--border-1);
  background: var(--bg-surface);
}
.mm-buscar .icon { width: 14px; height: 14px; stroke: var(--fg-3); stroke-width: 2; fill: none; flex: none; }
.mm-buscar input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 13px; color: var(--fg-1);
}
.mm-cuenta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); flex: none; }

/* =========================================================================
   VISTA MÓVIL REAL — sin marco. Se usa cuando el CRM se abre en un teléfono
   de verdad, no cuando se enseña la maqueta desde un ordenador.
   ========================================================================= */
.m-real { flex: 1; min-height: 0; height: auto; border-radius: 0; }
/* La barra de estado falsa sobra: el teléfono ya tiene la suya. */
.m-real .m-status { display: none; }
/* La barra de pestañas se separa del borde inferior del teléfono, no del marco. */
.m-real .m-tabs { bottom: max(12px, env(safe-area-inset-bottom)); }

.app-movil { position: fixed; inset: 0; display: flex; flex-direction: column; }
.mv-barra {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--revin-black); color: #fff;
  padding-top: max(8px, env(safe-area-inset-top));
}
.mv-barra img { height: 13px; width: auto; }
.mv-barra .hueco { flex: 1; }
/* ---------------------------------------------------------------------------
   EL PIE DEL MAPA MÓVIL, EN UNA SOLA ESCALERA

   Todo lo que vive abajo estaba puesto a mano contra el borde del lienzo, sin
   contar con que la barra de pestañas ocupa esos mismos 76 px. Con el GPS
   encendido, el botón "¿Qué hay donde estoy?" caía EXACTAMENTE encima de las
   pestañas (755-800 px medidos en una pantalla de 812) y dejaba a quien está
   en la calle sin manera de salir del mapa. La tira de cercanos tapaba además
   la atribución del IGN y del Catastro, que es obligatoria.

   Ahora se apilan desde el suelo, cada uno sobre el anterior. Un solo sitio
   donde tocar las alturas.
   --------------------------------------------------------------------------- */
.m-screen {
  --mm-tabs-alto: 64px;                    /* alto real de .m-tabs */
  --mm-accion-alto: 53px;                  /* botón 45 + 8 de aire */
  --mm-cerca-alto: 52px;                   /* tira 44 + 8 de aire */
  --mm-suelo: calc(max(12px, env(safe-area-inset-bottom)) + var(--mm-tabs-alto) + 8px);
}

/* La atribución se sube por encima de lo que haya puesto. :has() lo resuelve
   sin tocar el JSX; donde no exista, se queda en el escalón de abajo, que es
   el comportamiento de antes y tampoco tapa nada. */
.m-screen .maplibregl-ctrl-bottom-right,
.m-screen .maplibregl-ctrl-bottom-left { bottom: var(--mm-suelo); }
.m-screen:has(.mm-accion) .maplibregl-ctrl-bottom-right,
.m-screen:has(.mm-accion) .maplibregl-ctrl-bottom-left {
  bottom: calc(var(--mm-suelo) + var(--mm-accion-alto));
}
.m-screen:has(.mm-cerca) .maplibregl-ctrl-bottom-right,
.m-screen:has(.mm-cerca) .maplibregl-ctrl-bottom-left {
  bottom: calc(var(--mm-suelo) + var(--mm-accion-alto) + var(--mm-cerca-alto));
}

/* Sugerencias de dirección del IGN en el buscador del móvil. Cuelgan bajo la
   barra, por encima del mapa, y ocupan lo justo: en un teléfono el mapa vale
   más que una lista larga. */
.mm-sugerencias {
  position: relative; z-index: 9;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-1);
  max-height: 46vh; overflow-y: auto;
}
.mm-sug-ojo {
  margin: 0; padding: 7px 14px 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3);
}
.mm-sugerencias button {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; background: none; border: none;
  border-top: 1px solid var(--border-3); font-family: inherit; cursor: pointer;
}
.mm-sugerencias button .d { display: block; font-size: 13px; color: var(--fg-1); }
.mm-sugerencias button .m { display: block; font-size: 11px; color: var(--fg-2); margin-top: 1px; }

/* El buscador de clientes era un <span> decorativo. Ahora es un input y tiene
   que parecer lo mismo, sin el chrome que el navegador le pone por defecto. */
.m-busca-cli {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 13px; color: var(--fg-1);
}
.m-busca-cli::placeholder { color: var(--fg-3); }
.btn-wa[disabled] { opacity: .4; cursor: default; }

/* .m-body es una columna flex CON scroll. Sus hijos, por defecto, se pueden
   encoger: en cuanto el contenido pasa de la pantalla, flex reparte el
   sobrante achicando lo que puede en vez de dejar que la lista haga scroll.
   Medido el 28-ago-2026: al pasar la cartera de clientes de 5 a 7 tarjetas,
   la fila de filtros ("Todos · Compradores · …") quedó con altura CERO y
   desapareció, con los botones intactos y clicables debajo de nada.
   En una lista con scroll nada se encoge: se desplaza. */
.m-body > * { flex-shrink: 0; }