/* ══════════════════════════════════════════════════════════════════════════
   LOS COLORES DEL HEADER — con modo oscuro, como el original.

   Al portar `morph-nav` dejé los colores escritos a mano (#15130f, #fff,
   rgba(17,17,17,…)) en vez de variables. Funcionaba de día y en modo oscuro
   salía una barra blanca sobre una web negra. Arc sí lo tiene resuelto, y
   tenía razón Alex.

   OJO CON `csv-dark`: en casave.io esa clase del `<body>` NO significa modo
   oscuro —la pone la plantilla por lista de páginas—, así que el modo oscuro
   de verdad lo dicen `prefers-color-scheme` y `[data-theme]` y nada más. Ya
   nos engañó con el modal del login.

   Cada token se define primero en claro y solo se REDEFINE en los dos bloques
   oscuros: así ninguno existe únicamente dentro de una media query, que es el
   fallo clásico de dejar texto de un tema sobre el fondo del otro.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn {
	--mn-fg: #15130f;
	--mn-fg-2: #4a4740;
	--mn-fg-3: #86817a;
	--mn-superficie: #ffffff;
	--mn-superficie-2: #f1efe9;
	--mn-linea: rgba(0,0,0,.08);
	--mn-linea-suave: rgba(0,0,0,.06);
	--mn-hover: rgba(17,17,17,.05);
	--mn-accion: #15130f;
	--mn-accion-fg: #ffffff;
	--mn-accion-hover: #2a2722;
	--mn-peligro: #c0392b;
	--mn-marca-texto: #8a7a10;
	--mn-hueso: rgba(17,17,17,.06);
	--mn-hueso-brillo: rgba(17,17,17,.1);
	--mn-velo: color-mix(in oklab, #15130f 10%, transparent);
	/* En oscuro una sombra negra no se ve: la ficha se levanta con un halo. */
	--mn-sombra-ficha: 0 18px 40px -18px rgba(17,17,17,.32), 0 4px 12px -6px rgba(17,17,17,.18);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .csv-mn {
		--mn-fg: #f4f1ea;
		--mn-fg-2: #c3bdb3;
		--mn-fg-3: #8d877e;
		--mn-superficie: #1d1b19;
		--mn-superficie-2: #2a2825;
		--mn-linea: rgba(255,255,255,.12);
		--mn-linea-suave: rgba(255,255,255,.08);
		--mn-hover: rgba(255,255,255,.08);
		--mn-accion: #f4f1ea;
		--mn-accion-fg: #15130f;
		--mn-accion-hover: #ffffff;
		--mn-peligro: #ef7a6c;
		--mn-marca-texto: #e3c75a;
		--mn-hueso: rgba(255,255,255,.07);
		--mn-hueso-brillo: rgba(255,255,255,.12);
		--mn-velo: color-mix(in oklab, #000 42%, transparent);
		--mn-sombra-ficha: 0 18px 40px -16px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.07);
	}
}
:root[data-theme="dark"] .csv-mn {
	--mn-fg: #f4f1ea;
	--mn-fg-2: #c3bdb3;
	--mn-fg-3: #8d877e;
	--mn-superficie: #1d1b19;
	--mn-superficie-2: #2a2825;
	--mn-linea: rgba(255,255,255,.12);
	--mn-linea-suave: rgba(255,255,255,.08);
	--mn-hover: rgba(255,255,255,.08);
	--mn-accion: #f4f1ea;
	--mn-accion-fg: #15130f;
	--mn-accion-hover: #ffffff;
	--mn-peligro: #ef7a6c;
	--mn-marca-texto: #e3c75a;
	--mn-hueso: rgba(255,255,255,.07);
	--mn-hueso-brillo: rgba(255,255,255,.12);
	--mn-velo: color-mix(in oklab, #000 42%, transparent);
	--mn-sombra-ficha: 0 18px 40px -16px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.07);
}

/* ══════════════════════════════════════════════════════════════════════════
   EL HEADER NUEVO — `morph-nav` de Arc, con la búsqueda dentro.

   Una sola superficie. La barra, los menús y la búsqueda son CARAS de la
   misma pieza, y la pieza cambia de tamaño con un muelle. El borde va en una
   capa encima para que nunca altere una medida.

   Las clases conservan el nombre que tienen en Arc (.surface, .bar, .face,
   .highlight) con prefijo `csv-mn__`, para poder compararlo línea a línea
   con su hoja original.
   ══════════════════════════════════════════════════════════════════════════ */

.csv-mn {
	/* Más alta de lo que pedía Arc (56) a propósito: aquí van a entrar más
	   cosas y una barra justa obliga a apretar la siguiente que llegue. */
	--bar-h: 70px;
	--item-pad: 16px;
	--control-h: 44px;
	--tighten: var(--duration-spring, .3s) var(--ease-spring, cubic-bezier(.2,.9,.2,1));
	position: sticky;
	/* El tope NO es un número fijo: lo calcula el JS sumando las bandas que
	   haya pegadas arriba (Novedades, la de la app). Son fijas y se pueden
	   cerrar, así que el hueco cambia mientras navegas. */
	top: var(--csv-mn-top, 10px);
	z-index: 1200;
	width: 100%;
	height: var(--bar-h);
	container-type: inline-size;
	margin-bottom: 8px;
	color: var(--texto, var(--mn-fg));
	font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	transition: height var(--duration-spring, .3s) var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn[data-compact] { --bar-h: 52px; --item-pad: 16px; --control-h: 36px; }

.csv-mn__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Un solo material para todos los estados. */
.csv-mn__surface {
	position: absolute; top: 0; left: 50%; translate: -50% 0;
	overflow: clip;
	--_sombra-rest: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
	--_sombra-open: 0 2px 6px rgba(0,0,0,.03), 0 16px 40px rgba(0,0,0,.07);
	background: color-mix(in oklab, var(--mn-superficie) 88%, transparent);
	box-shadow: var(--_sombra-rest);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	transition: box-shadow .4s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__surface::after {
	content: ""; position: absolute; inset: 0;
	border: 1px solid var(--mn-linea);
	border-radius: inherit; pointer-events: none;
}
.csv-mn[data-open] .csv-mn__surface { box-shadow: var(--_sombra-open); }

/* Cada cara cuelga del centro superior con su ancho intrínseco, para que mida
   lo mismo esté la superficie donde esté a mitad de muelle. */
.csv-mn__bar, .csv-mn__searchBar, .csv-mn__face {
	position: absolute; top: 0; left: 50%; translate: -50% 0; box-sizing: border-box;
}
.csv-mn__bar, .csv-mn__searchBar {
	display: flex; height: var(--bar-h); align-items: center;
	transition: height var(--duration-spring, .3s) var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__bar { width: max-content; gap: 10px; padding: 0 10px 0 14px; }
.csv-mn__bar[inert], .csv-mn__searchBar[inert] { pointer-events: none; }
.csv-mn__searchBar { opacity: 0; }

/* ─── LA MARCA: dos logotipos, uno en cada estado ───
   Ancho: el logotipo largo, su pastilla amarilla entera.
   Compacto: el isotipo, recortado en círculo PERFECTO.
   No se esconde uno y aparece el otro: comparten celda y se cruzan, mientras
   la columna del largo se pliega sobre sí misma. Es el mismo pliegue que
   Arc le hace al nombre, con un logotipo de verdad al otro lado. */
.csv-mn__brand {
	display: inline-flex; align-items: center; height: var(--control-h);
	padding: 0 6px 0 4px; border: 0; border-radius: 999px;
	background: transparent; color: inherit; text-decoration: none;
	transition: height var(--tighten);
	-webkit-tap-highlight-color: transparent;
}
.csv-mn__brandMark {
	display: grid; flex: none; place-items: center;
	width: 30px; height: 30px; overflow: hidden;
	border-radius: 50%;                 /* completamente redondo */
	transition: scale var(--tighten), width var(--tighten), height var(--tighten);
}
.csv-mn[data-compact] .csv-mn__brandMark { width: 28px; height: 28px; }
.csv-mn__brandMark img { display: block; width: 100%; height: 100%; object-fit: cover; }

.csv-mn__brandName {
	display: grid; margin-left: 8px; grid-template-columns: 1fr;
	opacity: 1; filter: blur(0);
	transition: grid-template-columns var(--tighten), margin-left var(--tighten),
	            opacity .22s var(--ease-standard, cubic-bezier(.2,.9,.2,1)) 60ms,
	            filter .22s var(--ease-standard, cubic-bezier(.2,.9,.2,1)) 60ms;
}
/* El logotipo largo es EL FICHERO de Alex (`docs/marca`), no una imitación
   dibujada con CSS: la pastilla amarilla, la letra y la bola del final vienen
   dentro de la imagen. Lo había redibujado a mano y no era el suyo. */
.csv-mn__brandName > span { min-width: 0; overflow: hidden; display: inline-flex; align-items: center; }
.csv-mn__brandName img {
	display: block; width: auto; height: 32px;
	transition: height var(--tighten);
}
.csv-mn[data-compact] .csv-mn__brandName img { height: 28px; }
.csv-mn[data-compact] .csv-mn__brandName {
	margin-left: 0; grid-template-columns: 0fr; opacity: 0; filter: blur(2px);
	transition: grid-template-columns var(--tighten), margin-left var(--tighten),
	            opacity .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            filter .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
/* Y al revés: con el logotipo largo puesto, el isotipo sobra. Se encoge en su
   sitio en vez de desaparecer de golpe. */
.csv-mn:not([data-compact]) .csv-mn__brandMark {
	width: 0; margin-right: 0; scale: .7; opacity: 0;
	transition: width var(--tighten), scale var(--tighten), opacity .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}

.csv-mn__track { position: relative; display: flex; align-items: center; gap: 2px; }
.csv-mn__highlight {
	position: absolute; top: 50%; left: 0; height: var(--control-h); translate: 0 -50%;
	border-radius: 999px; background: var(--mn-hover);
	pointer-events: none; opacity: 0;
	transition: height var(--tighten);
}
.csv-mn__item {
	position: relative; display: inline-flex; height: var(--control-h);
	align-items: center; gap: 4px; padding: 0 var(--item-pad);
	border: 0; border-radius: 999px; background: transparent;
	color: var(--mn-fg-2); cursor: pointer; font: inherit; font-weight: 400;
	white-space: nowrap; -webkit-tap-highlight-color: transparent;
	transition: color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)), padding var(--tighten), height var(--tighten);
}
.csv-mn__item[aria-expanded="true"], .csv-mn__item[data-current] { color: var(--mn-fg); }
/* El punto de la sección actual se centra bajo la PALABRA, no bajo la
   palabra más el chevron: con el chevron en la cuenta quedaba descuadrado. */
.csv-mn__item[data-current]::after {
	content: ""; position: absolute; bottom: 5px; left: 50%;
	width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%;
	background: var(--marca, #feec07); opacity: .9;
}
/* Con chevron, el centro de la PALABRA no es el centro del botón: el chevron
   son 14 px más 4 de hueco a su derecha, así que el punto se corre 9 px. */
.csv-mn__item:has(.csv-mn__chevron)[data-current]::after { margin-left: -10.5px; }
.csv-mn__chevron {
	display: grid; width: 14px; height: 14px; place-items: center;
	color: var(--mn-fg-3); opacity: .8;
	transition: rotate var(--duration-spring, .3s) var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__item[aria-expanded="true"] .csv-mn__chevron { rotate: 180deg; }

.csv-mn__tools { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.csv-mn__tool {
	display: grid; width: var(--control-h); height: var(--control-h); flex: none;
	place-items: center; padding: 0; border: 0; border-radius: 999px;
	background: transparent; color: var(--mn-fg-2); cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            transform .08s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            width var(--tighten), height var(--tighten);
}
.csv-mn__tool:active { transform: scale(.94); }
/* La estrella va DENTRO del campo, no en la barra. En la barra, una lupa:
   es lo que la gente busca con los ojos cuando quiere buscar. La estrella
   aparece al abrirlo, que es cuando dice algo — «aquí puedes hablar». */
.csv-mn__searchIcon { color: var(--mn-fg); }
.csv-mn__searchIcon svg path:first-child { fill: var(--marca, #feec07); stroke: var(--mn-fg); }
.csv-mn__tool { position: relative; }
/* El globo de no leídos, como en el header de siempre. */
.csv-mn__globo {
	position: absolute; top: 4px; right: 3px;
	min-width: 16px; height: 16px; padding: 0 4px;
	display: grid; place-items: center; border-radius: 999px;
	background: var(--mn-peligro); color: var(--mn-superficie);
	font-size: 10px; font-weight: 600; line-height: 1;
	box-shadow: 0 0 0 2px var(--mn-superficie);
}
.csv-mn__menuBtn { display: none; }
.csv-mn[data-narrow] .csv-mn__menuBtn { display: grid; }
.csv-mn[data-narrow] .csv-mn__track { display: none; }

.csv-mn__action {
	display: inline-flex; height: var(--control-h); align-items: center;
	padding: 0 var(--action-pad, 17px); border: 0; border-radius: 999px;
	background: var(--mn-fg); color: var(--mn-accion-fg); cursor: pointer;
	font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            transform .08s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            height var(--tighten), padding var(--tighten);
}
.csv-mn__action:active { transform: scale(.97); }
.csv-mn[data-compact] .csv-mn__action { --action-pad: 14px; }

/* ─── El menú de cuenta, el MISMO que el header de siempre ───
   Solo se le ajusta la altura a la de la barra, para que se encoja con ella
   como el resto de los controles. Su panel se muda al `body` al abrirse (lo
   hace su propio JS, por el z-index del móvil), así que el `overflow: clip`
   de la superficie no lo corta — que es la trampa evidente aquí. */
.csv-mn__tools .csv-user-menu { display: flex; align-items: center; }
.csv-mn__tools .csv-um-trigger {
	height: var(--control-h);
	transition: height var(--tighten), background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn[data-compact] .csv-mn__tools .csv-um-trigger { padding-right: 8px; }
/* En estrecho, el nombre y el chevron no caben: queda la cara sola, que es
   lo que ya hace su propio CSS en móvil. */
.csv-mn[data-narrow] .csv-mn__tools .csv-um-triggername,
.csv-mn[data-narrow] .csv-mn__tools .csv-um-chevron { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   EL PANEL DE CUENTA, POR ENCIMA DEL HEADER **Y DE SU PROPIO VELO**.

   Esta regla la escribí yo para que el panel, una vez mudado al <body>, no se
   abriera detrás de la barra (el panel va en 60 y la barra en 1200). Puse
   1300… y con eso me cargué el otro extremo, que no miré:

       .csv-um-scrim   z-index: 100000   (el velo de la hoja del móvil)
       .csv-um-sheet   z-index: 100001   (0,1,0)
       body > .csv-um-panel  1300        (0,1,1) ← MÁS específica: gana

   Como `body > .csv-um-panel` es más específica que `.csv-um-sheet`, el panel
   caía a 1300: por debajo del velo. Resultado, tres veces reportado por Alex:
   la página entera gris, el menú pintado pero debajo del velo, y sin poder
   pulsar nada. Y era mi regla.

   1300 sigue siendo lo que hace falta contra la barra (1200). Contra el velo
   hace falta más, así que el número se sube por encima de los dos. La lección:
   al fijar un z-index miré con qué competía POR ABAJO y no con qué competía
   por arriba.
   ══════════════════════════════════════════════════════════════════════════ */
body > .csv-um-panel { z-index: 100002; }

/* ─── La búsqueda, dentro de la misma superficie ─── */
/* El icono del campo arranca donde arranca el contenido del panel (--pad):
   si no, la frase y lo que hay debajo salen en dos verticales distintas. */
.csv-mn__searchBar { width: min(36rem, calc(100cqw - 16px)); gap: 10px; padding: 0 8px 0 22px; }
.csv-mn__searchIcon { flex: none; display: grid; place-items: center; color: var(--mn-fg-3); }
.csv-mn__input {
	min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent;
	color: var(--mn-fg); font: inherit; font-size: 15px; outline: none;
}
.csv-mn__input::placeholder { color: var(--mn-fg-3); }
/* La pista que se teclea sola. Una caja vacía te pide ser ingenioso. */
.csv-mn__ghost {
	position: absolute; left: 51px; top: 50%; translate: 0 -50%;
	color: var(--mn-fg-3); font-size: 15px; pointer-events: none;
	white-space: nowrap; overflow: hidden; max-width: calc(100% - 110px);
}
.csv-mn__ghost[hidden] { display: none; }

/* ─── Los paneles ─── */
/* EL MARGEN DE LAS CARAS, en un solo sitio.
   Antes cada bloque de dentro traía el suyo (12 aquí, 8 allá) y el resultado
   era que la cabecera, las opciones y las filas arrancaban en tres líneas
   distintas, pegadas al borde. Ahora la cara pone el margen y lo de dentro no
   pone ninguno: todo cae en la misma vertical. */
.csv-mn__face {
	--pad: 18px;
	top: var(--bar-h); width: max-content; max-width: calc(100cqw - 16px);
	padding: 10px var(--pad) var(--pad);
}
.csv-mn__face::before {
	content: ""; position: absolute; top: 0; right: var(--pad); left: var(--pad); height: 1px;
	background: var(--mn-linea-suave);
}
.csv-mn__face[inert] { pointer-events: none; }
.csv-mn__face[hidden] { display: none; }

.csv-mn__panelBody { display: flex; align-items: flex-start; gap: 18px; padding-top: 2px; }
.csv-mn__group { display: grid; min-width: 0; align-content: start; }
.csv-mn__heading { margin: 0; padding: 6px 14px 4px; color: var(--mn-fg-3); font-size: 11.5px; }
.csv-mn__link {
	display: flex; width: 100%; box-sizing: border-box; align-items: flex-start; gap: 12px;
	padding: 11px 14px; border: 0; border-radius: 14px; background: transparent;
	color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__linkIcon { display: grid; width: 20px; height: 20px; flex: none; place-items: center; color: var(--mn-fg-3); transition: color .14s; }
.csv-mn__linkIcon > svg { width: 17px; height: 17px; }
.csv-mn__linkText { display: grid; min-width: 0; gap: 1px; max-width: 15rem; }
.csv-mn__linkLabel { overflow: hidden; color: var(--mn-fg); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.csv-mn__linkDesc { color: var(--mn-fg-3); font-size: 11.5px; line-height: 1.5; text-wrap: pretty; }
.csv-mn__footer { margin: 6px 4px 0; padding: 10px 8px 2px; border-top: 1px solid var(--mn-linea-suave); color: var(--mn-fg-2); font-size: 11.5px; }
.csv-mn__footer a { color: inherit; }

.csv-mn__menu { display: grid; width: min(30rem, calc(100cqw - 32px)); gap: 2px 6px; padding-top: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.csv-mn__menu .csv-mn__link { gap: 8px; padding: 7px 10px; border-radius: 12px; }
.csv-mn__menu .csv-mn__linkIcon { width: 18px; height: 18px; }

/* ─── Resultados ─── */
.csv-mn__face--res { width: min(36rem, calc(100cqw - 16px)); }
.csv-mn__resHead { margin: 0; padding: 8px 14px 8px; color: var(--mn-fg-3); font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.csv-mn__aviso { margin: 0; padding: 0 14px 10px; color: var(--mn-fg-2); font-size: 12.5px; }
.csv-mn__aviso[hidden] { display: none; }
.csv-mn__aviso b { color: var(--mn-fg); font-weight: 600; }
.csv-mn__results { display: grid; margin: 0; padding: 0; gap: 2px; list-style: none; }
.csv-mn__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 6px; }
.csv-mn__sug {
	display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
	border: 0; border-radius: 999px; background: transparent;
	box-shadow: inset 0 0 0 1px var(--mn-linea); color: var(--mn-fg-2);
	font: inherit; font-size: 11.5px; cursor: pointer;
	transition: background-color .14s, color .14s, transform .3s var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__sug:hover { background: var(--mn-superficie-2); color: var(--mn-fg); }
.csv-mn__sug:active { transform: scale(.97); }

.csv-mn__tag {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 5px 0 9px;
	border-radius: 999px; background: color-mix(in oklab, var(--marca, #feec07) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--marca, #feec07) 42%, transparent);
	color: var(--mn-fg); font-size: 11.5px; white-space: nowrap;
}
.csv-mn__tag b { font-weight: 500; color: var(--mn-fg-2); }
.csv-mn__tagX {
	display: grid; place-items: center; width: 17px; height: 17px;
	border: 0; padding: 0; border-radius: 50%; background: transparent;
	color: var(--mn-fg-3); cursor: pointer;
}
.csv-mn__tagX:hover { background: var(--mn-hueso-brillo); color: var(--mn-fg); }

/* ─── link-unfurl: cada resultado se despliega en ficha ─── */
.csv-mn__fila {
	position: relative; display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; border-radius: 14px; cursor: pointer;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__fila:hover { background: var(--mn-hover); }
.csv-mn__fila[data-expanded="true"] {
	background: color-mix(in oklab, var(--marca, #feec07) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--marca, #feec07) 40%, transparent);
}
.csv-mn__fav {
	display: grid; flex: none; place-items: center; width: 34px; height: 34px;
	overflow: hidden; border-radius: 9px; background: var(--mn-superficie-2);
	color: var(--mn-fg-2); font-size: 12px; font-weight: 600;
}
.csv-mn__fav img { width: 100%; height: 100%; object-fit: cover; }
.csv-mn__filaTexto { display: grid; min-width: 0; flex: 1; gap: 1px; }
.csv-mn__filaTitulo { overflow: hidden; color: var(--mn-fg); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.csv-mn__filaPie { color: var(--mn-fg-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-mn__precio { flex: none; color: var(--mn-fg); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.csv-mn__wrap { position: relative; height: 0; }
.csv-mn__plate {
	position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0;
	border-radius: 14px; background: var(--mn-superficie); box-shadow: inset 0 0 0 1px var(--mn-linea);
	transform-origin: 0 0; will-change: transform, width, height; pointer-events: none;
}
.csv-mn__plate::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: var(--mn-sombra-ficha);
	opacity: var(--lift, 0);
}
.csv-mn__card { position: relative; width: 100%; padding: 10px 10px 12px; opacity: 0; visibility: hidden; will-change: transform, clip-path; }
.csv-mn__cardHead { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 7px; }
.csv-mn__site { flex: 1; min-width: 0; overflow: hidden; color: var(--mn-fg-2); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.csv-mn__iconBtn {
	position: relative; display: grid; flex: none; place-items: center;
	width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
	background: transparent; color: var(--mn-fg-3); cursor: pointer;
	transition: background-color .14s, color .14s, transform .3s var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__iconBtn:hover { background: var(--mn-superficie-2); color: var(--mn-fg); }
.csv-mn__iconBtn:active { transform: scale(.94); }
.csv-mn__cardBody { display: grid; gap: 2px; padding: 2px 6px 0; }
.csv-mn__cardTitle { width: fit-content; max-width: 100%; color: var(--mn-fg); font-size: 15px; font-weight: 500; text-decoration: none; text-wrap: pretty; }
.csv-mn__cardTitle:hover { text-decoration: underline; text-underline-offset: 3px; }
.csv-mn__cardDesc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--mn-fg-2); font-size: 13.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.csv-mn__media {
	position: relative; margin: 8px -6px 0; overflow: hidden; aspect-ratio: 1.91;
	border-radius: 6px; background: var(--mn-superficie-2); box-shadow: inset 0 0 0 1px var(--mn-linea-suave);
}
.csv-mn__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; will-change: transform; }
.csv-mn__play {
	position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding: 0 11px; border-radius: 999px;
	background: rgba(20,18,16,.58); color: var(--mn-accion-fg); font-size: 11.5px; font-variant-numeric: tabular-nums;
	backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

@media (hover: hover) and (pointer: fine) {
	.csv-mn__item:hover { color: var(--mn-fg); }
	.csv-mn__tool:hover { background: var(--mn-hover); color: var(--mn-fg); }
	.csv-mn__action:hover { background: var(--mn-accion-hover); }
	.csv-mn__link:hover { background: var(--mn-hover); }
	.csv-mn__link:hover .csv-mn__linkIcon { color: var(--mn-fg); }
}

@container (max-width: 760px) {
	.csv-mn__panelBody { flex-direction: column; }
	.csv-mn__linkText { max-width: none; }
}
@container (max-width: 460px) {
	.csv-mn__surface { --_sombra-open: 0 2px 6px rgba(0,0,0,.04), 0 14px 28px -10px rgba(0,0,0,.14); }
	.csv-mn__face { max-height: min(30rem, calc(100dvh - var(--bar-h) - 40px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
	.csv-mn__face::-webkit-scrollbar { display: none; }
	.csv-mn__menu { width: calc(100cqw - 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.csv-mn__face--res { width: calc(100cqw - 16px); }
	.csv-mn__searchBar { padding-left: 14px; }
	.csv-mn__ghost { left: 42px; max-width: calc(100% - 128px); }
}

@media (prefers-reduced-motion: reduce) {
	.csv-mn, .csv-mn__bar, .csv-mn__searchBar, .csv-mn__brand, .csv-mn__brandMark,
	.csv-mn__brandName, .csv-mn__highlight, .csv-mn__item, .csv-mn__action, .csv-mn__tool {
		transition-duration: 0ms; transition-delay: 0ms;
	}
}
@media (prefers-reduced-transparency: reduce) {
	.csv-mn__surface { background: var(--mn-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ESPECIFICIDAD — lo último, y lo que de verdad hacía falta.

   casave.io tiene un reset global `body.casave-page button { padding: 0;
   background: none; color: inherit }` con especificidad (0,1,1). Cualquier
   regla mía de una sola clase (0,1,0) PIERDE. Resultado: cada botón del
   header nuevo salía sin su relleno —las pestañas, las pastillas de ejemplo,
   los iconos— y «Entrar» salía negro sobre negro, invisible.

   Yo no lo veía porque estaba comprobando en una copia local SIN `casave.css`
   y SIN la clase `body.casave-page`: allí mis reglas se aplicaban todas y
   todo parecía correcto. Ahora la copia carga la hoja de verdad.

   Esto no se arregla subiendo números: se arregla ganando la regla. Todo lo
   que sea un <button> dentro del header se repite aquí con `html body`.
   ══════════════════════════════════════════════════════════════════════════ */

html body .csv-mn__item {
	height: var(--control-h); padding: 0 var(--item-pad);
	border: 0; border-radius: 999px; background: transparent;
	color: var(--mn-fg-2); font: inherit; font-weight: 400;
}
html body .csv-mn__item[aria-expanded="true"], html body .csv-mn__item[data-current] { color: var(--mn-fg); }
html body .csv-mn__tool {
	width: var(--control-h); height: var(--control-h); padding: 0;
	border: 0; border-radius: 999px; background: transparent; color: var(--mn-fg-2);
}
/* «Entrar» salía NEGRO SOBRE NEGRO. El culpable:
   `body.casave-page a:not([class^="elementor"]):not(…)…{ color: inherit }`.
   Los `:not()` cuentan para la especificidad —cuatro selectores de atributo
   dentro— así que esa regla vale (0,5,2) y `html body .csv-mn__action` solo
   (0,1,2). Contra eso no se gana con más clases: se gana con `!important`,
   que es lo que ya hacemos en esta web para los tres resets globales. */
html body .csv-mn__action {
	height: var(--control-h); padding: 0 var(--action-pad, 17px);
	border: 0; border-radius: 999px;
	background: var(--mn-accion) !important; color: var(--mn-accion-fg) !important; font: inherit; font-weight: 500;
}
html body .csv-mn__action:hover { background: var(--mn-accion-hover) !important; color: var(--mn-accion-fg) !important; }
html body .csv-mn__sug {
	height: 30px; padding: 0 14px; border: 0; border-radius: 999px;
	background: transparent; box-shadow: inset 0 0 0 1px var(--mn-linea);
	color: var(--mn-fg-2); font: inherit; font-size: 11.5px;
}
html body .csv-mn__tagX { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mn-fg-3); }
html body .csv-mn__iconBtn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--mn-fg-3); }
html body .csv-mn__brand { padding: 0 6px 0 4px; background: transparent; }
html body .csv-mn__input { padding: 0; border: 0; background: transparent; color: var(--mn-fg); font: inherit; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
	html body .csv-mn__item:hover { color: var(--mn-fg); }
	html body .csv-mn__tool:hover { background: var(--mn-hover); color: var(--mn-fg); }
	html body .csv-mn__sug:hover { background: var(--mn-superficie-2); color: var(--mn-fg); }
}

/* ─── EN EL MÓVIL LA BARRA TIENE QUE SEGUIRTE AL BAJAR ───

   No lo hacía, y la causa no estaba en mi hoja: `html` y `body` llevan
   `overflow-x: hidden` —el truco de siempre contra el scroll lateral— y eso
   convierte al body en contenedor de scroll, lo que **anula `position:
   sticky`** de sus hijos. Es silencioso: la regla está puesta y no se aplica.

   Así que en móvil se fija LA SUPERFICIE en vez de la barra. `.csv-mn`
   conserva su altura en el flujo y hace de hueco, y la superficie —que ya
   iba posicionada dentro— pasa a `fixed` y viaja con la ventana. Sin
   `sticky` de por medio, el `overflow` del body da igual.

   (Mi primer intento fue al revés: entendí «no se desplaza con nosotros»
   como que sobraba, y la solté del todo. Era justo lo contrario.) */
@media (max-width: 860px) {
	html body .csv-mn { position: relative; top: 0; z-index: 1200; }
	html body .csv-mn__surface { position: fixed; top: var(--csv-mn-top, 8px); }
	/* Pegada arriba del todo pierde el aire de los lados; se lo devuelve el
	   ancho máximo, que ya calcula el JS, más este tope de seguridad. */
	html body .csv-mn__face { max-width: calc(100vw - 16px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   VOICE-ORB — la cara de la voz.
   La luz de dentro del orbe sale de estas dos variables (lo dice la ficha de
   Arc), así que el orbe es AMARILLO porque la casa lo es, no por un color
   escrito dentro del dibujo.
   ══════════════════════════════════════════════════════════════════════════ */
/* EL ORBE, AMARILLO. Su cuerpo se dibuja con `--foreground` y la luz de
   dentro con las dos variables de tinte (lo dice la ficha de Arc). Con el
   `--foreground` de la web —casi negro— sale un mármol oscuro con un reflejo
   dorado; aquí el cuerpo ES el amarillo de Casave y la luz, un dorado más
   hondo, para que el orbe se lea como de la casa y no como de cualquiera.
   Solo se cambia EN EL LIENZO: el texto de alrededor no se entera. */
.csv-mn__orbe { --foreground: #f5bb1f; --voice-orb-tint: #fff6c2; --voice-orb-tint-2: #d79b12; }
.csv-mn__face--voz { width: min(36rem, calc(100cqw - 16px)); }
.csv-mn__voz { display: grid; justify-items: center; gap: 14px; padding: 14px 10px 6px; }
.csv-mn__orbe { display: block; flex: none; }
.csv-mn__trans {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	width: 100%; max-width: 30rem; height: calc(2em * 1.5); overflow: hidden;
	font-size: 15px; line-height: 1.5; text-align: center;
	mask-image: linear-gradient(to bottom, transparent, black 40%);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
}
.csv-mn__trans .vo-line { margin: 0; color: var(--mn-fg); text-wrap: balance; }
.csv-mn__trans .vo-line[data-speaker="system"] { color: var(--mn-fg-3); font-size: 13.5px; }
/* Un inline-block se come el espacio final y la frase sale toda pegada. */
.csv-mn__trans .vo-word { display: inline-block; white-space: pre; }
.csv-mn__vozCtrl {
	display: flex; align-items: center; justify-content: center; height: 48px;
	border: 1px solid var(--mn-linea); border-radius: 999px; background: #fff;
	box-shadow: 0 1px 2px var(--mn-hueso); padding: 0 4px; gap: 4px;
}
html body .csv-mn__redondo, html body .csv-mn__colgar {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 999px; background: transparent; color: var(--mn-fg); cursor: pointer;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            transform .08s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
html body .csv-mn__redondo[aria-pressed="true"] { background: var(--mn-fg); color: var(--mn-accion-fg); }
html body .csv-mn__colgar { background: color-mix(in oklab, var(--mn-peligro) 12%, transparent); color: var(--mn-peligro); }
html body .csv-mn__redondo:active, html body .csv-mn__colgar:active { transform: scale(.94); }
.csv-mn__reloj { min-width: 4.5ch; padding: 0 8px; color: var(--mn-fg); font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: center; }
.csv-mn__vozNota { margin: 0; color: var(--mn-fg-3); font-size: 11.5px; text-align: center; }
/* El micrófono del campo, del color de la marca: es una invitación, no un control más. */
html body .csv-mn__tool--voz { color: var(--mn-fg); }
html body .csv-mn__tool--voz:hover { background: color-mix(in oklab, var(--marca, #feec07) 30%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   EL VELO — la página de detrás se desenfoca al buscar.

   Va DENTRO de `.csv-mn` (que ya crea su contexto de apilado en 1200) y por
   debajo de la superficie, así que no hace falta tocar z-index de nadie. Es
   `fixed`, cubre la ventana, y no se puede pulsar hasta que está puesto —si
   no, se tragaría el primer clic mientras aparece.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__velo {
	position: fixed; inset: 0; z-index: 0;
	opacity: 0; pointer-events: none;
	background: color-mix(in oklab, var(--mn-fg) 10%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(.9);
	backdrop-filter: blur(10px) saturate(.9);
	transition: opacity var(--duration-considered, .4s) var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn[data-buscando] .csv-mn__velo { opacity: 1; pointer-events: auto; }
.csv-mn__surface { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .csv-mn__velo { transition-duration: 0ms; } }
@media (prefers-reduced-transparency: reduce) {
	.csv-mn__velo { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--mn-fg) 28%, transparent); }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS ESQUELETOS — mientras llegan las fichas.

   Tienen el ALTO EXACTO de la fila de verdad. Si fueran más bajos, el panel
   crecería al llegar los inmuebles y daría el salto que queríamos quitar.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__hueso {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; border-radius: 14px;
}
.csv-mn__huesoFav, .csv-mn__huesoTxt i, .csv-mn__huesoPrecio {
	display: block; border-radius: 7px;
	background: linear-gradient(90deg, var(--mn-hover) 0%, var(--mn-hueso-brillo) 50%, var(--mn-hover) 100%);
	background-size: 220% 100%;
	animation: csv-mn-latir 1.15s var(--ease-in-out, cubic-bezier(.65,0,.35,1)) infinite;
}
.csv-mn__huesoFav { width: 34px; height: 34px; flex: none; border-radius: 9px; }
.csv-mn__huesoTxt { display: grid; gap: 6px; flex: 1; min-width: 0; }
.csv-mn__huesoTxt i { height: 10px; }
.csv-mn__huesoPrecio { width: 58px; height: 12px; flex: none; }
@keyframes csv-mn-latir { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
	.csv-mn__huesoFav, .csv-mn__huesoTxt i, .csv-mn__huesoPrecio { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MICRÓFONO, con fondo.
   Un icono suelto entre otros iconos no dice que se pueda pulsar. Con el
   amarillo de la casa detrás, sí.
   ══════════════════════════════════════════════════════════════════════════ */
/* EL MICRÓFONO. Con el amarillo a tope el icono se perdía dentro: amarillo
   sobre amarillo. Ahora el fondo es un amarillo apagado —lo justo para que se
   vea que es pulsable— y el trazo va SIEMPRE oscuro, también en modo oscuro:
   el amarillo de la casa es claro, así que lo que va encima tiene que ser
   oscuro en los dos temas. Un token aparte, porque no sigue al tema. */
.csv-mn { --mn-sobre-marca: #211d18; }
html body .csv-mn__tool--voz {
	background: color-mix(in oklab, var(--marca, #feec07) 26%, transparent);
	color: var(--mn-fg);
}
html body .csv-mn__tool--voz:hover {
	background: color-mix(in oklab, var(--marca, #feec07) 85%, transparent);
	color: var(--mn-sobre-marca);
}
html body .csv-mn__tool--voz[aria-busy="true"],
.csv-mn[data-tipo="voz"] .csv-mn__tool--voz {
	background: var(--marca, #feec07); color: var(--mn-sobre-marca);
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MENÚ DEL MÓVIL — con el tamaño de un dedo, no el de un ratón.

   Estaba a dos columnas con la letra de escritorio: filas de 30 px y textos
   de 13,5. En un teléfono eso no se lee de un vistazo y se falla al tocar.
   Apple pide 44 px de lado mínimo para una zona táctil y es buena medida.

   Así que en el móvil el menú pasa a UNA COLUMNA, con filas de 52 px, letra
   de 16 y los iconos a 22. Cabe menos en pantalla y hay que deslizar: mejor
   deslizar que fallar. Los encabezados de sección se separan de lo que viene
   encima, para que la lista se lea por bloques y no como un churro.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
	html body .csv-mn__menu {
		width: calc(100vw - 24px);
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	html body .csv-mn__menu .csv-mn__group + .csv-mn__group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mn-linea-suave); }
	html body .csv-mn__menu .csv-mn__heading {
		padding: 4px 14px 6px; font-size: 12px; font-weight: 600;
		text-transform: uppercase; letter-spacing: .08em; color: var(--mn-fg-3);
	}
	html body .csv-mn__menu .csv-mn__link {
		min-height: 52px; align-items: center; gap: 14px;
		padding: 8px 14px; border-radius: 14px;
	}
	html body .csv-mn__menu .csv-mn__linkIcon { width: 22px; height: 22px; }
	html body .csv-mn__menu .csv-mn__linkIcon > svg { width: 21px; height: 21px; }
	html body .csv-mn__menu .csv-mn__linkLabel { font-size: 16px; font-weight: 500; }
	html body .csv-mn__menu .csv-mn__linkDesc { font-size: 13px; }
	/* La flecha dice que la fila lleva a algún sitio: en una lista larga de
	   texto, sin ella no se sabe qué es un enlace y qué es un rótulo. */
	html body .csv-mn__menu .csv-mn__link::after {
		content: ""; width: 7px; height: 7px; margin-left: auto; flex: none;
		border-right: 2px solid var(--mn-fg-3); border-top: 2px solid var(--mn-fg-3);
		transform: rotate(45deg); border-radius: 1px;
	}
	/* Los paneles de sección (Propietarios, Buscas casa) también. */
	html body .csv-mn__face .csv-mn__link { min-height: 52px; align-items: center; gap: 14px; }
	html body .csv-mn__face .csv-mn__linkLabel { font-size: 16px; font-weight: 500; }
	html body .csv-mn__face .csv-mn__linkDesc { font-size: 13px; }
	html body .csv-mn__face .csv-mn__linkIcon { width: 22px; height: 22px; }
	html body .csv-mn__face .csv-mn__linkIcon > svg { width: 21px; height: 21px; }
	/* Y el pie del menú, pulsable de verdad. */
	html body .csv-mn__footer { padding: 14px 14px 4px; font-size: 14px; }
	html body .csv-mn__footer a { display: inline-block; padding: 6px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MÓVIL — la barra, más larga, y el menú junto a «Entrar».

   Con las pestañas plegadas la barra se quedaba en un trozo corto en medio
   de la pantalla. Ahora ocupa el ancho (menos el aire de los lados) y las
   cosas se reparten: marca a la izquierda, acciones a la derecha. Y el menú
   deja de ir el primero: va pegado a «Entrar», que es donde lo busca el
   pulgar. Al apretarse con el scroll, se encoge también de ancho.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
	html body .csv-mn__bar {
		width: min(calc(100vw - 20px), 520px);
		justify-content: space-between;
		gap: 4px; padding: 0 8px 0 12px;
	}
	/* Al bajar, vuelve a ser la fila pequeña de antes: `max-content`, lo que
	   ocupe su contenido y ni un píxel más. Una barra larga tiene sentido
	   arriba del todo, donde es el punto de partida; bajando, estorba. */
	html body .csv-mn[data-compact] .csv-mn__bar { width: max-content; justify-content: flex-start; gap: 2px; }
	/* El menú, el último de los controles antes del botón. */
	html body .csv-mn__menuBtn { order: 9; }
	html body .csv-mn__action { order: 10; }
	html body .csv-mn__tools { gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA ESTRELLA DE LA BARRA.
   Con el amarillo de la casa detrás, como el micrófono: es el botón que
   queremos que se pulse, y un icono suelto entre iconos no invita a nada.
   ══════════════════════════════════════════════════════════════════════════ */
html body .csv-mn__tool--ia {
	background: color-mix(in oklab, var(--marca, #feec07) 26%, transparent);
	color: var(--mn-fg);
}
html body .csv-mn__tool--ia:hover {
	background: color-mix(in oklab, var(--marca, #feec07) 85%, transparent);
	color: var(--mn-sobre-marca);
}
html body .csv-mn__tool--ia svg path:first-child { fill: color-mix(in oklab, var(--marca, #feec07) 70%, #fff); }

/* ══════════════════════════════════════════════════════════════════════════
   LA TARJETA DESTACADA del panel de escritorio (el hueco `.feature` de Arc).
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__feature { display: flex; min-width: 0; flex: 0 1 14rem; }
.csv-mn__feature > * { flex: 1; }
.csv-mn__dest {
	display: grid; gap: 10px; align-content: start;
	padding: 10px; border-radius: 16px;
	background: color-mix(in oklab, var(--marca, #feec07) 9%, transparent);
	color: inherit; text-decoration: none;
	transition: background-color .14s var(--ease-standard, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__dest:hover { background: color-mix(in oklab, var(--marca, #feec07) 18%, transparent); }
.csv-mn__destFoto {
	display: block; aspect-ratio: 1.45; border-radius: 11px;
	background: var(--mn-superficie-2) center/cover no-repeat;
	box-shadow: inset 0 0 0 1px var(--mn-linea-suave);
}
.csv-mn__destTxt { display: grid; gap: 2px; padding: 0 2px 2px; }
.csv-mn__destRotulo { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mn-marca-texto); }
.csv-mn__destTitulo { font-size: 14px; font-weight: 500; color: var(--mn-fg); line-height: 1.3; text-wrap: pretty; }
.csv-mn__destPie { font-size: 12px; color: var(--mn-fg-3); }
/* En móvil el menú es una columna: la destacada sobra y quita sitio. */
@media (max-width: 860px) { html body .csv-mn__feature { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   EL MENÚ DEL MÓVIL — tres arreglos de mirarlo con el dedo

   1. SE IBA DE LADO. La cara tenía `overflow-y: auto` pero nada en el eje
      horizontal, así que cualquier fila un píxel más ancha abría un scroll
      lateral — y en un panel flotante eso se siente como que la pantalla se
      ha roto. Ahora `overflow-x: hidden` y `overscroll-behavior: contain`,
      que además impide que al llegar al final arrastre la página de detrás.
   2. LAS FLECHITAS pegadas al borde. Tenían el padding de la fila y nada más.
   3. CABÍA POCO. El tope era `100dvh - barra - 40`; ahora llega casi al
      final de la pantalla, que en un menú de doce destinos se agradece.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
	html body .csv-mn__face {
		max-height: calc(100dvh - var(--bar-h) - 24px);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	html body .csv-mn__menu { width: calc(100vw - 24px); max-width: 100%; }
	/* Nada de dentro puede ser más ancho que su caja: eso es lo que abría el
	   scroll lateral. */
	html body .csv-mn__face * { max-width: 100%; }
	html body .csv-mn__menu .csv-mn__link { padding-right: 18px; }
	html body .csv-mn__menu .csv-mn__link::after { margin-right: 2px; }
	html body .csv-mn__menu .csv-mn__linkText { min-width: 0; overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAS DOS BÚSQUEDAS en el mismo campo.
   El icono dice cuál está puesta: estrella para la frase, lupa para la web.
   Comparten celda y se cruzan, no se esconde una y aparece la otra.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__searchIcon { display: grid; }
.csv-mn__searchIcon > svg {
	grid-area: 1 / 1;
	transition: opacity var(--duration-fast, .14s) var(--ease-standard, cubic-bezier(.2,.9,.2,1)),
	            transform var(--duration-spring, .3s) var(--ease-spring, cubic-bezier(.2,.9,.2,1));
}
.csv-mn__icoSitio { opacity: 0; transform: scale(.6); }
.csv-mn[data-tipo="sitio"] .csv-mn__icoFrase { opacity: 0; transform: scale(.6); }
.csv-mn[data-tipo="sitio"] .csv-mn__icoSitio { opacity: 1; transform: none; }

/* Los resultados de la web */
.csv-mn__face--sitio { width: min(36rem, calc(100cqw - 16px)); }
.csv-mn__sitioRes { display: grid; margin: 0; padding: 0; gap: 2px; list-style: none; }
.csv-mn__sitioRes li { min-width: 0; }
.csv-mn__sitioRes [aria-selected="true"] .csv-mn__link,
.csv-mn__sitioRes .csv-mn__link:hover { background: var(--mn-hover); }
.csv-mn__sitioRes .csv-mn__link { align-items: center; }
.csv-mn__grupo { flex: none; margin-left: auto; padding-left: 12px; color: var(--mn-fg-3); font-size: 11.5px; white-space: nowrap; }
@container (max-width: 460px) { .csv-mn__grupo { display: none; } }

/* ─── Los iconos 3D de los resultados de la web ───
   Los mismos de la app. A la izquierda y en su proporción: 34 px, que es el
   alto de la fila menos el aire, para que la lista no se desalinee. */
.csv-mn__ico3d { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.csv-mn__ico3d img { display: block; width: 34px; height: 34px; object-fit: contain; }
.csv-mn__sitioRes .csv-mn__link { gap: 12px; padding: 9px 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTES DEL HEADER (5 oct 2026, lista de Alex)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. EL LOGOTIPO ALARGADO CUANDO LA BARRA ESTÁ GRANDE.
      Se quedó solo el isotipo redondo en los dos estados. El alargado es el
      que dice la marca; el redondo es para cuando no cabe.

      CORREGIDO EL 5 OCT: esto colgaba de `data-narrow`, que es «pantalla
      estrecha» —o sea, SIEMPRE en un teléfono—, así que en el móvil nunca se
      veía el alargado por mucho que la barra estuviera entera. Lo que manda es
      si la barra está ENCOGIDA (`data-compact`, al bajar por la página) o si
      es una ficha (donde manda el precio). Alex: «cuando el header está
      grande, el alargado; cuando se contrae, el redondo, obviamente».
      Medido a 375 px: el alargado ocupa 66 px y la fila entra de sobra. */
.csv-mn:not([data-compact]):not([data-ficha]) .csv-mn__brandMark { display: none; }
.csv-mn:not([data-compact]):not([data-ficha]) .csv-mn__brandName { display: inline-flex; }
.csv-mn:not([data-compact]):not([data-ficha]) .csv-mn__brandName img { height: 22px; width: auto; display: block; }
/* Y al encogerse —o en una ficha— vuelve el redondo. */
.csv-mn[data-compact] .csv-mn__brandName,
.csv-mn[data-ficha] .csv-mn__brandName { display: none; }
.csv-mn[data-compact] .csv-mn__brandMark,
.csv-mn[data-ficha] .csv-mn__brandMark { display: inline-flex; }

/* 2. LA ESTRELLA, MÁS GRANDE Y SOLA.
      Era un icono entre otros y no se leía como «esto entiende lo que
      escribes». Sin disco de color detrás: la estrella sola, más grande. */
.csv-mn__tool--ia svg { width: 22px !important; height: 22px !important; }
.csv-mn__tool--ia { background: transparent !important; }
.csv-mn__tool--ia:hover { background: color-mix(in oklab, var(--mn-tinta, currentColor) 7%, transparent) !important; }

/* 3. LA FRASE QUE SE ESCRIBE SOLA NO SE METE DEBAJO DEL BOTÓN DE AUDIO.
      El texto de ejemplo se pintaba a todo el ancho del campo y el micrófono
      flota encima a la derecha: las últimas palabras quedaban por debajo. Se
      le reserva el hueco del botón. */
.csv-mn__field .csv-mn__pista,
.csv-mn__campo .csv-mn__pista,
.csv-mn__pista { padding-right: 86px; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   EL TEXTO NO SE METE DEBAJO DEL MICRÓFONO (5 oct 2026).

   Alex: «el texto se pone detrás del micrófono». Y así era: el campo es
   `flex: 1` con `padding: 0`, así que la frase llegaba hasta su borde derecho
   y entre ese borde y el botón del micrófono solo había los 10 px del `gap`.
   Una letra cortada a 10 px de un botón redondo no se lee como «sigue el
   texto», se lee como que el texto pasa por debajo.

   Catorce píxeles más de aire a la derecha: la frase se corta claramente ANTES
   del botón. El reset de más arriba pone `padding: 0` con (0,1,2), así que
   esto necesita la misma fuerza.
   ══════════════════════════════════════════════════════════════════════════ */
html body .csv-mn__input { padding-right: 14px; }

/* EL LOGOTIPO ALARGADO, UN POCO MÁS GRANDE EN EL MÓVIL (5 oct 2026, Alex).
   A 22 px de alto se leía como una marca de agua al lado de los iconos de 44.
   A 26 sigue cabiendo de sobra: medido, la fila ocupa 271 px de 343. */
@media (max-width: 760px) {
	.csv-mn:not([data-compact]):not([data-ficha]) .csv-mn__brandName img { height: 26px; }
}

/* LAS SUGERENCIAS, CON AIRE ENTRE ELLAS (6 oct 2026, Alex: «esas opciones hay
   que ponerles un poquito más de separación»). Iban a 2 px: una lista de seis
   cosas a 2 px de distancia se lee como un bloque, no como seis opciones, y en
   un teléfono el dedo no sabe cuál está tocando. */
.csv-mn__sitioRes { gap: 8px; }
.csv-mn__results { gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   EL MENÚ DEL MÓVIL, PLEGADO (6 oct 2026)

   Tres secciones que se abren de una en una. La flecha gira, y el cuerpo
   crece con el muelle: el `<details>` nativo abre de golpe, que en una lista
   de siete enlaces se lee como un salto.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__group--plegable { border-bottom: 1px solid var(--mn-linea, rgba(0,0,0,.07)); }
.csv-mn__group--plegable:last-child { border-bottom: 0; }
html body summary.csv-mn__heading--plegable {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 52px; padding: 14px 2px !important;
	margin: 0 !important;
	cursor: pointer; list-style: none;
	font-size: 15px !important; font-weight: 700 !important;
	color: var(--mn-fg) !important;
	text-transform: none !important; letter-spacing: 0 !important;
}
summary.csv-mn__heading--plegable::-webkit-details-marker { display: none; }
.csv-mn__plegaIc {
	flex: none; color: var(--mn-fg-3);
	transition: transform .3s cubic-bezier(.2,.9,.2,1);
}
.csv-mn__group--plegable[open] .csv-mn__plegaIc { transform: rotate(180deg); }
.csv-mn__plegaCuerpo { overflow: hidden; padding-bottom: 8px; }
/* El muelle de la altura lo pone el guion; esto es el estado de reposo. */
.csv-mn__group--plegable:not([open]) .csv-mn__plegaCuerpo { display: none; }
@media (prefers-reduced-motion: reduce) {
	.csv-mn__plegaIc { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PANEL DE LA BÚSQUEDA TAMBIÉN SE DESPLAZA EN ORDENADOR (6 oct 2026)

   Alex: «en la versión de ordenador, cuando buscamos con el audio o con la
   IA y nos aparecen inmuebles, no podemos hacer scroll hacia abajo; cuando
   hacemos scroll encima de ese modal, hace scroll la página de detrás».

   Y es literal. La contención estaba escrita… dentro de
   `@container (max-width: 460px)`, o sea SOLO en teléfonos:

       max-height: min(30rem, calc(100dvh - var(--bar-h) - 40px));
       overflow-y: auto;
       overscroll-behavior: contain;

   En ordenador la cara no tenía ni alto máximo ni `overflow`, así que con
   diez resultados se hacía más alta que la ventana —y lo que queda fuera no
   hay forma de alcanzarlo— y la rueda del ratón, al no encontrar nada que
   desplazar, se la quedaba la página de detrás. Es el fallo clásico de un
   panel sobre una página: si no contiene el desplazamiento, lo hereda el
   fondo y parece que el panel no responde.

   Aquí el alto máximo es mayor que en el teléfono (36rem contra 30), porque
   una pantalla de ordenador da para ver más resultados sin desplazar.
   ══════════════════════════════════════════════════════════════════════════ */
.csv-mn__face {
	max-height: min(36rem, calc(100dvh - var(--bar-h) - 56px));
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.csv-mn__face::-webkit-scrollbar { width: 8px; }
.csv-mn__face::-webkit-scrollbar-thumb {
	border: 2px solid transparent; border-radius: 999px;
	background: var(--mn-fg-3); background-clip: content-box;
}
.csv-mn__face::-webkit-scrollbar-track { background: transparent; }