/* Buscador de Monilen: ventana común a la portada, las páginas públicas y el tracker, más la píldora de la cabecera
   pública y el campo grande de la portada. Solo tokens de tokens.css (y los de las páginas públicas cuando existen).
   Animaciones solo de movimiento (nunca desde opacidad 0) y ninguna con «reducir movimiento». */

.search-dlg {
  --s-surface: var(--surface);
  --s-raised: var(--surface-2);
  --s-line: var(--border);
  --s-ink: var(--text);
  --s-ink-2: var(--text-2);
  --s-ink-3: var(--text-3);
}
.pub .search-dlg {
  --s-surface: var(--pub-surface);
  --s-raised: var(--pub-bg-2, var(--surface-2));
  --s-line: var(--pub-line);
  --s-ink: var(--pub-ink);
  --s-ink-2: var(--pub-ink-2, var(--text-2));
  --s-ink-3: var(--pub-ink-3, var(--text-3));
}

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

.search-backdrop {
  position: fixed; inset: 0; z-index: 90; background: var(--backdrop);
  display: grid; justify-items: center; align-items: start; padding: min(12vh, 110px) 16px 16px;
}
.search-dlg {
  width: min(860px, 100%); max-height: min(76vh, 680px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  font-family: var(--font);
  animation: search-pop 180ms var(--ease) both;
}
@keyframes search-pop { from { transform: translateY(8px) scale(.985); } to { transform: none; } }

.search-dlg kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--s-line); border-bottom-width: 2px;
  border-radius: 6px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; text-align: center; color: var(--s-ink-2); background: var(--s-raised);
}

/* Cabecera: lupa, campo y cerrar. */
.search-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--s-line); }
.search-glass { display: grid; color: var(--s-ink-3); }
.search-glass svg { width: 20px; height: 20px; }
.search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--s-ink);
  font: inherit; font-size: 17px; padding: 6px 0;
}
.search-input::placeholder { color: var(--s-ink-3); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close { border: 0; background: none; color: var(--s-ink-2); padding: 4px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 15px; }
.search-close:hover { color: var(--s-ink); }
.search-close:focus-visible, .search-row:focus-visible, .search-chip:focus-visible, .search-link:focus-visible,
.search-open:focus-visible, .search-back:focus-visible, .search-fix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-close-narrow { display: none; }

/* Cuerpo: resultados y vista previa. */
.search-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; }
.search-list { overflow: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.search-group { display: grid; gap: 1px; }
.search-group-t {
  font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--s-ink-3);
  padding: 12px 10px 5px;
}
.search-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 40px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.search-row.is-active { background: var(--accent-soft); }
.search-icon { display: grid; place-items: center; color: var(--s-ink-2); }
.search-icon svg { width: 18px; height: 18px; }
.search-row.is-active .search-icon { color: var(--accent-text); }
.search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; font-size: 14.5px; }
.search-label mark { background: none; color: inherit; font-weight: 750; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.search-hint { font-size: 12.5px; color: var(--s-ink-3); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 8px; }
.search-chip {
  border: 1px solid var(--s-line); background: var(--s-raised); color: var(--s-ink); border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.search-chip:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }

.search-empty { padding: 22px 12px; display: grid; gap: 8px; color: var(--s-ink-2); }
.search-empty-t { color: var(--s-ink); font-size: 15px; }
.search-empty-t strong { overflow-wrap: anywhere; }
.search-empty .search-chips { padding: 4px 0 0; }
.search-fix { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }

.search-preview {
  overflow: auto; border-left: 1px solid var(--s-line); background: var(--s-raised);
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--s-ink-2);
}
.search-preview-g { font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--s-ink-3); }
.search-preview-t { font-size: 17px; line-height: 1.3; color: var(--s-ink); font-weight: 650; }
.search-preview-empty { color: var(--s-ink-3); }
.search-formula { font-family: var(--mono); font-size: 12.5px; color: var(--s-ink); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.search-preview-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 4px; }
.search-link { font-weight: 600; font-size: 13.5px; color: var(--accent-text); }
.search-open {
  border: 0; border-radius: 999px; background: var(--accent); color: #fff; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.search-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; padding: 4px 0; cursor: pointer; }
.search-back svg { width: 18px; height: 18px; }

.search-foot {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid var(--s-line); font-size: 12px; color: var(--s-ink-3);
}
.search-private { display: inline-flex; align-items: center; gap: 6px; }
.search-private svg { width: 13px; height: 13px; }

/* Escritorio estrecho: sin vista previa lateral. */
@media (max-width: 860px) and (min-width: 721px) {
  .search-body { grid-template-columns: minmax(0, 1fr); }
  .search-preview { display: none; }
}

/* Móvil: pantalla completa; la vista previa ocupa la pantalla al elegir una pregunta o un término. */
@media (max-width: 720px) {
  .search-backdrop { padding: 0; align-items: stretch; }
  .search-dlg { width: 100%; max-height: none; height: 100%; height: 100dvh; border-radius: 0; border: 0; animation-name: search-sheet; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes search-sheet { from { transform: translateY(24px); } to { transform: none; } }
  .search-head { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .search-input { font-size: 17px; }
  .search-close-wide { display: none; }
  .search-close-narrow { display: inline; color: var(--accent-text); font-weight: 600; }
  .search-body { grid-template-columns: minmax(0, 1fr); }
  .search-preview { display: none; border-left: 0; }
  .search-dlg.is-preview .search-list { display: none; }
  .search-dlg.is-preview .search-preview { display: flex; }
  .search-row { min-height: 48px; }
  .search-hint { max-width: 38vw; }
  .search-keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .search-dlg, .search-chip { animation: none; transition: none; }
}

/* ---------- Páginas públicas: píldora de la cabecera y campo grande de la portada ---------- */
.pub-search {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 11px; border-radius: 999px;
  border: 1px solid var(--pub-line); background: var(--pub-surface); color: var(--pub-ink-2, var(--text-2));
  font: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--t-fast) var(--ease);
}
.pub-search:hover { border-color: var(--accent); color: var(--pub-ink); }
.pub-search svg { width: 17px; height: 17px; }
.pub-search kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--pub-line); border-radius: 5px; padding: 0 5px; color: var(--pub-ink-2, var(--text-3)); }
@media (max-width: 1160px) { .pub-search .pub-search-t, .pub-search kbd { display: none; } .pub-search { width: 38px; padding: 0; justify-content: center; } }

.find-band { padding-block: 8px 24px; }
.find-box {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; text-align: center;
  padding: 28px 24px; border: 1px solid var(--pub-line); border-radius: var(--r-xl); background: var(--pub-surface);
  box-shadow: 0 18px 50px -34px rgba(20, 20, 40, .35);
}
.find-box h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--pub-ink); }
.find-box p { color: var(--pub-ink-2, var(--text-2)); max-width: 56ch; }
.find-field {
  width: min(640px, 100%); display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px;
  border: 1.5px solid var(--pub-line); border-radius: 999px; background: var(--pub-bg); color: var(--pub-ink-2, var(--text-2));
  font: inherit; font-size: 16.5px; text-align: left; cursor: text;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.find-field:hover { border-color: var(--accent); }
.find-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.find-field svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); }
.find-field span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-field kbd { font-family: var(--mono); font-size: 12px; border: 1px solid var(--pub-line); border-radius: 6px; padding: 1px 6px; color: var(--pub-ink-2, var(--text-3)); }
.find-box .find-note { font-size: 13px; color: var(--pub-ink-3, var(--text-3)); }
.find-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.find-chips button {
  border: 1px solid var(--pub-line); background: transparent; color: var(--pub-ink); border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.find-chips button:hover { border-color: var(--accent); transform: translateY(-1px); }
.find-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .find-box { padding: 22px 16px; }
  .find-field { min-height: 52px; font-size: 16px; }
  .find-field kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .find-field, .find-chips button, .pub-search { transition: none; } }

/* Tracker: «Buscar y ayuda» arriba del menú «Más» del móvil. */
.more-search { grid-column: 1 / -1; width: 100%; border: 1px solid var(--border); background: var(--surface-2); font: inherit; text-align: left; cursor: pointer; }
.more-search:hover { background: var(--surface-3); }

/* Tracker: #/ajustes/<parte> baja hasta la tarjeta sin que la tape la barra superior. */
[id^="ajustes-"] { scroll-margin-top: calc(var(--topbar-h, 64px) + 24px); }
[id^="ajustes-"]:focus { outline: none; }

/* Páginas públicas: al ir a un ancla (desde el buscador o un enlace) la cabecera fija no la tapa. */
.pub [id] { scroll-margin-top: 90px; }