/**
 * Búsqueda guiada — la misma hoja para la web y para la app instalada.
 *
 * ── Una hoja, dos formas ────────────────────────────────────────────────────
 * El diseño base es el del teléfono: pantalla completa y un paso cada vez. A
 * partir de 900 px se convierte en un panel centrado de dos columnas —lo que
 * se contesta a la izquierda, lo que se lleva contestado a la derecha— y los
 * resultados pasan a rejilla. No es la pantalla del móvil estirada: es el
 * mismo contenido aprovechando el ancho que hay.
 *
 * Empezó viviendo bajo `.dm-app-mode` porque sólo existía en la app. Ya no:
 * quitar ese prefijo es lo que hace que web y PWA compartan buscador de
 * verdad, y no sólo compartan API.
 *
 * ── Vidrio arriba y abajo, sólido en medio ──────────────────────────────────
 * El material translúcido va en la capa funcional —cabecera y botón— porque es
 * lo que flota sobre el contenido y necesita dejar ver que hay algo debajo. Las
 * tarjetas de resultado son opacas: llevan nombre, porcentaje y cuatro razones,
 * y ese texto tiene que leerse igual sobre una foto de portafolio que sobre el
 * fondo hueso. Legibilidad por encima del efecto.
 *
 * ── El porcentaje ───────────────────────────────────────────────────────────
 * Sin barra, sin anillo y sin verde. El número grande en la tinta de la marca y
 * el nivel escrito debajo: quien no distinga los tonos lee «Match excepcional»
 * igual que quien sí. El dorado sólo aparece en el nivel más alto, y como
 * acento de un punto, no como relleno.
 */

html.dm-gs-open,
html.dm-gs-open body { overflow: hidden; }

.dm-gs {
  position: fixed;
  inset: 0;
  /* La pila de App Mode: header y barra inferior están en 9000, el shell de
     acceso en 10000, el aviso de sin conexión en 11000 y las hojas en 12000.
     El asistente va por encima de la navegación —si no, la barra inferior
     tapa el botón «Continuar», que es exactamente lo que pasaba— y por debajo
     del aviso y de las hojas, que se abren DESDE él y tienen que verse. */
  z-index: 10500;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-2, #f6f3ea);
  color: var(--c-label, #2b2b42);
  font-family: Inter, system-ui, sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dm-motion-fast, 180ms) var(--dm-motion-curve, ease),
              transform var(--dm-motion-base, 240ms) var(--dm-motion-curve, ease);
}
.dm-gs.is-open { opacity: 1; transform: none; }

/* La superficie. En el teléfono es el asistente entero y no se ve; en el
   escritorio es la tarjeta única que sustituye a las tres que flotaban. Aquí
   sólo se declara que es una columna que ocupa lo que le den: la forma se la
   da el bloque de 900 px. */
.dm-gs-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.dm-gs-chrome {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--dm-app-safe-top, 0px) + 8px) 10px 10px;
  background: var(--glass-veil, rgba(255, 254, 250, .82));
  backdrop-filter: blur(var(--glass-blur, 22px)) saturate(var(--glass-saturation, 1.36));
  -webkit-backdrop-filter: blur(var(--glass-blur, 22px)) saturate(var(--glass-saturation, 1.36));
  border-bottom: 1px solid var(--glass-bottom-edge, rgba(40, 39, 55, .12));
}

/* Cada uno en su columna, escrito. Con la colocación automática, esconder la
   etiqueta del centro corría la ✕ al hueco libre, y la cabecera de la pantalla
   de resultados quedaba con los dos iconos juntos a la izquierda y una franja
   blanca vacía a la derecha. */
.dm-gs-back { grid-column: 1; }
.dm-gs-progress-label { grid-column: 2; }
.dm-gs-close { grid-column: 3; }

.dm-gs-back,
.dm-gs-close {
  width: 44px; height: 44px;        /* objetivo táctil mínimo */
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--glass-icon, rgba(43, 43, 66, .72));
  cursor: pointer;
  transition: background var(--dm-motion-instant, 120ms) ease, transform var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-back svg,
.dm-gs-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dm-gs-back:active,
.dm-gs-close:active { background: var(--glass-active, rgba(43, 43, 66, .08)); transform: scale(.94); }

.dm-gs-progress-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-label-2, rgba(43, 43, 66, .5));
}

.dm-gs-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-relleno-2, rgba(43, 43, 66, .1));
}
.dm-gs-progress span {
  display: block; height: 100%;
  width: calc(var(--dm-gs-progress, 0) * 100%);
  background: #2b2b42;
  transition: width var(--dm-motion-base, 240ms) var(--dm-motion-curve, ease);
}

/* ── Cuerpo ───────────────────────────────────────────────────────────────── */
.dm-gs-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 20px calc(20px + var(--dm-app-safe-bottom, 0px));
  padding-left: max(20px, var(--dm-app-safe-left, 0px));
  padding-right: max(20px, var(--dm-app-safe-right, 0px));
  opacity: 1;
  transition: opacity var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-body.is-swapping { opacity: 0; }
.dm-gs-body:focus { outline: none; }

.dm-gs-title {
  margin: 0 0 8px;
  font-family: Petrona, Georgia, serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.dm-gs-title:focus { outline: none; }
.dm-gs-lead { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: var(--c-label-2, rgba(43, 43, 66, .66)); }
.dm-gs-note { margin: 8px 0 0; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .5)); }

/* ── Campos ───────────────────────────────────────────────────────────────── */
.dm-gs-label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-label-2, rgba(43, 43, 66, .55));
}
.dm-gs-textarea,
.dm-gs-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .18));
  border-radius: 15px;
  background: var(--c-elevado, #fffefa);
  color: var(--c-label, #2b2b42);
  font: 400 16px/1.55 Inter, system-ui, sans-serif;  /* 16px evita el zoom de iOS */
  resize: none;
  transition: border-color var(--dm-motion-instant, 120ms) ease, box-shadow var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-textarea:focus-visible,
.dm-gs-input:focus-visible {
  outline: none;
  border-color: var(--c-label, #2b2b42);
  box-shadow: 0 0 0 3px rgba(43, 43, 66, .12);
}
.dm-gs-help { margin: 9px 0 0; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .5)); }

.dm-gs-check {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; margin-top: 4px;
  font-size: 14px; color: var(--c-label, #2b2b42); cursor: pointer;
}
.dm-gs-check input { width: 20px; height: 20px; accent-color: var(--c-label, #2b2b42); flex: none; }

/* ── Secciones y chips ────────────────────────────────────────────────────── */
.dm-gs-section { margin-bottom: 30px; }
.dm-gs-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dm-gs-section-title {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-label-2, rgba(43, 43, 66, .55));
}
.dm-gs-section-head .dm-gs-section-title { margin: 0; }
.dm-gs-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-label-3, rgba(43, 43, 66, .4)); }
.dm-gs-section-help { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-label-2, rgba(43, 43, 66, .5)); }

.dm-gs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-gs-chips-scroll { max-height: 46vh; overflow-y: auto; padding: 2px; }

.dm-gs-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 9px 15px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .18));
  border-radius: 999px;
  background: var(--c-elevado, #fffefa);
  color: var(--c-label, #2b2b42);
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background var(--dm-motion-instant, 120ms) ease,
              border-color var(--dm-motion-instant, 120ms) ease,
              transform var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-chip:active { transform: scale(.96); }
.dm-gs-chip.is-active { background: #2b2b42; border-color: var(--c-label, #2b2b42); color: #fffefa; }
.dm-gs-chip-x { font-size: 17px; line-height: 1; opacity: .7; }
.dm-gs-chip:focus-visible { outline: 2px solid #2b2b42; outline-offset: 2px; }

.dm-gs-add {
  margin-top: 12px; min-height: 40px; padding: 9px 15px;
  border: 1px dashed rgba(43, 43, 66, .3); border-radius: 999px;
  background: transparent; color: var(--c-label-2, rgba(43, 43, 66, .72));
  font: 500 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}

/* Preferencia / indispensable: la palabra siempre está escrita, así que el
   estado no depende de distinguir el relleno. */
.dm-gs-must {
  flex: none; min-height: 32px; padding: 6px 13px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .22)); border-radius: 999px;
  background: transparent; color: var(--c-label-2, rgba(43, 43, 66, .6));
  font: 600 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.dm-gs-must.is-on { background: #2b2b42; border-color: var(--c-label, #2b2b42); color: #fffefa; }
.dm-gs-must:focus-visible { outline: 2px solid #2b2b42; outline-offset: 2px; }

/* ── Pie con el CTA ───────────────────────────────────────────────────────── */
.dm-gs-footer {
  flex: none;
  padding: 12px max(16px, var(--dm-app-safe-right, 0px)) calc(12px + var(--dm-app-safe-bottom, 0px)) max(16px, var(--dm-app-safe-left, 0px));
  background: var(--glass-veil, rgba(255, 254, 250, .86));
  backdrop-filter: blur(var(--glass-blur, 22px)) saturate(var(--glass-saturation, 1.36));
  -webkit-backdrop-filter: blur(var(--glass-blur, 22px)) saturate(var(--glass-saturation, 1.36));
  border-top: 1px solid var(--glass-bottom-edge, rgba(40, 39, 55, .12));
}
.dm-gs-next {
  width: 100%; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 16px;
  background: #2b2b42; color: #fffefa;
  font: 650 15px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: transform var(--dm-motion-instant, 120ms) ease, opacity var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-gs-next:active { transform: scale(.985); }
.dm-gs-next:disabled { opacity: .38; cursor: default; }
.dm-gs-next:focus-visible { outline: 2px solid #2b2b42; outline-offset: 3px; }

/* ── Resultados ───────────────────────────────────────────────────────────── */
.dm-gs-results-head { margin-bottom: 20px; }
.dm-gs-results { display: grid; gap: 12px; }

.dm-gs-card {
  padding: 17px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .1));
  border-radius: 19px;
  background: var(--c-elevado, #fffefa);                      /* opaca: aquí manda leer */
  box-shadow: 0 1px 2px rgba(30, 31, 48, .04);
}
.dm-gs-card-top { display: flex; align-items: flex-start; gap: 13px; }
.dm-gs-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 17px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--c-relleno-2, #eae7dc); color: var(--c-label-2, rgba(43, 43, 66, .6));
  font: 600 17px/1 Inter, system-ui, sans-serif;
}
.dm-gs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-gs-card-id { flex: 1; min-width: 0; }
.dm-gs-card-id h3 {
  margin: 2px 0 3px;
  font: 500 17px/1.25 Petrona, Georgia, serif;
  display: flex; align-items: center; gap: 6px;
}
.dm-gs-verified { font-size: 11px; color: var(--c-acento-texto, #8a7f2e); }
.dm-gs-card-id p { margin: 0; font-size: 13px; color: var(--c-label-2, rgba(43, 43, 66, .58)); }

.dm-gs-score { flex: none; text-align: right; }
.dm-gs-score strong {
  display: block;
  font: 400 26px/1 Petrona, Georgia, serif;
  letter-spacing: -.02em;
  color: var(--c-label, #2b2b42);
}
.dm-gs-score small { font-size: 14px; opacity: .5; margin-left: 1px; }
.dm-gs-score span {
  display: block; margin-top: 4px; max-width: 92px;
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--c-label-2, rgba(43, 43, 66, .5));
}
/* El único tono distinto, y es un acento, no un semáforo. */
.dm-gs-score-exceptional strong { color: var(--c-label, #2b2b42); }
.dm-gs-score-exceptional span { color: var(--c-acento-texto, #8a7f2e); }
.dm-gs-score-partial strong { color: var(--c-label-2, rgba(43, 43, 66, .55)); }

.dm-gs-card-tags { margin: 13px 0 0; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .52)); }
.dm-gs-reasons { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.dm-gs-reasons li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--c-label-2, rgba(43, 43, 66, .78)); }
.dm-gs-reasons span { color: var(--c-acento-texto, #8a7f2e); font-weight: 700; }

.dm-gs-card-actions { display: flex; gap: 8px; margin-top: 15px; }
.dm-gs-card-open,
.dm-gs-card-save {
  flex: 1; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; border: 1px solid var(--c-separador, rgba(43, 43, 66, .18));
  font: 600 13px/1 Inter, system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
}
.dm-gs-card-open { background: #2b2b42; border-color: var(--c-label, #2b2b42); color: #fffefa; }
.dm-gs-card-save { background: transparent; color: var(--c-label, #2b2b42); }
.dm-gs-card-save.is-saved { background: var(--c-relleno, rgba(43, 43, 66, .07)); color: var(--c-label-2, rgba(43, 43, 66, .6)); }

.dm-gs-more,
.dm-gs-secondary,
.dm-gs-empty-action {
  width: 100%; min-height: 48px; margin-top: 12px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .2)); border-radius: 15px;
  background: transparent; color: var(--c-label, #2b2b42);
  font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.dm-gs-empty-actions { display: grid; }

/* ── Carga ────────────────────────────────────────────────────────────────── */
/* Nunca un 0 %: no sabemos cuánto tarda, y un porcentaje parado en cero se lee
   como una app rota. Un aviso honesto y la forma de lo que va a llegar. */
.dm-gs-loading-copy { margin: 0 0 18px; font-size: 14px; color: var(--c-label-2, rgba(43, 43, 66, .6)); }
/* Los esqueletos van en la MISMA rejilla que los resultados. Iban en una
   columna mientras los resultados llegaban en dos: la espera enseñaba una
   forma y la respuesta otra, y todo saltaba de sitio al llegar. */
.dm-gs-skeletons { display: grid; gap: 12px; }
.dm-gs-skeleton {
  padding: 17px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .08)); border-radius: 19px; background: var(--c-elevado, #fffefa);
}
.dm-gs-skeleton-top { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; }
.dm-gs-skeleton-avatar { flex: none; width: 56px; height: 56px; border-radius: 17px; }
.dm-gs-skeleton-id { flex: 1; min-width: 0; }
.dm-gs-skeleton-id .dm-gs-skeleton-line:last-child { margin-bottom: 0; }
.dm-gs-skeleton-line { height: 11px; border-radius: 6px; margin-bottom: 8px; }
.dm-gs-skeleton-line.is-short { width: 55%; }
.dm-gs-skeleton-avatar,
.dm-gs-skeleton-line {
  background: linear-gradient(90deg, #eeebe1 25%, #f6f4ec 50%, #eeebe1 75%);
  background-size: 300% 100%;
  animation: dmGsShimmer 1.5s ease-in-out infinite;
}
@keyframes dmGsShimmer { to { background-position: -300% 0; } }

/* ── Entrada en la Home ───────────────────────────────────────────────────── */
/* El panel ya pregunta «¿Qué estás buscando hoy?» en su portada, y justo
   debajo quedaba «¿Qué necesitas encontrar?»: dos preguntas casi iguales, una
   sin respuesta y la otra con dos botones. Se calla la primera, y sólo cuando
   la entrada está montada de verdad — si el módulo no cargó, la portada sigue
   entera. Sólo en App Mode: en el navegador el panel no se toca.

   El `:has()` se resuelve desde `#page-inicio` porque el subtítulo vive en
   `.hero-banner` y la entrada en `.main-inner`, que son hermanos: no hay
   selector de ascendencia que vaya de uno al otro sin subir hasta el padre
   común. Donde `:has()` no exista, el subtítulo simplemente se queda — que es
   como está hoy. */
html.dm-app-mode #page-inicio:has(.dm-app-guided-entry[data-dm-gs-mounted="1"]) .hero-sub { display: none; }

/* Y con el subtítulo fuera, el `min-height: 144px` del banner deja 82 px de
   nada entre el título y los dos botones — medidos, no estimados. La altura
   estaba reservando el sitio de lo que acabamos de ocultar, así que se suelta
   y el banner se ajusta a lo que le queda dentro. */
html.dm-app-mode #page-inicio:has(.dm-app-guided-entry[data-dm-gs-mounted="1"]) .hero-banner { min-height: 0; }

.dm-gs-entry { margin: 4px 0 26px; }
.dm-gs-entry-title {
  margin: 0 0 4px;
  font: 400 23px/1.2 Petrona, Georgia, serif; letter-spacing: -.015em; color: var(--c-label, #2b2b42);
}
.dm-gs-entry-lead {
  margin: 0 0 16px;
  font-size: 13px; line-height: 1.5; color: var(--c-label-2, rgba(43, 43, 66, .62));
}

/* En la web esto vive en la columna derecha del héroe de /explorar, donde
   antes estaba la frase editorial. Es una tarjeta compacta de una fila: el
   titular ya ocupa la mitad izquierda, así que lo que va aquí tiene que caber
   sin competir con él.

   La superficie es el beis de la marca sobre el papel de la página, no otro
   blanco con borde: una tarjeta blanca sobre fondo casi blanco necesita un
   borde para existir, y ese borde es ruido a la altura del titular. */
html:not(.dm-app-mode) .dm-gs-entry {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html:not(.dm-app-mode) .dm-gs-entry-abrir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  /* La tarjeta entera es el botón, así que también es el objetivo táctil:
     muy por encima de los 44 px de suelo. */
  padding: 20px 20px 20px 22px;
  border: 0;
  border-radius: 20px;
  background: var(--bg-mid, #f0ede4);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
html:not(.dm-app-mode) .dm-gs-entry-icono {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy, #2b2b42);
}
html:not(.dm-app-mode) .dm-gs-entry-icono svg {
  width: 20px; height: 20px;
  fill: none; stroke: #fffefa; stroke-width: 1.6; stroke-linecap: round;
}
html:not(.dm-app-mode) .dm-gs-entry-copy { display: block; min-width: 0; }
html:not(.dm-app-mode) .dm-gs-entry-title {
  display: block;
  margin: 0 0 3px;
  font: 400 italic 17px/1.25 Petrona, Georgia, serif;
  letter-spacing: -.01em;
  color: var(--c-label, #2b2b42);
}
html:not(.dm-app-mode) .dm-gs-entry-lead {
  display: block;
  margin: 0;
  font: 300 12.5px/1.5 Inter, system-ui, sans-serif;
  /* Sobre el beis, no sobre el papel.
     `--c-label-2` es rgba(43,43,66,.62) y está calibrado contra #FFFEFA; aquí
     el fondo es #F0EDE4 y esa misma transparencia da 3.83:1 —medido mezclando
     el alfa, que es el paso que se olvida y por el que estas cosas pasan—.
     Por debajo del 4.5:1 que pide un texto de 12.5 px. Con .72 son 5.13:1. */
  color: rgba(43, 43, 66, .72);
  /* Reparte las líneas en vez de dejar una palabra sola abajo. Cuando cabe en
     una no hace nada; cuando no, no deja «ti.» colgando. */
  text-wrap: pretty;
}
html:not(.dm-app-mode) .dm-gs-entry-flecha {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: #fffefa;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}
html:not(.dm-app-mode) .dm-gs-entry-flecha svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--navy, #2b2b42); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
html:not(.dm-app-mode) .dm-gs-entry-abrir:active { transform: scale(.99); }
html:not(.dm-app-mode) .dm-gs-entry-abrir:focus-visible {
  outline: 2px solid var(--navy, #2b2b42);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.dm-app-mode) .dm-gs-entry-abrir:hover { background: #eae6dc; }
  html:not(.dm-app-mode) .dm-gs-entry-abrir:hover .dm-gs-entry-flecha { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.dm-app-mode) .dm-gs-entry-abrir,
  html:not(.dm-app-mode) .dm-gs-entry-flecha { transition: none; }
}
/* En móvil el icono se va: con 350 px de ancho, 48 px de círculo más 18 de
   hueco son 66 px que le hacen falta al texto, y el icono no dice nada que el
   texto no diga. */
@media (max-width: 768px) {
  html:not(.dm-app-mode) .dm-gs-entry-abrir { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 18px; }
  html:not(.dm-app-mode) .dm-gs-entry-icono { display: none; }
}

.dm-gs-entry-actions { display: grid; gap: 10px; }
.dm-gs-entry-cta {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  min-height: 66px; padding: 14px 18px;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .12)); border-radius: 18px;
  background: var(--c-elevado, #fffefa); color: var(--c-label, #2b2b42); text-align: left; cursor: pointer;
  transition: transform var(--dm-motion-instant, 120ms) ease, border-color var(--dm-motion-instant, 120ms) ease;
}
.dm-gs-entry-cta:active { transform: scale(.985); border-color: var(--c-label-3, rgba(43, 43, 66, .3)); }
.dm-gs-entry-cta-label { grid-column: 1; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.dm-gs-entry-cta-sub { grid-column: 1; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .52)); margin-top: 2px; }
.dm-gs-entry-cta svg {
  grid-column: 2; grid-row: 1 / span 2;
  width: 19px; height: 19px; fill: none; stroke: rgba(43, 43, 66, .35);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.dm-gs-resume {
  width: 100%; margin-top: 10px; padding: 13px 16px; text-align: left;
  border: 1px dashed rgba(43, 43, 66, .28); border-radius: 15px;
  background: transparent; color: var(--c-label, #2b2b42); cursor: pointer;
}
.dm-gs-resume span { display: block; font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.dm-gs-resume small { display: block; margin-top: 2px; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .52)); }

.dm-gs-recent { margin-top: 24px; }
.dm-gs-recent-title {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-label-2, rgba(43, 43, 66, .5));
}
.dm-gs-recent-item {
  width: 100%; min-height: 48px; padding: 12px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 0; border-bottom: 1px solid var(--c-separador, rgba(43, 43, 66, .1));
  background: transparent; color: var(--c-label, #2b2b42); text-align: left; cursor: pointer;
}
.dm-gs-recent-item span { font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.dm-gs-recent-item small { flex: none; font-size: 12px; color: var(--c-label-2, rgba(43, 43, 66, .5)); }

/* ── Quitar una búsqueda, y quitarlas todas ────────────────────────────────
   El historial se podía leer y no se podía borrar. Estaba en el servidor —una
   búsqueda hecha en el ordenador aparecía en la app— pero no había manera de
   sacar una de la lista desde ninguna de las dos.

   La ✕ va FUERA del botón de la fila, en una caja que las pone en línea: un
   `<button>` dentro de otro no es HTML válido y el navegador lo desanida por
   su cuenta. La fila sigue ocupando todo lo que sobra, así que tocar el texto
   —que es lo que casi siempre se quiere— no cambia de sitio. */
.dm-gs-recent-fila,
.dm-bus-fila-caja { display: flex; align-items: center; gap: 4px; }
.dm-gs-recent-fila > .dm-gs-recent-item,
.dm-bus-fila-caja > .dm-bus-fila { flex: 1; min-width: 0; }
.dm-gs-recent-fila > .dm-gs-recent-item span,
.dm-bus-fila-caja > .dm-bus-fila > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 44×44 de verdad, y el aspa dibujada a 16. */
.dm-gs-recent-x {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--c-label-3, rgba(43, 43, 66, .55)); cursor: pointer;
}
.dm-gs-recent-x svg { width: 16px; height: 16px; }
.dm-gs-recent-x:active { background: var(--c-relleno, rgba(43, 43, 66, .06)); }
@media (hover: hover) and (pointer: fine) {
  .dm-gs-recent-x:hover { background: var(--c-relleno, rgba(43, 43, 66, .06)); color: var(--c-label, #2b2b42); }
}

.dm-gs-recent-limpiar {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 12px 4px;
  border: 0; background: transparent; cursor: pointer;
  font: 500 13px/1.3 Inter, system-ui, sans-serif;
  color: var(--c-label-2, rgba(43, 43, 66, .5));
}
.dm-gs-recent-limpiar:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .dm-gs-recent-limpiar:hover { color: var(--c-label, #2b2b42); }
}

/* ── Menos movimiento ─────────────────────────────────────────────────────── */
/* Va al final: a igual especificidad manda la última regla, y escrito antes de
   los bloques de arriba no desactivaría nada. */
@media (prefers-reduced-motion: reduce) {
  .dm-gs,
  .dm-gs-body,
  .dm-gs-progress span,
  .dm-gs-chip,
  .dm-gs-next,
  .dm-gs-entry-cta { transition: none; }
  .dm-gs { transform: none; }
  .dm-gs-skeleton-top,
  .dm-gs-skeleton-line { animation: none; background: #eeebe1; }
}

/* ═══ ESCRITORIO ═══════════════════════════════════════════════════════════
   A partir de 900 px el asistente deja de ser una pantalla y pasa a ser un
   panel: se centra, se le pone un ancho máximo y el cuerpo se parte en dos
   columnas. Estirar el diseño del teléfono a 1440 px habría dado líneas de
   texto de doscientos caracteres y un botón de ancho completo con noventa
   centímetros de nada a los lados.

   Lo que NO cambia: los pasos, el contenido, la intención que se construye y
   la API que se llama. Cambia la caja, no el flujo. */
/* ── El escritorio: UNA tarjeta, no tres ──────────────────────────────────────
 *
 * Lo que había: `.dm-gs` era una rejilla a pantalla completa con
 * `place-items:center` y sus TRES hijos —cabecera, cuerpo y pie— sueltos
 * dentro. Cada uno caía en su propia fila, las filas se repartían los 900 px
 * de alto y cada elemento se centraba en la suya. Medido en 1440×900: cabecera
 * hasta y=170, cuerpo desde y=247, pie en y=730. Entre medias, la página de
 * detrás. Y los tres a `min(1080px, 100%)` —1180 px a partir de 1280— con un
 * textarea de 1112×200 para escribir dos frases.
 *
 * Ahora la rejilla centra UN hijo, `.dm-gs-panel`, que es la tarjeta: su
 * cabecera pegada arriba, su pie pegado abajo y el cuerpo desplazándose en
 * medio. El ancho baja a 880 px, que es donde una línea de texto se sigue
 * leyendo y dos columnas de chips siguen cabiendo.
 */
@media (min-width: 900px) {
  .dm-gs {
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 20, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 32px;
    box-sizing: border-box;
  }

  .dm-gs-panel {
    flex: none;
    width: min(880px, 100%);
    max-height: min(86vh, 820px);
    box-sizing: border-box;
    background: var(--c-bg-2, #f6f3ea);
    border-radius: 24px;
    /* Recorta la cabecera y el pie contra las esquinas: son parte de la
       tarjeta, no dos barras encima de ella. */
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(20, 20, 35, .3), 0 2px 8px rgba(20, 20, 35, .12);
  }

  .dm-gs-chrome {
    background: var(--c-elevado, #fffefa);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 14px 20px;
  }
  /* El cuerpo es lo único que se desplaza. `min-height:0` es lo que se lo
     permite dentro de una columna flex; sin él, crece y se sale de la tarjeta. */
  .dm-gs-body {
    flex: 1;
    min-height: 0;
    background: var(--c-bg-2, #f6f3ea);
    padding: 30px 34px;
  }
  .dm-gs-footer {
    background: var(--c-elevado, #fffefa);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 14px 20px;
    display: flex; justify-content: flex-end;
  }
  /* El botón deja de ocupar todo el ancho: a 880 px sería una barra. */
  .dm-gs-next { width: auto; min-width: 230px; padding: 0 26px; }

  .dm-gs-title { font-size: 30px; }
  .dm-gs-lead { max-width: 62ch; }

  /* Dos frases no necesitan 200 px de alto. Sigue creciendo si hace falta —el
     cuerpo se desplaza— pero abre con el tamaño de lo que se pide. */
  .dm-gs-textarea { min-height: 132px; }

  /* Dos columnas en los pasos que las aprovechan: a la izquierda lo que se
     contesta, a la derecha lo que ya se lleva contestado. */
  .dm-gs-step[data-step="2"],
  .dm-gs-step[data-step="3"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 34px;
    align-items: start;
  }
  .dm-gs-step[data-step="2"] > .dm-gs-title,
  .dm-gs-step[data-step="2"] > .dm-gs-lead,
  .dm-gs-step[data-step="3"] > .dm-gs-title,
  .dm-gs-step[data-step="3"] > .dm-gs-lead { grid-column: 1 / -1; }

  /* Resultados en rejilla: en un monitor, una columna de tarjetas deja dos
     tercios de pantalla vacíos y obliga a desplazarse por nada. */
  .dm-gs-results,
  .dm-gs-skeletons { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
  .dm-gs-results-head { max-width: 62ch; }
  .dm-gs-more, .dm-gs-secondary { width: auto; min-width: 240px; margin-right: 10px; }
  .dm-gs-empty-actions { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
  .dm-gs-empty-action { margin-top: 0; }

  /* El puntero no es un dedo: aquí sí hay hover que aporta. */
  .dm-gs-chip:hover { border-color: var(--c-label-3, rgba(43, 43, 66, .4)); }
  .dm-gs-card { transition: border-color 120ms ease, box-shadow 120ms ease; }
  .dm-gs-card:hover { border-color: var(--c-label-3, rgba(43, 43, 66, .22)); box-shadow: 0 6px 20px rgba(30, 31, 48, .07); }
}

/* En pantallas grandes la tarjeta crece un poco, no hasta donde llegue el
   monitor: un asistente de tres preguntas a 1180 px de ancho no es más cómodo,
   es más difícil de leer. */
@media (min-width: 1280px) {
  .dm-gs-panel { width: min(960px, 100%); }
  .dm-gs-body { padding: 34px 40px; }
}

/* ── La hoja auxiliar, en la web ──────────────────────────────────────────
   En la app «Agregar etiqueta» sube desde abajo; aquí es un diálogo centrado.
   Misma función, misma firma en JavaScript, distinta forma — que es la regla
   de toda esta hoja. */
.dm-gs-web-sheet {
  position: fixed; inset: 0; z-index: 10600;
  display: grid; place-items: center;
  background: rgba(20, 20, 30, .5);
  padding: 24px;
}
.dm-gs-web-sheet-box {
  position: relative;
  width: min(520px, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--c-elevado, #fffefa); border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 24px 60px rgba(20, 20, 35, .28);
  font-family: Inter, system-ui, sans-serif; color: var(--c-label, #2b2b42);
}
.dm-gs-web-sheet-box:focus { outline: none; }
.dm-gs-web-sheet-box h2 { margin: 0 0 6px; font: 400 22px/1.2 Petrona, Georgia, serif; }
.dm-gs-web-sheet-box p { margin: 0 0 18px; font-size: 13px; color: var(--c-label-2, rgba(43, 43, 66, .6)); }
.dm-gs-web-sheet-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--c-separador, rgba(43, 43, 66, .16)); background: transparent;
  font-size: 19px; color: var(--c-label-2, rgba(43, 43, 66, .6)); cursor: pointer;
}

/* La entrada dentro de una página de la web: no flota ni se pega, se coloca
   donde la página la ponga. En la app la monta `app-mode.js` en el inicio y
   este contenedor no llega a existir. */
/* Sin margen superior ni tope de ancho: en /explorar esto ya no va debajo del
   subtítulo, sino en su propia columna del héroe, y el `max-width: 560px`
   dejaba 82 px de columna vacíos a su derecha —medidos a 1440— que hacían
   partir el texto en dos líneas con un «ti.» suelto abajo. La columna ya
   acota; no hacen falta dos topes. */
.dm-gs-web-entry { margin: 0; }
/* En pantallas anchas la columna llega a 882 px (medido a 1920) y una tarjeta
   de una fila estirada hasta ahí deja el texto perdido en medio de su propio
   fondo. Se acota y se pega al borde derecho del héroe, que es donde ya está
   el margen de la página: así el aire queda entre las dos columnas —donde se
   lee como separación— y no dentro de la tarjeta. Por debajo de 720 px de
   columna esto no hace nada. */
.cat-hero .dm-gs-web-entry { max-width: 720px; justify-self: end; width: 100%; }
.dm-gs-web-entry:empty { display: none; }
/* En la app instalada este hueco no se llena: la pestaña Buscar es
   `buscar-app.js`, y `/explorar` esconde su `MAIN.page` entera para poner esa
   pantalla encima. Se oculta el hueco vacío para que no ocupe sitio.

   Aquí había además una regla para el hueco YA MONTADO en App Mode, escrita
   para un montaje que no ocurre —`app-mode.js` no menciona este módulo en
   ninguna línea—. Se quita: CSS que espera algo que nadie hace es una promesa
   que el archivo no puede cumplir. */
html.dm-app-mode .dm-gs-web-entry { display: none; }

/* `hidden` tiene que ganar siempre.
   El bloque de escritorio pone `display:flex` en el pie, y eso pisa el
   atributo `hidden` que JavaScript usa para esconderlo en la pantalla de
   resultados: el botón «Ver resultados» se quedaba flotando sobre los
   resultados que ya estaban ahí. Se ve en cuanto se mira la pantalla, y no lo
   caza ninguna prueba que sólo compruebe que los resultados aparecen. */
.dm-gs-footer[hidden],
.dm-gs [hidden] { display: none !important; }