/* Sugerencias en vivo del buscador (2026-10-14). Ver inc/buscador.php y js/buscador.js.
 *
 * Mismo lenguaje que el panel de búsqueda de Revision: fondo de capa, sombra suave,
 * radio del campo, texto en el color principal y acento para la coincidencia.
 * Todo con variables de Revision. */

.jtb-form { position: relative; }

.jtb-lista {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 0.5rem;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 0.375rem;
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-input-border-radius, 8px);
  background-color: var(--cs-layout-background);
  box-shadow: 0 5px 25px 0 rgba(var(--cs-color-box-shadow-rgb), 0.2);
  text-align: left;
}
.jtb-lista.jtb-abierta { display: block; }

/* Dentro del panel desplegable de la cabecera la lista va en el flujo: el panel
 * recorta (overflow) lo que sobresale, y así empuja hacia abajo las categorías. */
.cs-search .jtb-lista {
  position: static;
  margin-top: 0.5rem;
  max-height: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.jtb-opcion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: calc(var(--cs-input-border-radius, 8px) - 2px);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--cs-color-primary);
  text-decoration: none;
  transition: background-color 0.15s;
}
.jtb-opcion:hover,
.jtb-opcion.jtb-activa,
.jtb-opcion:focus-visible {
  background-color: var(--cs-color-highlight-background);
  outline: none;
}
.jtb-opcion.jtb-activa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background-color: var(--cs-color-accent);
}
.jtb-opcion mark {
  /* Revision da a `mark` relleno y margen: sin esto la palabra marcada queda separada del resto */
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--cs-color-accent);
  font-weight: 700;
}
.jtb-flecha {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--cs-color-secondary);
  opacity: 0;
  transition: opacity 0.15s;
}
.jtb-opcion:hover .jtb-flecha,
.jtb-opcion.jtb-activa .jtb-flecha,
.jtb-opcion:focus-visible .jtb-flecha { opacity: 1; }

/* La última fila: separada y en tono secundario, es la salida a todos los resultados */
.jtb-todos {
  margin-top: 0.25rem;
  border-top: 1px solid var(--cs-color-border);
  border-radius: 0 0 calc(var(--cs-input-border-radius, 8px) - 2px) calc(var(--cs-input-border-radius, 8px) - 2px);
  padding-top: 0.75rem;
  color: var(--cs-color-secondary);
  font-weight: 600;
}
.jtb-mensaje {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.9375rem;
  color: var(--cs-color-secondary);
}

@media (max-width: 575.98px) {
  .jtb-lista { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .jtb-opcion, .jtb-flecha { transition: none; }
}

/* Foco visible en las opciones (el fondo gris solo da 1,12:1) y filas de 44 px
   en móvil. Ajustes del revisor de diseño, 2026-10-14. */
.jtb-opcion:focus-visible,
.jtb-opcion.jtb-activa { outline: 2px solid var(--cs-color-accent, #5955D1); outline-offset: -2px; }
@media (max-width: 575.98px) {
	.jtb-opcion { padding: 0.75rem; }
}